Insert HTML Code to an index, text is not editable

[costerutilo]

To insert HTML into a specific position I use a blots/embed:

const Embed = Quill.import('blots/embed')
    class TextbausteinEmbed extends Embed {
      static create(value) {
        let node = super.create()
        node.innerHTML = value
        node.setAttribute('contenteditable', true)
        return node
      }
    }

    TextbausteinEmbed.blotName  = 'textbausteinEmbed'
    TextbausteinEmbed.tagName   = 'span'
    TextbausteinEmbed.className = 'textbaustein'

    Quill.register(TextbausteinEmbed)

Now I use it with insertEmbed to insert my HTML to the cursur position:

quill.focus()
const caretPosition = quill.getSelection(true)
quill.insertEmbed(caretPosition.index, 'textbausteinEmbed', daten)

But the inserted text is not editable. It creates the quill editor code:

<span class="textbaustein" contenteditable="true"><span contenteditable="false"> MY HTML </span></span>

Now there a 2 span, the first with contenteditable true and the second with false. What I'm doing wrong?

Thank you, Christian

[devang-devineglobe]

i am facing the same issue