adds ability to delete in word or line increments, fixes #80

lib/models/state.js

@@ -573,7 +573,7 @@ class State extends new Record(DEFAULTS) {
     }
 
     // Delete backward and then update the selection.
-    document = document.deleteBackwardAtRange(selection)
+    document = document.deleteBackwardAtRange(selection, n)
     selection = after
     state = state.merge({ document, selection })
     return state
@@ -609,7 +609,7 @@ class State extends new Record(DEFAULTS) {
     }
 
     // Delete forward and then update the selection.
-    document = document.deleteForwardAtRange(selection)
+    document = document.deleteForwardAtRange(selection, n)
     selection = after
     state = state.merge({ document, selection })
     return state

lib/models/transforms.js

@@ -97,7 +97,7 @@ const Transforms = {
 
   deleteBackwardAtRange(range, n = 1) {
     let node = this
-    const { startKey } = range
+    const { startKey, startOffset } = range
 
     // When the range is still expanded, just do a regular delete.
     if (range.isExpanded) return node.deleteAtRange(range)

lib/plugins/core.js

@@ -4,6 +4,7 @@ import Placeholder from '../components/placeholder'
 import React from 'react'
 import keycode from 'keycode'
 import { IS_WINDOWS, IS_MAC } from '../utils/environment'
+import { getWordOffsetBackward, getWordOffsetForward } from '../utils/string'
 
 /**
  * The default plugin.
@@ -154,15 +155,33 @@ function Plugin(options = {}) {
         }
 
         case 'backspace': {
-          return Key.isWord(e)
-            ? transform.backspaceWord().apply()
-            : transform.deleteBackward().apply()
+          if (state.isExpanded) return transform.delete().apply()
+
+          let n
+          if (Key.isWord(e)) {
+            n = getWordOffsetBackward(state.startBlock.text, state.startOffset)
+          } else if (Key.isLine(e)) {
+            n = state.startOffset
+          } else {
+            n = 1
+          }
+
+          return transform.deleteBackward(n).apply()
         }
 
         case 'delete': {
-          return Key.isWord(e)
-            ? transform.deleteWord().apply()
-            : transform.deleteForward().apply()
+          if (state.isExpanded) return transform.delete().apply()
+
+          let n
+          if (Key.isWord(e)) {
+            n = getWordOffsetForward(state.startBlock.text, state.startOffset)
+          } else if (Key.isLine(e)) {
+            n = state.startBlock.text.length - state.startOffset
+          } else {
+            n = 1
+          }
+
+          return transform.deleteForward(n).apply()
         }
 
         case 'up': {

lib/utils/key.js

@@ -36,6 +36,19 @@ function isCtrl(e) {
   return e.ctrlKey && !e.altKey
 }
 
+/**
+ * Does an `e` have the line-level modifier?
+ *
+ * @param {Event} e
+ * @return {Boolean}
+ */
+
+function isLine(e) {
+  return IS_MAC
+    ? e.metaKey
+    : false
+}
+
 /**
  * Does an `e` have the Mac command modifier?
  *
@@ -101,6 +114,7 @@ export default {
   isAlt,
   isCommand,
   isCtrl,
+  isLine,
   isMacCommand,
   isOption,
   isShift,

lib/utils/string.js

@@ -0,0 +1,172 @@
+
+import { reverse } from 'esrever'
+
+/**
+ * Surrogate pair start and end points.
+ *
+ * @type {Number}
+ */
+
+const SURROGATE_START = 0xD800
+const SURROGATE_END = 0xDFFF
+
+/**
+ * A regex to match space characters.
+ *
+ * @type {RegExp}
+ */
+
+const SPACE = /\s/
+
+/**
+ * A regex to match chameleon characters, that count as word characters as long
+ * as they are inside of a word.
+ *
+ * @type {RegExp}
+ */
+
+const CHAMELEON = /['\u2018\u2019]/
+
+/**
+ * A regex that matches punctuation.
+ *
+ * @type {RegExp}
+ */
+
+const PUNCTUATION = /[\u0021-\u0023\u0025-\u002A\u002C-\u002F\u003A\u003B\u003F\u0040\u005B-\u005D\u005F\u007B\u007D\u00A1\u00A7\u00AB\u00B6\u00B7\u00BB\u00BF\u037E\u0387\u055A-\u055F\u0589\u058A\u05BE\u05C0\u05C3\u05C6\u05F3\u05F4\u0609\u060A\u060C\u060D\u061B\u061E\u061F\u066A-\u066D\u06D4\u0700-\u070D\u07F7-\u07F9\u0830-\u083E\u085E\u0964\u0965\u0970\u0AF0\u0DF4\u0E4F\u0E5A\u0E5B\u0F04-\u0F12\u0F14\u0F3A-\u0F3D\u0F85\u0FD0-\u0FD4\u0FD9\u0FDA\u104A-\u104F\u10FB\u1360-\u1368\u1400\u166D\u166E\u169B\u169C\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DA\u1800-\u180A\u1944\u1945\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B60\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\u2010-\u2027\u2030-\u2043\u2045-\u2051\u2053-\u205E\u207D\u207E\u208D\u208E\u2329\u232A\u2768-\u2775\u27C5\u27C6\u27E6-\u27EF\u2983-\u2998\u29D8-\u29DB\u29FC\u29FD\u2CF9-\u2CFC\u2CFE\u2CFF\u2D70\u2E00-\u2E2E\u2E30-\u2E3B\u3001-\u3003\u3008-\u3011\u3014-\u301F\u3030\u303D\u30A0\u30FB\uA4FE\uA4FF\uA60D-\uA60F\uA673\uA67E\uA6F2-\uA6F7\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAADE\uAADF\uAAF0\uAAF1\uABEB\uFD3E\uFD3F\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE61\uFE63\uFE68\uFE6A\uFE6B\uFF01-\uFF03\uFF05-\uFF0A\uFF0C-\uFF0F\uFF1A\uFF1B\uFF1F\uFF20\uFF3B-\uFF3D\uFF3F\uFF5B\uFF5D\uFF5F-\uFF65]/
+
+/**
+ * Is a character `code` in a surrogate character.
+ *
+ * @param {Number} code
+ * @return {Boolean}
+ */
+
+function isSurrogate(code) {
+  return SURROGATE_START <= code && code <= SURROGATE_END
+}
+
+/**
+ * Is a character a word character? Needs the `remaining` characters too.
+ *
+ * @param {String} char
+ * @param {String || Void} remaining
+ * @return {Boolean}
+ */
+
+function isWord(char, remaining) {
+  if (SPACE.test(char)) return false
+
+  // If it's a chameleon character, recurse to see if the next one is or not.
+  if (CHAMELEON.test(char)) {
+    const next = remaining.charAt(0)
+    const length = getCharacterLength(next)
+    const rest = remaining.slice(length)
+    if (isWord(next, rest)) return true
+  }
+
+  if (PUNCTUATION.test(char)) return false
+  return true
+}
+
+/**
+ * Get the length of a `character`.
+ *
+ * @param {String} char
+ * @return {Number}
+ */
+
+function getCharacterLength(char) {
+  return isSurrogate(char.charCodeAt(0))
+    ? 2
+    : 1
+}
+
+/**
+ * Get the length of a `string`.
+ *
+ * @param {String} string
+ * @return {Number}
+ */
+
+function getLength(string) {
+  let length = 0
+
+  for (
+    let i = 0, char = string.charAt(i);
+    i < string.length;
+    i += getCharacterLength(char)
+  ) {
+    length++
+  }
+
+  return length
+}
+
+/**
+ * Get the offset at the end of the word before an `offset` in `text`.
+ *
+ * @param {String} text
+ * @param {Number} offset
+ * @return {Number}
+ */
+
+function getWordOffsetBackward(text, offset) {
+  text = text.slice(0, offset)
+  text = reverse(text)
+  return getWordOffset(text)
+}
+
+/**
+ * Get the offset at the end of the word after an `offset` in `text`.
+ *
+ * @param {String} text
+ * @param {Number} offset
+ * @return {Number}
+ */
+
+function getWordOffsetForward(text, offset) {
+  text = text.slice(offset)
+  return getWordOffset(text)
+}
+
+/**
+ * Get the offset at the end of the first word in `text`.
+ *
+ * @param {String} text
+ * @return {Number}
+ */
+
+function getWordOffset(text) {
+  let length = 0
+  let i = 0
+  let started = false
+  let char
+
+  while (char = text.charAt(i)) {
+    const l = getCharacterLength(char)
+    const rest = text.slice(i + l)
+
+    if (isWord(char, rest)) {
+      started = true
+      length++
+    } else if (!started) {
+      length++
+    } else {
+      break
+    }
+
+    i += l
+  }
+
+  return length
+}
+
+/**
+ * Export.
+ */
+
+export {
+  getWordOffsetBackward,
+  getWordOffsetForward
+}

package.json

@@ -12,10 +12,12 @@
   "dependencies": {
     "cheerio": "^0.20.0",
     "detect-browser": "^1.3.3",
+    "esrever": "^0.2.0",
     "immutable": "^3.8.1",
     "keycode": "^2.1.2",
     "lodash": "^4.13.1",
     "react-portal": "^2.2.0",
+    "reverse-string": "0.0.6",
     "ua-parser-js": "^0.7.10",
     "uid": "0.0.2"
   },