editor: fix image shuffling on real-time editor sync

kick232 · Sep 4, 2023 · c80a998 · c80a998
1 parent 0a10df7
commit c80a998
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/packages/editor/src/extensions/image/image.ts b/packages/editor/src/extensions/image/image.ts
@@ -178,6 +178,7 @@ export const ImageNode = Node.create<ImageOptions>({
 
   addNodeView() {
     return createSelectionBasedNodeView(ImageComponent, {
+      componentKey: (node) => node.attrs.hash,
       shouldUpdate: (prev, next) => !hasSameAttributes(prev.attrs, next.attrs),
       forceEnableSelection: true
     });

diff --git a/packages/editor/src/extensions/react/selection-based-react-node-view.tsx b/packages/editor/src/extensions/react/selection-based-react-node-view.tsx
@@ -95,7 +95,11 @@ export class SelectionBasedNodeView<
       this.isSelectedNode(this.editor.view.state.selection);
 
     return (
-      <EmotionThemeProvider scope="editor" injectCssVars={false}>
+      <EmotionThemeProvider
+        key={this.options.componentKey?.(this.node)}
+        scope="editor"
+        injectCssVars={false}
+      >
         <this.options.component
           {...props}
           editor={this.editor}

diff --git a/packages/editor/src/extensions/react/types.ts b/packages/editor/src/extensions/react/types.ts
@@ -59,6 +59,7 @@ export type SelectionBasedReactNodeViewProps<TAttributes = Attrs> =
 export type ReactNodeViewOptions<P> = {
   props?: P;
   component?: React.ComponentType<P>;
+  componentKey?: (node: PMNode) => string;
   shouldUpdate?: ShouldUpdate;
   contentDOMFactory?: (() => ContentDOM) | boolean;
   wrapperFactory?: () => HTMLElement;