@livingdocs/editable.js 5.0.0 → 5.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "lodash-es": "^4.17.21"
@@ -34,7 +34,7 @@
     "react-dom": "^18.0.0",
     "react-transition-group": "^4.4.2",
     "rimraf": "^5.0.0",
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.0",
     "style-loader": "^3.3.1",
     "url-loader": "^4.1.1",
     "webpack": "^5.68.0",
@@ -80,11 +80,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "6be0ace70ff4180dfe612c8026ecfb9a88a92651",
-    "build": "1333",
+    "commit": "a2b34bb63d4d98116766f241ac62ea8d5c6fdfcb",
+    "build": "1376",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2023-10-20T10:13:40.826Z"
+    "date": "2023-12-07T13:01:13.070Z"
   }
 }

package/src/selection.js

@@ -5,7 +5,12 @@ 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'
+import {
+  toCharacterRange,
+  rangeToHtml,
+  findStartExcludingWhitespace,
+  findEndExcludingWhitespace
+} from './util/dom'
 
 /**
  * The Selection module provides a cross-browser abstraction layer for range
@@ -96,9 +101,25 @@ export default class Selection extends Cursor {
     const textToTrim = this.range.toString()
     const whitespacesOnTheLeft = textToTrim.search(/\S|$/)
     const lastNonWhitespace = textToTrim.search(/\S[\s]+$/)
-    const whitespacesOnTheRight = lastNonWhitespace === -1 ? 0 : textToTrim.length - (lastNonWhitespace + 1)
-    this.range.setStart(this.range.startContainer, this.range.startOffset + whitespacesOnTheLeft)
-    this.range.setEnd(this.range.endContainer, this.range.endOffset - whitespacesOnTheRight)
+    const whitespacesOnTheRight = lastNonWhitespace === -1
+      ? 0
+      : textToTrim.length - (lastNonWhitespace + 1)
+
+    const [startContainer, startOffset] = findStartExcludingWhitespace({
+      root: this.range.commonAncestorContainer,
+      startContainer: this.range.startContainer,
+      startOffset: this.range.startOffset,
+      whitespacesOnTheLeft
+    })
+    this.range.setStart(startContainer, startOffset)
+
+    const [endContainer, endOffset] = findEndExcludingWhitespace({
+      root: this.range.commonAncestorContainer,
+      endContainer: this.range.endContainer,
+      endOffset: this.range.endOffset,
+      whitespacesOnTheRight
+    })
+    this.range.setEnd(endContainer, endOffset)
   }
 
   unlink () {
@@ -156,6 +177,7 @@ export default class Selection extends Cursor {
   // e.g. toggle('<em>')
   toggle (elem) {
     if (block.isPlainTextBlock(this.host)) return
+    if (this.range.collapsed) return
     elem = this.adoptElement(elem)
     this.range = content.toggleTag(this.host, this.range, elem)
     this.setVisibleSelection()
@@ -320,6 +342,7 @@ export default class Selection extends Cursor {
   // remove first.
   forceWrap (elem) {
     if (block.isPlainTextBlock(this.host)) return
+    if (this.range.collapsed) return
     elem = this.adoptElement(elem)
     this.range = content.forceWrap(this.host, this.range, elem)
     this.setVisibleSelection()

package/src/util/dom.js

@@ -1,3 +1,6 @@
+import NodeIterator from '../node-iterator'
+import {textNode} from '../node-type'
+
 /**
  * @param {HTMLElement | Array | String} target
  * @param {Document} document
@@ -228,8 +231,8 @@ export const createRangeFromCharacterRange = (element, actualStartIndex, actualE
   let startNode, endNode, startOffset, endOffset
 
   while (walker.nextNode()) {
-    const textNode = walker.currentNode
-    const nodeLength = textNode.nodeValue.length
+    const node = walker.currentNode
+    const nodeLength = node.nodeValue.length
 
     if (currentIndex + nodeLength <= actualStartIndex) {
       currentIndex += nodeLength
@@ -237,12 +240,12 @@ export const createRangeFromCharacterRange = (element, actualStartIndex, actualE
     }
 
     if (!startNode) {
-      startNode = textNode
+      startNode = node
       startOffset = actualStartIndex - currentIndex
     }
 
     if (currentIndex + nodeLength >= actualEndIndex) {
-      endNode = textNode
+      endNode = node
       endOffset = actualEndIndex - currentIndex
       break
     }
@@ -260,3 +263,87 @@ export const createRangeFromCharacterRange = (element, actualStartIndex, actualE
   }
 }
 
+export function findStartExcludingWhitespace ({root, startContainer, startOffset, whitespacesOnTheLeft}) {
+  const isTextNode = startContainer.nodeType === textNode
+  if (!isTextNode) {
+    return findStartExcludingWhitespace({
+      root,
+      startContainer: startContainer.childNodes[startOffset],
+      startOffset: 0,
+      whitespacesOnTheLeft
+    })
+  }
+
+  const offsetAfterWhitespace = startOffset + whitespacesOnTheLeft
+  if (startContainer.length > offsetAfterWhitespace) {
+    return [startContainer, offsetAfterWhitespace]
+  }
+
+  // Pass the root so that the iterator can traverse to siblings
+  const iterator = new NodeIterator(root)
+  // Set the position to the node which is selected
+  iterator.nextNode = startContainer
+  // Iterate once to avoid returning self
+  iterator.getNextTextNode()
+
+  const container = iterator.getNextTextNode()
+  if (!container) {
+    // No more text nodes - use the end of the last text node
+    const previousTextNode = iterator.getPreviousTextNode()
+    return [previousTextNode, previousTextNode.length]
+  }
+
+  return findStartExcludingWhitespace({
+    root,
+    startContainer: container,
+    startOffset: 0,
+    whitespacesOnTheLeft: offsetAfterWhitespace - startContainer.length
+  })
+}
+
+export function findEndExcludingWhitespace ({root, endContainer, endOffset, whitespacesOnTheRight}) {
+  const isTextNode = endContainer.nodeType === textNode
+  if (!isTextNode) {
+    const isFirstNode = !endContainer.childNodes[endOffset - 1]
+    const container = isFirstNode
+      ? endContainer.childNodes[endOffset]
+      : endContainer.childNodes[endOffset - 1]
+    let offset = 0
+    if (!isFirstNode) {
+      offset = container.nodeType === textNode
+        ? container.length
+        : container.childNodes.length
+    }
+    return findEndExcludingWhitespace({
+      root,
+      endContainer: container,
+      endOffset: offset,
+      whitespacesOnTheRight
+    })
+  }
+
+  const offsetBeforeWhitespace = endOffset - whitespacesOnTheRight
+  if (offsetBeforeWhitespace > 0) {
+    return [endContainer, offsetBeforeWhitespace]
+  }
+
+  // Pass the root so that the iterator can traverse to siblings
+  const iterator = new NodeIterator(root)
+  // Set the position to the node which is selected
+  iterator.previous = endContainer
+  // Iterate once to avoid returning self
+  iterator.getPreviousTextNode()
+
+  const container = iterator.getPreviousTextNode()
+  if (!container) {
+    // No more text nodes - use the start of the first text node
+    return [iterator.getNextTextNode(), 0]
+  }
+
+  return findEndExcludingWhitespace({
+    root,
+    endContainer: container,
+    endOffset: container.length,
+    whitespacesOnTheRight: whitespacesOnTheRight - endOffset
+  })
+}