@livingdocs/editable.js 5.2.0 → 5.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "dependencies": {
     "lodash-es": "^4.17.21"
   },
@@ -85,11 +85,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "eaa44590d0a4d805673d01538fe45aaa69662513",
-    "build": "3076",
+    "commit": "79d31dce526384091371e123e491eb774564e446",
+    "build": "3111",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2026-09-21T14:33:07.329Z"
+    "date": "2026-10-02T08:18:47.893Z"
   }
 }

package/src/dispatcher.js

@@ -89,7 +89,6 @@ export default class Dispatcher {
   * @method setupElementListeners
   */
   setupElementListeners () {
-    const currentInput = {offset: undefined}
     this
       .setupDocumentListener('focus', function focusListener (evt) {
         const block = this.getEditableBlockByEvent(evt)
@@ -149,10 +148,8 @@ export default class Dispatcher {
 
         if (shouldApplySmartQuotes(config, evt.target)) {
           const selection = this.selectionWatcher.getFreshSelection()
-          // Save offset of new input, to reset cursor correctly after timeout delay
-          currentInput.offset = selection.range?.startOffset
           setTimeout(() => {
-            applySmartQuotes(selection.range, config, evt.data, evt.target, currentInput.offset)
+            applySmartQuotes(block, selection.range, config, evt.data)
           }, 300
           )
         }

package/src/smartQuotes.js

@@ -1,102 +1,129 @@
-const isValidQuotePairConfig = (quotePair) => Array.isArray(quotePair) && quotePair.length === 2
-
-export const shouldApplySmartQuotes = (config, target) => {
-  const {smartQuotes, quotes, singleQuotes} = config
-  return !!smartQuotes && isValidQuotePairConfig(quotes) && isValidQuotePairConfig(singleQuotes) && target.isContentEditable
-}
-
-export const isDoubleQuote = (char) => /^[«»"“”„]$/.test(char)
-export const isSingleQuote = (char) => /^[‘’‹›‚']$/.test(char)
-export const isApostrophe = (char) => /^[’']$/.test(char)
-export const isWhitespace = (char) => /^\s$/.test(char)
-export const isSeparatorOrWhitespace = (char) => /\s|[>\-–—]/.test(char)
-
-const shouldBeOpeningQuote = (text, indexCharBefore) => indexCharBefore < 0 || isSeparatorOrWhitespace(text[indexCharBefore])
-const shouldBeClosingQuote = (text, indexCharBefore) => !!text[indexCharBefore] && !isSeparatorOrWhitespace(text[indexCharBefore])
-const hasCharAfter = (textArr, indexCharAfter) => !!textArr[indexCharAfter] && !isWhitespace(textArr[indexCharAfter])
-const shouldBeSingleOpeningQuote = (text, indexCharBefore) => !!text[indexCharBefore] && isDoubleQuote(text[indexCharBefore])
-
-export const replaceQuote = (range, index, quoteType) => {
-  const startContainer = range?.startContainer
-  const nodeValue = startContainer?.nodeValue
-  if (!nodeValue) {
-    return false
+import * as nodeType from './node-type.js'
+import NodeIterator from './node-iterator.js'
+
+const isDoubleQuote = (char) => /^[«»"“”„]$/.test(char)
+const isSingleQuote = (char) => /^[‘’‹›‚']$/.test(char)
+const isLetter = (char) => /^\p{L}$/u.test(char)
+const isDigit = (char) => /^\p{N}$/u.test(char)
+
+const isAtWordStart = (charBefore) => !charBefore || /^[\s([{/\-–—]$/.test(charBefore)
+const isAtWordEnd = (charAfter) => !isLetter(charAfter) && !isDigit(charAfter)
+
+const isSingleQuoteOpen = (text, index, [openingQuote, closingQuote]) =>
+  [...text.slice(0, index)].findLast((char) => char === openingQuote || char === closingQuote) === openingQuote
+
+// The rules for a typed character, in order. The first rule that matches
+// writes its character at `writeAt`. An empty character leaves the text alone.
+const rules = [
+  {
+    // ‹geht› + s → ‹geht’s
+    when: (c) => isLetter(c.typed) && c.before === c.singleQuotes[1] && isLetter(c.beforeBefore) && c.apostrophe !== c.singleQuotes[1],
+    write: (c) => c.apostrophe,
+    writeAt: 'before'
+  },
+  {
+    // Er sagte: ' → Er sagte: ‹
+    // «' → «‹
+    when: (c) => isSingleQuote(c.typed) && (isAtWordStart(c.before) || isDoubleQuote(c.before)),
+    write: (c) => c.singleQuotes[0],
+    writeAt: 'typed'
+  },
+  {
+    // ‹geht + ' → ‹geht›
+    when: (c) => isSingleQuote(c.typed) && !isAtWordStart(c.before) && isAtWordEnd(c.after) && isSingleQuoteOpen(c.text, c.index, c.singleQuotes),
+    write: (c) => c.singleQuotes[1],
+    writeAt: 'typed'
+  },
+  {
+    // Hans + ' → Hans’
+    // geht + ' + s → geht’s (e.g. when correcting an existing word)
+    when: (c) => isSingleQuote(c.typed) && !isAtWordStart(c.before),
+    write: (c) => c.apostrophe,
+    writeAt: 'typed'
+  },
+  {
+    // Er sagte: " → Er sagte: «
+    when: (c) => isDoubleQuote(c.typed) && isAtWordStart(c.before),
+    write: (c) => c.quotes[0],
+    writeAt: 'typed'
+  },
+  {
+    // «Tor + " → «Tor»
+    when: (c) => isDoubleQuote(c.typed) && !isAtWordStart(c.before),
+    write: (c) => c.quotes[1],
+    writeAt: 'typed'
   }
-  const at = Math.min(index, nodeValue.length)
-  startContainer.insertData(at, quoteType)
-  startContainer.deleteData(at + quoteType.length, 1)
-  return true
-}
-
-const hasSingleOpeningQuote = (textArr, offset, singleOpeningQuote) => {
-  if (offset <= 0) {
-    return false
+]
+
+// Returns the index and the character to write for the character typed
+// before `offset`, or undefined if the text should be left alone.
+const getReplacement = (text, offset, {quotes, singleQuotes, apostrophe}) => {
+  const index = offset - 1
+  const context = {
+    quotes,
+    singleQuotes,
+    apostrophe,
+    text,
+    index,
+    typed: text[index],
+    before: text[index - 1],
+    beforeBefore: text[index - 2],
+    after: text[index + 1]
   }
-  for (let i = offset - 1; i >= 0; i--) {
-    if (isSingleQuote(textArr[i]) && (!isApostrophe(singleOpeningQuote) && !isApostrophe(textArr[i]))) {
-      return textArr[i] === singleOpeningQuote
-    }
-  }
-  return false
+  const rule = rules.find((r) => r.when(context))
+  const char = rule?.write(context)
+  if (!char) return
+  return {index: rule.writeAt === 'before' ? index - 1 : index, char}
 }
 
-// Returns the quote to write in place of the typed one, or undefined if the
-// typed character should be left alone.
-const getQuote = (textArr, offset, isCharSingleQuote, {quotes, singleQuotes}) => {
-  // Special case for a single quote following a double quote,
-  // which should be transformed into a single opening quote
-  if (isCharSingleQuote && shouldBeSingleOpeningQuote(textArr, offset - 2)) {
-    return singleQuotes[0]
-  }
-
-  if (shouldBeClosingQuote(textArr, offset - 2)) {
-    if (isCharSingleQuote) {
-      // Don't transform apostrophes
-      if (hasCharAfter(textArr, offset)) {
-        return
-      }
-      // Don't transform single-quote if there is no respective single-opening-quote
-      if (!hasSingleOpeningQuote(textArr, offset, singleQuotes[0])) {
-        return
-      }
-      return singleQuotes[1]
-    }
-    return quotes[1]
+// Reads the text of the host, so the rules also see the text in a link
+// or in bold text. A <br> reads as a line break.
+const readText = (host) => {
+  let text = ''
+  const nodes = []
+  for (const node of new NodeIterator(host)) {
+    if (node.nodeType !== nodeType.textNode && node.nodeName !== 'BR') continue
+    nodes.push({node, start: text.length})
+    text += node.nodeValue ?? '\n'
   }
+  return {text, nodes}
+}
 
-  if (shouldBeOpeningQuote(textArr, offset - 2)) {
-    return isCharSingleQuote ? singleQuotes[0] : quotes[0]
-  }
+// Returns the cursor offset in the text of the host,
+// or undefined if the cursor is not in a text node of the host
+const getCursorOffset = (nodes, {startContainer, startOffset}) => {
+  if (startContainer.nodeType !== nodeType.textNode) return
+  const cursorNode = nodes.find(({node}) => node === startContainer)
+  if (cursorNode) return cursorNode.start + startOffset
 }
 
-export const applySmartQuotes = (range, config, char, target, cursorOffset) => {
-  const isCharSingleQuote = isSingleQuote(char)
-  const isCharDoubleQuote = isDoubleQuote(char)
+// Inserts and deletes instead of replacing, so a highlight that ends
+// right after the character keeps its end
+const replaceChar = (nodes, index, char) => {
+  const {node, start} = nodes.findLast((n) => n.start <= index)
+  const offset = index - start
+  node.insertData(offset, char)
+  node.deleteData(offset + char.length, 1)
+}
 
-  if (!isCharDoubleQuote && !isCharSingleQuote) {
-    return
-  }
+export const applySmartQuotes = (host, range, config, char) => {
+  const {quotes, singleQuotes, apostrophe} = config
+  if ([...quotes, ...singleQuotes, apostrophe].includes(char)) return
+  if (!isSingleQuote(char) && !isDoubleQuote(char) && !(apostrophe && isLetter(char))) return
 
-  const {quotes, singleQuotes} = config
-  if (char === quotes[0] || char === quotes[1] || char === singleQuotes[0] || char === singleQuotes[1]) {
-    return
-  }
+  const {text, nodes} = readText(host)
+  const offset = getCursorOffset(nodes, range)
 
-  const offset = range.startOffset
-  const textArr = [...range.startContainer.textContent]
+  // The typed character can be gone by now, e.g. when it was deleted right away
+  if (offset === undefined || text[offset - 1] !== char) return
 
-  const quote = getQuote(textArr, offset, isCharSingleQuote, config)
-  if (!quote) {
-    return
-  }
+  const replacement = getReplacement(text, offset, config)
+  if (replacement) replaceChar(nodes, replacement.index, replacement.char)
+}
 
-  if (!replaceQuote(range, offset - 1, quote)) {
-    return
-  }
+const isValidQuotePairConfig = (quotePair) => Array.isArray(quotePair) && quotePair.length === 2
 
-  // Resets the cursor to the currentPosition after applying the smart-quote
-  const window = target.ownerDocument.defaultView
-  const selection = window.getSelection()
-  selection.collapse(range.startContainer, cursorOffset ?? offset)
+export const shouldApplySmartQuotes = (config, target) => {
+  const {smartQuotes, quotes, singleQuotes} = config
+  return !!smartQuotes && isValidQuotePairConfig(quotes) && isValidQuotePairConfig(singleQuotes) && target.isContentEditable
 }
-