Fork me on GitHub
#reagent
<
2020-11-15
>
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: https://github.com/reagent-project/reagent/issues/220. Any idea how to solve this?

p-himik00:11:41

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?

p-himik01:11:58

reagent.impl.template/reagent-input

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 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.

Pavel Klavík15:11:08

I have updated the issue https://github.com/reagent-project/reagent/issues/220. Also is there some way how to run some function immediately after the next frame was rerendered? So I could set the selection there.

GGfpc16:11:27

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

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

p-himik16:11:18

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

GGfpc18:11:07

Ok another question, how would I pass the function in the label formatter here (line 27): https://jsfiddle.net/alidingling/32zbsx71/1/ I tried an anonymous function but it didn't work

p-himik19:11:13

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.

GGfpc19:11:54

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]
     ]]

p-himik19:11:31

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

GGfpc20:11:15

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

GGfpc18:11:07

Ok another question, how would I pass the function in the label formatter here (line 27): https://jsfiddle.net/alidingling/32zbsx71/1/ I tried an anonymous function but it didn't work