@livingdocs/editable.js 3.0.7 → 3.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.0.7",
+  "version": "3.0.11",
   "dependencies": {
     "@babel/runtime": "^7.13.17",
     "bowser": "2.11.0",
@@ -83,11 +83,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "71d6d7f7aec6d75122c779631b3873f6f8ebb816",
-    "build": "384",
+    "commit": "d8207571aa6ea4a4bfcbd7f5755a95c907df53ef",
+    "build": "416",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2021-11-17T10:32:17.555Z"
+    "date": "2021-12-29T16:06:04.948Z"
   }
 }

package/src/content.js

@@ -29,6 +29,12 @@ export function tidyHtml (element) {
 export function normalizeTags (element) {
   const fragment = document.createDocumentFragment()
 
+  // Remove line breaks at the beginning of a content block
+  removeWhitespaces(element, 'firstChild')
+
+  // Remove line breaks at the end of a content block
+  removeWhitespaces(element, 'lastChild')
+
   for (const node of element.childNodes) {
     // skip empty tags, so they'll get removed
     if (node.nodeName !== 'BR' && !node.textContent) continue
@@ -136,7 +142,7 @@ export function cloneRangeContents (range) {
   return fragment
 }
 
-function removeWhitespaces (node, type) {
+function removeWhitespaces (node, type, firstCall = true) {
   let elem
   while ((elem = node[type])) {
     if (elem.nodeType === nodeType.textNode) {
@@ -145,10 +151,17 @@ function removeWhitespaces (node, type) {
     } else if (elem.nodeName === 'BR') {
       elem.remove()
     } else {
-      if (elem[type]) removeWhitespaces(elem, type)
+      if (elem[type]) removeWhitespaces(elem, type, false)
       break
     }
   }
+
+  if (!firstCall) return
+  elem = node[type]
+  if (elem?.nodeType !== nodeType.textNode) return
+  // Remove whitespaces at the end or start of a block with content
+  //   e.g. '  Hello world' > 'Hello World'
+  elem.textContent = elem.textContent.replace(type.startsWith('last') ? /\s+$/ : /^\s+/, '')
 }
 
 // Remove elements that were inserted for internal or user interface purposes

package/src/highlight-support.js

@@ -117,7 +117,8 @@ const highlightSupport = {
     return {
       start: textRange.start,
       end: textRange.end,
-      text: range.text()
+      text: range.text(),
+      nativeRange: range.nativeRange
     }
   },
 

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
 }