@livingdocs/editable.js 4.0.0 → 4.0.2

package/src/highlight-text.js

@@ -1,16 +1,15 @@
-import rangy from 'rangy'
-
 import NodeIterator from './node-iterator'
 import * as nodeType from './node-type'
+import {createRange} from './util/dom'
 
 export default {
 
   // Get the text from an editable block with a NodeIterator.
   // This must work the same as when later iterating over the text
   // in highlightMatches().
-  extractText (element) {
+  extractText (element, convertBRs = true) {
     let text = ''
-    getText(element, (part) => { text += part })
+    getText(element, convertBRs, (part) => { text += part })
     return text
   },
 
@@ -21,12 +20,21 @@ export default {
   // @params
   // - matches
   //   Array of positions in the string to highlight:
-  //   e.g [{startIndex: 0, endIndex: 1, match: 'The'}]
-  highlightMatches (element, matches) {
+  //   e.g [{
+  //         startIndex: 0,
+  //         endIndex: 1,
+  //         match: 'The', // not used, only the indexes are used for highlighting)
+  //         marker: DOMNode, // A clone of this element will be inserted
+  //         id: 'a7382', // used in word-id attribute
+  //         title: 'The World' // used in title attribute (optional)
+  //       }]
+  highlightMatches (element, matches, countBRs = true) {
     if (!matches || matches.length === 0) {
       return
     }
 
+    element.normalize() // mend text nodes
+
     const iterator = new NodeIterator(element)
     let currentMatchIndex = 0
     let totalOffset = 0
@@ -39,7 +47,7 @@ export default {
       // Account for <br> elements
       if (next.nodeType === nodeType.textNode && next.data !== '') {
         textNode = next
-      } else if (next.nodeType === nodeType.elementNode && next.nodeName === 'BR') {
+      } else if (countBRs && next.nodeType === nodeType.elementNode && next.nodeName === 'BR') {
         totalOffset += 1
         continue
       } else {
@@ -109,7 +117,7 @@ export default {
   },
 
   wrapPortion (portion, stencilElement, title) {
-    const range = rangy.createRange()
+    const range = createRange()
     range.setStart(portion.element, portion.offset)
     range.setEnd(portion.element, portion.offset + portion.length)
     const node = stencilElement.cloneNode(true)
@@ -136,14 +144,14 @@ export default {
 //   with data-editable="remove"
 // - It returns a \n for <br> elements
 //   (The only block level element allowed inside of editables)
-function getText (element, callback) {
+function getText (element, convertBRs, func) {
   const iterator = new NodeIterator(element)
   let next
   while ((next = iterator.getNext())) {
     if (next.nodeType === nodeType.textNode && next.data !== '') {
-      callback(next.data)
-    } else if (next.nodeType === nodeType.elementNode && next.nodeName === 'BR') {
-      callback('\n')
+      func(next.data)
+    } else if (convertBRs && next.nodeType === nodeType.elementNode && next.nodeName === 'BR') {
+      func('\n')
     }
   }
 }

package/src/keyboard.js

@@ -1,5 +1,4 @@
-import rangy from 'rangy'
-
+import {createRange, containsRange} from './util/dom'
 import {contenteditableSpanBug} from './feature-detection'
 import * as nodeType from './node-type'
 import eventable from './eventable'
@@ -118,10 +117,10 @@ export default class Keyboard {
     //
     // Manually remove the element that would be removed anyway before inserting
     // the new letter.
-    const rangyInstance = this.selectionWatcher.getFreshRange()
-    if (!rangyInstance.isSelection) return
+    const rangeContainer = this.selectionWatcher.getFreshRange()
+    if (!rangeContainer.isSelection) return
 
-    const nodeToRemove = Keyboard.getNodeToRemove(rangyInstance.range, target)
+    const nodeToRemove = Keyboard.getNodeToRemove(rangeContainer.range, target)
     if (nodeToRemove) nodeToRemove.remove()
   }
 
@@ -144,10 +143,10 @@ export default class Keyboard {
 
     // We get a range that contains everything within the sartNodeElement to test
     // if the selectionRange is within the startNode, we have nothing to do.
-    const startNodeRange = rangy.createRange()
+    const startNodeRange = createRange()
     startNodeRange.setStartBefore(startNodeElement.firstChild)
     startNodeRange.setEndAfter(startNodeElement.lastChild)
-    if (startNodeRange.containsRange(selectionRange)) return
+    if (containsRange(startNodeRange, selectionRange)) return
 
     // If the selectionRange.startContainer was a textNode, we have to make sure
     // that its parent's content starts with this node. Content is either a

package/src/{highlighting.js → monitored-highlighting.js}

@@ -4,12 +4,18 @@ import * as content from './content'
 import highlightText from './highlight-text'
 import SpellcheckService from './plugins/highlighting/spellcheck-service'
 import WhitespaceHighlighting from './plugins/highlighting/whitespace-highlighting'
-import WordHighlighting from './plugins/highlighting/text-highlighting'
+import {searchAllWords} from './plugins/highlighting/text-search'
 import MatchCollection from './plugins/highlighting/match-collection'
 import highlightSupport from './highlight-support'
 import {domArray, domSelector} from './util/dom'
 
-export default class Highlighting {
+// Spellcheck and Whitespace Highlighting
+// --------------------------------------
+//
+// This instance monitors an editable block for changes and
+// updates highlights accordingly. It also calls the spellcheck
+// service after the content has changed.
+export default class MonitoredHighlighting {
 
   constructor (editable, configuration, spellcheckConfig) {
     this.editable = editable
@@ -41,13 +47,12 @@ export default class Highlighting {
     const spellcheckService = this.config.spellcheck.spellcheckService
     const spellcheckMarker = this.config.spellcheck.marker
     const whitespaceMarker = this.config.whitespace.marker
-    const spellcheckMarkerNode = highlightSupport
-      .createMarkerNode(spellcheckMarker, 'spellcheck', this.win)
     const whitespaceMarkerNode = highlightSupport
-      .createMarkerNode(whitespaceMarker, 'spellcheck', this.win)
+      .createMarkerNode(whitespaceMarker, 'whitespace', this.win)
+    this.spellcheckMarkerNode = highlightSupport
+      .createMarkerNode(spellcheckMarker, 'spellcheck', this.win)
 
     this.spellcheckService = new SpellcheckService(spellcheckService)
-    this.spellcheck = new WordHighlighting(spellcheckMarkerNode)
     this.whitespace = new WhitespaceHighlighting(whitespaceMarkerNode)
 
     this.setupListeners()
@@ -116,22 +121,22 @@ export default class Highlighting {
   }
 
   highlight (editableHost) {
-    let text = highlightText.extractText(editableHost)
+    const textBefore = highlightText.extractText(editableHost)
 
     // getSpellcheck
-    this.spellcheckService.check(text, (err, misspelledWords) => {
-      if (err) { return }
+    this.spellcheckService.check(textBefore, (err, misspelledWords) => {
+      if (err || !editableHost.isConnected) { return } // return in case the host was removed from the dom
 
       // refresh the text
-      text = highlightText.extractText(editableHost)
+      const text = highlightText.extractText(editableHost)
 
       const matchCollection = new MatchCollection()
 
-      let matches = this.spellcheck.findMatches(text, misspelledWords)
-      matchCollection.addMatches('spellcheck', matches)
+      let matches = searchAllWords(text, misspelledWords, this.spellcheckMarkerNode)
+      matchCollection.addMatches(matches)
 
       matches = this.whitespace.findMatches(text)
-      matchCollection.addMatches('whitespace', matches)
+      matchCollection.addMatches(matches)
 
       this.safeHighlightMatches(editableHost, matchCollection.matches)
     })
@@ -166,7 +171,7 @@ export default class Highlighting {
 
   removeHighlights (editableHost) {
     editableHost = domSelector(editableHost, this.win.document)
-    for (const elem of domArray('[data-highlight="spellcheck"]', editableHost)) {
+    for (const elem of domArray('[data-highlight="spellcheck"], [data-highlight="whitespace"]', editableHost)) {
       content.unwrap(elem)
     }
   }
@@ -184,7 +189,7 @@ export default class Highlighting {
       do {
         if (elementAtCursor === editableHost) return
         const highlightType = elementAtCursor.getAttribute('data-highlight')
-        if (highlightType === 'spellcheck') {
+        if (highlightType === 'spellcheck' || highlightType === 'whitespace') {
           wordId = elementAtCursor.getAttribute('data-word-id')
           break
         }

package/src/plugins/highlighting/match-collection.js

@@ -4,9 +4,8 @@ export default class MatchCollection {
     this.matches = []
   }
 
-  addMatches (name, matches) {
-    if (!matches || !matches.length) return
-
+  addMatches (matches) {
+    if (!matches?.length) return
     this.matches = mergeMatches(this.matches, matches)
   }
 

package/src/plugins/highlighting/text-search.js

@@ -0,0 +1,100 @@
+export function searchText (text, searchTerm, marker) {
+  const matchMode = 'text'
+  return findMatches(text, [searchTerm], matchMode, marker)
+}
+
+export function searchWord (text, word, marker) {
+  const matchMode = 'word'
+  return findMatches(text, [word], matchMode, marker)
+}
+
+export function searchAllWords (text, words, marker) {
+  const matchMode = 'word'
+  return findMatches(text, words, matchMode, marker)
+}
+
+function findMatches (text, searchTexts, matchMode, marker) {
+  if (!text || text === '') return []
+  if (marker && !isElement(marker)) return []
+  if (!searchTexts?.length) return []
+
+  const createRegex = matchMode === 'word'
+    ? createWordRegex
+    : createHighlightRegex
+
+  const regex = createRegex(searchTexts)
+  const matches = [...text.matchAll(regex)]
+
+  return matches.map((match) => {
+    let startIndex
+    let matchedText
+    if (matchMode === 'word') {
+      startIndex = match.index + match[1].length
+      matchedText = match[2]
+    } else {
+      startIndex = match.index
+      matchedText = match[0]
+    }
+
+    return {
+      startIndex,
+      endIndex: startIndex + matchedText.length,
+      match: matchedText,
+      marker
+    }
+  })
+}
+
+function isElement (obj) {
+  try {
+    if (!obj) return false
+    return obj instanceof obj.ownerDocument?.defaultView.HTMLElement
+  } catch (e) {
+    // Browsers not supporting W3 DOM2 don't have HTMLElement and
+    // an exception is thrown and we end up here. Testing some
+    // properties that all elements have (works on IE7)
+    return (typeof obj === 'object') &&
+      (obj.nodeType === 1) && (typeof obj.style === 'object') &&
+      (typeof obj.ownerDocument === 'object')
+  }
+}
+
+function createHighlightRegex (words = []) {
+  const escapedWords = words.map((word) => escapeRegEx(word))
+
+  const regex = `(${escapedWords.join('|')})`
+  return new RegExp(regex, 'g')
+}
+
+// Regex to find whole words within a string
+//
+// Unicode character blocks for letters.
+// See: http://jrgraphix.net/research/unicode_blocks.php
+//
+// \\u0041-\\u005A    A-Z (Basic Latin)
+// \\u0061-\\u007A    a-z (Basic Latin)
+// \\u0030-\\u0039    0-9 (Basic Latin)
+// \\u00AA            ª   (Latin-1 Supplement)
+// \\u00B5            µ   (Latin-1 Supplement)
+// \\u00BA            º   (Latin-1 Supplement)
+// \\u00C0-\\u00D6    À-Ö (Latin-1 Supplement)
+// \\u00D8-\\u00F6    Ø-ö (Latin-1 Supplement)
+// \\u00F8-\\u00FF    ø-ÿ (Latin-1 Supplement)
+// \\u0100-\\u017F    Ā-ſ (Latin Extended-A)
+// \\u0180-\\u024F    ƀ-ɏ (Latin Extended-B)
+const letterChars = '\\u0041-\\u005A\\u0061-\\u007A\\u0030-\\u0039\\u00AA\\u00B5\\u00BA\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u00FF\\u0100-\\u017F\\u0180-\\u024F'
+
+function createWordRegex (words = []) {
+  const escapedWords = words.map((word) => escapeRegEx(word))
+
+  // (notLetter|^)(words)(?=notLetter|$)
+  const regex = `([^${letterChars}]|^)` +
+    `(${escapedWords.join('|')})` +
+    `(?=[^${letterChars}]|$)`
+
+  return new RegExp(regex, 'g')
+}
+
+function escapeRegEx (s) {
+  return String(s).replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1')
+}

package/src/plugins/highlighting/whitespace-highlighting.js

@@ -23,6 +23,7 @@ const characters = {
 // a paragraph and the highlighting prevents browsers from converting
 // the no-break space back to a normal space when the user keeps typing.
 const specialWhitespaceChars = '\\u2000-\\u200A\\u202F\\u205F\\u3000'
+const specialWhitespaceCharsRegex = new RegExp(`[${specialWhitespaceChars}]`, 'g')
 
 export default class WhitespaceHighlighting {
 
@@ -33,13 +34,7 @@ export default class WhitespaceHighlighting {
   findMatches (text) {
     if (!text) return
 
-    let regex = `[${specialWhitespaceChars}]`
-    regex = new RegExp(regex, 'g')
-
-    const matches = []
-    let match
-    while ((match = regex.exec(text))) matches.push(match)
-
+    const matches = [...text.matchAll(specialWhitespaceCharsRegex)]
     return matches.map((entry) => this.prepareMatch(entry))
   }
 

package/src/range-container.js

@@ -1,5 +1,6 @@
 import Cursor from './cursor'
 import Selection from './selection'
+import {rangesAreEqual} from './util/dom'
 
 /** RangeContainer
  *
@@ -10,13 +11,13 @@ import Selection from './selection'
  */
 
 export default class RangeContainer {
-  constructor (editableHost, rangyRange) {
+  constructor (editableHost, range) {
     this.host = editableHost && editableHost.jquery
       ? editableHost[0]
       : editableHost
-    this.range = rangyRange
-    this.isAnythingSelected = (rangyRange !== undefined)
-    this.isCursor = (this.isAnythingSelected && rangyRange.collapsed)
+    this.range = range
+    this.isAnythingSelected = (range !== undefined)
+    this.isCursor = (this.isAnythingSelected && range.collapsed)
     this.isSelection = (this.isAnythingSelected && !this.isCursor)
   }
 
@@ -36,7 +37,7 @@ export default class RangeContainer {
   isDifferentFrom (otherRangeContainer = new RangeContainer()) {
     const self = this.range
     const other = otherRangeContainer.range
-    if (self && other) return !self.equals(other)
+    if (self && other) return !rangesAreEqual(self, other)
     if (!self && !other) return false
     return true
   }

package/src/range-save-restore.js

@@ -1,6 +1,6 @@
-import rangy from 'rangy'
 import error from './util/error'
 import * as nodeType from './node-type'
+import {createRange, normalizeBoundaries} from './util/dom'
 
 /**
  * Inspired by the Selection save and restore module for Rangy by Tim Down
@@ -11,35 +11,19 @@ let boundaryMarkerId = 0
 // (U+FEFF) zero width no-break space
 const markerTextChar = '\ufeff'
 
-function isChildOf (parent, possibleChild) {
-  for (let i = 0; i < parent.children.length; i++) {
-    if (parent.children[i] === possibleChild) return true
-  }
-  return false
-}
-
-function startContainerIsChild (range) {
-  const parent = range.commonAncestorContainer
-  if (parent.nodeType === 3) return false // if we are on the text node it can't be a parent
-  const possibleChild = range.startContainer.parentElement
-  return isChildOf(parent, possibleChild)
-}
-
-function endContainerIsChild (range) {
+function isSecondChildOfCommonAncestor (range, rangeContainer) {
   const parent = range.commonAncestorContainer
   if (parent.nodeType === 3) return false // if we are on the text node it can't be a parent
-  const possibleChild = range.endContainer.parentElement
-  return isChildOf(parent, possibleChild)
+  const possibleChild = rangeContainer.parentElement
+  return possibleChild?.parentElement === parent
 }
 
 export function insertRangeBoundaryMarker (range, atStart) {
   const container = range.commonAncestorContainer
-  const directlyBeforeFormatTag = startContainerIsChild(range) && atStart
-  const directlyAfterFormatTag = endContainerIsChild(range) && !atStart
 
   // If ownerDocument is null the commonAncestorContainer is window.document
-  if (container.ownerDocument === null || container.ownerDocument === undefined) {
-    error('Cannot save range: range is emtpy')
+  if (!container.ownerDocument) {
+    error('Cannot save range: range is empty')
   }
 
   // Create the marker element containing a single
@@ -52,14 +36,21 @@ export function insertRangeBoundaryMarker (range, atStart) {
   markerEl.style.display = 'none'
   markerEl.appendChild(doc.createTextNode(markerTextChar))
 
-  // if another tag is trailing exactly at the start or end, prepend
-  // or append the marker element directly on the parent in order to prevent breaking HTML markup.
+  // This logic can expand the selection by inserting the marker before the element
+  // of the start or end container. In some cases this prevents breaking up existing tags.
+  // The solution is not perfect, but has been here a while.
+  // And it is somewhat inconsistent as it check if the container is a second grade child
+  // of the common ancestor.
+  // It can help to prevent the nuking of e.g. comments when formatting like bold
+  // is applied.
+  const directlyBeforeFormatTag = atStart && isSecondChildOfCommonAncestor(range, range.startContainer)
+  const directlyAfterFormatTag = !atStart && isSecondChildOfCommonAncestor(range, range.endContainer)
   if (directlyBeforeFormatTag) {
-    range.endContainer.parentElement.insertBefore(markerEl, range.startContainer.parentElement)
+    const startParentElem = range.startContainer.parentElement
+    startParentElem.parentElement.insertBefore(markerEl, startParentElem)
   } else if (directlyAfterFormatTag) {
-    // emulating insertAfter with nextSibling
-    range.startContainer.parentElement.insertBefore(markerEl,
-      range.endContainer.parentElement.nextSibling)
+    const endParentElem = range.endContainer.parentElement
+    endParentElem.parentElement.insertBefore(markerEl, endParentElem.nextSibling)
   } else {
     // Clone the Range and collapse to the appropriate boundary point
     const boundaryRange = range.cloneRange()
@@ -100,7 +91,8 @@ export function save (range) {
 
   // Adjust each range's boundaries to lie between its markers
   if (range.collapsed) {
-    range.collapseBefore(endEl)
+    range.setStartBefore(endEl)
+    range.collapse(true)
   } else {
     range.setEndBefore(endEl)
     range.setStartAfter(startEl)
@@ -112,7 +104,7 @@ export function save (range) {
 export function restore (host, rangeInfo) {
   if (rangeInfo.restored) return
 
-  const range = rangy.createRange()
+  const range = createRange()
   if (rangeInfo.collapsed) {
     const markerEl = getMarker(host, rangeInfo.markerId)
     if (markerEl) {
@@ -122,9 +114,10 @@ export function restore (host, rangeInfo) {
       // Workaround for rangy issue 17
       if (previousNode && previousNode.nodeType === nodeType.textNode) {
         markerEl.remove()
-        range.collapseToPoint(previousNode, previousNode.length)
+        range.setStart(previousNode, previousNode.length)
       } else {
-        range.collapseBefore(markerEl)
+        range.setStartBefore(markerEl)
+        range.collapse(true)
         markerEl.remove()
       }
     } else {
@@ -135,7 +128,7 @@ export function restore (host, rangeInfo) {
     setRangeBoundary(host, range, rangeInfo.endMarkerId, false)
   }
 
-  range.normalizeBoundaries()
+  normalizeBoundaries(range)
   return range
 }
 

package/src/selection-watcher.js

@@ -1,9 +1,8 @@
-import rangy from 'rangy'
-
 import * as parser from './parser'
 import RangeContainer from './range-container'
 import Cursor from './cursor'
 import Selection from './selection'
+import {getSelection} from './util/dom'
 
 /**
  * The SelectionWatcher module watches for selection changes inside
@@ -17,19 +16,19 @@ export default class SelectionWatcher {
   constructor (dispatcher, win) {
     this.dispatcher = dispatcher
     this.win = win || window
-    this.rangySelection = undefined
+    this.selection = undefined
     this.currentSelection = undefined
     this.currentRange = undefined
   }
 
   /**
-   * Updates the internal selection pointer to the current rangy selection.
+   * Updates the internal selection pointer to the current selection.
    * Returns true if no exception occurred.
    */
   syncSelection () {
-    // it is possible that rangy has a problem with the nativeSelection
+    // Note: the try catch was introduced because of rangy exceptions with nativeSelections
     try {
-      this.rangySelection = rangy.getSelection(this.win)
+      this.selection = getSelection(this.win)
     } catch (err) {
       return false
     }
@@ -47,8 +46,8 @@ export default class SelectionWatcher {
     // rangeCount is 0 or 1 in all browsers except firefox
     // firefox can work with multiple ranges
     // (on a mac hold down the command key to select multiple ranges)
-    if (this.rangySelection.rangeCount && successfulSync) {
-      const range = this.rangySelection.getRangeAt(0)
+    if (this.selection.rangeCount && successfulSync) {
+      const range = this.selection.getRangeAt(0)
       const hostNode = parser.getHost(range.commonAncestorContainer)
       if (hostNode) return new RangeContainer(hostNode, range)
     }
@@ -73,11 +72,11 @@ export default class SelectionWatcher {
   * there is neither a selection or cursor.
   */
   getFreshSelection () {
-    const range = this.getRangeContainer()
+    const rangeContainer = this.getRangeContainer()
 
-    return range.isCursor
-      ? range.getCursor(this.win)
-      : range.getSelection(this.win)
+    return rangeContainer.isCursor
+      ? rangeContainer.getCursor(this.win)
+      : rangeContainer.getSelection(this.win)
   }
 
   /**
@@ -94,15 +93,15 @@ export default class SelectionWatcher {
   }
 
   forceCursor () {
-    const range = this.getRangeContainer()
-    return range.forceCursor()
+    const rangeContainer = this.getRangeContainer()
+    return rangeContainer.forceCursor()
   }
 
   selectionChanged () {
-    const newRange = this.getRangeContainer()
-    if (newRange.isDifferentFrom(this.currentRange)) {
+    const newRangeContainer = this.getRangeContainer()
+    if (newRangeContainer.isDifferentFrom(this.currentRange)) {
       const lastSelection = this.currentSelection
-      this.currentRange = newRange
+      this.currentRange = newRangeContainer
 
       // empty selection or cursor
       if (lastSelection) {