Partially extracted generic backspace handler

Author: Zaydek Michels-Gualtieri

src/Editor/Editor.js

@@ -50,7 +50,7 @@ const Editor = ({ children }) => {
 				domSelection.addRange(domRange)
 			})
 		}, [state, dispatch]),
-		[state.shouldRenderElements],
+		[state.shouldRender],
 	)
 
 	return (

src/Editor/backspace/backspace.js

@@ -0,0 +1,72 @@
+import * as Cursors from "../Cursors"
+import * as Iterators from "../Iterators"
+import * as Spans from "../Spans"
+import dropCursors from "./dropCursors"
+import must from "lib/must"
+
+// Returns the next right-to-left (RTL) cursor for a
+// boundary.
+function nextRTLCursor(elements, { ...rtl }, boundary) {
+	const y = must(elements.findIndex(each => each.key === rtl.key))
+	const substr = Spans.textContent(elements[y].props.children).slice(0, rtl.offset)
+	if (!rtl.offset && y) {
+		Object.assign(rtl, {
+			key: elements[y - 1].key,
+			offset: Spans.textContent(elements[y - 1].props.children).length,
+		})
+		return rtl
+	}
+	const runes = Iterators.RTL[boundary](substr)
+	rtl.offset -= runes.length
+	return rtl
+}
+
+// Returns the next left-to-right (LTR) cursor.
+function nextLTRCursor(elements, { ...ltr }, boundary) {
+	const y = must(elements.findIndex(each => each.key === ltr.key))
+	const substr = Spans.textContent(elements[y].props.children).slice(ltr.offset)
+	if (ltr.offset === substr.length && y + 1 < elements.length) {
+		Object.assign(ltr, {
+			key: elements[y + 1].key,
+			offset: Spans.textContent(elements[y + 1].props.children).length,
+		})
+		return ltr
+	}
+	const runes = Iterators.LTR[boundary](substr)
+	ltr.offset += runes.length
+	return ltr
+}
+
+// Returns the next set of cursors for a direction and a
+// boundary.
+function nextCursors(elements, cursors, dir, boundary) {
+	if (!cursors.collapsed) {
+		return cursors
+	}
+	const next = {}
+	if (dir === "rtl" && dir !== "ltr") {
+		const rtl = nextRTLCursor(elements, cursors[0], boundary)
+		Object.assign(next, {
+			...[rtl, cursors[0]],
+			collapsed: Cursors.areEqual(rtl, cursors[0]),
+		})
+	} else {
+		const ltr = nextLTRCursor(elements, cursors[0], boundary)
+		Object.assign(next, {
+			...[cursors[0], ltr],
+			collapsed: Cursors.areEqual(cursors[0], ltr),
+		})
+	}
+	return next
+}
+
+// Backspace handler. Returns a collapsed set of cursors.
+// dir maps to "rtl" or "ltr" and boundary maps to "rune",
+// "word", or "line".
+function backspace(elements, cursors, dir, boundary) {
+	const next = nextCursors(elements, cursors, dir, boundary)
+	dropCursors(elements, next)
+	return Cursors.collapse(next)
+}
+
+export default backspace

src/Editor/backspace/dropCursors.js

@@ -0,0 +1,56 @@
+import * as Cursors from "../Cursors"
+import * as Spans from "../Spans"
+import must from "lib/must"
+
+// Drops up to n-bytes from an array of spans at an offset.
+// Returns the number of bytes dropped.
+function dropBytes({ spans, offset, nbytes }) {
+	// Compute the span and character offsets (offset):
+	let x = 0
+	for (; x < spans.length; x++) {
+		if (offset - spans[x].props.children.length <= 0) {
+			// No-op
+			break
+		}
+		offset -= spans[x].props.children.length
+	}
+	// Drop up to n-bytes:
+	nbytes = Math.min(nbytes, offset)
+	spans[x].props.children = (
+		spans[x].props.children.slice(0, offset - nbytes) +
+		spans[x].props.children.slice(offset)
+	)
+	if (!spans[x].props.children) {
+		spans.splice(x, 1)
+	}
+	Spans.defer(spans)
+	return nbytes
+}
+
+// Drops bytes between cursors.
+function dropCursors(elements, cursors) {
+	let y = must(elements.findIndex(each => each.key === cursors[1].key))
+	while (!Cursors.areEqual(cursors[0], cursors[1])) {
+		let nbytes = cursors[1].offset - (cursors[0].key === cursors[1].key && cursors[0].offset)
+		if (!nbytes && y) {
+			// Read the current span (for cursors[1].offset):
+			const textContent = Spans.textContent(elements[y - 1].props.children)
+			// Push and defer spans:
+			elements[y - 1].props.children.push(...elements[y].props.children)
+			elements.splice(y, 1)
+			Spans.defer(elements[y - 1].props.children)
+			// Reset cursor[1]:
+			Object.assign(cursors[1], {
+				key: elements[y - 1].key,
+				offset: textContent.length,
+			})
+			y--
+			continue
+		}
+		const ref = { spans: elements[y].props.children, offset: cursors[1].offset, nbytes }
+		nbytes = dropBytes(ref)
+		cursors[1].offset -= nbytes
+	}
+}
+
+export default dropCursors

src/Editor/backspace/index.js

@@ -0,0 +1 @@
+export { default } from "./backspace"