chore: replace toolbar icons

Author: richardshiue

src/components/editor/components/panels/slash-panel/SlashPanel.tsx

@@ -19,7 +19,7 @@ import { ReactComponent as DocumentIcon } from '@/assets/icons/page.svg';
 import { ReactComponent as BulletedListIcon } from '@/assets/icons/bulleted_list.svg';
 import { ReactComponent as CalloutIcon } from '@/assets/icons/callout.svg';
 import { ReactComponent as TodoListIcon } from '@/assets/icons/todo.svg';
-import { ReactComponent as CodeIcon } from '@/assets/inline_code.svg';
+import { ReactComponent as CodeIcon } from '@/assets/icons/inline_code.svg';
 import { ReactComponent as DividerIcon } from '@/assets/slash_menu_icon_divider.svg';
 import { ReactComponent as RefDocumentIcon } from '@/assets/icons/ref_page.svg';
 import { ReactComponent as EmojiIcon } from '@/assets/slash_menu_icon_emoji.svg';
@@ -39,7 +39,7 @@ import { ReactComponent as ToggleListIcon } from '@/assets/icons/toggle_list.svg
 import { ReactComponent as ToggleHeading1Icon } from '@/assets/icons/toggle_h1.svg';
 import { ReactComponent as ToggleHeading2Icon } from '@/assets/icons/toggle_h2.svg';
 import { ReactComponent as ToggleHeading3Icon } from '@/assets/icons/toggle_h3.svg';
-import { ReactComponent as MathIcon } from '@/assets/slash_menu_icon_math_equation.svg';
+import { ReactComponent as FormulaIcon } from '@/assets/icons/formula.svg';
 import { ReactComponent as VideoIcon } from '@/assets/icons/video.svg';
 
 import { notify } from '@/components/_shared/notify';
