¿Cómo inyectar un nuevo componente/elemento de reacción en SlateJS Editor DOM?
Quiero inyectar un nuevo elemento dentro del DOM del editor SlateJS, no arriba o abajo.
La mayoría de los ejemplos de SlateJS transformarían nodos, pero no permite la inyección directa en el DOM de SlateJS. Eso está dentro del contexto del editor.
P.EJ
SlateJS Typing INJECTED REACT COMPONENT SlateJS Typing SlateJS Typing <div slatejs editor> <div child div> // Want to insert a react component here <div child div> </div>En este momento, puede agregar un nuevo componente de reacción arriba o debajo del editor SlateJS, pero no dentro.
<Slate editor={editor} value={value} onChange={value => setValue(value)}> // <Tags /> Added component on top of SlateJS Editor <Editable placeholder="Enter some rich text…" spellCheck autoFocus onKeyDown={event => { switch (event.key) { case '/': { event.preventDefault() console.log('/ Command') // How to DOM inject into the current SlateJS component? ReactDOM.render(<Tags />, ...) } } }} /> // <Tags /> Added component UNDER SlateJS Editor </Slate>,Mi solución actual es intentar inyectar a través de ReactDOM, pero tengo problemas para obtener el componente SlateJS real, ya que no puedo configurar la ID, lo que dificulta la consulta de documento.
¿Cómo podría inyectar un nuevo componente de reacción dentro del dom SlateJS?
Al final, inyecté el componente React en el div H1 en Elements. Aunque, este método tiene errores.
Es decir, mantenga todo igual en el ejemplo de texto enriquecido excepto los elementos, modificados a continuación.
Línea de ejemplo de texto enriquecido
const Element = ({ attributes, children, element }) => { const style = { textAlign: element.align } switch (element.type) { case 'heading-one': return ( <h1 style={style} {...attributes}> {children} // Just inserted the react component in the h1 div // Easiest way, but causes a bunch of slate errors when trying // to click the react component line <REACT_COMPONENT /> </h1> ) default: return ( <p style={style} {...attributes}> {children} </p> ) } }