🔨 refactor(bar.tsx): Replace EditorButton component with IconButton c…

…omponent

🔥 chore(editorButton.tsx): Remove unused EditorButton component

src/stories/chat/parts/bar.tsx

@@ -2,8 +2,11 @@ import styled from "styled-components";
 import { Tooltip } from "../../tooltip";
 import { ChatEditorArgs } from "../_types";
 import { Editor } from "@tiptap/react";
-import { EditorButton } from "./editorButton";
 import { isMac } from "../../theme/utils";
+import { ReactComponent as BoldIcon } from "../../../assets/icons/bold-fill.svg";
+import { ReactComponent as ItalicIcon } from "../../../assets/icons/italic-fill.svg";
+import { ReactComponent as MentionIcon } from "../../../assets/icons/at-fill.svg";
+import { IconButton } from "../../buttons/icon-button";
 
 const MenuContainer = styled.div`
   padding: ${({ theme }) => theme.space.xs} 0;
@@ -30,32 +33,87 @@ const CommentBar = ({
 
   if(!editor) return null;
 
+  const getIcon = (type: "bold" | "italic" | "mention") => {
+    switch (type) {
+      case "bold":
+        return <BoldIcon />;
+      case "italic":
+        return <ItalicIcon />;
+      case "mention":
+        return <MentionIcon />;
+      default:
+        return null;
+    }
+  };
+
+  const handleClick = (type: "bold" | "italic" | "mention") => {
+    switch (type) {
+      case "bold":
+        return editor.chain().focus().toggleBold().run();
+      case "italic":
+        return editor.chain().focus().toggleItalic().run();
+      case "mention":
+        const { from } = editor.state.selection;
+        const char = from > 1 ? " @" : "@";
+        return editor.commands.insertContent(char);
+      default:
+        return;
+    }
+  };
+
   return (
-    <MenuContainer>
+    <MenuContainer id="menu-container">
       <Tooltip
         content={`${i18n?.menu?.bold ?? "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`}
         placement="top"
         type="light"
         size="small"
+        hasArrow={false}
       >
-        <EditorButton editor={editor} type="bold" />
+        <IconButton
+          size={"small"}
+          isBasic={!editor.isActive("bold")}
+          isPrimary={editor.isActive("bold")}
+          isPill={false}
+          onClick={() => handleClick("bold")}
+        >
+          {getIcon("bold")}
+        </IconButton>
       </Tooltip>
       <Tooltip
         content={`${i18n?.menu?.italic ?? "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`}
         placement="top"
         type="light"
         size="small"
+        hasArrow={false}
       >
-        <EditorButton editor={editor} type="italic" />
+        <IconButton
+          size={"small"}
+          isBasic={!editor.isActive("italic")}
+          isPrimary={editor.isActive("italic")}
+          isPill={false}
+          onClick={() => handleClick("italic")}
+        >
+          {getIcon("italic")}
+        </IconButton>
       </Tooltip>
       <VerticalDivider />
       <Tooltip
         content={i18n?.menu?.mention ?? "Add a mention"}
         placement="top"
         type="light"
         size="small"
+        hasArrow={false}
       >
-        <EditorButton editor={editor} type="mention" />
+        <IconButton
+          size={"small"}
+          isBasic={!editor.isActive("mention")}
+          isPrimary={editor.isActive("mention")}
+          isPill={false}
+          onClick={() => handleClick("mention")}
+        >
+          {getIcon("mention")}
+        </IconButton>
       </Tooltip>
     </MenuContainer>
   );