fix: copying mentions as text

packages/editor/src/core/extensions/extensions.tsx

@@ -137,7 +137,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     CustomCodeInlineExtension,
     Markdown.configure({
       html: true,
-      transformCopiedText: true,
+      transformCopiedText: false,
       transformPastedText: true,
       breaks: true,
     }),

packages/editor/src/core/extensions/mentions/extension-config.ts

@@ -1,12 +1,15 @@
 import { mergeAttributes } from "@tiptap/core";
 import Mention, { MentionOptions } from "@tiptap/extension-mention";
+import { MarkdownSerializerState } from "@tiptap/pm/markdown";
+import { Node as NodeType } from "@tiptap/pm/model";
 // types
 import { TMentionHandler } from "@/types";
 // local types
-import { EMentionComponentAttributeNames } from "./types";
+import { EMentionComponentAttributeNames, TMentionComponentAttributes } from "./types";
 
 export type TMentionExtensionOptions = MentionOptions & {
   renderComponent: TMentionHandler["renderComponent"];
+  getMentionedEntityDetails: TMentionHandler["getMentionedEntityDetails"];
 };
 
 export const CustomMentionExtensionConfig = Mention.extend<TMentionExtensionOptions>({
@@ -40,9 +43,26 @@ export const CustomMentionExtensionConfig = Mention.extend<TMentionExtensionOpti
     class: "mention",
   },
 
-  addStorage(this) {
+  renderText({ node }) {
+    return getMentionDisplayText(this.options, node);
+  },
+
+  addStorage() {
+    const options = this.options;
     return {
       mentionsOpen: false,
+      markdown: {
+        serialize(state: MarkdownSerializerState, node: NodeType) {
+          state.write(getMentionDisplayText(options, node));
+        },
+      },
     };
   },
 });
+
+function getMentionDisplayText(options: TMentionExtensionOptions, node: NodeType): string {
+  const attrs = node.attrs as TMentionComponentAttributes;
+  const mentionEntityId = attrs[EMentionComponentAttributeNames.ENTITY_IDENTIFIER];
+  const mentionEntityDetails = options.getMentionedEntityDetails?.(mentionEntityId);
+  return `@${mentionEntityDetails?.display_name ?? attrs[EMentionComponentAttributeNames.ID] ?? mentionEntityId}`;
+}

packages/editor/src/core/extensions/mentions/extension.tsx

@@ -9,12 +9,13 @@ import { MentionNodeView } from "./mention-node-view";
 import { renderMentionsDropdown } from "./utils";
 
 export const CustomMentionExtension = (props: TMentionHandler) => {
-  const { searchCallback, renderComponent } = props;
+  const { searchCallback, renderComponent, getMentionedEntityDetails } = props;
   return CustomMentionExtensionConfig.extend({
     addOptions(this) {
       return {
         ...this.parent?.(),
         renderComponent,
+        getMentionedEntityDetails,
       };
     },
 

packages/editor/src/core/types/mention.ts

@@ -1,5 +1,5 @@
 // plane types
-import { TSearchEntities } from "@plane/types";
+import { IUserLite, TSearchEntities } from "@plane/types";
 
 export type TMentionSuggestion = {
   entity_identifier: string;
@@ -20,6 +20,7 @@ export type TMentionComponentProps = Pick<TMentionSuggestion, "entity_identifier
 
 export type TReadOnlyMentionHandler = {
   renderComponent: (props: TMentionComponentProps) => React.ReactNode;
+  getMentionedEntityDetails?: (entity_identifier: string) => IUserLite | undefined;
 };
 
 export type TMentionHandler = TReadOnlyMentionHandler & {

web/core/components/pages/editor/editor-body.tsx

@@ -21,7 +21,7 @@ import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/compon
 import { cn, LIVE_BASE_PATH, LIVE_BASE_URL } from "@/helpers/common.helper";
 import { generateRandomColor } from "@/helpers/string.helper";
 // hooks
-import { useUser } from "@/hooks/store";
+import { useMember, useUser } from "@/hooks/store";
 import { useEditorMention } from "@/hooks/use-editor-mention";
 import { usePageFilters } from "@/hooks/use-page-filters";
 // plane web components
@@ -66,6 +66,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   } = props;
   // store hooks
   const { data: currentUser } = useUser();
+  const { getUserDetails } = useMember();
+
   // derived values
   const { id: pageId, name: pageTitle, isContentEditable, updateTitle } = page;
   // issue-embed
@@ -188,6 +190,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                 return res;
               },
               renderComponent: (props) => <EditorMentionsRoot {...props} />,
+              getMentionedEntityDetails: (id: string) => getUserDetails(id),
             }}
             embedHandler={{
               issue: issueEmbedProps,