@livingdocs/editable.js 3.0.15 → 3.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.0.15",
+  "version": "3.1.1",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "bowser": "2.11.0",
@@ -83,11 +83,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "cfb72eb34899004520ea0b1d0bd7bb9434681502",
-    "build": "454",
+    "commit": "9957094d8242121b94e2584b57ba04cd1c7067ed",
+    "build": "495",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2022-02-23T12:28:23.761Z"
+    "date": "2022-05-17T13:22:55.296Z"
   }
 }

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

@@ -5,6 +5,7 @@ import SelectionWatcher from './selection-watcher'
 import config from './config'
 import Keyboard from './keyboard'
 import {closest} from './util/dom'
+import {replaceLast, endsWithSingleSpace} from './util/string'
 
 // This will be set to true once we detect the input event is working.
 // Input event description on MDN:
@@ -134,7 +135,12 @@ export default class Dispatcher {
 
         const {blocks, cursor} = clipboard.paste(block, selection, clipboardContent)
         if (blocks.length) {
-          this.notify('paste', block, blocks, cursor)
+          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)
+          }
 
           // The input event does not fire when we process the content manually
           // and insert it via script

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

@@ -61,3 +61,21 @@ export function browserEscapeHtml (str) {
   div.appendChild(document.createTextNode(str))
   return div.innerHTML
 }
+
+export function replaceLast (text, searchValue, replaceValue) {
+  if (!text) return ''
+  text = `${text}`
+  if (!searchValue || replaceValue == null) return text
+  const lastOccurrenceIndex = text.lastIndexOf(searchValue)
+  return `${
+    text.slice(0, lastOccurrenceIndex)
+  }${
+    replaceValue
+  }${
+    text.slice(lastOccurrenceIndex + searchValue.length)
+  }`
+}
+
+export function endsWithSingleSpace (text) {
+  return /\S+\s{1}$/.test(text)
+}