chore: update tag selector

web/package.json

@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@matejmazur/react-katex": "^3.1.3",
+    "@mui/base": "5.0.0-beta.31",
     "@mui/joy": "5.0.0-beta.22",
     "@reduxjs/toolkit": "^1.9.7",
     "axios": "^1.6.5",

web/pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   '@matejmazur/react-katex':
     specifier: ^3.1.3
     version: 3.1.3(katex@0.16.9)(react@18.2.0)
+  '@mui/base':
+    specifier: 5.0.0-beta.31
+    version: 5.0.0-beta.31(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
   '@mui/joy':
     specifier: 5.0.0-beta.22
     version: 5.0.0-beta.22(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)

web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx

@@ -67,15 +67,13 @@ const MarkdownMenu = (props: Props) => {
         slots={{ root: IconButton }}
         slotProps={{
           root: {
-            className:
-              "flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow",
             size: "sm",
           },
         }}
       >
         <Icon.SquareSlash className="w-5 h-5 mx-auto" />
       </MenuButton>
-      <Menu className="text-sm" size="sm">
+      <Menu className="text-sm" size="sm" placement="bottom-start">
         <MenuItem onClick={handleCodeBlockClick}>
           <Icon.Code2 className="w-4 h-auto" />
           <span>Code block</span>

web/src/components/MemoEditor/ActionButton/TagSelector.tsx

-import { IconButton } from "@mui/joy";
-import { useEffect } from "react";
+import { ClickAwayListener } from "@mui/base/ClickAwayListener";
+import { Dropdown, IconButton, Menu, MenuButton } from "@mui/joy";
+import { useEffect, useState } from "react";
 import Icon from "@/components/Icon";
 import OverflowTip from "@/components/kit/OverflowTip";
 import { useTagStore } from "@/store/module";
+import { EditorRefActions } from "../Editor";
 
 interface Props {
-  onTagSelectorClick: (tag: string) => void;
+  editorRef: React.RefObject<EditorRefActions>;
 }
 
 const TagSelector = (props: Props) => {
-  const { onTagSelectorClick } = props;
+  const { editorRef } = props;
   const tagStore = useTagStore();
+  const [open, setOpen] = useState(false);
   const tags = tagStore.state.tags;
 
   useEffect(() => {
@@ -23,32 +26,50 @@ const TagSelector = (props: Props) => {
     })();
   }, []);
 
+  const handleTagClick = (tag: string) => {
+    editorRef.current?.insertText(`#${tag} `);
+  };
+
   return (
-    <IconButton
-      className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 hover:shadow"
-      size="sm"
+    <Dropdown open={open} onOpenChange={(_, isOpen) => setOpen(isOpen)}>
+      <MenuButton
+        slots={{ root: IconButton }}
+        slotProps={{
+          root: {
+            size: "sm",
+          },
+        }}
       >
         <Icon.Hash className="w-5 h-5 mx-auto" />
-      <div className="hidden flex-row justify-start items-start flex-wrap absolute top-7 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-100 dark:bg-zinc-700 group-hover:flex">
+      </MenuButton>
+      <Menu className="relative text-sm" size="sm" placement="bottom-start">
+        <ClickAwayListener
+          onClickAway={() => {
+            setOpen(false);
+          }}
+        >
           {tags.length > 0 ? (
-          tags.map((tag) => {
+            <div className="flex-row justify-start items-start flex-wrap px-1 max-w-[12rem] h-auto max-h-48 overflow-y-auto font-mono">
+              {tags.map((tag) => {
                 return (
                   <div
-                className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-200 dark:hover:bg-zinc-800 shrink-0"
-                onClick={() => onTagSelectorClick(tag)}
+                    className="inline-block w-auto max-w-full cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 shrink-0"
+                    onClick={() => handleTagClick(tag)}
                     key={tag}
                   >
                     <OverflowTip>#{tag}</OverflowTip>
                   </div>
                 );
-          })
+              })}
+            </div>
           ) : (
-          <p className="italic text-sm ml-2" onClick={(e) => e.stopPropagation()}>
-            No tags found
+            <p className="italic mx-1" onClick={(e) => e.stopPropagation()}>
+              No tag found
             </p>
           )}
-      </div>
-    </IconButton>
+        </ClickAwayListener>
+      </Menu>
+    </Dropdown>
   );
 };
 

web/src/components/MemoEditor/index.tsx

 import { Select, Option, Button, IconButton, Divider } from "@mui/joy";
 import { uniqBy } from "lodash-es";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import useLocalStorage from "react-use/lib/useLocalStorage";
@@ -335,10 +335,6 @@ const MemoEditor = (props: Props) => {
     });
   };
 
-  const handleTagSelectorClick = useCallback((tag: string) => {
-    editorRef.current?.insertText(`#${tag} `);
-  }, []);
-
   const handleEditorFocus = () => {
     editorRef.current?.focus();
   };
@@ -368,20 +364,12 @@ const MemoEditor = (props: Props) => {
     >
       <Editor ref={editorRef} {...editorConfig} />
       <div className="relative w-full flex flex-row justify-between items-center pt-2" onFocus={(e) => e.stopPropagation()}>
-        <div className="flex flex-row justify-start items-center">
-          <TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
-          <IconButton
-            className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
-            size="sm"
-            onClick={handleUploadFileBtnClick}
-          >
+        <div className="flex flex-row justify-start items-center opacity-80">
+          <TagSelector editorRef={editorRef} />
+          <IconButton size="sm" onClick={handleUploadFileBtnClick}>
             <Icon.Image className="w-5 h-5 mx-auto" />
           </IconButton>
-          <IconButton
-            className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
-            size="sm"
-            onClick={handleAddMemoRelationBtnClick}
-          >
+          <IconButton size="sm" onClick={handleAddMemoRelationBtnClick}>
             <Icon.Link className="w-5 h-5 mx-auto" />
           </IconButton>
           <MarkdownMenu editorRef={editorRef} />