¿Cómo actualizar/volver a renderizar después de añadir un nuevo nodo?

Archivo optimizado 'TextEditor.vue':

'''js // ... onFontValidate () { const { rte } = this.getRteData() const spanNode = document.createElement('span')

sea anchorNode = {}

this.selection.childNodes.forEach(childNode => { console.log({ childNode })

if (childNode.textContent !== this.selection.anchorText) { Regreso }

AnchorNode = childNode })

rte.selection().setBaseAndExtent( AnchorNode, this.selection.rangeStart, AnchorNode, this.selection.rangeEnd )

spanNode.style.fontFamily = 'Mensajero Nuevo' spanNode.estilo.color = 'rojo' spanNode.innerText = rte.selection().getRangeAt(0).toString()

rte.insertHTML(spanNode.outerHTML)

console.log('onFontValidate()', { rte, AnchorNode, spanNode })

rango const = nuevo rango() rango.setStart(anchorNode, esto.selección.rangoInicio) rango.finSet(NoAncla, esto.selección.finRango) rango.surroundContents(spanNode) rte.selection().removeAllRanges() rte.selection().addRange(rango) } // ....

Pero el problema persiste:
- ✔️ El nodo 'span' reemplaza el contenido anterior de la selección por estilos 'font-family' y 'color'.
- ❌ el nodo 'span' no es reconocido por GrapesJS, porque no existe el ID de estilos generados automáticamente de GrapesJS ni el atributo 'data-gjs-type='text''.
- ❌ 'getHTML' y 'getJSON' para guardar modificaciones no incluyen el nodo 'span' __styles__.

Para resolver este problema manualmente:
1. Después de añadir el nodo 'span' con sus estilos, haz doble clic en el componente GrapesJS seleccionado actualmente.
2. Haz clic en el cuerpo del 'lienzo' del iframe.
3. Haz doble clic en el componente GrapesJS seleccionado previamente.
4. El nodo 'span' se añade oficialmente a GrapesJS, con un ID de estilos auto-generado y el atributo 'data-gjs-type='text''.

i️ No funciona directamente con HTML, solo funciona con JSON.

Component = nodo JSON (elemento html + GrapesJS data)

'''js addStylesToText (styles, tagName = 'span') { const inlineStyles = styles.map(style => style.join(':')).join(';') + ';' const selectedComponent = this.editor.getSelected() const components = selectedComponent.components().models

para (componente const de componentes) { const content = component.get('content')

if (contenido !== this.selection.anchorText) { continúa }

const componentId = component.index() const selectedText = content.substr( this.selection.rangeStart, this.selection.rangeEnd - this.selection.rangeStart ) const [prevHermano, siguienteHermana] = content.split(selectedText)

selectedComponent.append({ Tipo: 'textnode', contenido: prevHermano }, { at: componentId })

selectedComponent.append({ Tipo: 'textnode', contenido: siguienteHermano }, { at: componentId + 2 })

component.replaceWith({ etiquetaNombre: etiquetaNombre, Tipo: 'texto', atributos: { estilo: en línea Estilos }, componentes: [{ Tipo: 'textnode', contenido: selectedText }] })

console.log('addStylesToText()', { selectedComponent, componente, selectedText, Hermano prev, siguienteHermano })

Pausa } }

Fuentes:
- https://grapesjs.com/docs/modules/Components.html
- https://grapesjs.com/docs/api/component.html

Gracias por informar de esto, @bgrand-ch.

Buena pregunta sobre ¿Cómo actualizar/volver a renderizar después de añadir un nuevo nodo?. El enfoque recomendado con ProseMirror es usar la API orientada a eventos.

Empieza aquí:

1. Consulta la documentación de GrapesJS de tu módulo específico
2. Busca el método del oyente de eventos 'on()'
3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));

**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!