Small tweaks and comments

Author: Zaydek Michels-Gualtieri

src/Editor/components/components.js

@@ -1,18 +1,17 @@
 import attrs from "./attrs"
 import React from "react"
 import T from "./T"
-import types from "../types"
 
 export const Em = ({ children }) => (
-	<T type={types.enum.em}>
+	<T type="em">
 		<span className="italic">
 			{children}
 		</span>
 	</T>
 )
 
 export const Strong = ({ children }) => (
-	<T type={types.enum.strong}>
+	<T type="strong">
 		<span className="font-semibold">
 			{children}
 		</span>
@@ -21,23 +20,23 @@ export const Strong = ({ children }) => (
 
 // mx-px px-1 py-px font-mono text-sm text-blue-600 bg-white border border-cool-gray-300 rounded
 export const Code = ({ children }) => (
-	<T type={types.enum.code}>
+	<T type="code">
 		<span className="mx-px py-1 text-sm font-mono text-blue-600 border border-cool-gray-300" {...attrs.code}>
 			{children}
 		</span>
 	</T>
 )
 
 export const Strike = ({ children }) => (
-	<T type={types.enum.strike}>
+	<T type="strike">
 		<span className="line-through text-gray-400">
 			{children}
 		</span>
 	</T>
 )
 
 export const A = ({ href, children }) => (
-	<T type={types.enum.a} props={{ href }}>
+	<T type="a" props={{ href }}>
 		<span className="mx-px underline text-blue-600" {...attrs.a}>
 			{children}
 		</span>

src/Editor/components/components-text.js src/Editor/components/elements-inline.jssrc/Editor/components/components-text.js renamed to src/Editor/components/elements-inline.js

@@ -0,0 +1,43 @@
+import deeplySyncTrees from "../utils/deeplySyncTrees"
+import parseTree from "lib/parseTree"
+import React from "react"
+import ReactDOMServer from "react-dom/server"
+import T from "./T"
+import toReact from "./toReact"
+
+const Element = ({ id, style, children, ...props }) => {
+	const ref = React.useRef(null)
+
+	// NOTE: React **does not** manage rendered children.
+	React.useLayoutEffect(() => {
+		if (!ref.current) {
+			// No-op
+			return
+		}
+		// NOTE: Uses ReactDOMServer.renderToStaticMarkup
+		// because ReactDOM.render is asynchronous.
+		const markup = ReactDOMServer.renderToStaticMarkup(children)
+		const tree = parseTree("<div>" + markup + "</div>")
+		deeplySyncTrees(tree, ref.current)
+	}, [children])
+
+	// Imperative styles:
+	const style = {
+		// https://github.com/codex-src/codex-wysiwyg/commit/f0755661d24e900804ab43b9657ec584c00bbbca
+		...style, // Takes precedence
+		whiteSpace: "pre-wrap",
+		overflowWrap: "break-word",
+	}
+
+	return <div ref={ref} id={id} style={style} {...props} />
+}
+
+export const P = React.memo(({ id, children }) => (
+	<T type="p">
+		<Element id={id}>
+			{toReact(children) || (
+				<br />
+			)}
+		</Element>
+	</T>
+))