From 35c4d504a809b4bffa382d9ec71b5291d3aea05b Mon Sep 17 00:00:00 2001
From: Palanikannan M <akashmalinimurugu@gmail.com>
Date: Wed, 30 Jul 2025 21:49:15 +0530
Subject: [PATCH] fix: add unique keys to add nodeview wrappers

---
 packages/editor/src/core/extensions/callout/block.tsx      | 6 +++++-
 .../src/core/extensions/code/code-block-node-view.tsx      | 7 +++++--
 .../core/extensions/custom-image/components/node-view.tsx  | 4 ++--
 .../src/core/extensions/mentions/mention-node-view.tsx     | 5 ++++-
 .../src/core/extensions/work-item-embed/extension.tsx      | 2 +-
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/core/extensions/callout/block.tsx b/packages/editor/src/core/extensions/callout/block.tsx
index 7f4a8503de0..75b29c87057 100644
--- a/packages/editor/src/core/extensions/callout/block.tsx
+++ b/packages/editor/src/core/extensions/callout/block.tsx
@@ -1,5 +1,6 @@
 import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
+import { v4 as uuidv4 } from "uuid";
 // constants
 import { COLORS_LIST } from "@/constants/common";
 // local components
@@ -22,11 +23,14 @@ export const CustomCalloutBlock: React.FC<CustomCalloutNodeViewProps> = (props)
   // states
   const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+  // unique id
+  const uniqueId = useMemo(() => uuidv4(), []);
   // derived values
   const activeBackgroundColor = COLORS_LIST.find((c) => node.attrs["data-background"] === c.key)?.backgroundColor;
 
   return (
     <NodeViewWrapper
+      key={`callout-block-${uniqueId}`}
       className="editor-callout-component group/callout-node relative bg-custom-background-90 rounded-lg text-custom-text-100 p-4 my-2 flex items-start gap-4 transition-colors duration-500 break-words"
       style={{
         backgroundColor: activeBackgroundColor,
diff --git a/packages/editor/src/core/extensions/code/code-block-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
index 7626031bc21..9fd7e8e598c 100644
--- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
@@ -5,7 +5,8 @@ import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import ts from "highlight.js/lib/languages/typescript";
 import { common, createLowlight } from "lowlight";
 import { CopyIcon, CheckIcon } from "lucide-react";
-import { useState } from "react";
+import { useState, useMemo } from "react";
+import { v4 as uuidv4 } from "uuid";
 // ui
 import { Tooltip } from "@plane/ui";
 // plane utils
@@ -22,6 +23,8 @@ interface CodeBlockComponentProps {
 export const CodeBlockComponent: React.FC<CodeBlockComponentProps> = ({ node }) => {
   const [copied, setCopied] = useState(false);
 
+  const uniqueId = useMemo(() => uuidv4(), []);
+
   const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     try {
       await navigator.clipboard.writeText(node.textContent);
@@ -35,7 +38,7 @@ export const CodeBlockComponent: React.FC<CodeBlockComponentProps> = ({ node })
   };
 
   return (
-    <NodeViewWrapper className="code-block relative group/code">
+    <NodeViewWrapper className="code-block relative group/code" key={`code-block-${uniqueId}`}>
       <Tooltip tooltipContent="Copy code">
         <button
           type="button"
diff --git a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
index eb38ab40542..49164382849 100644
--- a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
@@ -22,7 +22,7 @@ export type CustomImageNodeViewProps = Omit<NodeViewProps, "extension" | "update
 
 export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) => {
   const { editor, extension, node } = props;
-  const { src: imgNodeSrc } = node.attrs;
+  const { src: imgNodeSrc, id: imageEntityId } = node.attrs;
 
   const [isUploaded, setIsUploaded] = useState(false);
   const [resolvedSrc, setResolvedSrc] = useState<string | undefined>(undefined);
@@ -68,7 +68,7 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
   }, [imgNodeSrc, extension.options]);
 
   return (
-    <NodeViewWrapper>
+    <NodeViewWrapper key={`custom-image-node-view-${imageEntityId}`}>
       <div className="p-0 mx-0 my-2" data-drag-handle ref={imageComponentRef}>
         {(isUploaded || imageFromFileSystem) && !failedToLoadImage ? (
           <CustomImageBlock
diff --git a/packages/editor/src/core/extensions/mentions/mention-node-view.tsx b/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
index 939093fa341..3b1fbf9f817 100644
--- a/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
+++ b/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
@@ -17,7 +17,10 @@ export const MentionNodeView: React.FC<MentionNodeViewProps> = (props) => {
   } = props;
 
   return (
-    <NodeViewWrapper className="mention-component inline w-fit">
+    <NodeViewWrapper
+      key={`mention-node-view-${attrs[EMentionComponentAttributeNames.ENTITY_IDENTIFIER]}`}
+      className="mention-component inline w-fit"
+    >
       {(extension.options as TMentionExtensionOptions).renderComponent({
         entity_identifier: attrs[EMentionComponentAttributeNames.ENTITY_IDENTIFIER] ?? "",
         entity_name: attrs[EMentionComponentAttributeNames.ENTITY_NAME] ?? "user_mention",
diff --git a/packages/editor/src/core/extensions/work-item-embed/extension.tsx b/packages/editor/src/core/extensions/work-item-embed/extension.tsx
index 64e655a4088..9468f3287a2 100644
--- a/packages/editor/src/core/extensions/work-item-embed/extension.tsx
+++ b/packages/editor/src/core/extensions/work-item-embed/extension.tsx
@@ -18,7 +18,7 @@ export const WorkItemEmbedExtension = (props: Props) =>
   WorkItemEmbedExtensionConfig.extend({
     addNodeView() {
       return ReactNodeViewRenderer((issueProps: any) => (
-        <NodeViewWrapper>
+        <NodeViewWrapper key={`work-item-embed-node-view-${issueProps.node.attrs.entity_identifier}`}>
           {props.widgetCallback({
             issueId: issueProps.node.attrs.entity_identifier,
             projectId: issueProps.node.attrs.project_identifier,