@livingdocs/editable.js 5.0.10 → 5.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "5.0.10",
+  "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": "56c68f84db59b7727b4aaf057fe350921862db70",
-    "build": "1673",
+    "commit": "7e5149c84554e50fe42304df6a3e2b94e5bc63f7",
+    "build": "1965",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2024-07-10T15:24:28.500Z"
+    "date": "2025-02-20T14:00:02.426Z"
   }
 }

package/src/dispatcher.js

@@ -6,11 +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'
-
-// This will be set to true once we detect the input event is working.
-// Input event description on MDN:
-// https://developer.mozilla.org/en-US/docs/Web/Reference/Events/input
-let isInputEventSupported = false
+import {applySmartQuotes, shouldApplySmartQuotes} from './smartQuotes.js'
 
 /**
  * The Dispatcher module is responsible for dealing with events and their handlers.
@@ -23,7 +19,6 @@ export default class Dispatcher {
   constructor (editable) {
     const win = editable.win
     eventable(this, editable)
-    this.supportsInputEvent = false
     this.document = win.document
     this.config = editable.config
     this.editable = editable
@@ -94,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)
@@ -122,7 +118,6 @@ export default class Dispatcher {
         const selection = this.selectionWatcher.getFreshSelection()
         if (selection && selection.isSelection) {
           this.notify('clipboard', block, 'cut', selection)
-          this.triggerChangeEvent(block)
         }
       })
       .setupDocumentListener('paste', function pasteListener (evt) {
@@ -151,14 +146,18 @@ export default class Dispatcher {
       .setupDocumentListener('input', function inputListener (evt) {
         const block = this.getEditableBlockByEvent(evt)
         if (!block) return
-        if (isInputEventSupported) {
-          this.notify('change', block)
-        } else {
-          // Most likely the event was already handled manually by
-          // triggerChangeEvent so the first time we just switch the
-          // isInputEventSupported flag without notifying the change event.
-          isInputEventSupported = true
+
+        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)
       })
 
       .setupDocumentListener('formatEditable', function formatEditableListener (evt) {
@@ -168,26 +167,6 @@ export default class Dispatcher {
       })
   }
 
-  /**
-  * Trigger a change event
-  *
-  * This should be done in these cases:
-  * - typing a letter
-  * - delete (backspace and delete keys)
-  * - cut
-  * - paste
-  * - copy and paste (not easily possible manually as far as I know)
-  *
-  * Preferably this is done using the input event. But the input event is not
-  * supported on all browsers for contenteditable elements.
-  * To make things worse it is not detectable either. So instead of detecting
-  * we set 'isInputEventSupported' when the input event fires the first time.
-  */
-  triggerChangeEvent (target) {
-    if (isInputEventSupported) return
-    this.notify('change', target)
-  }
-
   dispatchSwitchEvent (event, element, direction) {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
     const cursor = this.selectionWatcher.getFreshSelection()
@@ -228,8 +207,7 @@ export default class Dispatcher {
     this.setupDocumentListener('keydown', function (evt) {
       const block = this.getEditableBlockByEvent(evt)
       if (!block) return
-      const notifyCharacterEvent = !isInputEventSupported
-      this.keyboard.dispatchKeyEvent(evt, block, notifyCharacterEvent)
+      this.keyboard.dispatchKeyEvent(evt, block, false)
     }, true)
   }
 
@@ -253,10 +231,10 @@ export default class Dispatcher {
 
       .on('backspace', function (event) {
         const rangeContainer = self.selectionWatcher.getFreshRange()
-        if (!rangeContainer.isCursor) return self.triggerChangeEvent(this)
+        if (!rangeContainer.isCursor) return
 
         const cursor = rangeContainer.getCursor()
-        if (!cursor.isAtBeginning()) return self.triggerChangeEvent(this)
+        if (!cursor.isAtBeginning()) return
 
         event.preventDefault()
         event.stopPropagation()
@@ -265,10 +243,10 @@ export default class Dispatcher {
 
       .on('delete', function (event) {
         const rangeContainer = self.selectionWatcher.getFreshRange()
-        if (!rangeContainer.isCursor) return self.triggerChangeEvent(this)
+        if (!rangeContainer.isCursor) return
 
         const cursor = rangeContainer.getCursor()
-        if (!cursor.isAtTextEnd()) return self.triggerChangeEvent(this)
+        if (!cursor.isAtTextEnd()) return
 
         event.preventDefault()
         event.stopPropagation()

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)
+}
+