Wrap first child of 'bes-online-editor' in a div if it's not a block element

online-editor.js

@@ -29,6 +29,24 @@ class BesEditor {
   // TODO: add support for textarea elements
   // Recursively grammar-proofs one node.
   async proof(el) {
+    // If first child is not a block element, add a dummy <div>...</div> around it.
+    // This is solution is still not fully tested and might need some improvements.
+    if (el.classList?.contains('bes-online-editor')) {
+      const firstChild = el.firstChild
+      if (
+        firstChild &&
+        (firstChild.nodeType === Node.TEXT_NODE ||
+          !BesEditor.isBlockElement(firstChild))
+      ) {
+        const divEl = document.createElement('div')
+        if (firstChild.nodeType === Node.TEXT_NODE) {
+          divEl.textContent = firstChild.textContent
+        } else divEl.appendChild(firstChild.cloneNode(true))
+        el.insertBefore(divEl, firstChild)
+        el.removeChild(firstChild)
+      }
+    }
+
     switch (el.nodeType) {
       case Node.TEXT_NODE:
         return [{ text: el.textContent, el: el, markup: false }]
@@ -115,7 +133,6 @@ class BesEditor {
                     match: match
                   })
                 })
-
                 this.markProofed(el, matches)
               })
               .catch(error => {