nytimes · smoores-dev · Jan 2, 2025 · Jan 2, 2025 · Jan 2, 2025
@@ -0,0 +1,2 @@
+releases:
+  "@nytimes/react-prosemirror": prerelease
@@ -5,7 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React-ProseMirror Demo</title>
-    <script type="module" crossorigin src="/react-prosemirror/assets/index-jZ5wdX2i.js"></script>
+    <script type="module" crossorigin src="/react-prosemirror/assets/index-DG8eHnxT.js"></script>
+    <link rel="stylesheet" crossorigin href="/react-prosemirror/assets/index-DAGU9WLy.css">
   </head>
   <body>
     <div id="root"></div>

@@ -60,7 +60,7 @@
              prevDeco.from === nextDeco.from &&
              prevDeco.to &&
              nextDeco.to &&
              (prevDeco as any).type.eq((nextDeco as any).type)
          )
        ) &&
        (a.innerDeco as InternalDecorationSource).eq((b as ChildNode).innerDeco)
@@ -341,7 +341,12 @@
     getNodePos.current = () => getInnerPos.current() + child.offset;
 
     if (child.type === "node") {
-      return (
+      return child.marks.reduce(
+        (element, mark) => (
+          <MarkView getPos={getNodePos} mark={mark}>
+            {element}
+          </MarkView>
+        ),
         <NodeView
           key={child.key}
           outerDeco={child.outerDeco}

@@ -73,6 +73,7 @@ export const MarkView = memo(
       } else {
         viewDescRef.current.parent = parentRef.current;
         viewDescRef.current.dom = domRef.current;
+        viewDescRef.current.children = childDescriptors.current;
         viewDescRef.current.contentDOM =
           firstChildDesc?.dom.parentElement ?? domRef.current;
         viewDescRef.current.mark = mark;

@@ -26,7 +26,6 @@ import { StopEventContext } from "../contexts/StopEventContext.js";
 import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
 
 import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
-import { MarkView } from "./MarkView.js";
 import { NodeViewComponentProps } from "./NodeViewComponentProps.js";
 import { OutputSpec } from "./OutputSpec.js";
 
@@ -228,19 +227,6 @@ export const NodeView = memo(function NodeView({
         undefined
   );
 
-  // Inline nodes will already be wrapped in marks
-  // via the ChildNodeViews component
-  const markedElement = node.isInline
-    ? decoratedElement
-    : node.marks.reduce(
-        (element, mark) => (
-          <MarkView getPos={getPos} mark={mark}>
-            {element}
-          </MarkView>
-        ),
-        decoratedElement
-      );
-
   const childContextValue = useMemo(
     () => ({
       parentRef: nodeViewDescRef,
@@ -253,17 +239,7 @@ export const NodeView = memo(function NodeView({
     <SelectNodeContext.Provider value={setSelectNode}>
       <StopEventContext.Provider value={setStopEvent}>
         <ChildDescriptorsContext.Provider value={childContextValue}>
-          {cloneElement(
-            markedElement,
-            (node.marks.length && !node.isInline) ||
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              outerDeco.some((d) => (d as any).type.attrs.nodeName)
-              ? { ref: domRef }
-              : // If all of the node decorations were attr-only, then
-                // we've already passed the domRef to the NodeView component
-                // as a prop
-                undefined
-          )}
+          {decoratedElement}
         </ChildDescriptorsContext.Provider>
       </StopEventContext.Provider>
     </SelectNodeContext.Provider>

@@ -2,6 +2,7 @@
 import { Schema } from "prosemirror-model";
 import { Plugin } from "prosemirror-state";
 import {
+  builders,
   doc,
   h1,
   hr,
@@ -258,4 +259,34 @@ describe("EditorView draw", () => {
     expect(strongDom?.firstElementChild?.tagName).toBe("IMG");
     expect(strongDom?.childNodes.item(1).textContent).toBe(" two");
   });
+
+  it("correctly wraps blokc nodes with marks", async () => {
+    const testSchema = new Schema<"doc" | "image", "difficulty">({
+      nodes: schema.spec.nodes.update("image", {
+        ...schema.spec.nodes.get("image")!,
+        inline: false,
+        group: "block",
+      }),
+      marks: schema.spec.marks.addToEnd("difficulty", {
+        attrs: { level: { default: "beginner" } },
+        toDOM(mark) {
+          return ["div", { "data-difficulty": mark.attrs["level"] }, 0];
+        },
+      }),
+    });
+
+    const { doc, image, difficulty } = builders(testSchema);
+
+    const { view } = tempEditor({
+      doc: doc(difficulty(image({ src: "" }))),
+    });
+
+    const docDom = view.dom;
+    const difficultyDom = docDom.firstElementChild as HTMLElement;
+    const imageDom = difficultyDom.firstElementChild!;
+
+    expect(difficultyDom.tagName).toBe("DIV");
+    expect(difficultyDom.dataset["difficulty"]).toBe("beginner");
+    expect(imageDom.tagName).toBe("IMG");
+  });
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		releases:
		"@nytimes/react-prosemirror": prerelease