Implement view descriptors

nytimes · Jul 28, 2023 · e5a820b · e5a820b
1 parent fd47230
commit e5a820b
Show file tree

Hide file tree

Showing 8 changed files with 1,175 additions and 77 deletions.
diff --git a/src/components/EditorView.tsx b/src/components/EditorView.tsx
@@ -21,13 +21,12 @@ import React, {
   useState,
 } from "react";
 
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { EditorViewContext } from "../contexts/EditorViewContext.js";
 import { LayoutGroup } from "../contexts/LayoutGroup.js";
-import {
-  NodeViewDescriptor,
-  NodeViewDescriptorsContext,
-} from "../contexts/NodeViewPositionsContext.js";
+import { NodeViewDescriptorsContext } from "../contexts/NodeViewPositionsContext.js";
 import { ReactWidgetType } from "../decorations/ReactWidgetType.js";
+import { ViewDesc } from "../descriptors/ViewDesc.js";
 import { DOMNode } from "../dom.js";
 import { useContentEditable } from "../hooks/useContentEditable.js";
 import { useSyncSelection } from "../hooks/useSyncSelection.js";
@@ -106,9 +105,9 @@ export function EditorView(props: Props) {
     defaultState ?? null
   );
 
-  const posToDesc = useRef(new Map<number, NodeViewDescriptor>());
+  const posToDesc = useRef(new Map<number, ViewDesc>());
   posToDesc.current = new Map();
-  const domToDesc = useRef(new Map<DOMNode, NodeViewDescriptor>());
+  const domToDesc = useRef(new Map<DOMNode, ViewDesc>());
   domToDesc.current = new Map();
 
   // We always set internalState above if there's no state prop
