diff --git a/lib/models/state.js b/lib/models/state.js index 994ff69ed..70ff2063c 100644 --- a/lib/models/state.js +++ b/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 diff --git a/lib/models/transforms.js b/lib/models/transforms.js index 14e8346e3..3982a0b88 100644 --- a/lib/models/transforms.js +++ b/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) diff --git a/lib/plugins/core.js b/lib/plugins/core.js index c4a3e2d9c..997a46c1c 100644 --- a/lib/plugins/core.js +++ b/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': { diff --git a/lib/utils/key.js b/lib/utils/key.js index 7a757ed3d..7338e07b7 100644 --- a/lib/utils/key.js +++ b/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, diff --git a/lib/utils/string.js b/lib/utils/string.js new file mode 100644 index 000000000..f1149cc20 --- /dev/null +++ b/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 +} diff --git a/package.json b/package.json index c3e307dd7..71ba1c627 100644 --- a/package.json +++ b/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" },