How to externally edit SlateJS editor values

Question

I'm recreating Discord chat. I'm using SlateJS to achieve this.

I have many editors displayed on the page, and I have an Emoji Button. I'd like to be able to externally edit the value of the editors, so when a click on an emoji, the name of it is inserted as a text.

I've tried using useSlate to get the current editor but I'm receiving an error which warns that I can't use the hook outside the context of the editor.

I've tried to ref the Editable component.

And lastly, I've also tried catching an externally changed string state with an useEffect but this doesn't work either, since it changes the value the first time but then doesn't work anymore (and "Modified main element" is displayed in the console).

  useEffect(() => {
    if(editValue){
      Transforms.delete(editor, {
        at: {
          anchor: SlateEditor.start(editor, []),
          focus: SlateEditor.end(editor, []),
        },
      });
      editor.insertFragment(initialTextFunc(editValue));
    }
  }, [editValue, editor]);

...

const initialTextFunc: (initialText: string) => Descendant[] = (initialText: string) => {
  return [{
    type: 'paragraph',
    children: [
      {
        text: initialText,
      },
    ],
  }]
}

I've asked in the Slate's slack but haven't receive any response.

Does anyone have a clue of how to achieve this?

Thanks in advance!

How to externally edit SlateJS editor values

0 Answers0