From cc636ad86b66aefd4c65975cd2db40a8bbb08d9f Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Mon, 6 Nov 2023 22:49:19 +0800
Subject: [PATCH] refactor: disable mention in DM

---
 src/assets/index.css                          | 15 +--
 src/components/MessageInput/index.tsx         |  3 +-
 .../MessageInput/plate-ui/editor.tsx          | 31 +++---
 .../MessageInput/plate-ui/mention/element.tsx | 77 +++++++--------
 src/components/MessageInput/plugins.ts        | 95 ++++++++++---------
 5 files changed, 101 insertions(+), 120 deletions(-)

diff --git a/src/assets/index.css b/src/assets/index.css
index 9e8ab1ee..96aeb69a 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -321,15 +321,6 @@ html.dark ::-webkit-scrollbar-thumb {
 html.dark .send.markdown {
   background-color: #222 !important;
 }
-html.dark .slate-mention {
-  background: #333;
-}
-html.dark .slate-Combobox {
-  background: #333 !important;
-}
-html.dark .slate-Combobox li:hover {
-  background: #333 !important;
-}
 
 /* remove focus border */
 svg:focus {
@@ -341,10 +332,6 @@ svg:focus {
 [id^="CAMERA_"] video {
   object-fit: contain !important;
 }
-/* send placeholder */
-.send [data-slate-placeholder="true"] {
-  top: 4px !important;
-}
 /* reset number input spinner */
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
@@ -352,7 +339,7 @@ input[type="number"]::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
-/* 登录注册页面的底部社会化登录，如果为空，则不显示or分割线 */
+/* 登录注册页面的底部社会化登录，如果为空，则不显示 or 分割线 */
 .or:has(+ .socials:empty) {
   display: none;
 }
diff --git a/src/components/MessageInput/index.tsx b/src/components/MessageInput/index.tsx
index e19886e3..1613a8ac 100644
--- a/src/components/MessageInput/index.tsx
+++ b/src/components/MessageInput/index.tsx
@@ -89,11 +89,12 @@ export default function MessageInput({
         <Plate
           // @ts-ignore
           editorRef={editorRef}
+          key={id}
           id={id}
           onChange={(values) => {
             setInput(values);
           }}
-          plugins={plugins}
+          plugins={plugins({ enableMention: members.length > 0 })}
           value={input}
         >
           <Editor
diff --git a/src/components/MessageInput/plate-ui/editor.tsx b/src/components/MessageInput/plate-ui/editor.tsx
index f98eeaf4..34e52ce3 100644
--- a/src/components/MessageInput/plate-ui/editor.tsx
+++ b/src/components/MessageInput/plate-ui/editor.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { PlateContent, useEditorRef } from '@udecode/plate-common';
-import { useKey } from 'rooks';
+import React from "react";
+import { PlateContent, useEditorRef } from "@udecode/plate-common";
+import { useKey } from "rooks";
 
-import { cn, isMobile } from '@/utils';
+import { cn, isMobile } from "@/utils";
 
-import type { PlateContentProps } from '@udecode/plate-common';
+import type { PlateContentProps } from "@udecode/plate-common";
 
 export type EditorProps = PlateContentProps & {
   sendMessage: () => void;
@@ -14,9 +14,9 @@ const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
   ({ id, sendMessage, className, disabled, readOnly, ...props }, ref) => {
     const editorRef = useEditorRef(id);
     useKey(
-      'Enter',
+      "Enter",
       (evt) => {
-        console.log('enter', editorRef, evt);
+        console.log("enter", editorRef, evt);
 
         if (!editorRef) return;
         if (evt.shiftKey || evt.ctrlKey || evt.altKey || evt.isComposing) {
@@ -29,20 +29,17 @@ const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
       {
         when: !isMobile(),
         // @ts-ignore
-        target: ref,
+        target: ref
       }
     );
     return (
-      <div
-        ref={ref}
-        className="relative h-fit w-full  pl-10"
-      >
+      <div ref={ref} className="relative h-fit w-full pl-10">
         <PlateContent
           className={cn(
-            'relative overflow-hidden whitespace-pre-wrap break-words',
-            'w-full rounded-md bg-background ring-offset-background placeholder:text-gray-500 focus-visible:outline-none',
-            '[&_[data-slate-placeholder]]:opacity-30',
-            '[&_[data-slate-placeholder]]:top-[auto_!important]',
+            "relative overflow-hidden whitespace-pre-wrap break-words",
+            "w-full rounded-md bg-background ring-offset-background placeholder:text-gray-500 focus-visible:outline-none",
+            "[&_[data-slate-placeholder]]:opacity-30",
+            "[&_[data-slate-placeholder]]:top-[4px_!important]",
             className
           )}
           spellCheck={false}
@@ -55,6 +52,6 @@ const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
     );
   }
 );
-Editor.displayName = 'Editor';
+Editor.displayName = "Editor";
 
 export { Editor };
diff --git a/src/components/MessageInput/plate-ui/mention/element.tsx b/src/components/MessageInput/plate-ui/mention/element.tsx
index 7ebfc438..29b89b2f 100644
--- a/src/components/MessageInput/plate-ui/mention/element.tsx
+++ b/src/components/MessageInput/plate-ui/mention/element.tsx
@@ -1,17 +1,11 @@
-import React, { forwardRef } from 'react';
-import {
-  getHandler,
-  PlateElement,
-  PlateElementProps,
-  Value,
-} from '@udecode/plate-common';
-import { TMentionElement } from '@udecode/plate-mention';
-import { useFocused, useSelected } from 'slate-react';
+import React, { forwardRef } from "react";
+import { getHandler, PlateElement, PlateElementProps, Value } from "@udecode/plate-common";
+import { TMentionElement } from "@udecode/plate-mention";
+import { useFocused, useSelected } from "slate-react";
 
-import { cn } from '@/utils';
+import { cn } from "@/utils";
 
-export interface MentionElementProps
-  extends PlateElementProps<Value, TMentionElement> {
+export interface MentionElementProps extends PlateElementProps<Value, TMentionElement> {
   /**
    * Prefix rendered before mention
    */
@@ -20,38 +14,37 @@ export interface MentionElementProps
   renderLabel?: (mentionable: TMentionElement) => string;
 }
 
-const MentionElement = forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  MentionElementProps
->(({ prefix, renderLabel, className, onClick, ...props }, ref) => {
-  const { children, element } = props;
+const MentionElement = forwardRef<React.ElementRef<typeof PlateElement>, MentionElementProps>(
+  ({ prefix, renderLabel, className, onClick, ...props }, ref) => {
+    const { children, element } = props;
 
-  const selected = useSelected();
-  const focused = useFocused();
+    const selected = useSelected();
+    const focused = useFocused();
 
-  return (
-    <PlateElement
-      ref={ref}
-      className={cn(
-        'inline-block cursor-pointer rounded-md px-1.5 py-0.5 align-baseline text-sm font-medium bg-gray-100',
-        selected && focused && 'ring-2 ring-ring',
-        element.children[0].bold === true && 'font-bold',
-        element.children[0].italic === true && 'italic',
-        element.children[0].underline === true && 'underline',
-        className
-      )}
-      data-slate-value={element.value}
-      contentEditable={false}
-      onClick={getHandler(onClick, element)}
-      {...props}
-    >
-      {prefix}
-      {renderLabel ? renderLabel(element) : element.value}
-      {children}
-    </PlateElement>
-  );
-});
+    return (
+      <PlateElement
+        ref={ref}
+        className={cn(
+          "inline-block cursor-pointer rounded-md px-1.5 py-0.5 align-baseline text-sm font-medium bg-gray-100 dark:bg-gray-900",
+          selected && focused && "ring-2 ring-ring",
+          element.children[0].bold === true && "font-bold",
+          element.children[0].italic === true && "italic",
+          element.children[0].underline === true && "underline",
+          className
+        )}
+        data-slate-value={element.value}
+        contentEditable={false}
+        onClick={getHandler(onClick, element)}
+        {...props}
+      >
+        {prefix}
+        {renderLabel ? renderLabel(element) : element.value}
+        {children}
+      </PlateElement>
+    );
+  }
+);
 
-MentionElement.displayName = 'MentionElement';
+MentionElement.displayName = "MentionElement";
 
 export { MentionElement };
diff --git a/src/components/MessageInput/plugins.ts b/src/components/MessageInput/plugins.ts
index cd57e472..7218f69b 100644
--- a/src/components/MessageInput/plugins.ts
+++ b/src/components/MessageInput/plugins.ts
@@ -16,53 +16,56 @@ import { MentionElement } from "./plate-ui/mention/element";
 import { MentionInputElement } from "./plate-ui/mention/input-element";
 import { ParagraphElement } from "./plate-ui/paragraph-element";
 
-export const plugins = createPlugins(
-  [
-    // Nodes
-    createParagraphPlugin(),
-    createMentionPlugin({
-      options: {
-        createMentionNode: (item) => {
-          const { key, text } = item;
-          return { value: text, uid: key };
-        }
-      }
-    }),
-
-    // Functionality
-    createComboboxPlugin(),
-    createEmojiPlugin({
-      renderAfterEditable: EmojiCombobox as RenderAfterEditable
-    }),
-    createExitBreakPlugin({
-      options: {
-        rules: [
-          {
-            hotkey: "mod+enter"
-          },
-          {
-            hotkey: "mod+shift+enter",
-            before: true
+export const plugins = ({ enableMention }: { enableMention: boolean }) =>
+  createPlugins(
+    [
+      // Nodes
+      createParagraphPlugin(),
+      createMentionPlugin({
+        // 私聊就不开启 mention 了
+        enabled: enableMention,
+        options: {
+          createMentionNode: (item) => {
+            const { key, text } = item;
+            return { value: text, uid: key };
           }
-        ]
-      }
-    }),
-    createNodeIdPlugin(),
+        }
+      }),
 
-    createSoftBreakPlugin({
-      options: {
-        rules: [{ hotkey: "shift+enter" }]
+      // Functionality
+      createComboboxPlugin(),
+      createEmojiPlugin({
+        renderAfterEditable: EmojiCombobox as RenderAfterEditable
+      }),
+      createExitBreakPlugin({
+        options: {
+          rules: [
+            {
+              hotkey: "mod+enter"
+            },
+            {
+              hotkey: "mod+shift+enter",
+              before: true
+            }
+          ]
+        }
+      }),
+      createNodeIdPlugin(),
+
+      createSoftBreakPlugin({
+        options: {
+          rules: [{ hotkey: "shift+enter" }]
+        }
+      }),
+      createTrailingBlockPlugin({
+        options: { type: ELEMENT_PARAGRAPH }
+      })
+    ],
+    {
+      components: {
+        [ELEMENT_MENTION]: MentionElement,
+        [ELEMENT_MENTION_INPUT]: MentionInputElement,
+        [ELEMENT_PARAGRAPH]: ParagraphElement
       }
-    }),
-    createTrailingBlockPlugin({
-      options: { type: ELEMENT_PARAGRAPH }
-    })
-  ],
-  {
-    components: {
-      [ELEMENT_MENTION]: MentionElement,
-      [ELEMENT_MENTION_INPUT]: MentionInputElement,
-      [ELEMENT_PARAGRAPH]: ParagraphElement
     }
-  }
-);
+  );