Reworked resolvers implementation

Author: Zaydek Michels-Gualtieri

src/EditorApp/DispatchContext.js renamed to src/EditorApp/ContextDispatch.js

@@ -1,9 +1,9 @@
+import ContextDispatch from "./ContextDispatch"
+import ContextPrefsDispatch from "./ContextPrefsDispatch"
 import ctrlOrCmd from "lib/Client/ctrlOrCmd"
-import DispatchContext from "./DispatchContext"
 import keyCodeFor from "lib/Client/keyCodeFor"
 import MemoFixedBottomWYSIWYGMenu from "./MemoFixedBottomWYSIWYGMenu"
 import MemoFixedTopPreferences from "./MemoFixedTopPreferences"
-import PrefsDispatchContext from "./PrefsDispatchContext"
 import React from "react"
 import useKeydown from "lib/x/handlers/useKeydown"
 import usePreferences from "./usePreferences"
@@ -83,8 +83,8 @@ const App = () => {
 	})
 
 	return (
-		<DispatchContext.Provider value={dispatch}>
-			<PrefsDispatchContext.Provider value={prefsDispatch}>
+		<ContextDispatch.Provider value={dispatch}>
+			<ContextPrefsDispatch.Provider value={prefsDispatch}>
 
 				<div className="px-6 py-32 flex flex-row justify-center h-full">
 					<div className="w-full max-w-2xl h-full">
@@ -134,8 +134,8 @@ const App = () => {
 					</div>
 				</div>
 
-			</PrefsDispatchContext.Provider>
-		</DispatchContext.Provider>
+			</ContextPrefsDispatch.Provider>
+		</ContextDispatch.Provider>
 	)
 }
 

src/EditorApp/PrefsDispatchContext.js renamed to src/EditorApp/ContextPrefsDispatch.js

@@ -1,10 +1,10 @@
-import DispatchContext from "../DispatchContext"
+import ContextDispatch from "../ContextDispatch"
 import React from "react"
 import userAgent from "lib/Client/userAgent"
 import { TopTooltip as Tooltip } from "../Tooltips"
 
 const WYSIWYGMenu = ({ rangeTypes }) => {
-	const dispatch = React.useContext(DispatchContext)
+	const dispatch = React.useContext(ContextDispatch)
 
 	const [tooltip, setTooltip] = React.useState("")
 

src/EditorApp/EditorApp.js

@@ -1,5 +1,5 @@
+import ContextPrefsDispatch from "../ContextPrefsDispatch"
 import MemoHighlight from "lib/PrismJS/MemoHighlight"
-import PrefsDispatchContext from "../PrefsDispatchContext"
 import React from "react"
 import Releases from "./Releases"
 import tabSize from "lib/x/tabSize"
@@ -11,7 +11,7 @@ import {
 } from "../Tooltips"
 
 const MemoFixedTopPreferences = React.memo(({ prefs }) => {
-	const dispatch = React.useContext(PrefsDispatchContext)
+	const dispatch = React.useContext(ContextPrefsDispatch)
 
 	const [tooltip, setTooltip] = React.useState("")
 

src/EditorApp/MemoFixedBottomWYSIWYGMenu/WYSIWYGMenu.js

@@ -0,0 +1 @@
+export { default } from "./usePreferences"

src/EditorApp/MemoFixedTopPreferences/MemoFixedTopPreferences.js

@@ -0,0 +1,86 @@
+import escape from "lodash/escape"
+import toArray from "lib/x/toArray"
+import toTree from "Editor/components/toReactTree/toTree"
+
+const markdown = {
+	em:     element => `_${toText(element.props.children, markdown)}_`,
+	strong: element => `**${toText(element.props.children, markdown)}**`,
+	code:   element => `\`${text(element.props.children)}\``,
+	strike: element => `~~${toText(element.props.children, markdown)}~~`,
+	a:      element => `[${toText(element.props.children, markdown)}](${element.props.href || "TODO"})`,
+	"h1":   element => `# ${toText(toTree(element.props.children, markdown))}`,
+	"h2":   element => `## ${toText(toTree(element.props.children, markdown))}`,
+	"h3":   element => `### ${toText(toTree(element.props.children, markdown))}`,
+	"h4":   element => `#### ${toText(toTree(element.props.children, markdown))}`,
+	"h5":   element => `##### ${toText(toTree(element.props.children, markdown))}`,
+	"h6":   element => `###### ${toText(toTree(element.props.children, markdown))}`,
+	"p":    element => toText(toTree(element.props.children), markdown),
+}
+
+const markup = {
+	em:     element => `<em>${toText(element.props.children, markup)}</em>`,
+	strong: element => `<strong>${toText(element.props.children, markup)}</strong>`,
+	code:   element => `<code>${toText(element.props.children, markup)}</code>`,
+	strike: element => `<strike>${toText(element.props.children, markup)}</strike>`,
+	a:      element => `<a href="${element.props.href}">${toText(element.props.children, markup)}</a>`,
+	"h1":   element => `<h1>\n\t${toText(toTree(element.props.children), markup) || "<br />"}\n</h1>`,
+	"h2":   element => `<h2>\n\t${toText(toTree(element.props.children), markup) || "<br />"}\n</h2>`,
+	"h3":   element => `<h3>\n\t${toText(toTree(element.props.children), markup) || "<br />"}\n</h3>`,
+	"h4":   element => `<h4>\n\t${toText(toTree(element.props.children), markup) || "<br />"}\n</h4>`,
+	"h5":   element => `<h5>\n\t${toText(toTree(element.props.children), markup) || "<br />"}\n</h5>`,
+	"h6":   element => `<h6>\n\t${toText(toTree(element.props.children), markup) || "<br />"}\n</h6>`,
+	"p":    element => `<p>\n\t${toText(toTree(element.props.children), markup) || "<br />"}\n</p>`,
+}
+
+// Reads text from tree-shaped text nodes. Does not use a
+// resolver-type.
+function text(treeTextNodes) {
+	let str = ""
+	for (const each of toArray(treeTextNodes)) {
+		if (typeof each === "string") {
+			str += each
+			continue
+		}
+		str += each.props.children &&
+			text(each.props.children)
+	}
+	return str
+}
+
+// Reads text from non-tree-shaped text nodes and a
+// resolver-type.
+function toText(children, resolver) {
+	let str = ""
+	for (const each of toArray(children)) {
+		if (typeof each === "string") {
+			str += resolver !== markup ? each : escape(each)
+			continue
+		}
+		str += resolver[each.type](each)
+	}
+	return str
+}
+
+// Converts to GFM.
+export function toMarkdown(elements) {
+	let str = ""
+	for (const each of elements) {
+		str += markdown[each.type](each)
+		if (each !== elements[elements.length - 1]) {
+			str += "\n"
+		}
+	}
+	return str
+}
+
+// Converts to HTML.
+export function toMarkup(elements) {
+	let str = ""
+	for (const each of elements) {
+		str += markup[each.type](each)
+		if (each !== elements[elements.length - 1]) {
+			str += "\n"
+		}
+	}
+	return str
+}

src/EditorApp/resolvers.js

@@ -0,0 +1 @@
+// TODO

src/EditorApp/usePreferences/index.js

@@ -1,8 +1,8 @@
 import { useImmerReducer } from "use-immer"
 
-import { // Unsorted
-	toGFM as toMarkdown, // TODO
-	toHTML as toMarkup,  // TODO
+import {
+	toMarkdown,
+	toMarkup,
 } from "./resolvers"
 
 const init = elements => ({