@livingdocs/editable.js 3.1.0 → 3.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.1.0",
+  "version": "3.1.3",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "bowser": "2.11.0",
@@ -83,11 +83,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "2e7b8ed5efd8fb418a159ded67be45ddf9941999",
-    "build": "482",
+    "commit": "e1b2285d9dc4dd070a0151dbbb4af3f14b97e39b",
+    "build": "515",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2022-03-22T20:40:52.111Z"
+    "date": "2022-08-09T11:28:27.271Z"
   }
 }

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/core.js

@@ -400,7 +400,7 @@ export class Editable {
       )
       return -1
     }
-    return highlightSupport.highlightRange(editableHost, highlightId, textRange.start, textRange.end, raiseEvents ? this.dispatcher : undefined, type)
+    return highlightSupport.highlightRange(editableHost, text, highlightId, textRange.start, textRange.end, raiseEvents ? this.dispatcher : undefined, type)
   }
 
   /**

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/dispatcher.js

@@ -136,12 +136,11 @@ export default class Dispatcher {
         const {blocks, cursor} = clipboard.paste(block, selection, clipboardContent)
         if (blocks.length) {
           if (endsWithSingleSpace(evt.target.innerText)) {
-            block.innerHTML = replaceLast(block.innerHTML, ' ', ' ')
-            this.notify('paste', block, blocks, this.editable.createCursorAtEnd(block))
-          } else {
-            this.notify('paste', block, blocks, cursor)
+            cursor.retainVisibleSelection(() => {
+              block.innerHTML = replaceLast(block.innerHTML, ' ', ' ')
+            })
           }
-
+          this.notify('paste', block, blocks, cursor)
           // The input event does not fire when we process the content manually
           // and insert it via script
           this.notify('change', block)

package/src/highlight-support.js

@@ -12,7 +12,6 @@ const highlightSupport = {
 
   highlightText (editableHost, text, highlightId, type) {
     if (this.hasHighlight(editableHost, highlightId)) return
-
     const blockText = highlightText.extractText(editableHost)
 
     const marker = `<span class="highlight-${type}"></span>`
@@ -28,12 +27,23 @@ const highlightSupport = {
     }
   },
 
-  highlightRange (editableHost, highlightId, startIndex, endIndex, dispatcher, type = 'comment') {
+
+  // This function was changed to track matches when text is added to the start of a component, but multiple white spaces break it in a strict sense
+  // The function works in the editor and in browsers, but tests with multiple white spaces will fail.
+  // Browsers change the white spaces to &nbsp and the function works, and the tests in highlight.spec.js have been updated to represent this.
+
+  highlightRange (editableHost, text, highlightId, startIndex, endIndex, dispatcher, type = 'comment') {
     if (this.hasHighlight(editableHost, highlightId)) {
       this.removeHighlight(editableHost, highlightId)
     }
+    const firstMarker = `<span class="highlight-${type}"></span>`
+    const markerNode = highlightSupport.createMarkerNode(firstMarker, type, this.win)
+    const textSearch = new TextHighlighting(markerNode, 'text')
+    const blockText = highlightText.extractText(editableHost)
+    const matchesArray = textSearch.findMatches(blockText, [text])
+    const {actualStartIndex, actualEndIndex} = this.getIndex(matchesArray, startIndex, endIndex)
     const range = rangy.createRange()
-    range.selectCharacters(editableHost, startIndex, endIndex)
+    range.selectCharacters(editableHost, actualStartIndex, actualEndIndex)
 
     if (!isInHost(range.commonAncestorContainer, editableHost)) {
       return -1
@@ -52,7 +62,7 @@ const highlightSupport = {
     if (dispatcher) {
       dispatcher.notify('change', editableHost)
     }
-    return startIndex
+    return actualStartIndex
   },
 
   updateHighlight (editableHost, highlightId, addCssClass, removeCssClass) {
@@ -136,6 +146,18 @@ const highlightSupport = {
     marker.setAttribute('data-editable', 'ui-unwrap')
     marker.setAttribute('data-highlight', highlightType)
     return marker
+  },
+
+  // This function checks to see if text has been added to the component before the comment
+  // If it has, the start index is updated, otherwise it remains the same
+  getIndex (matchesArray, startIndex, endIndex) {
+    const newStartIndex = matchesArray.find((match) => {
+      return match.startIndex >= startIndex // checks if the startIndex has increased
+    })
+    const actualStartIndex = newStartIndex ? newStartIndex.startIndex : startIndex
+    const actualEndIndex = actualStartIndex ? (actualStartIndex + (endIndex - startIndex)) : endIndex
+
+    return {actualStartIndex, actualEndIndex}
   }
 
 }

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 () {

package/src/util/string.js

@@ -67,6 +67,7 @@ export function replaceLast (text, searchValue, replaceValue) {
   text = `${text}`
   if (!searchValue || replaceValue == null) return text
   const lastOccurrenceIndex = text.lastIndexOf(searchValue)
+  if (lastOccurrenceIndex === -1) return text
   return `${
     text.slice(0, lastOccurrenceIndex)
   }${