@livingdocs/editable.js 4.0.1 → 5.0.0

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "bowser": "2.11.0",
-    "lodash-es": "^4.17.21",
-    "rangy": "^1.3.0"
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
@@ -82,11 +80,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "246306a1bfebb93f5cbaf511621a773cb36058a3",
-    "build": "1296",
+    "commit": "6be0ace70ff4180dfe612c8026ecfb9a88a92651",
+    "build": "1333",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2023-10-11T21:05:31.171Z"
+    "date": "2023-10-20T10:13:40.826Z"
   }
 }

package/src/content.js

@@ -1,9 +1,8 @@
-import rangy from 'rangy'
 import * as nodeType from './node-type'
 import * as rangeSaveRestore from './range-save-restore'
 import * as parser from './parser'
 import * as string from './util/string'
-import {createElement} from './util/dom'
+import {createElement, createRange, getNodes, normalizeBoundaries, splitBoundaries, containsNodeText} from './util/dom'
 import config from './config'
 
 function restoreRange (host, range, func) {
@@ -129,11 +128,10 @@ export function adoptElement (node, doc) {
     : node
 }
 
-// This is a slight variation of the cloneContents method of a rangyRange.
 // It will return a fragment with the cloned contents of the range
 // without the commonAncestorElement.
 //
-// @param {rangyRange}
+// @param {Range}
 // @return {DocumentFragment}
 export function cloneRangeContents (range) {
   const rangeFragment = range.cloneContents()
@@ -241,13 +239,13 @@ export function areSameAttributes (attrs1, attrs2) {
 
 // Get all tags that start or end inside the range
 export function getInnerTags (range, filterFunc) {
-  return range.getNodes([nodeType.elementNode], filterFunc)
+  return getNodes(range, [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))
+  return getNodes(range, [nodeType.elementNode], filterFunc)
+    .filter(elem => containsNodeText(range, elem))
 }
 
 // Transform an array of elements into an array
@@ -265,21 +263,26 @@ export function isAffectedBy (host, range, tagName) {
 
 // select a whole element
 export function selectNodeContents (element) {
-  const range = rangy.createRange()
+  const range = createRange()
   range.selectNodeContents(element)
   return range
 }
 
+function intersectsRange (range1, range2) {
+  return range1.compareBoundaryPoints(Range.END_TO_START, range2) === -1 &&
+    range2.compareBoundaryPoints(Range.END_TO_START, range1) === -1
+}
+
 // Check if the range selects all of the elements contents,
 // not less or more.
 //
 // @param visible: Only compare visible text. That way it does not
 //   matter if the user selects an additional whitespace or not.
 export function isExactSelection (range, elem, visible) {
-  const elemRange = rangy.createRange()
+  const elemRange = createRange()
   elemRange.selectNodeContents(elem)
 
-  if (!range.intersectsRange(elemRange)) return false
+  if (!intersectsRange(range, elemRange)) return false
 
   let rangeText = range.toString()
   let elemText = (elem.jquery ? elem[0] : elem).textContent
@@ -309,7 +312,7 @@ export function toggleTag (host, range, elem) {
 }
 
 export function isWrappable (range) {
-  return range.canSurroundContents()
+  return canSurroundContents(range)
 }
 
 export function forceWrap (host, range, elem) {
@@ -384,11 +387,10 @@ export function nukeElem (host, range, node) {
 export function insertCharacter (range, character, atStart) {
   const insertEl = document.createTextNode(character)
   const boundaryRange = range.cloneRange()
-
   boundaryRange.collapse(atStart)
   boundaryRange.insertNode(insertEl)
   range[atStart ? 'setStartBefore' : 'setEndAfter'](insertEl)
-  range.normalizeBoundaries()
+  normalizeBoundaries(range)
 }
 
 // Surround the range with characters like start and end quotes.
@@ -406,19 +408,18 @@ export function surround (host, range, startCharacter, endCharacter) {
 export function deleteCharacter (host, range, character) {
   if (!containsString(range, character)) return range
 
-  range.splitBoundaries()
+  // check for selection.rangeCount > 0 ?
+  if (window.getSelection().rangeCount > 0) splitBoundaries(range)
   const restoredRange = restoreRange(host, range, () => {
-    const charRegexp = string.regexp(character)
-
-    range.getNodes([nodeType.textNode], (node) => {
-      return node.nodeValue.search(charRegexp) >= 0
+    getNodes(range, [nodeType.textNode], (node) => {
+      return node.nodeValue.indexOf(character) >= 0
     })
       .forEach((node) => {
-        node.nodeValue = node.nodeValue.replace(charRegexp, '')
+        node.nodeValue = node.nodeValue.replaceAll(character, '')
       })
   })
 
-  restoredRange.normalizeBoundaries()
+  normalizeBoundaries(restoredRange)
   return restoredRange
 }
 
@@ -433,3 +434,74 @@ export function nukeTag (host, range, tagName) {
     if (elem.nodeName.toUpperCase() === tagName.toUpperCase()) unwrap(elem)
   })
 }
+
+function createNodeIterator (root, filter) {
+  let currentNode = root
+  let previousNode = null
+
+  function nextNode () {
+    if (!currentNode) {
+      return null
+    }
+
+    if (currentNode.firstChild && previousNode !== currentNode.firstChild) {
+      previousNode = currentNode
+      currentNode = currentNode.firstChild
+    } else if (currentNode.nextSibling) {
+      previousNode = currentNode
+      currentNode = currentNode.nextSibling
+    } else {
+      let parent = currentNode.parentNode
+      while (parent && parent !== root) {
+        if (parent.nextSibling) {
+          previousNode = currentNode = parent.nextSibling
+          break
+        }
+        parent = parent.parentNode
+      }
+      if (!parent || parent === root) {
+        previousNode = currentNode = null
+      }
+    }
+
+    return currentNode
+  }
+
+  return {
+    next: nextNode
+  }
+}
+
+function isNodeFullyContained (node, range) {
+  const nodeRange = document.createRange()
+  nodeRange.selectNodeContents(node)
+  return range.compareBoundaryPoints(Range.START_TO_START, nodeRange) <= 0 &&
+         range.compareBoundaryPoints(Range.END_TO_END, nodeRange) >= 0
+}
+
+function canSurroundContents (range) {
+  if (!range || !range.startContainer || !range.endContainer) {
+    return false
+  }
+
+  if (range.startContainer === range.endContainer) return true
+
+  // Create a custom node iterator for the common ancestor container
+  const iterator = createNodeIterator(range.commonAncestorContainer, function (node) {
+    return range.isPointInRange(node, 0)
+  })
+
+  let currentNode
+  let boundariesInvalid = false
+
+  while ((currentNode = iterator.next())) {
+    if (currentNode.nodeType === Node.ELEMENT_NODE) {
+      if (!isNodeFullyContained(currentNode, range)) {
+        boundariesInvalid = true
+        break
+      }
+    }
+  }
+
+  return !boundariesInvalid
+}

package/src/core.js

@@ -1,4 +1,3 @@
-import rangy from 'rangy'
 import config from './config'
 import error from './util/error'
 import * as parser from './parser'
@@ -8,12 +7,11 @@ import * as clipboard from './clipboard'
 import Dispatcher from './dispatcher'
 import Cursor from './cursor'
 import highlightSupport from './highlight-support'
-import Highlighting from './highlighting'
+import MonitoredHighlighting from './monitored-highlighting'
 import createDefaultEvents from './create-default-events'
-import browser from 'bowser'
 import {textNodesUnder, getTextNodeAndRelativeOffset} from './util/element'
 import {binaryCursorSearch} from './util/binary_search'
-import {domArray} from './util/dom'
+import {domArray, createRange, nodeContainsRange} from './util/dom'
 
 /**
  * The Core module provides the Editable class that defines the Editable.JS
@@ -49,10 +47,6 @@ export class Editable {
     this.win = this.config.window
     this.editableSelector = `.${config.editableClass}`
 
-    if (!rangy.initialized) {
-      rangy.init()
-    }
-
     this.dispatcher = new Dispatcher(this)
     if (this.config.defaultBehavior === true) {
       this.dispatcher.on(createDefaultEvents(this))
@@ -217,7 +211,7 @@ export class Editable {
     const host = Cursor.findHost(element, this.editableSelector)
     if (!host) return undefined
 
-    const range = rangy.createRange()
+    const range = createRange()
 
     if (position === 'beginning' || position === 'end') {
       range.selectNodeContents(element)
@@ -240,7 +234,7 @@ export class Editable {
   createCursorAtCharacterOffset ({element, offset}) {
     const textNodes = textNodesUnder(element)
     const {node, relativeOffset} = getTextNodeAndRelativeOffset({textNodes, absOffset: offset})
-    const newRange = rangy.createRange()
+    const newRange = createRange()
     newRange.setStart(node, relativeOffset)
     newRange.collapse(true)
 
@@ -320,21 +314,15 @@ export class Editable {
    * @returns A Cursor or Selection object or undefined.
    */
   getSelection (editableHost) {
-    let selection = this.dispatcher.selectionWatcher.getFreshSelection()
-    if (!(editableHost && selection)) return selection
+    const selection = this.dispatcher.selectionWatcher.getFreshSelection()
+    if (!editableHost || !selection) return selection
 
     const range = selection.range
+
     // Check if the selection is inside the editableHost
-    // The try...catch is required if the editableHost was removed from the DOM.
-    try {
-      if (range.compareNode(editableHost) !== range.NODE_BEFORE_AND_AFTER) {
-        selection = undefined
-      }
-    } catch (e) {
-      selection = undefined
+    if (editableHost?.isConnected && nodeContainsRange(editableHost, range)) {
+      return selection
     }
-
-    return selection
   }
 
   /**
@@ -343,7 +331,7 @@ export class Editable {
    * @chainable
    */
   setupHighlighting (hightlightingConfig) {
-    this.highlighting = new Highlighting(this, hightlightingConfig)
+    this.highlighting = new MonitoredHighlighting(this, hightlightingConfig)
 
     return this
   }
@@ -524,7 +512,6 @@ export class Editable {
 // Expose modules and editable
 Editable.parser = parser
 Editable.content = content
-Editable.browser = browser
 
 // Set up callback functions for several events.
 ;['focus', 'blur', 'flow', 'selection', 'cursor', 'newline',

package/src/cursor.js

@@ -1,4 +1,3 @@
-import rangy from 'rangy'
 import * as viewport from './util/viewport'
 
 import * as content from './content'
@@ -8,7 +7,7 @@ import {elementNode, documentFragmentNode} from './node-type'
 import error from './util/error'
 import * as rangeSaveRestore from './range-save-restore'
 // import printRange from './util/print_range'
-import {closest} from './util/dom'
+import {closest, getSelection, rangesAreEqual} from './util/dom'
 
 /**
  * The Cursor module provides a cross-browser abstraction layer for cursor.
@@ -29,9 +28,9 @@ export default class Cursor {
   * @class Cursor
   * @constructor
   */
-  constructor (editableHost, rangyRange) {
+  constructor (editableHost, range) {
     this.setHost(editableHost)
-    this.range = rangyRange
+    this.range = range
     this.isCursor = true
   }
 
@@ -100,7 +99,7 @@ export default class Cursor {
     hostRange.selectNodeContents(this.host)
     hostRange.collapse(false)
     const hostCoords = getRangeBoundingClientRect(hostRange, this.win)
-    const cursorCoords = getRangeBoundingClientRect(this.range.nativeRange, this.win)
+    const cursorCoords = getRangeBoundingClientRect(this.range, this.win)
     return isCloseTo(hostCoords.bottom, cursorCoords.bottom)
   }
 
@@ -109,7 +108,7 @@ export default class Cursor {
     hostRange.selectNodeContents(this.host)
     hostRange.collapse(true)
     const hostCoords = getRangeBoundingClientRect(hostRange, this.win)
-    const cursorCoords = getRangeBoundingClientRect(this.range.nativeRange, this.win)
+    const cursorCoords = getRangeBoundingClientRect(this.range, this.win)
     return isCloseTo(hostCoords.top, cursorCoords.top)
   }
 
@@ -139,6 +138,7 @@ export default class Cursor {
     this.range.insertNode(element)
     this.range.setStartAfter(preceedingElement)
     this.range.setEndAfter(preceedingElement)
+    this.host.normalize() // mend text nodes
   }
 
   // Insert content after the cursor
@@ -149,7 +149,12 @@ export default class Cursor {
     if (parser.isDocumentFragmentWithoutChildren(element)) return
 
     element = this.adoptElement(element)
-    this.range.insertNode(element)
+
+    const after = this.range.cloneRange()
+    after.setStart(after.endContainer, after.endOffset)
+    after.collapse(true)
+    after.insertNode(element)
+    this.host.normalize() // mend text nodes
   }
 
   // Alias for #setVisibleSelection()
@@ -162,7 +167,10 @@ export default class Cursor {
       const {x, y} = viewport.getScrollPosition(this.win)
       this.win.scrollTo(x, y)
     }
-    rangy.getSelection(this.win).setSingleRange(this.range)
+
+    const selection = getSelection(this.win)
+    selection.removeAllRanges()
+    selection.addRange(this.range)
   }
 
   // Take the following example:
@@ -218,17 +226,16 @@ export default class Cursor {
   }
 
   getBoundingClientRect () {
-    return this.range.nativeRange.getBoundingClientRect()
+    return this.range.getBoundingClientRect()
   }
 
   // Get the BoundingClientRect of the cursor.
   // The returned values are transformed to be absolute
   // (relative to the document).
   getCoordinates (positioning = 'absolute') {
-    const coords = this.range.nativeRange.getBoundingClientRect()
+    const coords = this.range.getBoundingClientRect()
     if (positioning === 'fixed') return coords
 
-
     // translate into absolute positions
     const {x, y} = viewport.getScrollPosition(this.win)
     return {
@@ -315,7 +322,7 @@ export default class Cursor {
     if (!cursor.host.isEqualNode(this.host)) return false
 
     if (!cursor.range) return false
-    if (!cursor.range.equals(this.range)) return false
+    if (!rangesAreEqual(cursor.range, this.range)) return false
 
     return true
   }
@@ -345,8 +352,7 @@ export default class Cursor {
   // This is to prevent excessive triggering of the change event during
   // merge or split operations or other manipulations by scripts.
   triggerChange () {
-    const event = document.createEvent('HTMLEvents')
-    event.initEvent('formatEditable', true, false)
+    const event = new Event('formatEditable', {bubbles: true, cancelable: false})
     this.host.dispatchEvent(event)
   }
 }

package/src/dispatcher.js

@@ -252,10 +252,10 @@ export default class Dispatcher {
       })
 
       .on('backspace', function (event) {
-        const range = self.selectionWatcher.getFreshRange()
-        if (!range.isCursor) return self.triggerChangeEvent(this)
+        const rangeContainer = self.selectionWatcher.getFreshRange()
+        if (!rangeContainer.isCursor) return self.triggerChangeEvent(this)
 
-        const cursor = range.getCursor()
+        const cursor = rangeContainer.getCursor()
         if (!cursor.isAtBeginning()) return self.triggerChangeEvent(this)
 
         event.preventDefault()
@@ -264,10 +264,10 @@ export default class Dispatcher {
       })
 
       .on('delete', function (event) {
-        const range = self.selectionWatcher.getFreshRange()
-        if (!range.isCursor) return self.triggerChangeEvent(this)
+        const rangeContainer = self.selectionWatcher.getFreshRange()
+        if (!rangeContainer.isCursor) return self.triggerChangeEvent(this)
 
-        const cursor = range.getCursor()
+        const cursor = rangeContainer.getCursor()
         if (!cursor.isAtTextEnd()) return self.triggerChangeEvent(this)
 
         event.preventDefault()
@@ -278,8 +278,8 @@ export default class Dispatcher {
       .on('enter', function (event) {
         event.preventDefault()
         event.stopPropagation()
-        const range = self.selectionWatcher.getFreshRange()
-        const cursor = range.forceCursor()
+        const rangeContainer = self.selectionWatcher.getFreshRange()
+        const cursor = rangeContainer.forceCursor()
 
         if (cursor.isAtTextEnd()) {
           self.notify('insert', this, 'after', cursor)

package/src/feature-detection.js

@@ -1,5 +1,3 @@
-import browser from 'bowser'
-
 /**
 * Check for contenteditable support
 *
@@ -10,9 +8,13 @@ import browser from 'bowser'
 */
 export const contenteditable = typeof document.documentElement.contentEditable !== 'undefined'
 
-const parser = browser.getParser(window.navigator.userAgent)
-const browserEngine = parser.getEngineName()
-const webKit = browserEngine === 'WebKit'
+// Detect webkit browser engine
+// That way we can detect the contenteditable span bug on safari, but exclude chrome
+// Regex taken from: https://github.com/lancedikson/bowser/blob/f09411489ced05811c91cc6670a8e4ca9cbe39a7/src/parser-engines.js#L93-L106
+// Attention, this might be error prone as any engine version change breaks this.
+const isBlink = /(apple)?webkit\/537\.36/i.test(window.navigator.userAgent)
+const isWebkit = /(apple)?webkit/i.test(window.navigator.userAgent)
+const webKit = !isBlink && isWebkit
 
 /**
  * Check selectionchange event (supported in IE, Chrome, Firefox and Safari)

package/src/highlight-support.js

@@ -1,15 +1,12 @@
-import rangy from 'rangy'
 import * as content from './content'
 import highlightText from './highlight-text'
-import TextHighlighting from './plugins/highlighting/text-highlighting'
-import {closest, createElement} from './util/dom'
-
-function isInHost (elem, host) {
-  return closest(elem, '[data-editable]:not([data-word-id])') === host
-}
+import {searchText} from './plugins/highlighting/text-search'
+import {createElement, createRange, toCharacterRange} from './util/dom'
 
 const highlightSupport = {
 
+  // Used to highlight arbitrary text in an editable. All occurrences
+  // will be highlighted.
   highlightText (editableHost, text, highlightId, type) {
     if (this.hasHighlight(editableHost, highlightId)) return
     const blockText = highlightText.extractText(editableHost)
@@ -17,8 +14,7 @@ const highlightSupport = {
     const marker = `<span class="highlight-${type}"></span>`
     const markerNode = highlightSupport.createMarkerNode(marker, type, this.win)
 
-    const textSearch = new TextHighlighting(markerNode, 'text')
-    const matches = textSearch.findMatches(blockText, [text])
+    const matches = searchText(blockText, text, markerNode)
 
     if (matches && matches.length) {
       if (highlightId) matches[0].id = highlightId
@@ -27,42 +23,39 @@ const highlightSupport = {
     }
   },
 
-
-  // 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.
-
+  // Used to highlight comments.
+  // 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)
-    if (blockText === '') return -1 // the text was deleted so we can't highlight it
-    const matchesArray = textSearch.findMatches(blockText, [text])
-    const {actualStartIndex, actualEndIndex} = this.getIndex(matchesArray, startIndex, endIndex)
-    const range = rangy.createRange()
-    range.selectCharacters(editableHost, actualStartIndex, actualEndIndex)
-
-    if (!isInHost(range.commonAncestorContainer, editableHost)) {
-      return -1
-    }
+
+    const blockText = highlightText.extractText(editableHost, false)
+    if (blockText === '') return -1 // the text was deleted so we can't highlight anything
 
     const marker = highlightSupport.createMarkerNode(
-      `<span class="highlight-${type}" data-word-id="${highlightId}"></span>`,
+      `<span class="highlight-${type}"></span>`,
       type,
       this.win
     )
-    const fragment = range.extractContents()
-    marker.appendChild(fragment)
-    range.deleteContents()
-    range.insertNode(marker)
-    highlightSupport.cleanupStaleMarkerNodes(editableHost, 'comment')
-    if (dispatcher) {
-      dispatcher.notify('change', editableHost)
-    }
+
+    const actualStartIndex = startIndex
+    const actualEndIndex = endIndex
+
+    highlightText.highlightMatches(editableHost, [{
+      startIndex: actualStartIndex,
+      endIndex: actualEndIndex,
+      id: highlightId,
+      marker
+    }], false)
+
+    if (dispatcher) dispatcher.notify('change', editableHost)
+
     return actualStartIndex
   },
 
@@ -80,10 +73,12 @@ const highlightSupport = {
     const elems = editableHost.querySelectorAll(`[data-word-id="${highlightId}"]`)
     for (const elem of elems) {
       content.unwrap(elem)
-      // in Chrome browsers the unwrap method leaves the host node split into 2 (lastChild !== firstChild)
-      editableHost.normalize()
-      if (dispatcher) dispatcher.notify('change', editableHost)
     }
+
+    // remove empty text nodes, combine adjacent text nodes
+    editableHost.normalize()
+
+    if (dispatcher) dispatcher.notify('change', editableHost)
   },
 
   hasHighlight (editableHost, highlightId) {
@@ -103,7 +98,6 @@ const highlightSupport = {
       if (!groups[highlightId]) {
         groups[highlightId] = editableHost.querySelectorAll(`[data-word-id="${highlightId}"]`)
       }
-
     }
 
     const res = {}
@@ -116,7 +110,7 @@ const highlightSupport = {
   },
 
   extractMarkerNodePosition (editableHost, markers) {
-    const range = rangy.createRange()
+    const range = createRange()
     if (markers.length > 1) {
       range.setStartBefore(markers[0])
       range.setEndAfter(markers[markers.length - 1])
@@ -124,12 +118,12 @@ const highlightSupport = {
       range.selectNode(markers[0])
     }
 
-    const textRange = range.toCharacterRange(editableHost)
+    const textRange = toCharacterRange(range, editableHost)
     return {
       start: textRange.start,
       end: textRange.end,
-      text: range.text(),
-      nativeRange: range.nativeRange
+      text: textRange.text, // browser range result (does whitespace normalization)
+      nativeRange: range
     }
   },
 
@@ -147,20 +141,7 @@ 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}
   }
-
 }
 
 export default highlightSupport