@livingdocs/editable.js 3.0.16 → 3.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.0.16",
+  "version": "3.1.2",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "bowser": "2.11.0",
@@ -83,11 +83,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "85752c5c2a4de6108413bc50b0433086ce0d0435",
-    "build": "469",
+    "commit": "fd0647cdc6be93eb00f3c1f749b70fc7e6a42a4d",
+    "build": "505",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2022-03-15T10:07:49.382Z"
+    "date": "2022-06-14T12:48:39.898Z"
   }
 }

package/src/config.js

@@ -10,6 +10,7 @@ export default {
   editableClass: 'js-editable',
   editableDisabledClass: 'js-editable-disabled',
   pastingAttribute: 'data-editable-is-pasting',
+  trimLeadingAndTrailingWhitespaces: true,
   boldMarkup: {
     type: 'tag',
     name: 'strong',

package/src/content.js

@@ -4,6 +4,7 @@ import * as rangeSaveRestore from './range-save-restore'
 import * as parser from './parser'
 import * as string from './util/string'
 import {createElement} from './util/dom'
+import config from './config'
 
 function restoreRange (host, range, func) {
   range = rangeSaveRestore.save(range)
@@ -161,7 +162,9 @@ function removeWhitespaces (node, type, firstCall = true) {
   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+/, '')
+  if (config.trimLeadingAndTrailingWhitespaces) {
+    elem.textContent = elem.textContent.replace(type.startsWith('last') ? / +$/ : /^ +/, '')
+  }
 }
 
 // Remove elements that were inserted for internal or user interface purposes

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/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/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)
   }${