Clojurians Log v2

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: https://github.com/reagent-project/reagent/issues/220. 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.

Any idea where to look for this in the code?

reagent.impl.template/reagent-input

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 https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/input.cljs, 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: https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L210

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

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

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

thanks!

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

.

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

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?

https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md