The React RichTextEditor kit doesn't update with a value update [NUXE-961]

[haydenrou]

Describe the bug
When passing a value prop to the RichTextEditor like so:

<RichTextEditor value={someStateValue} />

it will only initialize on this value, but will not update if you change that value. When typing in the field, it is fine since it directly changes the <trix-editor, but if you have an external factor attempting to change the state value elsewhere and passing it down, it will only affect the adjacent <input and not the <trix-editor.

I found this when attempting to update the content of a trix editor after a PubSub update. The content of the trix editor was not updated when the value prop changed, we had to manually call element.editor.loadHTML(someStateValue) as well as the state change we needed.

To Reproduce
To reproduce this I changed one of the docs to pass value as a state, and had an external button which changed this state onClick. When this state was changed, the trix editor did not change.

Expected behavior
When the value is changed I expect the trix-editors content to reflect that change.

Additional context
I had a play around with this locally and one way I managed to "fix" (not thoroughly tested) this was by adding the following
useEffect:

useEffect(() => {
  trixRef.current.editor.loadHTML(value)
}, [value])

Just for clarification, this works perfectly fine when typing into the field, and the onChange works. The problem is when that value is changed externally.

Please let me know if I'm misunderstanding the kits usecase here. My understanding is that I shouldn't have to do this manually from outside the kit.

[samanthar8]

This issue is now tracked in Runway as NUXE-961.