Drop domToDesc! We're back on dom.pmViewDesc

nytimes · Aug 13, 2023 · 2ff6a42 · 2ff6a42
1 parent 2a0afde
commit 2ff6a42
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 125 deletions.
diff --git a/demo/main.tsx b/demo/main.tsx
@@ -1,4 +1,4 @@
-import { baseKeymap } from "prosemirror-commands";
+import { baseKeymap, toggleMark } from "prosemirror-commands";
 import { keymap } from "prosemirror-keymap";
 import { Schema } from "prosemirror-model";
 import { EditorState, Plugin } from "prosemirror-state";
@@ -150,7 +150,14 @@ const viewPlugin = new Plugin({
   },
 });
 
-const plugins = [keymap(baseKeymap), viewPlugin];
+const plugins = [
+  keymap({
+    ...baseKeymap,
+    "Mod-i": toggleMark(schema.marks.em),
+    "Mod-b": toggleMark(schema.marks.strong),
+  }),
+  viewPlugin,
+];
 
 function DemoEditor() {
   const [state, setState] = useState(editorState);
@@ -214,7 +221,13 @@ root.render(<DemoEditor />);
 // const schema = new Schema({
 //   nodes: {
 //     doc: { content: "block+" },
-//     paragraph: { group: "block", content: "inline*" },
+//     paragraph: {
+//       group: "block",
+//       content: "inline*",
+//       toDOM(node) {
+//         return ["p", 0];
+//       },
+//     },
 //     text: { group: "inline" },
 //   },
 //   marks: {
@@ -246,7 +259,7 @@ root.render(<DemoEditor />);
 //       {},
 //       schema.text("This is the second paragraph")
 //     ),
-//     schema.nodes.paragraph.create(),
+//     // schema.nodes.paragraph.create(),
 //     schema.nodes.paragraph.create(
 //       {},
 //       schema.text("This is the third paragraph")
@@ -279,35 +292,35 @@ root.render(<DemoEditor />);
 //         mount={mount}
 //         state={state}
 //         dispatchTransaction={(tr) => setState((prev) => prev.apply(tr))}
-//         nodeViews={nodeViews}
-//         decorations={(s) => {
-//           const decorations = [
-//             Decoration.inline(5, 15, { class: "inline-deco" }),
-//           ];
-//           state.doc.forEach((node, offset, index) => {
-//             if (index === 1 || index === 2) {
-//               decorations.push(
-//                 Decoration.node(offset, offset + node.nodeSize, {
-//                   nodeName: "div",
-//                   class: "node-deco",
-//                 })
-//               );
-//             }
-//             if (index === 3) {
-//               decorations.push(
-//                 Decoration.widget(offset + 10, () => {
-//                   const el = document.createElement("div");
-//                   el.style.display = "inline-block";
-//                   el.style.padding = "0.75rem 1rem";
-//                   el.style.border = "solid thin black";
-//                   el.innerText = "Widget";
-//                   return el;
-//                 })
-//               );
-//             }
-//           });
-//           return DecorationSet.create(s.doc, decorations);
-//         }}
+//         // nodeViews={nodeViews}
+//         // decorations={(s) => {
+//         //   const decorations = [
+//         //     Decoration.inline(5, 15, { class: "inline-deco" }),
+//         //   ];
+//         //   state.doc.forEach((node, offset, index) => {
+//         //     if (index === 1 || index === 2) {
+//         //       decorations.push(
+//         //         Decoration.node(offset, offset + node.nodeSize, {
+//         //           nodeName: "div",
+//         //           class: "node-deco",
+//         //         })
+//         //       );
+//         //     }
+//         //     if (index === 3) {
+//         //       decorations.push(
+//         //         Decoration.widget(offset + 10, () => {
+//         //           const el = document.createElement("div");
+//         //           el.style.display = "inline-block";
+//         //           el.style.padding = "0.75rem 1rem";
+//         //           el.style.border = "solid thin black";
+//         //           el.innerText = "Widget";
+//         //           return el;
+//         //         })
+//         //       );
+//         //     }
+//         //   });
+//         //   return DecorationSet.create(s.doc, decorations);
+//         // }}
 //       >
 //         <div ref={setMount} />
 //         {renderNodeViews()}

diff --git a/src/components/EditorView.tsx b/src/components/EditorView.tsx
@@ -19,7 +19,7 @@ import React, {
 import { EditorViewContext } from "../contexts/EditorViewContext.js";
 import { LayoutGroup } from "../contexts/LayoutGroup.js";
 import { NodeViewContext } from "../contexts/NodeViewContext.js";
-import { NodeViewDesc, ViewDesc } from "../descriptors/ViewDesc.js";
+import { NodeViewDesc } from "../descriptors/ViewDesc.js";
 import { useContentEditable } from "../hooks/useContentEditable.js";
 import { useSyncSelection } from "../hooks/useSyncSelection.js";
 import { usePluginViews } from "../hooks/useViewPlugins.js";
@@ -101,9 +101,6 @@ export function EditorView(props: Props) {
     defaultState ?? null
   );
 
-  const domToDesc = useRef(new Map<DOMNode, ViewDesc>());
-  domToDesc.current = new Map();
-
   // We always set internalState above if there's no state prop
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const state = stateProp ?? internalState!;
@@ -159,12 +156,13 @@ export function EditorView(props: Props) {
         return mountRef.current;
       },
       get docView() {
-        if (!mountRef.current || !domToDesc.current.get(mountRef.current)) {
+        if (!mountRef.current || !mountRef.current.pmViewDesc) {
           throw new Error(
             "The EditorView should only be accessed in an effect or event handler."
           );
         }
-        return domToDesc.current.get(mountRef.current) as NodeViewDesc;
+        // @ts-expect-error Can't override global declaration from prosemirror-view
+        return mountRef.current.pmViewDesc as NodeViewDesc;
       },
       editable,
       state,
@@ -314,7 +312,6 @@ export function EditorView(props: Props) {
         <NodeViewContext.Provider
           value={{
             mount: mountRef.current,
-            domToDesc: domToDesc.current,
             nodeViews,
             state,
           }}

diff --git a/src/components/MarkView.tsx b/src/components/MarkView.tsx
@@ -9,7 +9,6 @@ import React, {
 } from "react";
 
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
-import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { MarkViewDesc, ViewDesc } from "../descriptors/ViewDesc.js";
 
 import { OutputSpec } from "./OutputSpec.js";
@@ -23,7 +22,6 @@ export const MarkView = forwardRef(function MarkView(
   { mark, children }: Props,
   ref
 ) {
-  const { domToDesc } = useContext(NodeViewContext);
   const siblingDescriptors = useContext(ChildDescriptorsContext);
   const childDescriptors: ViewDesc[] = [];
   const domRef = useRef<HTMLElement | null>(null);
@@ -50,10 +48,8 @@ export const MarkView = forwardRef(function MarkView(
       childDescriptors,
       mark,
       domRef.current,
-      firstChildDesc?.dom.parentElement ?? domRef.current,
-      domToDesc
+      firstChildDesc?.dom.parentElement ?? domRef.current
     );
-    domToDesc.set(domRef.current, desc);
     siblingDescriptors.push(desc);
 
     for (const childDesc of childDescriptors) {

diff --git a/src/components/TextNodeView.tsx b/src/components/TextNodeView.tsx
@@ -3,10 +3,6 @@ import { DecorationSet } from "prosemirror-view";
 import { Component } from "react";
 import { findDOMNode } from "react-dom";
 
-import {
-  NodeViewContext,
-  NodeViewContextValue,
-} from "../contexts/NodeViewContext.js";
 import { TextViewDesc, ViewDesc } from "../descriptors/ViewDesc.js";
 import { DecorationInternal } from "../prosemirror-internal/DecorationInternal.js";
 
@@ -28,18 +24,14 @@ export class TextNodeView extends Component<Props> {
       textNode = textNode?.firstChild as Element | Text;
     }
 
-    const { domToDesc } = this.context as NodeViewContextValue;
-
     const desc = new TextViewDesc(
       undefined,
       this.props.node,
       [],
       DecorationSet.empty,
       textNode,
-      nodeDom,
-      domToDesc
+      nodeDom
     );
-    domToDesc.set(textNode, desc);
     this.props.siblingDescriptors.push(desc);
   }
 
@@ -54,24 +46,18 @@ export class TextNodeView extends Component<Props> {
       textNode = textNode?.firstChild as Element | Text;
     }
 
-    const { domToDesc } = this.context as NodeViewContextValue;
-
     const desc = new TextViewDesc(
       undefined,
       this.props.node,
       [],
       DecorationSet.empty,
       textNode,
-      nodeDom,
-      domToDesc
+      nodeDom
     );
-    domToDesc.set(textNode, desc);
     this.props.siblingDescriptors.push(desc);
   }
 
   render() {
     return this.props.node.text;
   }
 }
-
-TextNodeView.contextType = NodeViewContext;
diff --git a/src/components/TrailingHackView.tsx b/src/components/TrailingHackView.tsx
@@ -1,25 +1,16 @@
 import React, { useContext, useLayoutEffect, useRef } from "react";
 
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
-import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { TrailingHackViewDesc } from "../descriptors/ViewDesc.js";
 
 export function TrailingHackView() {
-  const { domToDesc } = useContext(NodeViewContext);
   const siblingDescriptors = useContext(ChildDescriptorsContext);
   const ref = useRef<HTMLBRElement | null>(null);
 
   useLayoutEffect(() => {
     if (!ref.current) return;
 
-    const desc = new TrailingHackViewDesc(
-      undefined,
-      [],
-      ref.current,
-      null,
-      domToDesc
-    );
-    domToDesc.set(ref.current, desc);
+    const desc = new TrailingHackViewDesc(undefined, [], ref.current, null);
     siblingDescriptors.push(desc);
   });
 

diff --git a/src/components/WidgetView.tsx b/src/components/WidgetView.tsx
@@ -1,7 +1,6 @@
 import React, { useContext, useLayoutEffect, useRef } from "react";
 
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
-import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { WidgetViewDesc } from "../descriptors/ViewDesc.js";
 import { ReactWidgetDecoration } from "../prosemirror-internal/DecorationInternal.js";
 
@@ -10,20 +9,13 @@ type Props = {
 };
 
 export function WidgetView({ widget }: Props) {
-  const { domToDesc } = useContext(NodeViewContext);
   const siblingDescriptors = useContext(ChildDescriptorsContext);
   const domRef = useRef<HTMLElement | null>(null);
 
   useLayoutEffect(() => {
     if (!domRef.current) return;
 
-    const desc = new WidgetViewDesc(
-      undefined,
-      widget,
-      domRef.current,
-      domToDesc
-    );
-    domToDesc.set(domRef.current, desc);
+    const desc = new WidgetViewDesc(undefined, widget, domRef.current);
     siblingDescriptors.push(desc);
   });
 

diff --git a/src/contexts/NodeViewContext.tsx b/src/contexts/NodeViewContext.tsx
@@ -2,12 +2,9 @@ import { EditorState } from "prosemirror-state";
 import { ForwardRefExoticComponent, RefAttributes, createContext } from "react";
 
 import { NodeViewComponentProps } from "../components/NodeViewComponentProps.js";
-import { ViewDesc } from "../descriptors/ViewDesc.js";
-import { DOMNode } from "../prosemirror-internal/dom.js";
 
 export type NodeViewContextValue = {
   mount: HTMLDivElement | null;
-  domToDesc: Map<DOMNode, ViewDesc>;
   nodeViews: Record<
     string,
     ForwardRefExoticComponent<