Reworked resolvers implementation

src/EditorApp/EditorApp.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/MemoFixedBottomWYSIWYGMenu/WYSIWYGMenu.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/MemoFixedTopPreferences/MemoFixedTopPreferences.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/usePreferences/index.js

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

src/EditorApp/usePreferences/resolvers.js

@@ -0,0 +1,95 @@
+import escape from "lodash/escape"
+import toArray from "lib/x/toArray"
+import toTree from "Editor/components/toReactTree/toTree"
+
+// Reads text content from tree-shaped text nodes.
+function textContent(treeTextNodes) {
+	let str = ""
+	for (const each of toArray(treeTextNodes)) {
+		if (typeof each === "string") {
+			str += each
+			continue
+		}
+		str += each.props.children &&
+			textContent(each.props.children)
+	}
+	return str
+}
+
+// Resolves tree-shaped children to a resolver-type.
+function toInnerText(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 tree-shaped text nodes.
+function toText(children, resolver) {
+	return toInnerText(toTree(children), resolver)
+}
+
+const markdown = {
+	em:     el => `_${toInnerText(el.props.children, markdown)}_`,
+	strong: el => `**${toInnerText(el.props.children, markdown)}**`,
+	code:   el => `\`${textContent(el.props.children)}\``,
+	strike: el => `~~${toInnerText(el.props.children, markdown)}~~`,
+
+	// TODO
+	a:      el => `[${toInnerText(el.props.children, markdown)}](${el.props.href || "TODO"})`,
+
+	"h1":   el => `# ${toText(el.props.children, markdown)}`,
+	"h2":   el => `## ${toText(el.props.children, markdown)}`,
+	"h3":   el => `### ${toText(el.props.children, markdown)}`,
+	"h4":   el => `#### ${toText(el.props.children, markdown)}`,
+	"h5":   el => `##### ${toText(el.props.children, markdown)}`,
+	"h6":   el => `###### ${toText(el.props.children, markdown)}`,
+	"p":    el => toText(el.props.children, markdown),
+}
+
+const markup = {
+	em:     el => `<em>${toInnerText(el.props.children, markup)}</em>`,
+	strong: el => `<strong>${toInnerText(el.props.children, markup)}</strong>`,
+	code:   el => `<code>${toInnerText(el.props.children, markup)}</code>`,
+	strike: el => `<strike>${toInnerText(el.props.children, markup)}</strike>`,
+
+	// TODO
+	a:      el => `<a href="${el.props.href}">${toInnerText(el.props.children, markup)}</a>`,
+
+	"h1":   el => `<h1>\n\t${toText(el.props.children, markup) || "<br />"}\n</h1>`,
+	"h2":   el => `<h2>\n\t${toText(el.props.children, markup) || "<br />"}\n</h2>`,
+	"h3":   el => `<h3>\n\t${toText(el.props.children, markup) || "<br />"}\n</h3>`,
+	"h4":   el => `<h4>\n\t${toText(el.props.children, markup) || "<br />"}\n</h4>`,
+	"h5":   el => `<h5>\n\t${toText(el.props.children, markup) || "<br />"}\n</h5>`,
+	"h6":   el => `<h6>\n\t${toText(el.props.children, markup) || "<br />"}\n</h6>`,
+	"p":    el => `<p>\n\t${toText(el.props.children, markup) || "<br />"}\n</p>`,
+}
+
+// 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/usePreferences/resolvers.test.js

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

src/EditorApp/usePreferences.js → src/EditorApp/usePreferences/usePreferences.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 => ({