refactor: disable mention in DM

2023-11-06 22:49:19 +08:00
parent 2d17b0f3c8
commit cc636ad86b
5 changed files with 101 additions and 120 deletions
@@ -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;
 }
@@ -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
@@ -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 };
@@ -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 };
@@ -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
    }
-  }
-);
+  );