Fork me on GitHub
Pavel Klavík00:11:29

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?


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

Pavel Klavík01:11:01

Any idea where to look for this in the code?



Pavel Klavík01:11:05

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.

Pavel Klavík01:11:47

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

Pavel Klavík03:11:55

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.

Pavel Klavík15:11:08

I have updated the issue Also is there some way how to run some function immediately after the next frame was rerendered? So I could set the selection there.


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

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


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


Ok another question, how would I pass the function in the label formatter here (line 27): I tried an anonymous function but it didn't work


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.


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" ])}]


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


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

Pavel Klavík18:11:19

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?)