Deprecated plaintext string spans (makes mutating spans harder, because sometimes 2x code is needed to guard all cases). We still need to make sure we combine spans that can be combined so long as their props (ignoring typePos) are not in conflict with each other. An example of this would be href; links are discrete if their hrefs are also discrete.

Author: Zaydek Michels-Gualtieri

src/Editor/Editor.js

@@ -67,15 +67,11 @@ function decorateTypePos(components) {
 function parseSpans(spans) {
 	const components = []
 	for (const span of spans) {
-		if (typeof span === "string") {
-			components.push(span)
+		if (!span.formats.length) {
+			components.push(span.content)
 			continue
 		}
-		const component = {
-			props: {
-				children: {},
-			},
-		}
+		const component = {}
 		let lastRef = component
 		let ref = lastRef
 		for (const format of span.formats.sort()) {
@@ -146,15 +142,21 @@ const Editor = () => {
 					content: "progress ",
 					formats: [formatsEnum.code],
 				},
-				" on making a ",
+				{
+					content: " on making a ",
+					formats: [],
+				},
 				{
 					content: "WYSIWYG",
 					formats: [formatsEnum.anchor],
 					[formatsEnum.anchor]: {
 						href: "https://heroicons.dev",
 					},
 				},
-				" editor.",
+				{
+					content: " editor.",
+					formats: [],
+				},
 			],
 		},
 	])
@@ -186,7 +188,6 @@ const Editor = () => {
 						return
 					}
 					const range = computeRange(state.cursors[0])
-					console.log(range)
 					try {
 						const domRange = document.createRange()
 						domRange.setStart(range.container, range.offset)

src/Editor/spans.js

@@ -1,20 +1,20 @@
 import formatsEnum from "./formatsEnum"
 
 // Reads a span from a DOM node.
-//
-// TODO: Move props to JSON? E.g. data-codex-props="{ ... }"
 function readSpan(domNode) {
-	if (domNode.nodeType === Node.TEXT_NODE) {
-		return domNode.textContent
-	}
 	const span = {
 		content: domNode.textContent,
 		formats: [],
 	}
+	if (domNode.nodeType === Node.TEXT_NODE) {
+		span.content = domNode.textContent
+		return span
+	}
 	let ref = domNode
 	while (ref) {
-		const type = Number(ref.getAttribute("data-codex-type"))
-		if (!isNaN(type)) { // NOTE: "type" can be 0; !isNaN(Number(undefined))
+		const attr = ref.getAttribute("data-codex-type")
+		if (attr) {
+			const type = Number(attr)
 			span.formats.push(type)
 			if (type === formatsEnum.anchor) {
 				span[formatsEnum.anchor] = JSON.parse(ref.getAttribute("data-codex-props"))
@@ -30,15 +30,16 @@ function readSpan(domNode) {
 	return span
 }
 
+// // TODO
+// if (domNode.nodeType === Node.ELEMENT_NODE && domNode.getAttribute("contenteditable") === "false") {
+// 	// No-op
+// 	continue
+// }
+
 // Reads spans from a UUID element.
 export function readSpans(uuidElement) {
 	const spans = []
 	for (const domNode of uuidElement.childNodes) {
-		// // TODO
-		// if (domNode.nodeType === Node.ELEMENT_NODE && domNode.getAttribute("contenteditable") === "false") {
-		// 	// No-op
-		// 	continue
-		// }
 		const span = readSpan(domNode)
 		if (typeof span === "string") {
 			if (spans.length && typeof spans[spans.length - 1] === "string") {

src/Editor/toReact.js

@@ -1,17 +1,9 @@
 import React from "react"
 
-// Returns an array.
-function toArray(value) {
-	if (!Array.isArray(value)) {
-		return [value]
-	}
-	return value
-}
-
 // Converts components to renderable React elements.
 function toReact(components, renderableMap) {
 	const renderable = []
-	for (const component of toArray(components)) {
+	for (const component of [components].flat()) {
 		if (typeof component === "string") {
 			renderable.push(component)
 			continue
@@ -22,9 +14,6 @@ function toReact(components, renderableMap) {
 			...props,
 		}, toReact(props.children, renderableMap)))
 	}
-	if (!renderable.length) {
-		return null
-	}
 	return renderable
 }
 

src/Editor/useEditor.js

@@ -85,22 +85,12 @@ const methods = state => ({
 			if (count > offset) {
 				count = offset
 			}
-			if (typeof uuidElement.spans[x] === "string") {
-				uuidElement.spans[x] = (
-					uuidElement.spans[x].slice(0, offset - count) +
-					uuidElement.spans[x].slice(offset)
-				)
-				if (!uuidElement.spans[x]) {
-					uuidElement.spans.splice(x, 1)
-				}
-			} else {
-				uuidElement.spans[x].content = (
-					uuidElement.spans[x].content.slice(0, offset - count) +
-					uuidElement.spans[x].content.slice(offset)
-				)
-				if (!uuidElement.spans[x].content) {
-					uuidElement.spans.splice(x, 1)
-				}
+			uuidElement.spans[x].content = (
+				uuidElement.spans[x].content.slice(0, offset - count) +
+				uuidElement.spans[x].content.slice(offset)
+			)
+			if (!uuidElement.spans[x].content) {
+				uuidElement.spans.splice(x, 1)
 			}
 			return count
 		}