@livingdocs/editable.js 3.0.9 → 3.0.13

package/package.json

@@ -1,49 +1,49 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.0.9",
+  "version": "3.0.13",
   "dependencies": {
-    "@babel/runtime": "^7.13.17",
+    "@babel/runtime": "^7.16.7",
     "bowser": "2.11.0",
     "lodash-es": "^4.17.21",
     "rangy": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.8",
-    "@babel/plugin-transform-runtime": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-react": "^7.13.13",
-    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.12",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
     "babel-loader": "^8.2.3",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.1.1",
-    "css-loader": "^6.4.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.23.2",
+    "chai": "^4.3.6",
+    "css-loader": "^6.5.1",
+    "eslint": "^8.8.0",
+    "eslint-plugin-react": "^7.28.0",
     "font-awesome": "^4.7.0",
-    "gh-pages": "^3.1.0",
-    "karma": "^6.3.6",
+    "gh-pages": "^3.2.3",
+    "karma": "^6.3.13",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "^2.0.3",
-    "karma-firefox-launcher": "^2.1.0",
+    "karma-coverage": "^2.1.0",
+    "karma-firefox-launcher": "^2.1.2",
     "karma-mocha": "^2.0.1",
     "karma-safari-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
-    "mocha": "^9.1.3",
+    "mocha": "^9.2.0",
     "normalize.css": "^8.0.1",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.26.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-transition-group": "^4.4.1",
+    "react-transition-group": "^4.4.2",
     "rimraf": "^3.0.2",
-    "sinon": "^10.0.0",
-    "style-loader": "^2.0.0",
+    "sinon": "^13.0.0",
+    "style-loader": "^3.3.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.60.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.3.1"
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.3"
   },
   "engines": {
     "node": ">=12"
@@ -83,11 +83,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "a8c9c2c907cca213099b512c9b0c4321bc4e2b9a",
-    "build": "408",
+    "commit": "4447c61e9237a173cb2513cb00e3d620a7c0e26c",
+    "build": "429",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2021-12-28T11:06:57.120Z"
+    "date": "2022-02-01T12:17:05.512Z"
   }
 }

package/src/range-save-restore.js

@@ -11,17 +11,37 @@ 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.commonAncestorContainer
+  if (parent.nodeType === 3) return false // if we are on the text node it can't be a parent
+  const possibleChild = range.startContainer.parentElement
+  return isChildOf(parent, possibleChild)
+}
+
+function endContainerIsChild (range) {
+  const parent = range.commonAncestorContainer
+  if (parent.nodeType === 3) return false // if we are on the text node it can't be a parent
+  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 +52,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
 }