Updated countBytesToBoundary implementation to not use an ES6 map to compute direction (dir) because Object.entries just maps strings to strings (we want functions to strings)

Author: Zaydek Michels-Gualtieri

src/Editor/Editor.js

@@ -92,6 +92,54 @@ const Editor = () => {
 				},
 			],
 		},
+		{
+			type: Paragraph,
+			uuid: uuidv4(),
+			spans: [
+				{
+					content: "Hey, ",
+					formats: [formatsEnum.strong],
+				},
+				{
+					content: "Russ",
+					formats: [formatsEnum.strong, formatsEnum.emphasis],
+				},
+				{
+					content: "!",
+					formats: [formatsEnum.strong],
+				},
+				{
+					content: " I’m making some ",
+					formats: [formatsEnum.strong],
+				},
+				{
+					content: "progress ",
+					formats: [formatsEnum.code],
+				},
+				{
+					content: " on making a ",
+					formats: [],
+				},
+				{
+					content: "WYSIWYG",
+					formats: [formatsEnum.anchor],
+					[formatsEnum.anchor]: {
+						href: "https://heroicons.dev",
+					},
+				},
+				{
+					content: " editor.",
+					formats: [],
+				},
+				{
+					content: "WYSIWYG",
+					formats: [formatsEnum.anchor],
+					[formatsEnum.anchor]: {
+						href: "https://heroicons.dev",
+					},
+				},
+			],
+		},
 	])
 
 	// TODO (1): Add backspace handlers

src/Editor/spans.js

@@ -51,8 +51,8 @@ function formatsAndPropsAreEqual(spanA, spanB) {
 	return true
 }
 
-// Merges redundant spans (e.g. fragmented).
-export function mergeRedundantSpans(spans) {
+// Merges repeat spans.
+export function mergeRepeatSpans(spans) {
 	for (let x = 0; x < spans.length; x++) {
 		if (x && formatsAndPropsAreEqual(spans[x - 1], spans[x])) {
 			spans.splice(x - 1, 2, {
@@ -70,7 +70,7 @@ export function readSpans(uuidElement) {
 	for (let x = 0; x < uuidElement.childNodes.length; x++) {
 		spans.push(readSpan(uuidElement.childNodes[x]))
 	}
-	mergeRedundantSpans(spans)
+	mergeRepeatSpans(spans)
 	console.log(spans)
 	return spans
 }

src/Editor/useEditor.js

@@ -1,7 +1,7 @@
 import * as iter from "./iter"
 import useMethods from "use-methods"
 import uuidv4 from "uuid/v4"
-import { mergeRedundantSpans } from "./spans"
+import { mergeRepeatSpans } from "./spans"
 import { newCursor } from "./cursors"
 
 // Counts the number of bytes between the cursors.
@@ -74,13 +74,21 @@ const methods = state => ({
 	 */
 	// Counts the number of bytes to a boundary.
 	countBytesToBoundary(state, iterator) {
-		const dir = new Map(Object.entries({
-			[iter.rtl.rune]: "rtl",
-			[iter.rtl.word]: "rtl",
-			[iter.rtl.line]: "rtl",
-			[iter.ltr.rune]: "ltr",
-			[iter.ltr.word]: "ltr",
-		}))[iterator]
+		let dir = ""
+		switch (iterator) {
+		case iter.rtl.rune:
+		case iter.rtl.word:
+		case iter.rtl.line:
+			dir = "rtl"
+			break
+		case iter.ltr.rune:
+		case iter.ltr.word:
+			dir = "ltr"
+			break
+		default:
+			// No-op
+			break
+		}
 		if (!state.cursors.collapsed) {
 			return countBytesBetweenCursors(state)
 		}
@@ -96,6 +104,9 @@ const methods = state => ({
 	removeByteCounts(countL, countR) {
 		// NOTE: Uses state.cursors[1] because of
 		// !state.cursors.collapsed case.
+		//
+		// TODO: Change uuidElement to x so removeByteCounts can
+		// span one or more elements
 		const uuidElement = state.elements.find(each => each.uuid === state.cursors[1].uuid)
 		let offset = state.cursors[1].offset
 
@@ -134,7 +145,8 @@ const methods = state => ({
 			}
 		}
 
-		mergeRedundantSpans(uuidElement.spans)
+		// TODO: We need to merge *many* uuidElement.spans
+		mergeRepeatSpans(uuidElement.spans)
 
 		if (state.cursors.collapsed) {
 			state.cursors[0].offset -= decremented
@@ -143,24 +155,24 @@ const methods = state => ({
 
 	},
 	backspaceRune() {
-		const count = this.countBytesToBoundary(state, iter.rtl.rune)
-		this.removeByteCounts(count, 0)
+		const countL = this.countBytesToBoundary(state, iter.rtl.rune)
+		this.removeByteCounts(countL, 0)
 	},
 	backspaceWord() {
-		const count = this.countBytesToBoundary(state, iter.rtl.word)
-		this.removeByteCounts(count, 0)
+		const countL = this.countBytesToBoundary(state, iter.rtl.word)
+		this.removeByteCounts(countL, 0)
 	},
 	backspaceParagraph() {
-		const count = this.countBytesToBoundary(state, iter.rtl.line)
-		this.removeByteCounts(count, 0)
+		const countL = this.countBytesToBoundary(state, iter.rtl.line)
+		this.removeByteCounts(countL, 0)
 	},
 	forwardBackspaceRune() {
-		const count = this.countBytesToBoundary(state, iter.ltr.rune)
-		this.removeByteCounts(0, count)
+		const countR = this.countBytesToBoundary(state, iter.ltr.rune)
+		this.removeByteCounts(0, countR)
 	},
 	forwardBackspaceWord() {
-		const count = this.countBytesToBoundary(state, iter.ltr.word)
-		this.removeByteCounts(0, count)
+		const countR = this.countBytesToBoundary(state, iter.ltr.word)
+		this.removeByteCounts(0, countR)
 	},
 	/*
 	 * Input