[PE-298] Fix: Copy markdown to clipboard (#6675)

* fix: markdown for mentions fixed

* fix: copying text in mentions

* fix: refactored the component to use the same function

* chore: renamed funcion name

* add the new copy extension

* init working fix

* remove useless code

* improve readibility

* update node import

* better smaller logic

* remove log

* add open close end handler

* update readabliity

* handle tables

* handle triple click in cell

* triple tap select current line

* handle block and list

* lists fixed

* handle all possible cases of copy in table

* update the min elements

* handle multi types in table

* handle table seletion cases

* handle whole table handler

* feat: all case converd

* update markdown handling code

* update return statement

* handle using group block

* handle param

* handle multple cell in table

* handle using recursion

* add types

* fix code rabbit  suggestions

* fix root node bug

* update recursion with loop

* update transform copied to false

* refactor clipboard extension: remove options and integrate MarkdownClipboard into core extensions

* fix: header and code handler

* fix: store hooks fixed

* fix: mention id

---------

Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com>

space/core/components/editor/lite-text-read-only-editor.tsx

@@ -7,6 +7,8 @@ import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
+// store hooks
+import { useMember } from "@/hooks/store";
 
 type LiteTextReadOnlyEditorWrapperProps = MakeOptional<
   Omit<ILiteTextReadOnlyEditor, "fileHandler" | "mentionHandler">,
@@ -17,22 +19,29 @@ type LiteTextReadOnlyEditorWrapperProps = MakeOptional<
 };
 
 export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, LiteTextReadOnlyEditorWrapperProps>(
-  ({ anchor, workspaceId, disabledExtensions, ...props }, ref) => (
-    <LiteTextReadOnlyEditorWithRef
-      ref={ref}
-      disabledExtensions={disabledExtensions ?? []}
-      fileHandler={getReadOnlyEditorFileHandlers({
-        anchor,
-        workspaceId,
-      })}
-      mentionHandler={{
-        renderComponent: (props) => <EditorMentionsRoot {...props} />,
-      }}
-      {...props}
-      // overriding the customClassName to add relative class passed
-      containerClassName={cn(props.containerClassName, "relative p-2")}
-    />
-  )
+  ({ anchor, workspaceId, disabledExtensions, ...props }, ref) => {
+    const { getMemberById } = useMember();
+
+    return (
+      <LiteTextReadOnlyEditorWithRef
+        ref={ref}
+        disabledExtensions={disabledExtensions ?? []}
+        fileHandler={getReadOnlyEditorFileHandlers({
+          anchor,
+          workspaceId,
+        })}
+        mentionHandler={{
+          renderComponent: (props) => <EditorMentionsRoot {...props} />,
+          getMentionedEntityDetails: (id: string) => ({
+            display_name: getMemberById(id)?.member__display_name ?? "",
+          }),
+        }}
+        {...props}
+        // overriding the customClassName to add relative class passed
+        containerClassName={cn(props.containerClassName, "relative p-2")}
+      />
+    );
+  }
 );
 
 LiteTextReadOnlyEditor.displayName = "LiteTextReadOnlyEditor";

space/core/components/editor/rich-text-editor.tsx

@@ -6,6 +6,8 @@ import { MakeOptional } from "@plane/types";
 import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
+// store hooks
+import { useMember } from "@/hooks/store";
 
 interface RichTextEditorWrapperProps
   extends MakeOptional<Omit<IRichTextEditor, "fileHandler" | "mentionHandler">, "disabledExtensions"> {
@@ -16,11 +18,14 @@ interface RichTextEditorWrapperProps
 
 export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
   const { anchor, containerClassName, uploadFile, workspaceId, disabledExtensions, ...rest } = props;
-
+  const { getMemberById } = useMember();
   return (
     <RichTextEditorWithRef
       mentionHandler={{
         renderComponent: (props) => <EditorMentionsRoot {...props} />,
+        getMentionedEntityDetails: (id: string) => ({
+          display_name: getMemberById(id)?.member__display_name ?? "",
+        }),
       }}
       ref={ref}
       disabledExtensions={disabledExtensions ?? []}

space/core/components/editor/rich-text-read-only-editor.tsx

@@ -7,6 +7,8 @@ import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
+// store hooks
+import { useMember } from "@/hooks/store";
 
 type RichTextReadOnlyEditorWrapperProps = MakeOptional<
   Omit<IRichTextReadOnlyEditor, "fileHandler" | "mentionHandler">,
@@ -17,22 +19,29 @@ type RichTextReadOnlyEditorWrapperProps = MakeOptional<
 };
 
 export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, RichTextReadOnlyEditorWrapperProps>(
-  ({ anchor, workspaceId, disabledExtensions, ...props }, ref) => (
-    <RichTextReadOnlyEditorWithRef
-      ref={ref}
-      disabledExtensions={disabledExtensions ?? []}
-      fileHandler={getReadOnlyEditorFileHandlers({
-        anchor,
-        workspaceId,
-      })}
-      mentionHandler={{
-        renderComponent: (props) => <EditorMentionsRoot {...props} />,
-      }}
-      {...props}
-      // overriding the customClassName to add relative class passed
-      containerClassName={cn("relative p-0 border-none", props.containerClassName)}
-    />
-  )
+  ({ anchor, workspaceId, disabledExtensions, ...props }, ref) => {
+    const { getMemberById } = useMember();
+
+    return (
+      <RichTextReadOnlyEditorWithRef
+        ref={ref}
+        disabledExtensions={disabledExtensions ?? []}
+        fileHandler={getReadOnlyEditorFileHandlers({
+          anchor,
+          workspaceId,
+        })}
+        mentionHandler={{
+          renderComponent: (props) => <EditorMentionsRoot {...props} />,
+          getMentionedEntityDetails: (id: string) => ({
+            display_name: getMemberById(id)?.member__display_name ?? "",
+          }),
+        }}
+        {...props}
+        // overriding the customClassName to add relative class passed
+        containerClassName={cn("relative p-0 border-none", props.containerClassName)}
+      />
+    );
+  }
 );
 
 RichTextReadOnlyEditor.displayName = "RichTextReadOnlyEditor";