@livingdocs/editable.js 4.0.0 → 4.0.2

package/src/selection.js

@@ -1,5 +1,3 @@
-
-import 'rangy/lib/rangy-textrange'
 import Cursor from './cursor'
 import * as content from './content'
 import * as parser from './parser'
@@ -7,6 +5,7 @@ import * as block from './block'
 import config from './config'
 import highlightSupport from './highlight-support'
 import highlightText from './highlight-text'
+import {toCharacterRange, rangeToHtml} from './util/dom'
 
 /**
  * The Selection module provides a cross-browser abstraction layer for range
@@ -37,7 +36,7 @@ export default class Selection extends Cursor {
 
   // Get the html inside the selection.
   html () {
-    return this.range.toHtml()
+    return rangeToHtml(this.range)
   }
 
   isAllSelected () {
@@ -53,7 +52,7 @@ export default class Selection extends Cursor {
   }
 
   getTextRange () {
-    return this.range.toCharacterRange(this.host)
+    return toCharacterRange(this.range, this.host)
   }
 
   // Return a plain string of the current selection content.
@@ -72,10 +71,9 @@ export default class Selection extends Cursor {
   getRects () {
     // consider: translate into absolute positions
     // just like Cursor#getCoordinates()
-    return this.range.nativeRange.getClientRects()
+    return this.range.getClientRects()
   }
 
-
   link (href, attrs = {}) {
     if (href) attrs.href = href
     const link = this.createElement(config.linkMarkup.name, config.linkMarkup.attribs)
@@ -121,6 +119,18 @@ export default class Selection extends Cursor {
     }
   }
 
+  highlightComment ({highlightId, textRange}) {
+    highlightSupport.highlightRange(
+      this.host,
+      highlightId,
+      textRange.text,
+      textRange.start,
+      textRange.end,
+      undefined, // dispatcher
+      'comment'
+    )
+  }
+
   // Manually add a highlight
   // Note: the current code does not work with newlines (LP)
   highlight ({highlightId}) {
@@ -143,12 +153,12 @@ export default class Selection extends Cursor {
     highlightText.highlightMatches(this.host, [match])
   }
 
-  // toggle('<em>')
+  // e.g. toggle('<em>')
   toggle (elem) {
     if (block.isPlainTextBlock(this.host)) return
     elem = this.adoptElement(elem)
     this.range = content.toggleTag(this.host, this.range, elem)
-    this.setSelection()
+    this.setVisibleSelection()
   }
 
   toggleCustom ({tagName, attributes, trim = false}) {
@@ -203,7 +213,7 @@ export default class Selection extends Cursor {
     const cursor = this.deleteContent()
     const textNode = cursor.createTextNode(character)
     cursor.insertBefore(textNode)
-    cursor.setSelection()
+    cursor.setVisibleSelection()
     return cursor
   }
 
@@ -213,13 +223,13 @@ export default class Selection extends Cursor {
   // @param {String} E.g. '»'
   surround (startCharacter, endCharacter) {
     this.range = content.surround(this.host, this.range, startCharacter, endCharacter)
-    this.setSelection()
+    this.setVisibleSelection()
   }
 
   removeSurround (startCharacter, endCharacter) {
     this.range = content.deleteCharacter(this.host, this.range, startCharacter)
     this.range = content.deleteCharacter(this.host, this.range, endCharacter)
-    this.setSelection()
+    this.setVisibleSelection()
   }
 
   removeChars (chars = []) {
@@ -227,7 +237,7 @@ export default class Selection extends Cursor {
       const char = chars[i]
       this.range = content.deleteCharacter(this.host, this.range, char)
     }
-    this.setSelection()
+    this.setVisibleSelection()
   }
 
   toggleSurround (startCharacter, endCharacter) {
@@ -244,7 +254,7 @@ export default class Selection extends Cursor {
   //                           remove all.
   removeFormatting (selector) {
     this.range = content.removeFormatting(this.host, this.range, selector)
-    this.setSelection()
+    this.setVisibleSelection()
   }
 
   // Delete the farest ancestor that is an exact selection
@@ -284,7 +294,7 @@ export default class Selection extends Cursor {
   // @param {DOM Node}
   expandTo (elem) {
     this.range = content.expandTo(this.host, this.range, elem)
-    this.setSelection()
+    this.setVisibleSelection()
   }
 
   //  Collapse the selection at the beginning of the selection
@@ -292,7 +302,7 @@ export default class Selection extends Cursor {
   //  @return Cursor instance
   collapseAtBeginning (elem) {
     this.range.collapse(true)
-    this.setSelection()
+    this.setVisibleSelection()
     return new Cursor(this.host, this.range)
   }
 
@@ -301,7 +311,7 @@ export default class Selection extends Cursor {
   //  @return Cursor instance
   collapseAtEnd (elem) {
     this.range.collapse(false)
-    this.setSelection()
+    this.setVisibleSelection()
     return new Cursor(this.host, this.range)
   }
 
@@ -312,7 +322,7 @@ export default class Selection extends Cursor {
     if (block.isPlainTextBlock(this.host)) return
     elem = this.adoptElement(elem)
     this.range = content.forceWrap(this.host, this.range, elem)
-    this.setSelection()
+    this.setVisibleSelection()
   }
 
   // Check if the selection is the same as the elements contents.
@@ -339,6 +349,6 @@ export default class Selection extends Cursor {
   // selection.
   deleteCharacter (character) {
     this.range = content.deleteCharacter(this.host, this.range, character)
-    this.setSelection()
+    this.setVisibleSelection()
   }
 }

package/src/util/dom.js

@@ -42,3 +42,221 @@ export const closest = (elem, selector) => {
   if (!elem.closest) elem = elem.parentNode
   if (elem && elem.closest) return elem.closest(selector)
 }
+
+export const createRange = (win = window) => {
+  return win.document.createRange()
+}
+
+export const getSelection = (win = window) => {
+  return win.document.getSelection()
+}
+
+export const getNodes = (range, nodeTypes, filterFunc, win = window) => {
+  const nodes = []
+
+  const nodeIterator = win.document.createNodeIterator(
+    range.commonAncestorContainer,
+    NodeFilter.SHOW_ALL,
+    {
+      acceptNode (node) {
+        if (
+          range.intersectsNode(node) &&
+          nodeTypes.includes(node.nodeType) &&
+          node !== range.commonAncestorContainer // Exclude the common ancestor container
+        ) {
+          if (typeof filterFunc === 'function') {
+            return filterFunc(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+          }
+          return NodeFilter.FILTER_ACCEPT
+        }
+        return NodeFilter.FILTER_SKIP
+      }
+    },
+    false
+  )
+
+  let currentNode
+  while ((currentNode = nodeIterator.nextNode())) {
+    nodes.push(currentNode)
+  }
+
+  return nodes
+}
+
+// export const getNodes = (range, nodeTypes, filterFunc, win = window) => {
+//   const nodes = []
+
+//   const nodeIterator = win.document.createNodeIterator(
+//     range.startContainer,
+//     NodeFilter.SHOW_ALL,
+//     {
+//       acceptNode (node) {
+//         if (
+//           range.intersectsNode(node) &&
+//           nodeTypes.includes(node.nodeType)
+//         ) {
+//           if (typeof filterFunc === 'function') {
+//             return filterFunc(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+//           }
+//           return NodeFilter.FILTER_ACCEPT
+//         }
+//         return NodeFilter.FILTER_SKIP
+//       }
+//     },
+//     false
+//   )
+
+//   let currentNode
+//   while ((currentNode = nodeIterator.nextNode())) {
+//     if (range.intersectsNode(currentNode)) {
+//       nodes.push(currentNode)
+//     }
+//   }
+
+//   return nodes
+// }
+
+
+export const normalizeBoundaries = (range) => {
+  if (range.startContainer.compareDocumentPosition(range.endContainer) === Node.DOCUMENT_POSITION_FOLLOWING) {
+    range.setStartBefore(range.endContainer)
+  }
+
+  if (range.endContainer.compareDocumentPosition(range.startContainer) === Node.DOCUMENT_POSITION_PRECEDING) {
+    range.setEndAfter(range.startContainer)
+  }
+}
+
+export const containsRange = (containerRange, testRange) => {
+  return (
+    containerRange.compareBoundaryPoints(Range.START_TO_START, testRange) <= 0 &&
+    containerRange.compareBoundaryPoints(Range.END_TO_END, testRange) >= 0
+  )
+}
+
+export const containsNodeText = (range, node) => {
+  const nodeRange = document.createRange()
+  nodeRange.selectNodeContents(node)
+  const comparisonStart = range.compareBoundaryPoints(Range.START_TO_START, nodeRange)
+  const comparisonEnd = range.compareBoundaryPoints(Range.END_TO_END, nodeRange)
+  return comparisonStart <= 0 && comparisonEnd >= 0
+}
+
+export const nodeContainsRange = (node, range) => {
+  const nodeRange = document.createRange()
+  nodeRange.selectNodeContents(node)
+  const comparisonStart = range.compareBoundaryPoints(Range.START_TO_START, nodeRange)
+  const comparisonEnd = range.compareBoundaryPoints(Range.END_TO_END, nodeRange)
+  return comparisonStart >= 0 && comparisonEnd <= 0
+}
+
+const isCharacterDataNode = (node) => {
+  return node && (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.COMMENT_NODE)
+}
+
+const splitDataNode = (node, offset) => {
+  return node.splitText(offset)
+}
+
+export const splitBoundaries = (range) => {
+  const startContainer = range.startContainer
+  const startOffset = range.startOffset
+  const endContainer = range.endContainer
+  const endOffset = range.endOffset
+
+  if (isCharacterDataNode(endContainer) && endOffset > 0 && endOffset < endContainer.length) {
+    splitDataNode(endContainer, endOffset)
+  }
+
+  if (isCharacterDataNode(startContainer) && startOffset > 0 && startOffset < startContainer.length) {
+    const newStartContainer = splitDataNode(startContainer, startOffset)
+    range.setStart(newStartContainer, 0)
+  }
+}
+
+export const toCharacterRange = (range, container) => {
+  const startRange = range.cloneRange()
+  startRange.setStart(container, 0)
+  startRange.setEnd(range.startContainer, range.startOffset)
+
+  const rangeText = range.toString()
+  const start = startRange.toString().length
+  const end = start + rangeText.length
+
+  return {start, end, text: rangeText}
+}
+
+export const rangesAreEqual = (range1, range2) => {
+  return (
+    range1.startContainer === range2.startContainer &&
+    range1.startOffset === range2.startOffset &&
+    range1.endContainer === range2.endContainer &&
+    range1.endOffset === range2.endOffset
+  )
+}
+
+export const rangeToHtml = (range, win = window) => {
+  const div = win.document.createElement('div')
+  div.appendChild(range.cloneContents())
+  return div.innerHTML
+}
+
+export const getSelectionCoordinates = (selection) => {
+  const range = selection.getRangeAt(0) // Assuming you want coordinates of the first range
+
+  const rects = range.getClientRects()
+  const coordinates = []
+
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i]
+    coordinates.push({
+      top: rect.top,
+      left: rect.left,
+      bottom: rect.bottom,
+      right: rect.right,
+      width: rect.width,
+      height: rect.height
+    })
+  }
+
+  return coordinates
+}
+
+export const createRangeFromCharacterRange = (element, actualStartIndex, actualEndIndex) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false)
+  let currentIndex = 0
+  let startNode, endNode, startOffset, endOffset
+
+  while (walker.nextNode()) {
+    const textNode = walker.currentNode
+    const nodeLength = textNode.nodeValue.length
+
+    if (currentIndex + nodeLength <= actualStartIndex) {
+      currentIndex += nodeLength
+      continue
+    }
+
+    if (!startNode) {
+      startNode = textNode
+      startOffset = actualStartIndex - currentIndex
+    }
+
+    if (currentIndex + nodeLength >= actualEndIndex) {
+      endNode = textNode
+      endOffset = actualEndIndex - currentIndex
+      break
+    }
+
+    currentIndex += nodeLength
+  }
+
+  if (startNode && endNode) {
+    const range = createRange()
+    range.setStart(startNode, startOffset)
+    range.setEnd(endNode, endOffset)
+    return range
+  } else {
+    throw new Error('Invalid character offsets.')
+  }
+}
+

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

@@ -1,102 +0,0 @@
-export default class WordHighlighting {
-
-  // @param markerNode {DOM Node}
-  // @param matchMode {String} either 'word' or 'text'
-  constructor (markerNode, matchMode = 'word') {
-    this.marker = markerNode
-    this.matchMode = matchMode
-  }
-
-  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')
-    }
-  }
-
-  findMatches (text, highlights) {
-    if (!text || text === '' || !this.isElement(this.marker)) return
-
-    if (highlights && highlights.length > 0) {
-      return this.searchMatches(text, highlights)
-    }
-  }
-
-  searchMatches (text, highlights) {
-    const createRegex = this.matchMode === 'word'
-      ? createWordRegex
-      : createHighlightRegex
-
-    const regex = createRegex(highlights)
-    const matches = [...text.matchAll(regex)]
-
-    return matches.map((entry) => this.prepareMatch(entry))
-  }
-
-  prepareMatch (match) {
-    let startIndex
-    let matchedText
-    if (this.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: this.marker
-    }
-  }
-
-}
-
-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')
-}