Decoration drawing tests are green!

demo/main.tsx

@@ -171,21 +171,6 @@ const plugins = [
 function DemoEditor() {
   const [state, setState] = useState(editorState);
 
-  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(widget(offset + 10, TestWidget, { side: 0 }));
-    }
-  });
-
   return (
     <main>
       <h1>React ProseMirror Demo</h1>
@@ -195,7 +180,26 @@ function DemoEditor() {
         dispatchTransaction={(tr) => {
           setState((prev) => prev.apply(tr));
         }}
-        decorations={DecorationSet.create(state.doc, decorations)}
+        // @ts-expect-error Types don't match because of internalizing EditorView
+        decorations={(state) => {
+          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(widget(offset + 10, TestWidget, { side: 0 }));
+            }
+          });
+          return DecorationSet.create(state.doc, decorations);
+        }}
         plugins={plugins}
         // @ts-expect-error TODO: Gotta fix these types
         nodeViews={{ paragraph: Paragraph }}

package.json

@@ -92,6 +92,7 @@
     "node": ">=16.9"
   },
   "dependencies": {
+    "classnames": "^2.3.2",
     "w3c-keyname": "^2.2.8"
   }
 }

src/components/DocNodeView.tsx

@@ -54,10 +54,12 @@ export const DocNodeView = forwardRef(function DocNodeView(
     </div>
   );
 
+  if (!node) return element;
+
   const nodeDecorations = outerDeco.filter((deco) => !deco.inline);
   if (!nodeDecorations.length) {
     return element;
   }
 
-  return nodeDecorations.reduce(wrapInDeco, element);
+  return nodeDecorations.reduce(wrapInDeco(node), element);
 });

src/components/EditorView.tsx

@@ -4,7 +4,6 @@ import React, {
   ForwardRefExoticComponent,
   ReactNode,
   RefAttributes,
-  useCallback,
   useEffect,
   useState,
 } from "react";
@@ -39,7 +38,7 @@ type EditorStateProps =
 
 export type EditorProps = Omit<
   DirectEditorProps,
-  "state" | "nodeViews" | "decorations" | "dispatchTransaction"
+  "state" | "nodeViews" | "dispatchTransaction"
 > &
   EditorStateProps & {
     keymap?: { [key: string]: Command };
@@ -48,7 +47,6 @@ export type EditorProps = Omit<
         NodeViewComponentProps & RefAttributes<HTMLElement>
       >;
     };
-    decorations?: DecorationSet;
     dispatchTransaction?: (this: EditorViewClass, tr: Transaction) => void;
   };
 
@@ -58,23 +56,14 @@ export function EditorView({
   className,
   children,
   editable: editableProp,
-  decorations = DecorationSetInternal.empty as unknown as DecorationSet,
   nodeViews = {},
   ...props
 }: Props) {
-  const getDecorations = useCallback(
-    () => decorations as unknown as DecorationSetInternal,
-    [decorations]
-  );
-
   const [mount, setMount] = useState<HTMLElement | null>(null);
 
   // This is only safe to use in effects/layout effects or
   // event handlers!
-  const reactEditorView = useReactEditorView(mount, {
-    ...props,
-    decorations: getDecorations,
-  });
+  const reactEditorView = useReactEditorView(mount, props);
 
   useEffect(() => {
     reactEditorView?.domObserver.connectSelection();

src/components/WidgetComponentProps.ts

@@ -0,0 +1,7 @@
+import { ReactWidgetDecoration } from "../decorations/ReactWidgetType.js";
+
+export type WidgetComponentProps = {
+  widget: ReactWidgetDecoration;
+  pos: number;
+  contentEditable: boolean;
+};

src/components/WidgetView.tsx

@@ -6,9 +6,10 @@ import { WidgetViewDesc } from "../prosemirror-view/viewdesc.js";
 
 type Props = {
   widget: ReactWidgetDecoration;
+  pos: number;
 };
 
-export function WidgetView({ widget }: Props) {
+export function WidgetView({ widget, pos }: Props) {
   const siblingDescriptors = useContext(ChildDescriptorsContext);
   const domRef = useRef<HTMLElement | null>(null);
 
@@ -21,5 +22,14 @@ export function WidgetView({ widget }: Props) {
 
   const { Component } = widget.type;
 
-  return Component && <Component ref={domRef} contentEditable={false} />;
+  return (
+    Component && (
+      <Component
+        ref={domRef}
+        widget={widget}
+        pos={pos}
+        contentEditable={false}
+      />
+    )
+  );
 }