@livingdocs/editable.js 5.0.11 → 5.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "5.0.11",
+  "version": "5.1.0",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "lodash-es": "^4.17.21"
@@ -29,18 +29,18 @@
     "karma-safari-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.4.0",
     "karma-webpack": "^5.0.0",
-    "mocha": "^10.0.0",
+    "mocha": "^11.0.0",
     "normalize.css": "^8.0.1",
     "prismjs": "^1.26.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-transition-group": "^4.4.2",
     "rimraf": "^6.0.0",
-    "sinon": "^18.0.0",
+    "sinon": "^19.0.0",
     "style-loader": "^4.0.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.68.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^6.0.0",
     "webpack-dev-server": "^5.0.0"
   },
   "engines": {
@@ -82,11 +82,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "85675583caacbfd2acf2577f7e7d170992627f60",
-    "build": "1700",
+    "commit": "7e5149c84554e50fe42304df6a3e2b94e5bc63f7",
+    "build": "1965",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2024-07-22T15:51:53.699Z"
+    "date": "2025-02-20T14:00:02.426Z"
   }
 }

package/src/dispatcher.js

@@ -6,6 +6,7 @@ import config from './config.js'
 import Keyboard from './keyboard.js'
 import {closest} from './util/dom.js'
 import {replaceLast, endsWithSingleSpace} from './util/string.js'
+import {applySmartQuotes, shouldApplySmartQuotes} from './smartQuotes.js'
 
 /**
  * The Dispatcher module is responsible for dealing with events and their handlers.
@@ -88,6 +89,7 @@ export default class Dispatcher {
   * @method setupElementListeners
   */
   setupElementListeners () {
+    const currentInput = {offset: undefined}
     this
       .setupDocumentListener('focus', function focusListener (evt) {
         const block = this.getEditableBlockByEvent(evt)
@@ -144,6 +146,17 @@ export default class Dispatcher {
       .setupDocumentListener('input', function inputListener (evt) {
         const block = this.getEditableBlockByEvent(evt)
         if (!block) return
+
+        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)
+          }, 500
+          )
+        }
+
         this.notify('change', block)
       })
 

package/src/smartQuotes.js

@@ -0,0 +1,84 @@
+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
+}
+
+const isDoubleQuote = (char) => /^[«»"“”„]$/.test(char)
+const isSingleQuote = (char) => /^[‘’‹›‚']$/.test(char)
+const isApostrophe = (char) => /^[’']$/.test(char)
+const isWhitespace = (char) => /^\s$/.test(char)
+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 replaceQuote = (range, index, quoteType) => {
+  const startContainer = range.startContainer
+  if (!startContainer.nodeValue) {
+    return
+  }
+  const textNode = document.createTextNode(`${startContainer.nodeValue.substring(0, index)}${quoteType}${startContainer.nodeValue.substring(index + 1)}`)
+  startContainer.replaceWith(textNode)
+  return textNode
+}
+
+const hasSingleOpeningQuote = (textArr, offset, singleOpeningQuote) => {
+  if (offset <= 0) {
+    return false
+  }
+  for (let i = offset - 1; i >= 0; i--) {
+    if (isSingleQuote(textArr[i]) && (!isApostrophe(singleOpeningQuote) && !isApostrophe(textArr[i]))) {
+      return textArr[i] === singleOpeningQuote
+    }
+  }
+  return false
+}
+
+export const applySmartQuotes = (range, config, char, target, cursorOffset) => {
+  const isCharSingleQuote = isSingleQuote(char)
+  const isCharDoubleQuote = isDoubleQuote(char)
+
+  if (!isCharDoubleQuote && !isCharSingleQuote) {
+    return
+  }
+
+  const {quotes, singleQuotes} = config
+  if (char === quotes[0] || char === quotes[1] || char === singleQuotes[0] || char === singleQuotes[1]) {
+    return
+  }
+
+  const offset = range.startOffset
+  const textArr = [...range.startContainer.textContent]
+  let newTextNode
+
+  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)
+  }
+
+  if (!newTextNode) {
+    return
+  }
+
+  // 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)
+}
+