Add beginning of the reducer pattern

Author: Zaydek Michels-Gualtieri

src/Editor/Editor.js

@@ -1,6 +1,11 @@
 import React from "react"
 import ReactDOM from "react-dom"
 
+import {
+	computeEditorRangeFromCurrentDOMRange,
+	convertEditorRangeToDOMRange,
+} from "./model/Range"
+
 // const MemoElements = React.memo(({ elements }) => (
 // 	elements.map(each => (
 // 		React.createElement(componentMap[each.type], {
@@ -11,6 +16,24 @@ import ReactDOM from "react-dom"
 // 	))
 // ))
 
+const Paragraph = ({ children }) => (
+	<p>
+		{children || (
+			<br />
+		)}
+	</p>
+)
+
+const Render = ({ renderable }) => (
+	renderable.map(each => (
+		React.createElement(Paragraph /* componentMap[each.type] */, {
+			...each.props,
+			key: each.key, // React key
+			id:  each.key, // DOM ID
+		})
+	))
+)
+
 const Editor = ({
 	id,
 	className,
@@ -33,20 +56,19 @@ const Editor = ({
 				selection.removeAllRanges()
 			}
 			ReactDOM.render(
-				// <MemoElements elements={state.elements} />,
-				"Hello, world!",
+				<Render renderable={state.renderable} />,
 				articleRef.current,
 				() => {
 					if (!state.focused) {
 						// No-op
 						return
 					}
-					// try {
-					// 	const userRange = convRangeToUserLiteral(state.range)
-					// 	selection.addRange(userRange)
-					// } catch (error) {
-					// 	console.error(error)
-					// }
+					try {
+						const domRange = convertEditorRangeToDOMRange(state.range)
+						selection.addRange(domRange)
+					} catch (error) {
+						console.error(error)
+					}
 				},
 			)
 		}, [state]),
@@ -62,15 +84,15 @@ const Editor = ({
 			style={style}
 
 			onFocus={e => {
-				// dispatch({
-				// 	type: "FOCUS",
-				// })
+				dispatch({
+					type: "FOCUS",
+				})
 			}}
 
 			onBlur={e => {
-				// dispatch({
-				// 	type: "BLUR",
-				// })
+				dispatch({
+					type: "BLUR",
+				})
 			}}
 
 			onPointerDown={e => {
@@ -84,37 +106,39 @@ const Editor = ({
 				// 	}
 				// 	return
 				// }
-				// const range = getCurrentRange(ref.current)
+				// const range = computeEditorRangeFromCurrentDOMRange(articleRef.current)
 				// if (!range) {
 				// 	// No-op
 				// 	return
 				// }
-				// dispatch({
-				// 	type: "SELECT",
-				// 	range,
-				// })
+				// // dispatch({
+				// // 	type: "SELECT",
+				// // 	range,
+				// // })
 			}}
 
-			onPointerUp={e => {
-				// isPointerDownRef.current = false
-			}}
+			// onPointerUp={e => {
+			// 	isPointerDownRef.current = false
+			// }}
 
 			// TODO: Add COMPAT guard for select-all or prevent
 			// default?
 			onSelect={e => {
-				// try {
-				// 	const range = getCurrentRange(ref.current)
-				// 	if (!range) {
-				// 		// No-op
-				// 		return
-				// 	}
-				// 	dispatch({
-				// 		type: "SELECT",
-				// 		range,
-				// 	})
-				// } catch (error) {
-				// 	console.error(error)
-				// }
+				try {
+					const range = computeEditorRangeFromCurrentDOMRange(articleRef.current)
+					if (!range) {
+						// No-op
+						return
+					}
+					console.log(range)
+
+					// dispatch({
+					// 	type: "SELECT",
+					// 	range,
+					// })
+				} catch (error) {
+					console.error(`onSelect: error=${error}`)
+				}
 			}}
 
 			onKeyDown={e => {
@@ -166,7 +190,7 @@ const Editor = ({
 			//  		if (formatType !== "plaintext") {
 			//  			// types[formatType] = {}
 			//  			types[formatType] = formatType !== "a" ? {} : {
-			//  				href: "TODO",
+			//  				harticleRef: "TODO",
 			//  			}
 			//  		}
 			//  		dispatch({
@@ -203,8 +227,8 @@ const Editor = ({
 			//  				end: state.range.start,
 			//  			}
 			//  			setTimeout(() => {
-			//  				const userRange = convRangeToUserLiteral(range)
-			//  				selection.addRange(userRange)
+			//  				const domRange = convertEditorRangeToDOMRange(range)
+			//  				selection.addRange(domRange)
 			//  			}, 0)
 			//  		}
 			//  		dispatch({
@@ -253,7 +277,7 @@ const Editor = ({
 			}}
 
 			onCompositionEnd={e => {
-				// const range = getCurrentRange(ref.current)
+				// const range = computeEditorRangeFromCurrentDOMRange(articleRef.current)
 				// const children = parseRenderedChildren(document.getElementById(range.start.key))
 				// dispatch({
 				// 	type: "UNCONTROLLED_INPUT",
@@ -264,7 +288,7 @@ const Editor = ({
 			}}
 
 			onInput={e => {
-				// const range = getCurrentRange(ref.current)
+				// const range = computeEditorRangeFromCurrentDOMRange(articleRef.current)
 				// const children = parseRenderedChildren(document.getElementById(range.start.key))
 				// dispatch({
 				// 	type: "UNCONTROLLED_INPUT",
@@ -303,11 +327,12 @@ const tabSize = n => ({
 	tabSize: n,
 })
 
-const EditorWithDebugger = ({ state, dispatch }) => (
+const EditorWithDebugger = ({ state, dispatch, ...props }) => (
 	<>
 		<Editor
 			state={state}
 			dispatch={dispatch}
+			{...props}
 		/>
 		{process.env.NODE_ENV !== "production" && (
 			<pre className="mt-6 text-xs whitespace-pre-wrap break-words" style={tabSize(2)}>

src/Editor/model/Range/Position.js

@@ -0,0 +1,64 @@
+import domUtils from "lib/DOM/domUtils"
+
+export function computeEditorPositionFromDOMPosition({ node, offset: originalOffset }) {
+	// Guard non-contenteditable descendants:
+	if (!domUtils.ascendElement(node).closest("[contenteditable='true']")) {
+		return null
+	}
+	// Guard node and originalOffset (1 of 2):
+	while (!domUtils.isTextNodeOrBrElement(node)) {
+		if (originalOffset && originalOffset === node.childNodes.length) {
+			originalOffset = node.childNodes.length - 1
+		}
+		node = node.childNodes[originalOffset]
+		originalOffset = 0
+	}
+	// Guard originalOffset (2 of 2):
+	if (originalOffset > (node.nodeValue || "").length) {
+		// TODO
+		originalOffset = Math.max(0, (node.nodeValue || "").length)
+	}
+	let key = ""
+	let offset = 0
+	const recurse = on => {
+		if (on === node) {
+			key = domUtils.ascendElementID(on).id
+			offset += originalOffset
+			return true
+		}
+		for (const each of on.childNodes) {
+			if (recurse(each)) {
+				return true
+			}
+			offset += domUtils.isTextNode(each) &&
+				each.nodeValue.length
+		}
+		return false
+	}
+	recurse(domUtils.ascendElementID(node))
+	return { key, offset }
+}
+
+export function convertEditorPositionToDOMPosition(pos) {
+	let { key, offset: originalOffset } = pos
+
+	let node = null
+	let offset = 0
+	const recurse = on => {
+		if (domUtils.isTextNodeOrBrElement(on) && originalOffset - (on.nodeValue || "").length <= 0) {
+			node = on
+			offset = originalOffset
+			return true
+		}
+		for (const each of on.childNodes) {
+			if (recurse(each)) {
+				return true
+			}
+			originalOffset -= domUtils.isTextNode(each) &&
+				each.nodeValue.length
+		}
+		return false
+	}
+	recurse(document.getElementById(key))
+	return { node, offset }
+}