@livingdocs/editable.js 3.0.2 → 3.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.0.2",
+  "version": "3.0.6",
   "dependencies": {
     "@babel/runtime": "^7.13.17",
     "bowser": "2.11.0",
@@ -9,21 +9,21 @@
     "rangy": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.13.16",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.13.15",
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.8",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.13.13",
     "@esm-bundle/chai": "^4.3.4-fix.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "babel-plugin-add-module-exports": "^1.0.4",
-    "babel-plugin-istanbul": "^6.0.0",
-    "css-loader": "^5.2.4",
-    "eslint": "^7.24.0",
+    "babel-plugin-istanbul": "^6.1.1",
+    "css-loader": "^6.4.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-react": "^7.23.2",
     "font-awesome": "^4.7.0",
     "gh-pages": "^3.1.0",
-    "karma": "^6.3.2",
+    "karma": "^6.3.6",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-firefox-launcher": "^2.1.0",
@@ -31,9 +31,9 @@
     "karma-safari-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
-    "mocha": "^9.0.3",
+    "mocha": "^9.1.3",
     "normalize.css": "^8.0.1",
-    "prismjs": "^1.23.0",
+    "prismjs": "^1.25.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-transition-group": "^4.4.1",
@@ -41,9 +41,9 @@
     "sinon": "^10.0.0",
     "style-loader": "^2.0.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.35.0",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^4.0.0-beta.3"
+    "webpack": "^5.60.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.3.1"
   },
   "engines": {
     "node": ">=12"
@@ -84,11 +84,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "ab9af60d16071cd20777eec7eee75fc932559f05",
-    "build": "337",
+    "commit": "371fd4f350c9d109eb57b0e68d2308702137f6c7",
+    "build": "376",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2021-09-07T16:42:50.857Z"
+    "date": "2021-10-26T16:02:22.840Z"
   }
 }

package/src/clipboard.js

@@ -25,46 +25,20 @@ export function updateConfig (conf) {
   rules.splitIntoBlocks.forEach((name) => { splitIntoBlocks[name] = true })
 }
 
