fix: fixed mentions data on post creation (#1779)

Author: abdulhakim2902

src/components/CommentEditor/formatter.ts

@@ -17,7 +17,7 @@ export const serialize = (nodes: EditorValue): CommentSerializedProps => {
         comment.mentions.push({
           id: children.value,
           name: children.name,
-          username: children.name,
+          username: children.username,
         });
         break;
       default:

src/components/PostCreate/formatter.ts

@@ -1,4 +1,8 @@
-import { ELEMENT_MENTION, getNodeString } from '@udecode/plate';
+import {
+  ELEMENT_MENTION,
+  ELEMENT_MENTION_INPUT,
+  getNodeString,
+} from '@udecode/plate';
 
 import {
   EditorValue,
@@ -29,13 +33,34 @@ export const serialize = (nodes: EditorValue): Partial<Post> => {
 
   const checkAttributes = (children: RootBlock) => {
     switch (children.type) {
+      case ELEMENT_MENTION_INPUT: {
+        const username = children.children[0].text.trim();
+        if (!post.mentions) {
+          post.mentions = [
+            {
+              id: username,
+              name: username,
+              username: username,
+            },
+          ];
+        }
+
+        if (!post.mentions.map(mention => mention.id).includes(username)) {
+          post.mentions.push({
+            id: username,
+            name: username,
+            username: username,
+          });
+        }
+        break;
+      }
       case ELEMENT_MENTION:
         if (!post.mentions) {
           post.mentions = [
             {
               id: children.value,
               name: children.name as string,
-              username: children.name as string,
+              username: children.username as string,
             },
           ];
         }
@@ -46,7 +71,7 @@ export const serialize = (nodes: EditorValue): Partial<Post> => {
           post.mentions.push({
             id: children.value,
             name: children.name as string,
-            username: children.name as string,
+            username: children.username as string,
           });
         }
         break;

src/components/common/Editor/Editor.interface.ts

@@ -51,6 +51,8 @@ import {
   TTodoListItemElement,
   WithOverride,
   TComboboxItem,
+  TMentionInputElement,
+  ELEMENT_MENTION_INPUT,
 } from '@udecode/plate';
 
 import { ELEMENT_EMOJI, TEmojiElement } from './plugins/EmojiPicker';
@@ -116,6 +118,11 @@ export interface ShowMoreElement extends TElement {
   children: [EmptyText];
 }
 
+export interface MentionInputElement extends TMentionInputElement {
+  type: typeof ELEMENT_MENTION_INPUT;
+  children: [PlainText];
+}
+
 export type InlineElement =
   | LinkElement
   | MentionElement
@@ -255,7 +262,8 @@ export type RootBlock =
   | HashtagElement
   | EmojiElement
   | ImageListElement
-  | ShowMoreElement;
+  | ShowMoreElement
+  | MentionInputElement;
 
 export type EditorValue = RootBlock[];
 

src/components/common/NodeViewer/NodeViewer.tsx

@@ -18,8 +18,10 @@ import {
   createUnderlinePlugin,
   ELEMENT_MEDIA_EMBED,
   ELEMENT_MENTION,
+  ELEMENT_MENTION_INPUT,
   ImageElement,
   MentionElement,
+  MentionInputElement,
   Plate,
   withProps,
 } from '@udecode/plate';
@@ -127,6 +129,9 @@ export const NodeViewer: React.FC<NodeViewerProps> = props => {
             },
           },
         }),
+        [ELEMENT_MENTION_INPUT]: withProps(MentionInputElement, {
+          renderLabel: mentionable => '@' + mentionable.children[0].text,
+        }),
         [ELEMENT_SHOW_MORE]: withProps(ShowMoreElement, {
           onToggle: toggleShowMore,
         }),

src/components/common/NodeViewer/formatter.ts

@@ -2,6 +2,7 @@ import {
   ELEMENT_IMAGE,
   ELEMENT_MEDIA_EMBED,
   ELEMENT_MENTION,
+  ELEMENT_MENTION_INPUT,
   ELEMENT_PARAGRAPH,
   getNodeString,
 } from '@udecode/plate';
@@ -74,6 +75,10 @@ export const formatToString = (
         return children.username;
       }
 
+      if (children.type === ELEMENT_MENTION_INPUT) {
+        return children.username;
+      }
+
       return getNodeString(children);
     })
     .join(' ')