@livingdocs/editable.js 3.1.7 → 3.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.1.7",
+  "version": "3.2.1",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "bowser": "2.11.0",
@@ -21,8 +21,6 @@
     "css-loader": "^6.5.1",
     "eslint": "^8.8.0",
     "eslint-plugin-react": "^7.28.0",
-    "font-awesome": "^4.7.0",
-    "gh-pages": "^5.0.0",
     "karma": "^6.3.13",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.1.0",
@@ -37,7 +35,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-transition-group": "^4.4.2",
-    "rimraf": "^4.0.0",
+    "rimraf": "^5.0.0",
     "sinon": "^15.0.0",
     "style-loader": "^3.3.1",
     "url-loader": "^4.1.1",
@@ -46,7 +44,8 @@
     "webpack-dev-server": "^4.7.3"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=12",
+    "npm": ">=6"
   },
   "files": [
     "src",
@@ -76,18 +75,22 @@
     "test:watch": "npm run test:karma -s -- --single-run false",
     "lint": "eslint --ignore-path .gitignore ."
   },
+  "publishConfig": {
+    "tag": "3.x"
+  },
   "release": {
-    "extends": "@livingdocs/semantic-release-presets/npm-github-verify"
+    "extends": "@livingdocs/semantic-release-presets/npm-github-verify",
+    "branch": "3.x"
   },
   "ci": {
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "faeb13de973b3fcbaca1c38da4d8efc7b138565d",
-    "build": "900",
-    "branch": "master",
+    "commit": "ca878f0f32cf4eaf0ebd53f2467973e5c59e8b97",
+    "build": "1407",
+    "branch": "3.x",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2023-03-10T10:06:35.613Z"
+    "date": "2024-01-10T22:49:33.014Z"
   }
 }

package/src/block.js

@@ -7,11 +7,12 @@ const state = {}
 export const next = getSibling('nextElementSibling')
 export const previous = getSibling('previousElementSibling')
 
