Ensure that nodes re-render when their decorations change

nytimes · Oct 6, 2024 · 0f227c7 · 0f227c7
1 parent 0813243
commit 0f227c7
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 59 deletions.
diff --git a/demo/main.tsx b/demo/main.tsx
@@ -108,35 +108,35 @@ const schema = new Schema({
 const editorState = EditorState.create({
   schema,
   doc: schema.nodes.doc.create({}, [
-    // schema.nodes.paragraph.create({}, [
-    //   schema.text("This ", [schema.marks.em.create()]),
-    //   schema.text("is", [
-    //     schema.marks.em.create(),
-    //     schema.marks.strong.create(),
-    //   ]),
-    //   schema.text(" the first paragraph"),
-    // ]),
-    // schema.nodes.paragraph.create({}, [
-    //   schema.text("This is the second paragraph"),
-    //   schema.nodes.footnote.create({ number: 1 }, schema.text("Footnote")),
-    // ]),
+    schema.nodes.paragraph.create({}, [
+      schema.text("This ", [schema.marks.em.create()]),
+      schema.text("is", [
+        schema.marks.em.create(),
+        schema.marks.strong.create(),
+      ]),
+      schema.text(" the first paragraph"),
+    ]),
+    schema.nodes.paragraph.create({}, [
+      schema.text("This is the second paragraph"),
+      schema.nodes.footnote.create({ number: 1 }, schema.text("Footnote")),
+    ]),
     schema.nodes.paragraph.create(),
-    // schema.nodes.image.create(),
-    // schema.nodes.image.create(),
-    // schema.nodes.paragraph.create(
-    //   {},
-    //   schema.text("This is the third paragraph 🫵")
-    // ),
-    // schema.nodes.table.create({}, [
-    //   schema.nodes.table_row.create({}, [
-    //     schema.nodes.table_header.create({}, schema.text("h1")),
-    //     schema.nodes.table_header.create({}, schema.text("h2")),
-    //   ]),
-    //   schema.nodes.table_row.create({}, [
-    //     schema.nodes.table_cell.create({}, schema.text("c1")),
-    //     schema.nodes.table_cell.create({}, schema.text("c2")),
-    //   ]),
-    // ]),
+    schema.nodes.image.create(),
+    schema.nodes.image.create(),
+    schema.nodes.paragraph.create(
+      {},
+      schema.text("This is the third paragraph 🫵")
+    ),
+    schema.nodes.table.create({}, [
+      schema.nodes.table_row.create({}, [
+        schema.nodes.table_header.create({}, schema.text("h1")),
+        schema.nodes.table_header.create({}, schema.text("h2")),
+      ]),
+      schema.nodes.table_row.create({}, [
+        schema.nodes.table_cell.create({}, schema.text("c1")),
+        schema.nodes.table_cell.create({}, schema.text("c2")),
+      ]),
+    ]),
   ]),
   plugins: [
     reactKeys(),
@@ -309,7 +309,7 @@ function DemoEditor() {
     () =>
       showReactNodeViews
         ? {
-            // paragraph: Paragraph,
+            paragraph: Paragraph,
             list: List,
             list_item: ListItem,
             footnote: Footnote,

diff --git a/docs/assets/index-DNM_ioi2.js → docs/assets/index-BGqMXhJy.js b/docs/assets/index-DNM_ioi2.js → docs/assets/index-BGqMXhJy.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,7 @@
     <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-DNM_ioi2.js"></script>
+    <script type="module" crossorigin src="/react-prosemirror/assets/index-BGqMXhJy.js"></script>
     <link rel="stylesheet" crossorigin href="/react-prosemirror/assets/index-DAGU9WLy.css">
   </head>
   <body>

diff --git a/src/components/ChildNodeViews.tsx b/src/components/ChildNodeViews.tsx
@@ -13,6 +13,7 @@ import React, {
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { ReactWidgetDecoration } from "../decorations/ReactWidgetType.js";
+import { InternalDecorationSource } from "../decorations/internalTypes.js";
 import { iterDeco } from "../decorations/iterDeco.js";
 // import { useEditorState } from "../hooks/useEditorState.js";
 import { useReactKeys } from "../hooks/useReactKeys.js";
@@ -374,10 +375,26 @@ const ChildElement = memo(
       mark.isInSet(prevProps.child.marks)
     ) &&
     prevProps.child.offset === nextProps.child.offset &&
-    // @ts-expect-error It's fine if these are undefined
-    prevProps.child.node === nextProps.child.node &&
-    // @ts-expect-error It's fine if these are undefined
-    prevProps.child.widget === nextProps.child.widget
+    (prevProps.child.type === "node"
+      ? prevProps.child.outerDeco?.length ===
+          (nextProps.child as ChildNode).outerDeco?.length &&
+        prevProps.child.outerDeco?.every((prevDeco) =>
+          (nextProps.child as ChildNode).outerDeco?.some(
+            (nextDeco) =>
+              prevDeco.from === nextDeco.from &&
+              prevDeco.to &&
+              nextDeco.to &&
+              (prevDeco as any).type.eq((nextDeco as any).type)
+          )
+        ) &&
+        (prevProps.child.innerDeco as InternalDecorationSource).eq(
+          (nextProps.child as ChildNode).innerDeco
+        )
+      : true) &&
+    (prevProps.child as ChildNode).node ===
+      (nextProps.child as ChildNode).node &&
+    (prevProps.child as ChildWidget).widget ===
+      (nextProps.child as ChildWidget).widget
 );
 
 function createChildElements(

diff --git a/src/components/__tests__/ProseMirror.draw-decoration.test.tsx b/src/components/__tests__/ProseMirror.draw-decoration.test.tsx
@@ -185,7 +185,7 @@ describe("Decoration drawing", () => {
           widget(
             4,
             forwardRef<HTMLSpanElement, WidgetViewComponentProps>(function B(
-              props,
+              { widget, getPos, ...props },
               ref
             ) {
               return (
@@ -199,7 +199,7 @@ describe("Decoration drawing", () => {
           widget(
             4,
             forwardRef<HTMLSpanElement, WidgetViewComponentProps>(function A(
-              props,
+              { widget, getPos, ...props },
               ref
             ) {
               return (
@@ -213,7 +213,7 @@ describe("Decoration drawing", () => {
           widget(
             4,
             forwardRef<HTMLSpanElement, WidgetViewComponentProps>(function C(
-              props,
+              { widget, getPos, ...props },
               ref
             ) {
               return (
@@ -256,8 +256,8 @@ describe("Decoration drawing", () => {
 
   it("calls widget destroy methods", async () => {
     let destroyed = false;
-    const DestroyableWidget = forwardRef<HTMLElement>(
-      function DestroyableWidget(props, ref) {
+    const DestroyableWidget = forwardRef<HTMLElement, WidgetViewComponentProps>(
+      function DestroyableWidget({ widget, getPos, ...props }, ref) {
         useEffect(() => {
           destroyed = true;
         });
@@ -589,7 +589,7 @@ describe("Decoration drawing", () => {
           widget(
             4,
             forwardRef<HTMLImageElement, WidgetViewComponentProps>(function Img(
-              props,
+              { widget, getPos, ...props },
               ref
             ) {
               return (
@@ -615,7 +615,7 @@ describe("Decoration drawing", () => {
           widget(
             4,
             forwardRef<HTMLImageElement, WidgetViewComponentProps>(function Img(
-              props,
+              { widget, getPos, ...props },
               ref
             ) {
               return (
@@ -629,7 +629,7 @@ describe("Decoration drawing", () => {
           widget(
             4,
             forwardRef<HTMLImageElement, WidgetViewComponentProps>(function BR(
-              props,
+              { widget, getPos, ...props },
               ref
             ) {
               return <br {...props} ref={ref as LegacyRef<HTMLBRElement>} />;
@@ -676,7 +676,7 @@ describe("Decoration drawing", () => {
           widget(
             2,
             forwardRef<HTMLImageElement, WidgetViewComponentProps>(function Img(
-              props,
+              { widget, getPos, ...props },
               ref
             ) {
               return (
@@ -699,7 +699,7 @@ describe("Decoration drawing", () => {
           widget(
             3,
             forwardRef<HTMLSpanElement, WidgetViewComponentProps>(function Span(
-              props,
+              { widget, getPos, ...props },
               ref
             ) {
               useEditorEffect((view) => {
@@ -728,7 +728,7 @@ describe("Decoration drawing", () => {
             3,
             forwardRef<HTMLButtonElement, WidgetViewComponentProps>(
               function Widget(
-                { getPos, ...props }: WidgetViewComponentProps,
+                { widget, getPos, ...props }: WidgetViewComponentProps,
                 ref
               ) {
                 expect(getPos()).toBe(3);