-export function paste (element, cursor, callback) {
+export function paste (element, cursor, clipboardContent) {
   const document = element.ownerDocument
   element.setAttribute(config.pastingAttribute, true)
 
   if (cursor.isSelection) cursor = cursor.deleteContent()
 
-  // Create a placeholder and set the focus to the pasteholder
-  // to redirect the browser pasting into the pasteholder.
-  cursor.save()
-  const pasteHolder = injectPasteholder(document)
-  pasteHolder.focus()
-
-  // Use a timeout to give the browser some time to paste the content.
-  // After that grab the pasted content, filter it and restore the focus.
-  setTimeout(() => {
-    const blocks = parseContent(pasteHolder)
-    pasteHolder.remove()
-    element.removeAttribute(config.pastingAttribute)
-    cursor.restore()
-    callback(blocks, cursor)
-  }, 0)
-}
-
-/**
- * @param { Document } document
- */
-export function injectPasteholder (document) {
+  // Create a placeholder to help parse HTML
   const pasteHolder = document.createElement('div')
-  pasteHolder.setAttribute('contenteditable', true)
-  pasteHolder.style.position = 'fixed'
-  pasteHolder.style.right = '5px'
-  pasteHolder.style.top = '50%'
-  pasteHolder.style.width = '1px'
-  pasteHolder.style.height = '1px'
-  pasteHolder.style.overflow = 'hidden'
-  pasteHolder.style.outline = 'none'
-
-  document.body.appendChild(pasteHolder)
-
-  return pasteHolder
+  pasteHolder.innerHTML = clipboardContent
+
+  const blocks = parseContent(pasteHolder)
+
+  element.removeAttribute(config.pastingAttribute)
+  return {blocks, cursor}
 }
 
 /**

package/src/cursor.js

@@ -96,7 +96,7 @@ export default class Cursor {
     hostRange.collapse(false)
     const hostCoords = getRangeBoundingClientRect(hostRange, this.win)
     const cursorCoords = getRangeBoundingClientRect(this.range.nativeRange, this.win)
-    return hostCoords.bottom === cursorCoords.bottom
+    return isCloseTo(hostCoords.bottom, cursorCoords.bottom)
   }
 
   isAtFirstLine () {
@@ -105,7 +105,7 @@ export default class Cursor {
     hostRange.collapse(true)
     const hostCoords = getRangeBoundingClientRect(hostRange, this.win)
     const cursorCoords = getRangeBoundingClientRect(this.range.nativeRange, this.win)
-    return hostCoords.top === cursorCoords.top
+    return isCloseTo(hostCoords.top, cursorCoords.top)
   }
 
   isAtBeginning () {
@@ -368,3 +368,9 @@ function getRangeBoundingClientRect (range, win) {
   el.remove()
   return coords
 }
+
+function isCloseTo (a, b) {
+  if (a === b) return true
+  if (Math.abs(a - b) <= 2) return true
+  return false
+}

package/src/dispatcher.js

@@ -127,20 +127,21 @@ export default class Dispatcher {
       .setupDocumentListener('paste', function pasteListener (evt) {
         const block = this.getEditableBlockByEvent(evt)
         if (!block) return
-        const afterPaste = (blocks, cursor) => {
-          if (blocks.length) {
-            this.notify('paste', block, blocks, cursor)
-
-            // The input event does not fire when we process the content manually
-            // and insert it via script
-            this.notify('change', block)
-          } else {
-            cursor.setVisibleSelection()
-          }
-        }
 
-        const cursor = this.selectionWatcher.getFreshSelection()
-        clipboard.paste(block, cursor, afterPaste)
+        evt.preventDefault()
+        const selection = this.selectionWatcher.getFreshSelection()
+        const clipboardContent = evt.clipboardData.getData('text/html') || evt.clipboardData.getData('text/plain')
+
+        const {blocks, cursor} = clipboard.paste(block, selection, clipboardContent)
+        if (blocks.length) {
+          this.notify('paste', block, blocks, cursor)
+
+          // The input event does not fire when we process the content manually
+          // and insert it via script
+          this.notify('change', block)
+        } else {
+          cursor.setVisibleSelection()
+        }
       })
       .setupDocumentListener('input', function inputListener (evt) {
         const block = this.getEditableBlockByEvent(evt)

package/src/plugins/highlighting/text-highlighting.js

@@ -7,8 +7,22 @@ export default class WordHighlighting {
     this.matchMode = matchMode
   }
 
+  isElement (obj) {
+    try {
+      // Using W3 DOM2 (works for FF, Opera and Chrome)
+      return obj instanceof HTMLElement
+    } catch (e) {
+      // Browsers not supporting W3 DOM2 don't have HTMLElement and
+      // an exception is thrown and we end up here. Testing some
+      // properties that all elements have (works on IE7)
+      return (typeof obj === 'object') &&
+        (obj.nodeType === 1) && (typeof obj.style === 'object') &&
+        (typeof obj.ownerDocument === 'object')
+    }
+  }
+
   findMatches (text, highlights) {
-    if (!text) return
+    if (!text || text === '' || !this.isElement(this.marker)) return
 
     if (highlights && highlights.length > 0) {
       return this.searchMatches(text, highlights)
@@ -21,11 +35,7 @@ export default class WordHighlighting {
       : createHighlightRegex
 
     const regex = createRegex(highlights)
-    const matches = []
-    let match
-    while ((match = regex.exec(text))) {
-      matches.push(match)
-    }
+    const matches = [...text.matchAll(regex)]
 
     return matches.map((entry) => this.prepareMatch(entry))
   }

package/src/selection.js

@@ -78,7 +78,15 @@ export default class Selection extends Cursor {
   link (href, attrs = {}) {
     if (href) attrs.href = href
     const link = this.createElement(config.linkMarkup.name, config.linkMarkup.attribs)
-    for (const key in attrs) link.setAttribute(key, attrs[key])
+    for (const key in attrs) {
+      const value = attrs[key]
+      if (value === undefined) continue
+      if (value === null) {
+        link.removeAttribute(key)
+      } else {
+        link.setAttribute(key, value)
+      }
+    }
     this.forceWrap(link)
   }