Fixed a bug preventing selecting and or inserting on a lone break node e.g. <p id="..."><br></p>. Note this may need to be compatibility patched for Firefox because we can’t have nice things.

Author: Zaydek Michels-Gualtieri

src/Editor/Editor.js

@@ -8,7 +8,7 @@ import toReact from "./toReact"
 import useEditor from "./useEditor"
 import uuidv4 from "uuid/v4"
 import { computeCursors } from "./cursors"
-import { computeRanges } from "./ranges"
+import { computeRange } from "./ranges"
 import { readSpans } from "./spans"
 
 import {
@@ -185,17 +185,13 @@ const Editor = () => {
 						// No-op
 						return
 					}
-					const ranges = computeRanges(state.cursors)
+					const range = computeRange(state.cursors[0])
+					console.log(range)
 					try {
-						const range = document.createRange()
-						range.setStart(ranges[0].container, ranges[0].offset)
-						if (state.cursors.collapsed) {
-							range.collapse()
-						} else {
-							range.setEnd(ranges[1].container, ranges[1].offset)
-						}
-						// selection.removeAllRanges()
-						selection.addRange(range)
+						const domRange = document.createRange()
+						domRange.setStart(range.container, range.offset)
+						domRange.collapse()
+						selection.addRange(domRange)
 					} catch (error) {
 						console.error(error)
 					}

src/Editor/ranges.js

@@ -1,23 +1,32 @@
 // Creates a new range.
 export function newRange() {
 	const range = {
-		container: 0,
+		container: null,
 		offset: 0,
 	}
 	return range
 }
 
+// Returns whether a DOM node is a text node or a break
+// element.
+function isTextNodeOrBreakElement(domNode) {
+	const ok = (
+		domNode.nodeType === Node.TEXT_NODE ||
+		(domNode.nodeType === Node.ELEMENT_NODE && domNode.nodeName === "BR")
+	)
+	return ok
+}
+
 // Computes a range from a cursor.
-function computeRange({ uuid, offset }) { // NOTE: Copy offset -- do not mutate reference
+export function computeRange({ uuid, offset }) { // NOTE: Copy offset -- do not mutate reference
 	const range = newRange()
 	const uuidElement = document.getElementById(uuid)
 	if (!uuidElement) {
 		throw new Error("computeRange: no such uuid element")
 	}
 	// Recurses on a DOM node, mutates range.
 	const recurse = startDOMNode => {
-		// TODO: if (pos - (on.nodeValue || "").length <= 0) {
-		if (startDOMNode.nodeType === Node.TEXT_NODE && offset - startDOMNode.textContent.length <= 0) {
+		if (isTextNodeOrBreakElement(startDOMNode) && offset - startDOMNode.textContent.length <= 0) {
 			Object.assign(range, {
 				container: startDOMNode,
 				offset,
@@ -39,15 +48,3 @@ function computeRange({ uuid, offset }) { // NOTE: Copy offset -- do not mutate
 	recurse(uuidElement)
 	return range
 }
-
-// Computes ranges from cursors.
-export function computeRanges(cursors) {
-	const ranges = []
-	ranges.push(computeRange(cursors[0]))
-	if (cursors.collapsed) {
-		ranges.push(ranges[0])
-	} else {
-		ranges.push(computeRange(cursors[1]))
-	}
-	return ranges
-}