Prototyped display markdown mode; contexts do not work for text components because of deeplySyncTrees

Author: Zaydek Michels-Gualtieri

src/RichTextEditor/RichTextEditor.css

@@ -1,5 +1,4 @@
-[data-root="true"] {
-	/* subpixel-antialiased */
+[data-root] {
 	-webkit-font-smoothing: auto;
 	-moz-osx-font-smoothing: auto;
 
@@ -8,3 +7,15 @@
 
 	caret-color: var(--black);
 }
+
+/* Obscures markdown syntax. */
+[data-display-markdown-mode="false"] [data-type="markdown"] {
+	display: none;
+}
+
+/* Masks markdown syntax as text-blue-600. */
+[data-display-markdown-mode="true"] [data-type="strike"] [data-type="markdown"] {
+	--text-opacity: 1;
+	color: #9fa6b2;
+	color: rgba(159, 166, 178, var(--text-opacity));
+}

src/RichTextEditor/RichTextEditor.js

@@ -1,11 +1,14 @@
 import * as Range from "./methods/Range"
 import Debugger from "./components/Debugger"
+import isCtrlOrMetaKey from "lib/Client/isCtrlOrMetaKey"
 import React from "react"
 import Renderer from "./components/Renderer"
 import useDOMContentLoadedCallback from "lib/x/useDOMContentLoadedCallback"
 import useRichTextEditor from "./useRichTextEditor"
 import { parseRenderedChildren } from "./parsers"
 
+import "./RichTextEditor.css"
+
 const RichTextEditor = ({ markup, children }) => {
 	const ref = React.useRef(null)
 	const pointerdownRef = React.useRef(false)
@@ -15,6 +18,28 @@ const RichTextEditor = ({ markup, children }) => {
 	// Disables read-only mode on DOMContentLoaded.
 	useDOMContentLoadedCallback(dispatch.disableReadOnlyMode)
 
+	// Binds ctrl-/ or cmd-/ to toggle display display
+	// markdown mode. Does not use onKeyDown because of the
+	// readWriteOnlyHandler pattern.
+	React.useEffect(
+		React.useCallback(() => {
+			const handler = e => {
+				if (isCtrlOrMetaKey(e) && e.key === "/") {
+					let toggle = dispatch.enableDisplayMarkdownMode
+					if (state.displayMarkdownModeEnabled) {
+						toggle = dispatch.disableDisplayMarkdownMode
+					}
+					toggle()
+				}
+			}
+			document.addEventListener("keydown", handler)
+			return () => {
+				document.removeEventListener("keydown", handler)
+			}
+		}, [state, dispatch]),
+		[state.displayMarkdownModeEnabled],
+	)
+
 	// Returns a handler when read-only mode is disabled.
 	const readWriteOnlyHandler = handler => {
 		if (state.readOnlyModeEnabled) {
@@ -173,6 +198,8 @@ const RichTextEditor = ({ markup, children }) => {
 				suppressContentEditableWarning={!state.readOnlyModeEnabled}
 
 				data-root
+				data-read-only-mode={state.readOnlyModeEnabled}
+				data-display-markdown-mode={state.displayMarkdownModeEnabled}
 			>
 				<Renderer
 					forwardedRef={ref}
@@ -190,8 +217,8 @@ const RichTextEditor = ({ markup, children }) => {
 				// readOnlyModeEnabled
 				// displayMarkdownModeEnabled
 				// focused
-				// elements
-				// range
+				elements
+				range
 				// shouldRerender
 			/>
 

src/RichTextEditor/components/Debugger.js

@@ -12,7 +12,7 @@ const Debugger = ({
 	range,
 	shouldRerender,
 }) => (
-	<div className="mt-6 whitespace-pre-wrap font-mono text-xs" style={{ MozTabSize: 2, tabSize: 2 }}>
+	<div className="mt-6 whitespace-pre-wrap text-sm font-mono" style={{ MozTabSize: 2, tabSize: 2 }}>
 		{JSON.stringify(
 			{
 				...state,

src/RichTextEditor/components/Node.js

@@ -22,7 +22,7 @@ const Node = ({ id, style, children, ...props }) => {
 
 	// https://github.com/codex-src/codex-wysiwyg/commit/f0755661d24e900804ab43b9657ec584c00bbbca
 	const imperativeStyles = {
-		...style, // Takes precedence
+		...style,
 		whiteSpace: "pre-wrap",
 		overflowWrap: "break-word",
 	}

src/RichTextEditor/components/Renderer.js

@@ -14,10 +14,10 @@ const Elements = ({ state, dispatch }) => (
 )
 
 // Rerenders the current state on state.shouldRerender.
-const Renderer = ({ forwardedRef, state, dispatch }) => {
+const Renderer = ({ forwardedRef: tree, state, dispatch }) => {
 	React.useLayoutEffect(
 		React.useCallback(() => {
-			if (!forwardedRef.current) {
+			if (!tree.current) {
 				// No-op
 				return
 			}
@@ -26,7 +26,7 @@ const Renderer = ({ forwardedRef, state, dispatch }) => {
 			if (selection.rangeCount) {
 				selection.removeAllRanges()
 			}
-			ReactDOM.render(<Elements state={state} dispatch={dispatch} />, forwardedRef.current, () => {
+			ReactDOM.render(<Elements state={state} dispatch={dispatch} />, tree.current, () => {
 				if (state.readOnlyModeEnabled /* FIXME? */ || !state.focused) {
 					// No-op
 					return
@@ -38,8 +38,8 @@ const Renderer = ({ forwardedRef, state, dispatch }) => {
 					console.error(error)
 				}
 			})
-		}, [forwardedRef, state, dispatch]),
-		[forwardedRef.current, state.shouldRerender],
+		}, [tree, state, dispatch]),
+		[tree.current, state.shouldRerender],
 	)
 	return null
 }

src/RichTextEditor/components/components-text.js

@@ -1,12 +1,33 @@
 import attrs from "./attrs"
 import React from "react"
 import T from "./T"
+import toArray from "lib/Array/toArray"
+
+const Syntax = ({ children }) => (
+	<span className="text-sm font-mono text-blue-600" data-type="markdown">
+		{children}
+	</span>
+)
+
+const Markdown = ({ syntax, children }) => (
+	<React.Fragment>
+		<Syntax>
+			{toArray(syntax)[0]}
+		</Syntax>
+		{children}
+		<Syntax>
+			{toArray(syntax).slice(-1)[0]}
+		</Syntax>
+	</React.Fragment>
+)
 
 // Renders <em>.
 export const Em = ({ children }) => (
 	<T type="em">
 		<span className="italic">
-			{children}
+			<Markdown syntax="_">
+				{children}
+			</Markdown>
 		</span>
 	</T>
 )
@@ -15,7 +36,9 @@ export const Em = ({ children }) => (
 export const Strong = ({ children }) => (
 	<T type="strong">
 		<span className="font-semibold">
-			{children}
+			<Markdown syntax="**">
+				{children}
+			</Markdown>
 		</span>
 	</T>
 )
@@ -24,7 +47,9 @@ export const Strong = ({ children }) => (
 export const Code = ({ children }) => (
 	<T type="code">
 		<span className="mx-px py-1 text-sm font-mono text-blue-600 border border-cool-gray-300" {...attrs.code}>
-			{children}
+			<Markdown syntax="`">
+				{children}
+			</Markdown>
 		</span>
 	</T>
 )
@@ -33,7 +58,9 @@ export const Code = ({ children }) => (
 export const Strike = ({ children }) => (
 	<T type="strike">
 		<span className="line-through text-gray-400">
-			{children}
+			<Markdown syntax="~~">
+				{children}
+			</Markdown>
 		</span>
 	</T>
 )
@@ -42,7 +69,9 @@ export const Strike = ({ children }) => (
 export const A = ({ href, children }) => (
 	<T type="a" props={{ href }}>
 		<span className="mx-px underline text-blue-600" {...attrs.a}>
+			{/* <Markdown syntax="TODO"> */}
 			{children}
+			{/* </Markdown> */}
 		</span>
 	</T>
 )

src/RichTextEditor/useRichTextEditor.js

@@ -53,6 +53,8 @@ function parseElements({ markup, children }) {
 	return parseSemanticElements(tree)
 }
 
+// TODO: Add support for read-only mode enabled and display
+// markdown mode enabled
 function useRichTextEditor({ markup, children }) {
 	const initialState = React.useMemo(() => {
 		const elements = parseElements({ markup, children })

src/lib/Client/isCtrlOrMetaKey/index.js

@@ -5,11 +5,11 @@ import userAgent from "lib/Client/userAgent"
 //
 // https://css-tricks.com/snippets/javascript/test-mac-pc-javascript
 function isCtrlOrMetaKey(e) {
-	let AAPL = userAgent.AAPL
+	let isAAPL = userAgent.isAAPL
 	if (process.env.NODE_ENV === "test") {
-		AAPL = navigator.userAgent.indexOf("Mac OS X") >= 0
+		isAAPL = navigator.userAgent.indexOf("Mac OS X") >= 0
 	}
-	if (!AAPL) {
+	if (!isAAPL) {
 		const ok = (
 			e.ctrlKey &&
 			!e.metaKey

src/lib/Client/userAgent/index.js

@@ -5,15 +5,11 @@ function testUserAgent(substr) {
 	return navigator.userAgent.indexOf(substr) >= 0
 }
 
-// https://apple.com
-const isAAPL = testUserAgent("Mac OS X")
-
-// https://android.com
-const isGOOG = testUserAgent("Android")
-
 const userAgent = {
-	isAAPL,
-	isGOOG,
+	// https://apple.com
+	isAAPL: testUserAgent("Mac OS X"),
+	// https://android.com
+	isGOOG: testUserAgent("Android"),
 }
 
 export default userAgent