Comments

Author: Zaydek Michels-Gualtieri

src/Editor/Editor.js

@@ -23,6 +23,7 @@ const Editor = ({ html }) => {
 	const pointerdownRef = React.useRef(false)
 
 	const [state, dispatch] = useEditor(html)
+	console.log(state)
 
 	// // Disables read-only mode on DOMContentLoaded.
 	// const DOMContentLoaded = useDOMContentLoaded()

src/Editor/components/toReact.js

@@ -3,13 +3,6 @@ import toArray from "lib/toArray"
 import toTree from "./toTree"
 import types from "../types"
 
-// // Describes an array of inline elements.
-// class InlineElements extends Array {
-// 	// Converts to intermediary React elements.
-// 	toIntermediaryReact() {
-// 		// ...
-// 	}
-//
 // 	// Converts to React elements. Uses an intermediary step
 // 	// because React elements are read-only.
 // 	toReact() {
@@ -22,8 +15,6 @@ import types from "../types"
 // 		// ...
 // 	}
 // }
-//
-// export default InlineElements
 
 // Converts intermediary tree data structure to renderable
 // React elements.

src/Editor/model/Editor/VirtualElement.js

@@ -14,7 +14,7 @@ class VirtualElement {
 	constructor({ type, key, props } = {}) {
 		Object.assign(this, {
 			type: type || "",
-			key: key || hash(),
+			key: key || hash(6),
 			props: props || {
 				children: [],
 			},

src/Editor/model/Editor/VirtualMultilineElement.js

@@ -14,7 +14,7 @@ class VirtualMultilineElement {
 	constructor({ type, key, props } = {}) {
 		Object.assign(this, {
 			type: type || "",
-			key: key || hash(),
+			key: key || hash(6),
 			props: props || {
 				elements: [],
 			},

src/Editor/model/Scanners/AbstractScanner.js

@@ -4,12 +4,12 @@ import VirtualElement from "../Editor/VirtualElement"
 import VirtualInlineElement from "../Editor/VirtualInlineElement"
 
 // Describes an abstract scanner; a scanner implements scan
-// to scan virtual elements and inline elements.
+// to scan virtual elements and children.
 class AbstractScanner {
 	// Scans types and props.
 	scanner = null
 
-	// Scans virtual inline elements from an element.
+	// Scans virtual children from an element.
 	scanChildren(element) {
 		const children = []
 		const recurse = (on, types = [], props = {}) => {

src/Editor/utils/defer.js

@@ -0,0 +1,45 @@
+import areEqualJSON from "lib/areEqualJSON"
+import must from "lib/must"
+import omitKeys from "lib/omitKeys"
+import { sortedTypeMap } from "../components/typeMaps"
+
+// Compares whether spans are equal (omits props.children).
+function areEqualTypesAndProps(span1, span2) {
+	const ok = (
+		areEqualJSON(span1.types, span2.types) &&
+		areEqualJSON(omitKeys(span1.props, "children"), omitKeys(span2.props, "children"))
+	)
+	return ok
+}
+
+// Merges fragmented spans; spans must share equal types and
+// props to be merged.
+function merge(spans) {
+	for (let x = 0; x < spans.length; x++) {
+		if (x && areEqualTypesAndProps(spans[x - 1], spans[x])) {
+			spans.splice(x - 1, 2, {
+				...spans[x - 1],
+				props: {
+					...spans[x - 1].props,
+					children: spans[x - 1].props.children + spans[x].props.children,
+				},
+			})
+			continue
+		}
+	}
+	return spans
+}
+
+// Compares span types based on render precedence.
+function compareTypes(T1, T2) {
+	const x1 = must(sortedTypeMap[T1])
+	const x2 = must(sortedTypeMap[T2])
+	return x1 - x2
+}
+
+function defer(spans) {
+	merge(spans)
+	spans.map(each => each.types.sort(compareTypes))
+}
+
+export default defer