@livingdocs/editable.js 5.1.12 → 5.3.0

package/src/smartQuotes.js

@@ -1,91 +1,129 @@
-const isValidQuotePairConfig = (quotePair) => Array.isArray(quotePair) && quotePair.length === 2
+import * as nodeType from './node-type.js'
+import NodeIterator from './node-iterator.js'
 
-export const shouldApplySmartQuotes = (config, target) => {
-  const {smartQuotes, quotes, singleQuotes} = config
-  return !!smartQuotes && isValidQuotePairConfig(quotes) && isValidQuotePairConfig(singleQuotes) && target.isContentEditable
-}
+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)
 
-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 isAtWordStart = (charBefore) => !charBefore || /^[\s([{/\-–—]$/.test(charBefore)
+const isAtWordEnd = (charAfter) => !isLetter(charAfter) && !isDigit(charAfter)
 
-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])
+const isSingleQuoteOpen = (text, index, [openingQuote, closingQuote]) =>
+  [...text.slice(0, index)].findLast((char) => char === openingQuote || char === closingQuote) === openingQuote
 
-export const replaceQuote = (range, index, quoteType) => {
-  const startContainer = range?.startContainer
-  const nodeValue = startContainer?.nodeValue
-  if (!nodeValue) {
-    return null
+// 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 newText = `${nodeValue.substring(0, index)}${quoteType}${nodeValue.substring(index + 1)}`
-  const newTextNode = document.createTextNode(newText)
-  startContainer.replaceWith(newTextNode)
-  return newTextNode
-}
+]
 
-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}
 }
 
-export const applySmartQuotes = (range, config, char, target, cursorOffset) => {
-  const isCharSingleQuote = isSingleQuote(char)
-  const isCharDoubleQuote = isDoubleQuote(char)
-
-  if (!isCharDoubleQuote && !isCharSingleQuote) {
-    return
+// 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}
+}
 
-  const {quotes, singleQuotes} = config
-  if (char === quotes[0] || char === quotes[1] || char === singleQuotes[0] || char === singleQuotes[1]) {
-    return
-  }
+// 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
+}
 
-  const offset = range.startOffset
-  const textArr = [...range.startContainer.textContent]
-  let newTextNode
+// 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)
+}
 
-  // 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)) {
-    newTextNode = replaceQuote(range, offset - 1, singleQuotes[0])
-  } else 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
-      }
-    }
-    const closingQuote = isCharSingleQuote ? singleQuotes[1] : quotes[1]
-    newTextNode = replaceQuote(range, offset - 1, closingQuote)
-  } else if (shouldBeOpeningQuote(textArr, offset - 2)) {
-    const openingQuote = isCharSingleQuote ? singleQuotes[0] : quotes[0]
-    newTextNode = replaceQuote(range, offset - 1, openingQuote)
-  }
+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
 
-  if (!newTextNode) {
-    return
-  }
+  const {text, nodes} = readText(host)
+  const offset = getCursorOffset(nodes, range)
 
-  // Resets the cursor to the currentPosition after applying the smart-quote
-  const window = target.ownerDocument.defaultView
-  const selection = window.getSelection()
-  selection.collapse(newTextNode, cursorOffset ?? offset)
+  // 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 replacement = getReplacement(text, offset, config)
+  if (replacement) replaceChar(nodes, replacement.index, replacement.char)
 }
 
+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
+}