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