Правильный способ вставки HTML в contenteditable div

Question

У меня есть собственный текстовый редактор, и я хочу дать пользователям возможность вставлять математические формулы. Я пишу в полимере 2.0 и использую этот элемент для отображения формулы LaTex. Я старался document.execCommand('insertHTML', false, '<math-tex>\int_a^b</math-tex>'); и это работает, но он добавляет HTML в "новой строке". Потом я попробовал

 const pNodes = this.shadowRoot.querySelectorAll("p")
    const lastP = pNodes[pNodes.length - 1]

    let span = document.createElement("span")
    span.innerHTML = "<math-tex>_a^b</math-tex>"

    lastP.appendChild(span)

Он вставляет формулу, но не может переместить курсор за пределы вставленной формулы. Это просто придерживается последнего текста и не двигаться дальше. Чтобы было ясно, я хочу повторить поведение встроенных формул редактора quill