@@ -383,7 +383,7 @@ export function SlashPanel({
       }, {
         label: t('document.slashMenu.name.mathEquation'),
         key: 'math',
-        icon: <MathIcon />,
+        icon: <FormulaIcon />,
         keywords: ['math', 'equation', 'formula'],
         onClick: () => {
           turnInto(BlockType.EquationBlock, {});

src/components/editor/components/toolbar/selection-toolbar/actions/Align.tsx

@@ -2,9 +2,9 @@ import { YjsEditor } from '@/application/slate-yjs';
 import { CustomEditor } from '@/application/slate-yjs/command';
 import { findSlateEntryByBlockId, getBlockEntry } from '@/application/slate-yjs/utils/editor';
 import { AlignType, BlockData } from '@/application/types';
-import { ReactComponent as AlignCenterSvg } from '@/assets/toolbar_align_center.svg';
-import { ReactComponent as AlignLeftSvg } from '@/assets/toolbar_align_left.svg';
-import { ReactComponent as AlignRightSvg } from '@/assets/toolbar_align_right.svg';
+import { ReactComponent as AlignCenterSvg } from '@/assets/icons/align_center.svg';
+import { ReactComponent as AlignLeftSvg } from '@/assets/icons/align_left.svg';
+import { ReactComponent as AlignRightSvg } from '@/assets/icons/align_right.svg';
 import { Popover } from '@/components/_shared/popover';
 import {
   useSelectionToolbarContext,

src/components/editor/components/toolbar/selection-toolbar/actions/Bold.tsx

@@ -6,9 +6,9 @@ import { createHotKeyLabel, HOT_KEY_NAME } from '@/utils/hotkeys';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSlateStatic } from 'slate-react';
-import { ReactComponent as BoldSvg } from '@/assets/bold.svg';
+import { ReactComponent as BoldSvg } from '@/assets/icons/bold.svg';
 
-export function Bold () {
+export function Bold() {
   const { t } = useTranslation();
   const editor = useSlateStatic() as YjsEditor;
   const isActivated = CustomEditor.isMarkActive(editor, EditorMarkFormat.Bold);

src/components/editor/components/toolbar/selection-toolbar/actions/BulletedList.tsx

@@ -6,7 +6,7 @@ import React, { useCallback } from 'react';
 import ActionButton from './ActionButton';
 import { useTranslation } from 'react-i18next';
 import { useSlateStatic } from 'slate-react';
-import { ReactComponent as BulletedListSvg } from '@/assets/bulleted_list.svg';
+import { ReactComponent as BulletedListSvg } from '@/assets/icons/bulleted_list.svg';
 
 export function BulletedList() {
   const { t } = useTranslation();
@@ -25,15 +25,14 @@ export function BulletedList() {
       }
 
       CustomEditor.turnToBlock(editor, node.blockId as string, BlockType.BulletedListBlock, {});
-
     } catch (e) {
       return;
     }
   }, [editor]);
 
   return (
     <ActionButton active={isActivated} onClick={onClick} tooltip={t('document.plugins.bulletedList')}>
-      <BulletedListSvg/>
+      <BulletedListSvg />
     </ActionButton>
   );
 }

src/components/editor/components/toolbar/selection-toolbar/actions/Color.tsx

@@ -11,7 +11,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import ActionButton from './ActionButton';
 import { useTranslation } from 'react-i18next';
 import { useSlateStatic } from 'slate-react';
-import { ReactComponent as ColorSvg } from '@/assets/color_theme.svg';
+import { ReactComponent as ColorSvg } from '@/assets/icons/text_color.svg';
 import { ReactComponent as TextSvg } from '@/assets/format_text.svg';
 
 function Color () {

src/components/editor/components/toolbar/selection-toolbar/actions/Formula.tsx

@@ -9,7 +9,7 @@ import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Transforms, Text, Editor } from 'slate';
 import { useSlate } from 'slate-react';
-import { ReactComponent as MathSvg } from '@/assets/math.svg';
+import { ReactComponent as MathSvg } from '@/assets/icons/formula.svg';
 
 function Formula() {
   const { t } = useTranslation();

src/components/editor/components/toolbar/selection-toolbar/actions/Heading.tsx

@@ -9,9 +9,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ActionButton from './ActionButton';
 import { useTranslation } from 'react-i18next';
 import { useSlateStatic } from 'slate-react';
-import { ReactComponent as Heading1Svg } from '@/assets/h1.svg';
-import { ReactComponent as Heading2Svg } from '@/assets/h2.svg';
-import { ReactComponent as Heading3Svg } from '@/assets/h3.svg';
+import { ReactComponent as Heading1 } from '@/assets/icons/h1.svg';
+import { ReactComponent as Heading2 } from '@/assets/icons/h2.svg';
+import { ReactComponent as Heading3 } from '@/assets/icons/h3.svg';
 import { ReactComponent as DownArrow } from '@/assets/icons/alt_arrow_down.svg';
 
 const popoverProps: Partial<PopoverProps> = {
@@ -73,18 +73,18 @@ export function Heading() {
 
   const getActiveButton = useCallback(() => {
     if (isActivated(1)) {
-      return <Heading1Svg className={'text-fill-default'} />;
+      return <Heading1 className={'text-fill-default'} />;
     }
 
     if (isActivated(2)) {
-      return <Heading2Svg className={'text-fill-default'} />;
+      return <Heading2 className={'text-fill-default'} />;
     }
 
     if (isActivated(3)) {
-      return <Heading3Svg className={'text-fill-default'} />;
+      return <Heading3 className={'text-fill-default'} />;
     }
 
-    return <Heading3Svg />;
+    return <Heading3 />;
   }, [isActivated]);
 
   const [open, setOpen] = useState(false);
@@ -126,13 +126,13 @@ export function Heading() {
         >
           <div className={'flex h-[32px] items-center justify-center px-2'}>
             <ActionButton active={isActivated(1)} tooltip={t('editor.heading1')} onClick={toHeading(1)}>
-              <Heading1Svg />
+              <Heading1 />
             </ActionButton>
             <ActionButton active={isActivated(2)} tooltip={t('editor.heading2')} onClick={toHeading(2)}>
-              <Heading2Svg />
+              <Heading2 />
             </ActionButton>
             <ActionButton active={isActivated(3)} tooltip={t('editor.heading3')} onClick={toHeading(3)}>
-              <Heading3Svg />
+              <Heading3 />
             </ActionButton>
           </div>
         </Popover>

src/components/editor/components/toolbar/selection-toolbar/actions/Href.tsx

@@ -1,15 +1,13 @@
 import { YjsEditor } from '@/application/slate-yjs';
 import { CustomEditor } from '@/application/slate-yjs/command';
 import { EditorMarkFormat } from '@/application/slate-yjs/types';
-import {
-  useSelectionToolbarContext,
-} from '@/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.hooks';
+import { useSelectionToolbarContext } from '@/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.hooks';
 import { createHotkey, getModifier, HOT_KEY_NAME } from '@/utils/hotkeys';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import ActionButton from './ActionButton';
 import { useTranslation } from 'react-i18next';
 import { ReactEditor, useSlate } from 'slate-react';
-import { ReactComponent as LinkSvg } from '@/assets/link.svg';
+import { ReactComponent as LinkSvg } from '@/assets/icons/link.svg';
 import HrefPopover from '@/components/editor/components/leaf/href/HrefPopover';
 
 export function Href() {
@@ -18,9 +16,7 @@ export function Href() {
 
   const editor = useSlate() as YjsEditor;
 
-  const {
-    visible,
-  } = useSelectionToolbarContext();
+  const { visible } = useSelectionToolbarContext();
   const [state, setState] = React.useState({
     isActivated: false,
     hasFormulaActivated: false,
@@ -47,12 +43,15 @@ export function Href() {
     setState(getState());
   }, [visible, getState, editor.selection]);
 
-  const onClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    e.preventDefault();
-    setOpen(true);
-    forceShow(true);
-  }, [forceShow]);
+  const onClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      setOpen(true);
+      forceShow(true);
+    },
+    [forceShow]
+  );
 
   const tooltip = useMemo(() => {
     const modifier = getModifier();
@@ -93,13 +92,8 @@ export function Href() {
 
   return (
     <>
-      <ActionButton
-        disabled={disabled}
-        onClick={onClick}
-        active={isActivated}
-        tooltip={tooltip}
-      >
-        <LinkSvg/>
+      <ActionButton disabled={disabled} onClick={onClick} active={isActivated} tooltip={tooltip}>
+        <LinkSvg />
       </ActionButton>
 
       <HrefPopover

src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx

@@ -5,9 +5,9 @@ import { createHotKeyLabel, HOT_KEY_NAME } from '@/utils/hotkeys';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSlateStatic } from 'slate-react';
-import { ReactComponent as CodeSvg } from '@/assets/inline_code.svg';
+import { ReactComponent as CodeSvg } from '@/assets/icons/inline_code.svg';
 
-export function InlineCode () {
+export function InlineCode() {
   const { t } = useTranslation();
   const editor = useSlateStatic();
   const isActivated = CustomEditor.isMarkActive(editor, EditorMarkFormat.Code);

src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx

@@ -5,7 +5,7 @@ import { createHotKeyLabel, HOT_KEY_NAME } from '@/utils/hotkeys';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSlateStatic } from 'slate-react';
-import { ReactComponent as ItalicSvg } from '@/assets/italic.svg';
+import { ReactComponent as ItalicSvg } from '@/assets/icons/italic.svg';
 
 export function Italic () {
   const { t } = useTranslation();