@livingdocs/editable.js 3.1.2 → 3.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "bowser": "2.11.0",
@@ -83,11 +83,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "fd0647cdc6be93eb00f3c1f749b70fc7e6a42a4d",
-    "build": "505",
+    "commit": "8e2e6d9f59d4c8c9eddcf611b70be10faccb60ca",
+    "build": "556",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2022-06-14T12:48:39.898Z"
+    "date": "2022-12-13T12:35:19.990Z"
   }
 }

package/src/clipboard.js

@@ -29,7 +29,11 @@ export function paste (element, cursor, clipboardContent) {
   const document = element.ownerDocument
   element.setAttribute(config.pastingAttribute, true)
 
-  if (cursor.isSelection) cursor = cursor.deleteContent()
+  if (cursor.isSelection) {
+    cursor = cursor.deleteExactSurroundingTags()
+      .deleteContainedTags()
+      .deleteContent()
+  }
 
   // Create a placeholder to help parse HTML
   const pasteHolder = document.createElement('div')

package/src/content.js

@@ -244,6 +244,12 @@ export function getInnerTags (range, filterFunc) {
   return range.getNodes([nodeType.elementNode], filterFunc)
 }
 
+// Get all tags whose text is completely within the current selection.
+export function getContainedTags (range, filterFunc) {
+  return range.getNodes([nodeType.elementNode], filterFunc)
+    .filter(elem => range.containsNodeText(elem))
+}
+
 // Transform an array of elements into an array
 // of tagnames in uppercase
 //

package/src/create-default-behavior.js

@@ -35,6 +35,13 @@ export default function createDefaultBehavior (editable) {
     },
 
     blur (element) {
+      // Note: there is a special case when the tab is changed where
+      // we can get a blur event even if the cursor is still in the editable.
+      // This blur would cause us to loose the cursor position (cause of cleanInternals()).
+      // To prevent this we check if the activeElement is still the editable.
+      // (Note: document.getSelection() did not work reliably in this case.)
+      if (document.activeElement === element) return
+
       content.cleanInternals(element)
     },
 

package/src/cursor.js

@@ -69,6 +69,11 @@ export default class Cursor {
     return content.getInnerTags(this.range, filterFunc)
   }
 
+  // Get all tags whose text is completely within the current selection.
+  getContainedTags (filterFunc) {
+    return content.getContainedTags(this.range, filterFunc)
+  }
+
   // Get all tags that surround the current selection.
   getAncestorTags (filterFunc) {
     return content.getAncestorTags(this.host, this.range, filterFunc)

package/src/selection.js

@@ -245,8 +245,31 @@ export default class Selection extends Cursor {
     this.setSelection()
   }
 
-  // Delete the contents inside the range. After that the selection will be a
-  // cursor.
+  // Delete the farest ancestor that is an exact selection
+  //
+  // @return Selection instance
+  deleteExactSurroundingTags () {
+    const ancestorTags = this.getAncestorTags().reverse()
+    for (const ancestorTag of ancestorTags) {
+      if (this.isExactSelection(ancestorTag)) {
+        ancestorTag.remove()
+        break
+      }
+    }
+    return new Selection(this.host, this.range)
+  }
+
+  // Delete all the tags whose text is completely within the current selection.
+  //
+  // @return Selection instance
+  deleteContainedTags () {
+    const containedTags = this.getContainedTags()
+    containedTags.forEach(containedTag => containedTag.remove())
+    return new Selection(this.host, this.range)
+  }
+
+  // Delete the contents inside the range and exact surrounding markups.
+  // After that the selection will be a cursor.
   //
   // @return Cursor instance
   deleteContent () {