-export function init (elem, {normalize, shouldSpellcheck}) {
+export function init (elem, {normalize, plainText, shouldSpellcheck}) {
   setBlockId(elem)
 
   elem.setAttribute('contenteditable', true)
   elem.setAttribute('spellcheck', Boolean(shouldSpellcheck))
+  elem.setAttribute('data-plaintext', Boolean(plainText))
 
   elem.classList.remove(config.editableDisabledClass)
   elem.classList.add(config.editableClass)
@@ -23,6 +24,7 @@ export function init (elem, {normalize, shouldSpellcheck}) {
 export function disable (elem) {
   elem.removeAttribute('contenteditable')
   elem.removeAttribute('spellcheck')
+  elem.removeAttribute('data-plaintext')
 
   setState(elem, undefined)
 
@@ -30,6 +32,9 @@ export function disable (elem) {
   elem.classList.add(config.editableDisabledClass)
 }
 
+export function isPlainTextBlock (elem) {
+  return elem.getAttribute('data-plaintext') === 'true'
+}
 
 export function setBlockId (elem) {
   if (!elem.hasAttribute('data-editable')) {

package/src/clipboard.js

@@ -2,8 +2,9 @@ import config from './config'
 import * as string from './util/string'
 import * as nodeType from './node-type'
 import * as quotes from './quotes'
+import {isPlainTextBlock} from './block'
 
-let allowedElements, requiredAttributes, transformElements, blockLevelElements, replaceQuotes
+let allowedElements, allowedPlainTextElements, requiredAttributes, transformElements, blockLevelElements, replaceQuotes
 let splitIntoBlocks, blacklistedElements
 const whitespaceOnly = /^\s*$/
 const blockPlaceholder = '<!-- BLOCK -->'
@@ -13,6 +14,7 @@ updateConfig(config)
 export function updateConfig (conf) {
   const rules = conf.pastedHtmlRules
   allowedElements = rules.allowedElements || {}
+  allowedPlainTextElements = rules.allowedPlainTextElements || {}
   requiredAttributes = rules.requiredAttributes || {}
   transformElements = rules.transformElements || {}
   blacklistedElements = rules.blacklistedElements || []
@@ -25,9 +27,9 @@ export function updateConfig (conf) {
   rules.splitIntoBlocks.forEach((name) => { splitIntoBlocks[name] = true })
 }
 
-export function paste (element, cursor, clipboardContent) {
-  const document = element.ownerDocument
-  element.setAttribute(config.pastingAttribute, true)
+export function paste (block, cursor, clipboardContent) {
+  const document = block.ownerDocument
+  block.setAttribute(config.pastingAttribute, true)
 
   if (cursor.isSelection) {
     cursor = cursor.deleteExactSurroundingTags()
@@ -39,9 +41,10 @@ export function paste (element, cursor, clipboardContent) {
   const pasteHolder = document.createElement('div')
   pasteHolder.innerHTML = clipboardContent
 
-  const blocks = parseContent(pasteHolder)
+  const isPlainText = isPlainTextBlock(block)
+  const blocks = parseContent(pasteHolder, {plainText: isPlainText})
 
-  element.removeAttribute(config.pastingAttribute)
+  block.removeAttribute(config.pastingAttribute)
   return {blocks, cursor}
 }
 
@@ -55,30 +58,35 @@ export function paste (element, cursor, clipboardContent) {
  * @param {DOM node} A container where the pasted content is located.
  * @returns {Array of Strings} An array of cleaned innerHTML like strings.
  */
-export function parseContent (element) {
+export function parseContent (element, {plainText = false} = {}) {
+  const options = {
+    allowedElements: plainText ? allowedPlainTextElements : allowedElements,
+    keepInternalRelativeLinks: plainText ? false : keepInternalRelativeLinks
+  }
+
   // Filter pasted content
-  return filterHtmlElements(element)
+  return filterHtmlElements(element, options)
   // Handle Blocks
     .split(blockPlaceholder)
     .map((entry) => string.trim(cleanWhitespace(replaceAllQuotes(entry))))
     .filter((entry) => !whitespaceOnly.test(entry))
 }
 
-export function filterHtmlElements (elem) {
+function filterHtmlElements (elem, options) {
   return Array.from(elem.childNodes).reduce((content, child) => {
     if (blacklistedElements.indexOf(child.nodeName.toLowerCase()) !== -1) {
       return ''
     }
 
     // Keep internal relative links relative (on paste).
-    if (keepInternalRelativeLinks && child.nodeName === 'A' && child.href) {
+    if (options.keepInternalRelativeLinks && child.nodeName === 'A' && child.href) {
       const stripInternalHost = child.getAttribute('href').replace(window.location.origin, '')
       child.setAttribute('href', stripInternalHost)
     }
 
     if (child.nodeType === nodeType.elementNode) {
-      const childContent = filterHtmlElements(child)
-      return content + conditionalNodeWrap(child, childContent)
+      const childContent = filterHtmlElements(child, options)
+      return content + conditionalNodeWrap(child, childContent, options)
     }
 
     // Escape HTML characters <, > and &
@@ -87,11 +95,11 @@ export function filterHtmlElements (elem) {
   }, '')
 }
 
-export function conditionalNodeWrap (child, content) {
+function conditionalNodeWrap (child, content, options) {
   let nodeName = child.nodeName.toLowerCase()
   nodeName = transformNodeName(nodeName)
 
-  if (shouldKeepNode(nodeName, child)) {
+  if (shouldKeepNode(nodeName, child, options)) {
     const attributes = filterAttributes(nodeName, child)
 
     if (nodeName === 'br') return `<${nodeName + attributes}>`
@@ -115,7 +123,7 @@ export function conditionalNodeWrap (child, content) {
 }
 
 // returns string of concatenated attributes e.g. 'target="_blank" rel="nofollow" href="/test.com"'
-export function filterAttributes (nodeName, node) {
+function filterAttributes (nodeName, node) {
   return Array.from(node.attributes).reduce((attributes, {name, value}) => {
     if (allowedElements[nodeName][name] && value) {
       return `${attributes} ${name}="${value}"`
@@ -124,22 +132,22 @@ export function filterAttributes (nodeName, node) {
   }, '')
 }
 
-export function transformNodeName (nodeName) {
+function transformNodeName (nodeName) {
   return transformElements[nodeName] || nodeName
 }
 
-export function hasRequiredAttributes (nodeName, node) {
+function hasRequiredAttributes (nodeName, node) {
   const requiredAttrs = requiredAttributes[nodeName]
   if (!requiredAttrs) return true
 
   return !requiredAttrs.some((name) => !node.getAttribute(name))
 }
 
-export function shouldKeepNode (nodeName, node) {
-  return allowedElements[nodeName] && hasRequiredAttributes(nodeName, node)
+function shouldKeepNode (nodeName, node, options) {
+  return options.allowedElements[nodeName] && hasRequiredAttributes(nodeName, node)
 }
 
-export function cleanWhitespace (str) {
+function cleanWhitespace (str) {
   return str
     .replace(/\n/g, ' ')
     .replace(/ {2,}/g, ' ')
@@ -149,7 +157,7 @@ export function cleanWhitespace (str) {
     ))
 }
 
-export function replaceAllQuotes (str) {
+function replaceAllQuotes (str) {
   if (replaceQuotes.quotes || replaceQuotes.singleQuotes || replaceQuotes.apostrophe) {
     return quotes.replaceAllQuotes(str, replaceQuotes)
   }

package/src/config.js

@@ -52,6 +52,9 @@ export default {
       'em': {},
       'br': {}
     },
+    allowedPlainTextElements: {
+      'br': {}
+    },
 
     // Elements that have required attributes.
     // If these are not present the elements are filtered out.

package/src/core.js

@@ -93,10 +93,11 @@ export class Editable {
    * @param {HTMLElement|Array(HTMLElement)|String} target A HTMLElement, an
    *    array of HTMLElement or a query selector representing the target where
    *    the API should be added on.
+   * @param {normalize, plainText} options Block specific configuration
    * @chainable
    */
-  add (target) {
-    this.enable(target)
+  add (target, options) {
+    this.enable(target, options)
     // TODO check css whitespace settings
     return this
   }
@@ -143,19 +144,26 @@ export class Editable {
   }
 
   /**
-  * Adds the Editable.JS API to the given target elements.
-  *
-  * @method enable
-  * @param { HTMLElement | undefined } target editable root element(s)
-  *    If no param is specified all editables marked as disabled are enabled.
-  * @chainable
-  */
-  enable (target, normalize) {
+   * Adds the Editable.JS API to the given target elements.
+   *
+   * @method enable
+   * @param { HTMLElement | undefined } target editable root element(s)
+   *    If no param is specified all editables marked as disabled are enabled.
+   * @param {boolean} normalize normalizes target content (legacy param)
+   * @param {boolean} options.normalize normalizes target content
+   * @param {boolean} options.plainText prevents text formatting for block
+   * @chainable
+   */
+  enable (target, options) {
+    const {
+      normalize = typeof options === 'boolean' ? options : false,
+      plainText = false
+    } = options ?? {}
     const shouldSpellcheck = this.config.browserSpellcheck
     const targets = domArray(target || `.${config.editableDisabledClass}`, this.win.document)
 
     for (const element of targets) {
-      block.init(element, {normalize, shouldSpellcheck})
+      block.init(element, {normalize, plainText, shouldSpellcheck})
       this.dispatcher.notify('init', element)
     }
 

package/src/selection.js

@@ -3,9 +3,14 @@ import 'rangy/lib/rangy-textrange'
 import Cursor from './cursor'
 import * as content from './content'
 import * as parser from './parser'
+import * as block from './block'
 import config from './config'
 import highlightSupport from './highlight-support'
 import highlightText from './highlight-text'
+import {
+  findStartExcludingWhitespace,
+  findEndExcludingWhitespace
+} from './util/dom'
 
 /**
  * The Selection module provides a cross-browser abstraction layer for range
@@ -97,9 +102,25 @@ export default class Selection extends Cursor {
     const textToTrim = this.range.toString()
     const whitespacesOnTheLeft = textToTrim.search(/\S|$/)
     const lastNonWhitespace = textToTrim.search(/\S[\s]+$/)
-    const whitespacesOnTheRight = lastNonWhitespace === -1 ? 0 : textToTrim.length - (lastNonWhitespace + 1)
-    this.range.setStart(this.range.startContainer, this.range.startOffset + whitespacesOnTheLeft)
-    this.range.setEnd(this.range.endContainer, this.range.endOffset - whitespacesOnTheRight)
+    const whitespacesOnTheRight = lastNonWhitespace === -1
+      ? 0
+      : textToTrim.length - (lastNonWhitespace + 1)
+
+    const [startContainer, startOffset] = findStartExcludingWhitespace({
+      root: this.range.commonAncestorContainer,
+      startContainer: this.range.startContainer,
+      startOffset: this.range.startOffset,
+      whitespacesOnTheLeft
+    })
+    this.range.setStart(startContainer, startOffset)
+
+    const [endContainer, endOffset] = findEndExcludingWhitespace({
+      root: this.range.commonAncestorContainer,
+      endContainer: this.range.endContainer,
+      endOffset: this.range.endOffset,
+      whitespacesOnTheRight
+    })
+    this.range.setEnd(endContainer, endOffset)
   }
 
   unlink () {
@@ -144,6 +165,8 @@ export default class Selection extends Cursor {
 
   // toggle('<em>')
   toggle (elem) {
+    if (block.isPlainTextBlock(this.host)) return
+    if (this.range.collapsed) return
     elem = this.adoptElement(elem)
     this.range = content.toggleTag(this.host, this.range, elem)
     this.setSelection()
@@ -307,6 +330,8 @@ export default class Selection extends Cursor {
   // the same tagName is affecting the selection this tag will be
   // remove first.
   forceWrap (elem) {
+    if (block.isPlainTextBlock(this.host)) return
+    if (this.range.collapsed) return
     elem = this.adoptElement(elem)
     this.range = content.forceWrap(this.host, this.range, elem)
     this.setSelection()

package/src/util/dom.js

@@ -1,3 +1,6 @@
+import NodeIterator from '../node-iterator'
+import {textNode} from '../node-type'
+
 /**
  * @param {HTMLElement | Array | String} target
  * @param {Document} document
@@ -42,3 +45,88 @@ export const closest = (elem, selector) => {
   if (!elem.closest) elem = elem.parentNode
   if (elem && elem.closest) return elem.closest(selector)
 }
+
+export function findStartExcludingWhitespace ({root, startContainer, startOffset, whitespacesOnTheLeft}) {
+  const isTextNode = startContainer.nodeType === textNode
+  if (!isTextNode) {
+    return findStartExcludingWhitespace({
+      root,
+      startContainer: startContainer.childNodes[startOffset],
+      startOffset: 0,
+      whitespacesOnTheLeft
+    })
+  }
+
+  const offsetAfterWhitespace = startOffset + whitespacesOnTheLeft
+  if (startContainer.length > offsetAfterWhitespace) {
+    return [startContainer, offsetAfterWhitespace]
+  }
+
+  // Pass the root so that the iterator can traverse to siblings
+  const iterator = new NodeIterator(root)
+  // Set the position to the node which is selected
+  iterator.nextNode = startContainer
+  // Iterate once to avoid returning self
+  iterator.getNextTextNode()
+
+  const container = iterator.getNextTextNode()
+  if (!container) {
+    // No more text nodes - use the end of the last text node
+    const previousTextNode = iterator.getPreviousTextNode()
+    return [previousTextNode, previousTextNode.length]
+  }
+
+  return findStartExcludingWhitespace({
+    root,
+    startContainer: container,
+    startOffset: 0,
+    whitespacesOnTheLeft: offsetAfterWhitespace - startContainer.length
+  })
+}
+
+export function findEndExcludingWhitespace ({root, endContainer, endOffset, whitespacesOnTheRight}) {
+  const isTextNode = endContainer.nodeType === textNode
+  if (!isTextNode) {
+    const isFirstNode = !endContainer.childNodes[endOffset - 1]
+    const container = isFirstNode
+      ? endContainer.childNodes[endOffset]
+      : endContainer.childNodes[endOffset - 1]
+    let offset = 0
+    if (!isFirstNode) {
+      offset = container.nodeType === textNode
+        ? container.length
+        : container.childNodes.length
+    }
+    return findEndExcludingWhitespace({
+      root,
+      endContainer: container,
+      endOffset: offset,
+      whitespacesOnTheRight
+    })
+  }
+
+  const offsetBeforeWhitespace = endOffset - whitespacesOnTheRight
+  if (offsetBeforeWhitespace > 0) {
+    return [endContainer, offsetBeforeWhitespace]
+  }
+
+  // Pass the root so that the iterator can traverse to siblings
+  const iterator = new NodeIterator(root)
+  // Set the position to the node which is selected
+  iterator.previous = endContainer
+  // Iterate once to avoid returning self
+  iterator.getPreviousTextNode()
+
+  const container = iterator.getPreviousTextNode()
+  if (!container) {
+    // No more text nodes - use the start of the first text node
+    return [iterator.getNextTextNode(), 0]
+  }
+
+  return findEndExcludingWhitespace({
+    root,
+    endContainer: container,
+    endOffset: container.length,
+    whitespacesOnTheRight: whitespacesOnTheRight - endOffset
+  })
+}