@livingdocs/editable.js 3.0.9 → 3.0.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "dependencies": {
     "@babel/runtime": "^7.13.17",
     "bowser": "2.11.0",
@@ -83,11 +83,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "a8c9c2c907cca213099b512c9b0c4321bc4e2b9a",
-    "build": "408",
+    "commit": "ba2101da4792e70d5ee82e2d4fb0fb2e3879002a",
+    "build": "412",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2021-12-28T11:06:57.120Z"
+    "date": "2021-12-29T08:41:38.566Z"
   }
 }

package/src/range-save-restore.js

@@ -11,17 +11,35 @@ let boundaryMarkerId = 0
 // (U+FEFF) zero width no-break space
 const markerTextChar = '\ufeff'
 
+function isChildOf (parent, possibleChild) {
+  for (let i = 0; i < parent.children.length; i++) {
+    if (parent.children[i] === possibleChild) return true
+  }
+  return false
+}
+
+function startContainerIsChild (range) {
+  const parent = range.endContainer.parentElement
+  const possibleChild = range.startContainer.parentElement
+  return isChildOf(parent, possibleChild)
+}
+
+function endContainerIsChild (range) {
+  const parent = range.startContainer.parentElement
+  const possibleChild = range.endContainer.parentElement
+  return isChildOf(parent, possibleChild)
+}
+
 export function insertRangeBoundaryMarker (range, atStart) {
   const container = range.commonAncestorContainer
+  const directlyBeforeFormatTag = startContainerIsChild(range) && atStart
+  const directlyAfterFormatTag = endContainerIsChild(range) && !atStart
+
   // If ownerDocument is null the commonAncestorContainer is window.document
   if (container.ownerDocument === null || container.ownerDocument === undefined) {
     error('Cannot save range: range is emtpy')
   }
 
-  // Clone the Range and collapse to the appropriate boundary point
-  const boundaryRange = range.cloneRange()
-  boundaryRange.collapse(atStart)
-
   // Create the marker element containing a single
   // invisible character using DOM methods and insert it
   const doc = container.ownerDocument.defaultView.document
@@ -32,7 +50,21 @@ export function insertRangeBoundaryMarker (range, atStart) {
   markerEl.style.display = 'none'
   markerEl.appendChild(doc.createTextNode(markerTextChar))
 
-  boundaryRange.insertNode(markerEl)
+  // if another tag is trailing exactly at the start or end, prepend
+  // or append the marker element directly on the parent in order to prevent breaking HTML markup.
+  if (directlyBeforeFormatTag) {
+    range.endContainer.parentElement.insertBefore(markerEl, range.startContainer.parentElement)
+  } else if (directlyAfterFormatTag) {
+    // emulating insertAfter with nextSibling
+    range.startContainer.parentElement.insertBefore(markerEl,
+      range.endContainer.parentElement.nextSibling)
+  } else {
+    // Clone the Range and collapse to the appropriate boundary point
+    const boundaryRange = range.cloneRange()
+    boundaryRange.collapse(atStart)
+    boundaryRange.insertNode(markerEl)
+  }
+
   return markerEl
 }