@@ -178,11 +177,19 @@ export function EditorView(props: Props) {
           const textNodeStart = pos + offset + subOffset + 1;
           const textNodeEnd = pos + offset + subOffset + 1 + textNode.nodeSize;
           const marked = wrapInMarks(
-            <TextNodeWrapper pos={textNodeStart}>
-              {/* Text nodes always have text */}
-              {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
-              {textNode.text!}
-            </TextNodeWrapper>,
+            <ChildDescriptorsContext.Consumer>
+              {(siblingDescriptors) => (
+                <TextNodeWrapper
+                  siblingDescriptors={siblingDescriptors}
+                  pos={textNodeStart}
+                  node={textNode}
+                >
+                  {/* Text nodes always have text */}
+                  {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
+                  {textNode.text!}
+                </TextNodeWrapper>
+              )}
+            </ChildDescriptorsContext.Consumer>,
             textNode.marks,
             textNode.isInline
           );
@@ -277,7 +284,11 @@ export function EditorView(props: Props) {
     const marked = wrapInMarks(element, node.marks, node.isInline);
 
     const decorated = wrapInDecorations(marked, nodeDecorations, false);
-    const wrapped = <NodeWrapper pos={pos}>{decorated}</NodeWrapper>;
+    const wrapped = (
+      <NodeWrapper pos={pos} node={node}>
+        {decorated}
+      </NodeWrapper>
+    );
 
     const elements = [wrapped];
 

diff --git a/src/components/NodeWrapper.tsx b/src/components/NodeWrapper.tsx
@@ -1,3 +1,5 @@
+import { Node } from "prosemirror-model";
+import { DecorationSet } from "prosemirror-view";
 import React, {
   Children,
   ReactElement,
@@ -9,15 +11,11 @@ import React, {
   useRef,
 } from "react";
 
-import {
-  NodeViewDescriptor,
-  NodeViewDescriptorsContext,
-} from "../contexts/NodeViewPositionsContext.js";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { NodeViewDescriptorsContext } from "../contexts/NodeViewPositionsContext.js";
+import { NodeViewDesc, ViewDesc } from "../descriptors/ViewDesc.js";
 
-export function findChildDesc(
-  pos: number,
-  posToDesc: Map<number, NodeViewDescriptor>
-) {
+export function findChildDesc(pos: number, posToDesc: Map<number, ViewDesc>) {
   const positions = Array.from(posToDesc.keys()).sort((a, b) => b - a);
 
   let parentPos = null;
@@ -31,25 +29,41 @@ export function findChildDesc(
 }
 
 type NodeWrapperProps = {
+  node: Node;
   children: ReactNode;
   pos: number;
 };
-export function NodeWrapper({ children, pos }: NodeWrapperProps) {
+
+export function NodeWrapper({ node, children, pos }: NodeWrapperProps) {
   const { posToDesc, domToDesc } = useContext(NodeViewDescriptorsContext);
+  const siblingDescriptors = useContext(ChildDescriptorsContext);
+  const childDescriptors: ViewDesc[] = [];
   const ref = useRef<Element | null>(null);
 
   useLayoutEffect(() => {
     if (!ref.current) return;
 
-    const childDesc = findChildDesc(pos, posToDesc);
+    const firstChildDesc = childDescriptors[0];
 
-    const desc: NodeViewDescriptor = {
-      pos,
-      dom: ref.current,
-      contentDOM: childDesc?.dom.parentNode ?? null,
-    };
+    const desc = new NodeViewDesc(
+      undefined,
+      node,
+      [],
+      DecorationSet.empty,
+      ref.current,
+      firstChildDesc?.dom.parentElement ?? null,
+      ref.current,
+      posToDesc,
+      domToDesc
+    );
+    desc.children = childDescriptors;
     posToDesc.set(pos, desc);
     domToDesc.set(ref.current, desc);
+    siblingDescriptors.push(desc);
+
+    for (const childDesc of childDescriptors) {
+      childDesc.parent = desc;
+    }
   });
 
   const child = Children.only(children);
@@ -73,5 +87,9 @@ export function NodeWrapper({ children, pos }: NodeWrapperProps) {
     },
   });
 
-  return <>{clonedChild}</>;
+  return (
+    <ChildDescriptorsContext.Provider value={childDescriptors}>
+      {clonedChild}
+    </ChildDescriptorsContext.Provider>
+  );
 }
diff --git a/src/components/TextNodeWrapper.tsx b/src/components/TextNodeWrapper.tsx
@@ -1,15 +1,19 @@
+import { Node } from "prosemirror-model";
+import { DecorationSet } from "prosemirror-view";
 import { Component } from "react";
 import { findDOMNode } from "react-dom";
 
 import {
-  NodeViewDescriptor,
   NodeViewDescriptorsContext,
   NodeViewDescriptorsContextValue,
 } from "../contexts/NodeViewPositionsContext.js";
+import { TextViewDesc, ViewDesc } from "../descriptors/ViewDesc.js";
 
 type TextNodeWrapperProps = {
+  node: Node;
   children: string;
   pos: number;
+  siblingDescriptors: ViewDesc[];
 };
 export class TextNodeWrapper extends Component<TextNodeWrapperProps> {
   componentDidMount(): void {
@@ -21,13 +25,19 @@ export class TextNodeWrapper extends Component<TextNodeWrapperProps> {
     const { posToDesc, domToDesc } = this
       .context as NodeViewDescriptorsContextValue;
 
-    const desc: NodeViewDescriptor = {
-      pos: this.props.pos,
-      dom: textNode,
-      contentDOM: null,
-    };
+    const desc = new TextViewDesc(
+      undefined,
+      this.props.node,
+      [],
+      DecorationSet.empty,
+      textNode,
+      textNode,
+      posToDesc,
+      domToDesc
+    );
     posToDesc.set(this.props.pos, desc);
     domToDesc.set(textNode, desc);
+    this.props.siblingDescriptors.push(desc);
   }
 
   componentDidUpdate(): void {
@@ -39,13 +49,19 @@ export class TextNodeWrapper extends Component<TextNodeWrapperProps> {
     const { posToDesc, domToDesc } = this
       .context as NodeViewDescriptorsContextValue;
 
-    const desc: NodeViewDescriptor = {
-      pos: this.props.pos,
-      dom: textNode,
-      contentDOM: null,
-    };
+    const desc = new TextViewDesc(
+      undefined,
+      this.props.node,
+      [],
+      DecorationSet.empty,
+      textNode,
+      textNode,
+      posToDesc,
+      domToDesc
+    );
     posToDesc.set(this.props.pos, desc);
     domToDesc.set(textNode, desc);
+    this.props.siblingDescriptors.push(desc);
   }
 
   render() {

diff --git a/src/contexts/ChildDescriptorsContext.ts b/src/contexts/ChildDescriptorsContext.ts
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+import { ViewDesc } from "../descriptors/ViewDesc.js";
+
+export const ChildDescriptorsContext = createContext<ViewDesc[]>([]);
diff --git a/src/contexts/NodeViewPositionsContext.tsx b/src/contexts/NodeViewPositionsContext.tsx
@@ -1,17 +1,12 @@
 import { createContext } from "react";
 
+import { ViewDesc } from "../descriptors/ViewDesc.js";
 import { DOMNode } from "../dom.js";
 
-export type NodeViewDescriptor = {
-  pos: number;
-  dom: DOMNode;
-  contentDOM: DOMNode | null;
-};
-
 export type NodeViewDescriptorsContextValue = {
   mount: HTMLDivElement | null;
-  domToDesc: Map<DOMNode, NodeViewDescriptor>;
-  posToDesc: Map<number, NodeViewDescriptor>;
+  domToDesc: Map<DOMNode, ViewDesc>;
+  posToDesc: Map<number, ViewDesc>;
 };
 
 export const NodeViewDescriptorsContext = createContext(