@livingdocs/editable.js 3.1.7 → 3.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.1.7",
+  "version": "3.2.0",
   "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",
@@ -83,11 +82,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "faeb13de973b3fcbaca1c38da4d8efc7b138565d",
-    "build": "900",
+    "commit": "82a67b054b04e557628b02fa4a1e9f5d605eae19",
+    "build": "1218",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2023-03-10T10:06:35.613Z"
+    "date": "2023-09-19T06:19:31.745Z"
   }
 }

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,6 +3,7 @@ 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'
@@ -144,6 +145,7 @@ export default class Selection extends Cursor {
 
   // toggle('<em>')
   toggle (elem) {
+    if (block.isPlainTextBlock(this.host)) return
     elem = this.adoptElement(elem)
     this.range = content.toggleTag(this.host, this.range, elem)
     this.setSelection()
@@ -307,6 +309,7 @@ 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
     elem = this.adoptElement(elem)
     this.range = content.forceWrap(this.host, this.range, elem)
     this.setSelection()