A minimalistic ClojureScript interface to React.js

Hi, I am trying to create my own rich text editor using ContentEditable in Reagent. And I have found that when the text is changed, the cursor position is reset to offset 0. Likely it was already reported here: Any idea how to solve this?

p-himik 2020-11-15T00:58:41.211200Z

Take a look at how Reagent explicitly deals with :input and :textarea - perhaps the same technique can be used for :content-editable.


Any idea where to look for this in the code?

p-himik 2020-11-15T01:00:58.211600Z



What happens exactly: State of my component is updated and I know it is updated. I do rerendering and then in component-did-update, I am setting new position of cursor correctly. Afterwards, I will get onSelect event setting the offset to 0.


Reading now, seems related. Would be great to support contentEditable as well.


I don't understand Reagent enought to know what is going on. I was reading, where input component is created with component-did-update function specified. This function deals with changing of DOM value and setting new cursor position.


Not sure what is happening here exactly:

GGfpc 2020-11-15T16:10:27.214700Z

Hi! Does anyone know how to convert this JSX to hiccup?

<YAxis type="number" domain={['dataMin', 'dataMax']} />
Particularly the value of the domain

p-himik 2020-11-15T16:11:18.214800Z

[:> YAxis {:type "number", :domain #js ["dataMin", "dataMax"]}] should work.

GGfpc 2020-11-15T17:00:22.215Z



If I use r/after-render inside component-did-update, is it guaranteed that it will occur after this component is rerendered, or could it happen before it is rerendered (due to something else in the queue rendered before?)

GGfpc 2020-11-15T18:58:47.216600Z


p-himik 2020-11-15T19:14:13.217500Z

It should work as is - CLJS functions are JS functions. I have no idea what you might've done wrong without seeing the actual code.

GGfpc 2020-11-15T19:49:54.217700Z

This is what I attempted

[PieChart {:width 800 :height 300}
     [Pie {:data    (get-in data [:book-stats :bottom-5-longest]) :dataKey "num_pages"
           :nameKey "title" :outerRadius 100 :innerRadius 20 :fill "#19A974"}]
     [Legend {:formatter (fn [value entry] 
                           [:span {:style {:color "blue"}} "ABC" ])}]

p-himik 2020-11-15T19:50:31.217900Z

The :formatter function has to return a React element - not a Hiccup. Wrap its result in reagent.core/as-element.

GGfpc 2020-11-15T20:05:15.218100Z

Thanks! That did the trick. Is there documentation for this react / reagent interop?