Estoy recreando el chat de Discord. Estoy usando SlateJS para lograr esto.

Tengo muchos editores que se muestran en la página y tengo un botón Emoji. Me gustaría poder editar externamente el valor de los editores , de modo que cuando haga clic en un emoji, el nombre se inserte como texto.

Intenté usar useSlate para obtener el editor actual, pero recibo un error que advierte que no puedo usar el enlace fuera del contexto del editor.

He intentado ref el componente Editable.

Y, por último, también intenté capturar un estado de cadena modificado externamente con un useEffect pero esto tampoco funciona, ya que cambia el valor la primera vez pero luego ya no funciona (y "Elemento principal modificado" se muestra en la consola).

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

He preguntado en Slate's Slack pero no he recibido ninguna respuesta.

¿Alguien tiene una idea de cómo lograr esto?

¡Gracias por adelantado!