@livingdocs/editable.js 3.0.13 → 3.0.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livingdocs/editable.js",
   "description": "Friendly contenteditable API",
-  "version": "3.0.13",
+  "version": "3.0.16",
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "bowser": "2.11.0",
@@ -83,11 +83,11 @@
     "isCi": true,
     "name": "Drone",
     "service": "drone",
-    "commit": "4447c61e9237a173cb2513cb00e3d620a7c0e26c",
-    "build": "429",
+    "commit": "85752c5c2a4de6108413bc50b0433086ce0d0435",
+    "build": "469",
     "branch": "master",
     "isPr": false,
     "slug": "livingdocsIO/editable.js",
-    "date": "2022-02-01T12:17:05.512Z"
+    "date": "2022-03-15T10:07:49.382Z"
   }
 }

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/dispatcher.js

@@ -5,6 +5,7 @@ import SelectionWatcher from './selection-watcher'
 import config from './config'
 import Keyboard from './keyboard'
 import {closest} from './util/dom'
+import {replaceLast, endsWithSingleSpace} from './util/string'
 
 // This will be set to true once we detect the input event is working.
 // Input event description on MDN:
@@ -134,7 +135,12 @@ export default class Dispatcher {
 
         const {blocks, cursor} = clipboard.paste(block, selection, clipboardContent)
         if (blocks.length) {
-          this.notify('paste', block, blocks, cursor)
+          if (endsWithSingleSpace(evt.target.innerText)) {
+            block.innerHTML = replaceLast(block.innerHTML, ' ', ' ')
+            this.notify('paste', block, blocks, this.editable.createCursorAtEnd(block))
+          } else {
+            this.notify('paste', block, blocks, cursor)
+          }
 
           // The input event does not fire when we process the content manually
           // and insert it via script

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

package/src/util/string.js

@@ -61,3 +61,21 @@ export function browserEscapeHtml (str) {
   div.appendChild(document.createTextNode(str))
   return div.innerHTML
 }
+
+export function replaceLast (text, searchValue, replaceValue) {
+  if (!text) return ''
+  text = `${text}`
+  if (!searchValue || replaceValue == null) return text
+  const lastOccurrenceIndex = text.lastIndexOf(searchValue)
+  return `${
+    text.slice(0, lastOccurrenceIndex)
+  }${
+    replaceValue
+  }${
+    text.slice(lastOccurrenceIndex + searchValue.length)
+  }`
+}
+
+export function endsWithSingleSpace (text) {
+  return /\S+\s{1}$/.test(text)
+}