Added formatsAndPropsAreEqual so spans can be combined -- works with onInput but needs to be integrated with synthetic handlers like backspace, etc.

Author: Zaydek Michels-Gualtieri

src/Editor/Editor.js

@@ -48,41 +48,48 @@ 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: "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",
+					},
+				},
 			],
 		},
 	])

src/Editor/ReactRenderer.js

@@ -30,15 +30,15 @@ function decoratePos(elements) {
 		}
 		const [types1, typeMap1] = computeTypeInfo(elements[x - 1])
 		const [types2, typeMap2] = computeTypeInfo(elements[x])
-		const common = types1.filter(a => types2.some(b => a === b))
-		for (const type of common) {
+		const typesInCommon = types1.filter(a => types2.some(b => a === b))
+		for (const type of typesInCommon) {
 			typeMap1[type].props.pos = !typeMap1[type].props.pos ? "at-start" : "at-center"
 			typeMap2[type].props.pos = "at-end"
 		}
 	}
 }
 
-// Parses pseudo-React elements from spans.
+// Parses spans to pseudo-React elements.
 function parseSpans(spans) {
 	const elements = []
 	for (const span of spans) {

src/Editor/spans.js

@@ -36,16 +36,29 @@ function readSpan(domNode) {
 // 	continue
 // }
 
+// Returns whether two spans’ formats and props are equal.
+function formatsAndPropsAreEqual(spanA, spanB) {
+	if (spanA.formats.length !== spanB.formats.length) {
+		return false
+	}
+	for (let x = 0; x < spanA.formats.length; x++) {
+		if (spanA.formats[x] !== spanB.formats[x]) {
+			return false
+		} else if (JSON.stringify(spanA[spanA.formats[x]]) !== JSON.stringify(spanB[spanB.formats[x]])) {
+			return false
+		}
+	}
+	return true
+}
+
 // Reads spans from a UUID element.
 export function readSpans(uuidElement) {
 	const spans = []
-	for (const domNode of uuidElement.childNodes) {
-		const span = readSpan(domNode)
-		if (typeof span === "string") {
-			if (spans.length && typeof spans[spans.length - 1] === "string") {
-				spans[spans.length - 1] += span
-				continue
-			}
+	for (let x = 0; x < uuidElement.childNodes.length; x++) {
+		const span = readSpan(uuidElement.childNodes[x])
+		if (x && formatsAndPropsAreEqual(spans[spans.length - 1], span)) {
+			spans[spans.length - 1].content += span.content
+			continue
 		}
 		spans.push(span)
 	}