Integrated SemanticScanner and revised decorator

Author: Zaydek Michels-Gualtieri

src/Editor/TODO/index.js

@@ -1,9 +1,9 @@
 import * as Readers from "../Readers"
 import decorate from "../decorate"
 import methods from "./methods"
+import parseTree from "lib/parseTree"
 import React from "react"
 import ReactDOMServer from "react-dom/server"
-import renderMarkupTree from "lib/renderMarkupTree"
 import useMethods from "use-methods"
 
 // // TODO
@@ -49,10 +49,10 @@ function useEditor({ markup, children }) {
 		}
 		let domTree = null
 		if (markup !== undefined) {
-			domTree = renderMarkupTree("<div>" + markup + "</div>")
+			domTree = parseTree("<div>" + markup + "</div>")
 		} else if (children !== undefined) {
 			const markup = ReactDOMServer.renderToStaticMarkup(children) // Shadows markup
-			domTree = renderMarkupTree("<div>" + markup + "</div>")
+			domTree = parseTree("<div>" + markup + "</div>")
 		}
 		decorate(domTree)
 		return Readers.semantic.elements(domTree)

src/Editor/components/components.js

@@ -1,7 +1,7 @@
 import deeplySyncTrees from "../utils/deeplySyncTrees"
+import parseTree from "lib/parseTree"
 import React from "react"
 import ReactDOMServer from "react-dom/server"
-import renderMarkupTree from "lib/renderMarkupTree"
 import T from "./T"
 import toReact from "./toReact"
 import types from "../types"
@@ -17,12 +17,12 @@ const Node = ({ id, style, children, ...props }) => {
 		// NOTE: Uses ReactDOMServer.renderToStaticMarkup
 		// because ReactDOM.render is asynchronous.
 		const markup = ReactDOMServer.renderToStaticMarkup(children)
-		const domTree = renderMarkupTree("<div>" + markup + "</div>")
+		const tree = parseTree("<div>" + markup + "</div>")
 
 		// ;[...ref.current.childNodes].reverse().map(each => each.remove())
-		// ref.current.append(...domTree.childNodes)
+		// ref.current.append(...tree.childNodes)
 
-		deeplySyncTrees(domTree, ref.current)
+		deeplySyncTrees(tree, ref.current)
 	}, [children])
 
 	return (

src/Editor/decorate.js

@@ -1,5 +1,8 @@
-import Editor from "./model/Editor"
+import decorator from "./utils/decorator"
+import Editor from "./model/Editor/Editor"
+import parseTree from "lib/parseTree"
 import React from "react"
+import SemanticScanner from "./model/Scanners/SemanticScanner"
 
 function EditorReducer(state, action) {
 	switch (action.type) {
@@ -20,8 +23,9 @@ function EditorReducer(state, action) {
 
 function useEditor(html) {
 	const initialState = React.useMemo(() => {
-		const r = new HTMLReader().read(html)
-		const elements = r.read(html)
+		const tree = parseTree("<div>" + html.trim() + "</div>", decorator)
+		const scanner = new SemanticScanner()
+		const elements = scanner.scan(tree)
 		return new Editor(elements)
 	}, [html])
 	return React.useReducer(EditorReducer, initialState)

src/Editor/useEditor.js

@@ -0,0 +1,32 @@
+import domUtils from "lib/domUtils"
+
+// Decorates a tree; removes extraneous tabs and EOLs.
+//
+// ^                      - BOF
+//   \n                   - EOL
+//   \t{depth}            - $depth tabs
+// |                      - OR
+//   \n                   - EOL
+//   \t{depth - 1, depth} - $depth - 1 to $depth tabs
+// $                      - EOF
+//
+function decorator(tree) {
+	const recurse = (on, depth = -1) => {
+		if (domUtils.isTextNode(on)) {
+			const tabsRe = new RegExp(`^\\n\\t{${depth}}|\\n\\t{${Math.max(0, depth - 1)},${depth}}?$`, "g")
+			on.nodeValue = on.nodeValue.replace(tabsRe, "")
+			if (!on.nodeValue) {
+				on.remove()
+			}
+			return
+		}
+		// NOTE: Uses reverse because of remove.
+		for (const each of [...on.childNodes].reverse()) {
+			recurse(each, depth + 1)
+		}
+	}
+	recurse(tree)
+	return tree
+}
+
+export default decorator

src/Editor/utils/decorator.js

@@ -0,0 +1,12 @@
+// Parses markup to a tree. A decorator can be used to
+// decorate the parsed tree.
+function parseTree(markup, decorator = null) {
+	const doc = new DOMParser().parseFromString(markup, "text/html")
+	const tree = doc.body.childNodes[0]
+	if (decorator) {
+		decorator(tree)
+	}
+	return tree
+}
+
+export default parseTree