How to refresh/re-render after new node added?

Optimized TextEditor.vue file:

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

      let anchorNode = {}

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

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

        anchorNode = childNode
      })

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

      spanNode.style.fontFamily = 'Courier New'
      spanNode.style.color = 'red'
      spanNode.innerText = rte.selection().getRangeAt(0).toString()

      rte.insertHTML(spanNode.outerHTML)

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

      // const range = new Range()
      // range.setStart(anchorNode, this.selection.rangeStart)
      // range.setEnd(anchorNode, this.selection.rangeEnd)
      // range.surroundContents(spanNode)
      // rte.selection().removeAllRanges()
      // rte.selection().addRange(range)
    }
// ....

But the problem persist:

• ✔️ span node replaces the previous content of selection, with font-family and color styles.
• ❌ span node isn't recognized by GrapesJS, because there isn't GrapesJS auto-generated styles ID and data-gjs-type='text' attribute.
• ❌ getHTML and getJSON to save modifications doesn't include span node styles.

To resolve manually this problem:

1. After span node is added with its styles, double-click on the current selected GrapesJS component.
2. Click on the iframe canvas body.
3. Double-click on the previously selected GrapesJS component.
4. span node is officially added to GrapesJS, with an auto-generated styles ID and data-gjs-type='text' attribute.

ℹ️ Don't works directly with HTML, works only with JSON.

Component = JSON node (html element + GrapesJS data)

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

  for (const component of components) {
    const content = component.get('content')

    if (content !== this.selection.anchorText) {
      continue
    }

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

    selectedComponent.append({
      type: 'textnode',
      content: prevSibling
    }, {
      at: componentId
    })

    selectedComponent.append({
      type: 'textnode',
      content: nextSibling
    }, {
      at: componentId + 2
    })

    component.replaceWith({
      tagName: tagName,
      type: 'text',
      attributes: {
        style: inlineStyles
      },
      components: [{
        type: 'textnode',
        content: selectedText
      }]
    })

    console.log('addStylesToText()', {
      selectedComponent,
      component,
      selectedText,
      prevSibling,
      nextSibling
    })

    break
  }
}

Sources:

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

Thanks for reporting this, @bgrand-ch.

Great question about How to refresh/re-render after new node added?. The recommended approach with ProseMirror is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!