tweak(web): use iconbutton for editor helpers (#2426)

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

@@ -1,3 +1,4 @@
+import { IconButton } from "@mui/joy";
 import Icon from "@/components/Icon";
 import { useTagStore } from "@/store/module";
 
@@ -11,9 +12,9 @@ const TagSelector = (props: Props) => {
   const tags = tagStore.state.tags;
 
   return (
-    <div 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 dark:hover:bg-zinc-800 hover:shadow">
+    <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 dark:hover:bg-zinc-800 hover:shadow">
       <Icon.Hash className="w-5 h-5 mx-auto" />
-      <div className="hidden flex-row justify-start items-start flex-wrap absolute top-6 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
+      <div className="hidden flex-row justify-start items-start flex-wrap absolute top-8 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
         {tags.length > 0 ? (
           tags.map((tag) => {
             return (
@@ -32,7 +33,7 @@ const TagSelector = (props: Props) => {
           </p>
         )}
       </div>
-    </div>
+    </IconButton>
   );
 };
 

web/src/components/MemoEditor/index.tsx

@@ -1,4 +1,4 @@
-import { Select, Option, Button } from "@mui/joy";
+import { Select, Option, Button, IconButton } from "@mui/joy";
 import { isNumber, last, uniq, uniqBy } from "lodash-es";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -424,18 +424,27 @@ const MemoEditor = (props: Props) => {
       <div className="relative w-full flex flex-row justify-between items-center pt-2 z-1">
         <div className="flex flex-row justify-start items-center">
           <TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
-          <button 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">
+          <IconButton
-            <Icon.Image className="w-5 h-5 mx-auto" onClick={handleUploadFileBtnClick} />
+            onClick={handleUploadFileBtnClick}
-          </button>
+            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"
-          <button 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">
+          >
-            <Icon.Link className="w-5 h-5 mx-auto" onClick={handleAddMemoRelationBtnClick} />
+            <Icon.Image className="w-5 h-5 mx-auto" />
-          </button>
+          </IconButton>
-          <button 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">
+          <IconButton
-            <Icon.CheckSquare className="w-5 h-5 mx-auto" onClick={handleCheckBoxBtnClick} />
+            onClick={handleAddMemoRelationBtnClick}
-          </button>
+            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"
-          <button 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">
+          >
-            <Icon.Code className="w-5 h-5 mx-auto" onClick={handleCodeBlockBtnClick} />
+            <Icon.Link className="w-5 h-5 mx-auto" />
-          </button>
+          </IconButton>
+          <IconButton onClick={handleCheckBoxBtnClick}>
+            <Icon.CheckSquare className="w-5 h-5 mx-auto" />
+          </IconButton>
+          <IconButton
+            onClick={handleCodeBlockBtnClick}
+            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"
+          >
+            <Icon.Code className="w-5 h-5 mx-auto" />
+          </IconButton>
         </div>
       </div>
       <ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />