@livingdocs/editable.js 3.0.12 → 3.0.15

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.0.12",
+  "version": "3.0.15",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "bowser": "2.11.0",
-    "chai": "^4.3.6",
     "lodash-es": "^4.17.21",
     "rangy": "^1.3.0"
   },
@@ -18,6 +17,7 @@
     "babel-loader": "^8.2.3",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.1.1",
+    "chai": "^4.3.6",
     "css-loader": "^6.5.1",
     "eslint": "^8.8.0",
     "eslint-plugin-react": "^7.28.0",
@@ -83,11 +83,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "c6a519554f759a223875739b9f20d991388a6185",
-    "build": "423",
+    "commit": "cfb72eb34899004520ea0b1d0bd7bb9434681502",
+    "build": "454",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2022-02-01T11:35:53.353Z"
+    "date": "2022-02-23T12:28:23.761Z"
   }
 }

package/src/config.js

@@ -13,22 +13,26 @@ export default {
   boldMarkup: {
     type: 'tag',
     name: 'strong',
-    attribs: {}
+    attribs: {},
+    trim: true
   },
   italicMarkup: {
     type: 'tag',
     name: 'em',
-    attribs: {}
+    attribs: {},
+    trim: true
   },
   underlineMarkup: {
     type: 'tag',
     name: 'u',
-    attribs: {}
+    attribs: {},
+    trim: false
   },
   linkMarkup: {
     type: 'tag',
     name: 'a',
-    attribs: {}
+    attribs: {},
+    trim: true
   },
 
   // Rules that are applied when filtering pasted content

package/src/highlight-text.js

@@ -134,7 +134,7 @@ export default {
 // This has two notable behaviours:
 // - It uses a NodeIterator which will skip elements
 //   with data-editable="remove"
-// - It returns a space for <br> elements
+// - It returns a \n for <br> elements
 //   (The only block level element allowed inside of editables)
 function getText (element, callback) {
   const iterator = new NodeIterator(element)
@@ -143,7 +143,7 @@ function getText (element, callback) {
     if (next.nodeType === nodeType.textNode && next.data !== '') {
       callback(next.data)
     } else if (next.nodeType === nodeType.elementNode && next.nodeName === 'BR') {
-      callback(' ')
+      callback('\n')
     }
   }
 }

package/src/selection.js

@@ -87,9 +87,21 @@ export default class Selection extends Cursor {
         link.setAttribute(key, value)
       }
     }
+    if (config.linkMarkup.trim) this.trimRange()
+
     this.forceWrap(link)
   }
 
+  // trims whitespaces on the left and right of a selection, i.e. what you want in case of links
+  trimRange () {
+    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)
+  }
+
   unlink () {
     this.removeFormatting(config.linkMarkup.name)
   }
@@ -137,43 +149,51 @@ export default class Selection extends Cursor {
     this.setSelection()
   }
 
-  toggleCustom ({tagName, attributes}) {
+  toggleCustom ({tagName, attributes, trim = false}) {
     const customElem = this.createElement(tagName, attributes)
+    if (trim) this.trimRange()
     this.toggle(customElem)
   }
 
-  makeCustom ({tagName, attributes}) {
+  makeCustom ({tagName, attributes, trim = false}) {
     const customElem = this.createElement(tagName, attributes)
+    if (trim) this.trimRange()
     this.forceWrap(customElem)
   }
 
   makeBold () {
     const bold = this.createElement(config.boldMarkup.name, config.boldMarkup.attribs)
+    if (config.boldMarkup.trim) this.trimRange()
     this.forceWrap(bold)
   }
 
   toggleBold () {
     const bold = this.createElement(config.boldMarkup.name, config.boldMarkup.attribs)
+    if (config.boldMarkup.trim) this.trimRange()
     this.toggle(bold)
   }
 
   giveEmphasis () {
     const em = this.createElement(config.italicMarkup.name, config.italicMarkup.attribs)
+    if (config.italicMarkup.trim) this.trimRange()
     this.forceWrap(em)
   }
 
   toggleEmphasis () {
     const em = this.createElement(config.italicMarkup.name, config.italicMarkup.attribs)
+    if (config.italicMarkup.trim) this.trimRange()
     this.toggle(em)
   }
 
   makeUnderline () {
     const u = this.createElement(config.underlineMarkup.name, config.underlineMarkup.attribs)
+    if (config.underlineMarkup.trim) this.trimRange()
     this.forceWrap(u)
   }
 
   toggleUnderline () {
     const u = this.createElement(config.underlineMarkup.name, config.underlineMarkup.attribs)
+    if (config.underlineMarkup.trim) this.trimRange()
     this.toggle(u)
   }