Changed editor hooks to just useRichTextEditorFromMarkup and useRichTextEditorFromChildren

Author: Zaydek Michels-Gualtieri

src/App.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { RichTextEditor } from "./RichTextEditor"
+import * as RTE from "./RichTextEditor"
 
 const markup = `
 <p>
@@ -19,28 +19,37 @@ const markup = `
 </p>
 `
 
-const App = () => (
-	<div className="px-6 py-24 flex flex-row justify-center">
-		<div className="w-full max-w-3xl">
-			<RichTextEditor markup={markup}>
-				{/* <p> */}
-				{/* 	<code>Go</code> is <strong>expressive, concise, clean, and efficient</strong>. */}
-				{/* 	Its <a href="https://google.com">concurrency mechanisms</a> make it easy to write programs that get the most out of <code>multicore and networked machines</code>, while its novel type system enables <em>flexible and modular</em> program construction. */}
-				{/* 	Go compiles quickly to machine code yet has the convenience of <strike>garbage</strike> collection and the power of run-time reflection. */}
-				{/* 	It's a fast, statically typed, <em>compiled language</em> that feels like a <em>dynamically typed, interpreted language</em>. */}
-				{/* </p> */}
-				{/* <p> */}
-				{/* 	<br /> */}
-				{/* </p> */}
-				{/* <p> */}
-				{/* 	<code>Go</code> is <strong>expressive, concise, clean, and efficient</strong>. */}
-				{/* 	Its <a href="https://google.com">concurrency mechanisms</a> make it easy to write programs that get the most out of <code>multicore and networked machines</code>, while its novel type system enables <em>flexible and modular</em> program construction. */}
-				{/* 	Go compiles quickly to machine code yet has the convenience of <strike>garbage</strike> collection and the power of run-time reflection. */}
-				{/* 	It's a fast, statically typed, <em>compiled language</em> that feels like a <em>dynamically typed, interpreted language</em>. */}
-				{/* </p> */}
-			</RichTextEditor>
+// const children = <React.Fragment>
+// 	<p>
+// 		<code>Go</code> is <strong>expressive, concise, clean, and efficient</strong>.\u0020
+// 		Its <a href="https://google.com">concurrency mechanisms</a> make it easy to write programs that get the most out of <code>multicore and networked machines</code>, while its novel type system enables <em>flexible and modular</em> program construction.\u0020
+// 		Go compiles quickly to machine code yet has the convenience of <strike>garbage</strike> collection and the power of run-time reflection.\u0020
+// 		It's a fast, statically typed, <em>compiled language</em> that feels like a <em>dynamically typed, interpreted language</em>.
+// 	</p>
+// 	<p>
+// 		<br />
+// 	</p>
+// 	<p>
+// 		<code>Go</code> is <strong>expressive, concise, clean, and efficient</strong>.\u0020
+// 		Its <a href="https://google.com">concurrency mechanisms</a> make it easy to write programs that get the most out of <code>multicore and networked machines</code>, while its novel type system enables <em>flexible and modular</em> program construction.\u0020
+// 		Go compiles quickly to machine code yet has the convenience of <strike>garbage</strike> collection and the power of run-time reflection.\u0020
+// 		It's a fast, statically typed, <em>compiled language</em> that feels like a <em>dynamically typed, interpreted language</em>.
+// 	</p>
+// </React.Fragment>
+
+const App = () => {
+	// const [state, dispatch] = RTE.useRichTextEditorFromChildren(children.props.children)
+	const [state, dispatch] = RTE.useRichTextEditorFromMarkup(markup)
+	return (
+		<div className="px-6 py-24 flex flex-row justify-center">
+			<div className="w-full max-w-3xl">
+				<RTE.RichTextEditor
+					state={state}
+					dispatch={dispatch}
+				/>
+			</div>
 		</div>
-	</div>
-)
+	)
+}
 
 export default App

src/RichTextEditor/RichTextEditor.js

@@ -3,17 +3,14 @@ import Debugger from "./components/Debugger"
 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 RichTextEditor = ({ state, dispatch }) => {
 	const ref = React.useRef(null)
 	const pointerdownRef = React.useRef(false)
 
-	const [state, dispatch] = useRichTextEditor({ markup, children })
-
 	// Disables read-only mode on DOMContentLoaded.
 	useDOMContentLoadedCallback(dispatch.disableReadOnlyMode)
 

src/RichTextEditor/index.js

@@ -1,2 +1,2 @@
 export { default as RichTextEditor } from "./RichTextEditor"
-export { default as useRichTextEditor } from "./useRichTextEditor"
+export * from "./useRichTextEditor"

src/RichTextEditor/useRichTextEditor.js

@@ -10,7 +10,6 @@ const newInitialState = elements => ({
 	lastActionTimestamp: "init",
 	lastAction: Date.now(),
 	readOnlyModeEnabled: true, // DOMContentLoaded disables read-only mode
-	displayMarkdownModeEnabled: false,
 	focused: false,
 	elements,
 	range: {
@@ -49,14 +48,21 @@ function parseElements({ markup, children }) {
 	return parseSemanticElements(tree)
 }
 
-// TODO: Add support for read-only mode enabled and display
-// markdown mode enabled
-function useRichTextEditor({ markup, children }) {
+// Instantiates from markup.
+export function useRichTextEditorFromMarkup(markup) {
 	const initialState = React.useMemo(() => {
-		const elements = parseElements({ markup, children })
+		const elements = parseElements({ markup })
 		return newInitialState(elements)
-	}, [markup, children])
+	}, [markup])
 	return useMethods(methods, initialState)
 }
 
-export default useRichTextEditor
+// Instantiates from React children. Note that children is
+// expected to be an array of React elements.
+export function useRichTextEditorFromChildren(children) {
+	const initialState = React.useMemo(() => {
+		const elements = parseElements({ children })
+		return newInitialState(elements)
+	}, [children])
+	return useMethods(methods, initialState)
+}

src/index.js

@@ -10,11 +10,12 @@ import "stylesheets/tailwind-em-context-extended.css"
 import "stylesheets/tailwind-em-context.css"
 import "stylesheets/tailwind-group-hover-text.css"
 
-;(() => {
-	serviceWorker.unregister()
-})()
-
 ReactDOM.render(
 	<App />,
 	document.getElementById("root"),
 )
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister()