feat: editor toolbar clear

src/app/dashboard/[subdomain]/editor/post-editor.tsx

@@ -12,11 +12,11 @@ import { useQueryClient } from "@tanstack/react-query"
 
 import { DashboardMain } from "~/components/dashboard/DashboardMain"
 import DualColumnEditor from "~/components/dashboard/DualColumnEditor"
+import { EditorToolbar } from "~/components/dashboard/EditorToolbar"
 import { OptionsButton } from "~/components/dashboard/OptionsButton"
 import { PublishButton } from "~/components/dashboard/PublishButton"
 import PublishedModal from "~/components/dashboard/PublishedModal"
 import { Button } from "~/components/ui/Button"
-import { EditorToolbar } from "~/components/ui/EditorToolbar"
 import { FieldLabel } from "~/components/ui/FieldLabel"
 import { ImageUploader } from "~/components/ui/ImageUploader"
 import { Input } from "~/components/ui/Input"
@@ -24,7 +24,6 @@ import { useModalStack } from "~/components/ui/ModalStack"
 import { Switch } from "~/components/ui/Switch"
 import { TagInput } from "~/components/ui/TagInput"
 import { UniLink } from "~/components/ui/UniLink"
-import { toolbars } from "~/editor"
 import {
   Values,
   initialEditorState,
@@ -418,7 +417,7 @@ export default function PostEditor() {
                   isMobileLayout ? "flex-1" : undefined
                 }`}
               >
-                <EditorToolbar view={view} toolbars={toolbars}></EditorToolbar>
+                <EditorToolbar view={view}></EditorToolbar>
               </div>
               {isMobileLayout ? (
                 <div className="flex items-center space-x-3 w-auto pl-5">

src/components/common/CommentInput.tsx

@@ -8,9 +8,9 @@ import { EditorView } from "@codemirror/view"
 import { useAccountState } from "@crossbell/connect-kit"
 import { Popover } from "@headlessui/react"
 
+import { editorUpload } from "~/components/dashboard/toolbars/Multimedia"
 import { Avatar } from "~/components/ui/Avatar"
 import { Button } from "~/components/ui/Button"
-import { editorUpload } from "~/editor/Multimedia"
 import { useUploadFile } from "~/hooks/useUploadFile"
 import { useTranslation } from "~/lib/i18n/client"
 import {

src/components/dashboard/DualColumnEditor.tsx

@@ -5,8 +5,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import { EditorView } from "@codemirror/view"
 
-import { toolbarShortcuts } from "~/editor"
-import { editorUpload } from "~/editor/Multimedia"
+import { toolbarShortcuts } from "~/components/dashboard/toolbars"
+import { editorUpload } from "~/components/dashboard/toolbars/Multimedia"
 import { useIsMobileLayout } from "~/hooks/useMobileLayout"
 import { useUploadFile } from "~/hooks/useUploadFile"
 import { useTranslation } from "~/lib/i18n/client"

src/components/dashboard/EditorToolbar.tsx

@@ -5,21 +5,11 @@ import { usePopper } from "react-popper"
 import { EditorView } from "@codemirror/view"
 import { Popover } from "@headlessui/react"
 
-import type { ICommand } from "~/editor"
+import { Tooltip } from "~/components/ui/Tooltip"
 import { useTranslation } from "~/lib/i18n/client"
 import { isMacOS } from "~/lib/utils"
 
-import { Tooltip } from "./Tooltip"
-
-export interface EditorToolbarProps {
-  view?: EditorView
-  toolbars: ICommand[]
-}
-
-enum ToolbarMode {
-  Normal,
-  Preview,
-}
+import { type ICommand, toolbars } from "./toolbars"
 
 type IToolbarItemProps = ICommand<any> & { view?: EditorView }
 
@@ -91,56 +81,54 @@ const ToolbarItemWithPopover = ({
   )
 }
 
-export const EditorToolbar = memo(({ view, toolbars }: EditorToolbarProps) => {
+export const EditorToolbar = memo(({ view }: { view?: EditorView }) => {
   const { t } = useTranslation("dashboard")
   const renderToolbar = useCallback(
-    (mode: ToolbarMode) =>
-      // eslint-disable-next-line react/display-name
-      ({ name, icon, label, execute, ui, shortcut }: ICommand) => {
-        return ui ? (
-          <ToolbarItemWithPopover
+    ({ name, icon, label, execute, ui, shortcut }: ICommand) => {
+      return ui ? (
+        <ToolbarItemWithPopover
+          key={name}
+          name={name}
+          icon={icon}
+          label={label}
+          execute={execute}
+          ui={ui}
+          view={view}
+          shortcut={shortcut}
+        />
+      ) : (
+        <Tooltip
+          key={name}
+          label={`${t(label)}${keyDisplay(shortcut)}`}
+          placement="bottom"
+        >
+          <button
             key={name}
-            name={name}
-            icon={icon}
-            label={label}
-            execute={execute}
-            ui={ui}
-            view={view}
-            shortcut={shortcut}
-          />
-        ) : (
-          <Tooltip
-            key={name}
-            label={`${t(label)}${keyDisplay(shortcut)}`}
-            placement="bottom"
+            title={name}
+            type="button"
+            className={
+              "w-9 h-9 transition-colors text-lg border border-transparent rounded flex items-center justify-center text-zinc-500 group-hover:text-zinc-600 hover:text-zinc-500 hover:border-zinc-300 hover:bg-zinc-100"
+            }
+            onClick={() => {
+              view &&
+                execute({
+                  view,
+                  options: { container: view.dom },
+                })
+            }}
           >
-            <button
-              key={name}
-              title={name}
-              type="button"
-              className={
-                "w-9 h-9 transition-colors text-lg border border-transparent rounded flex items-center justify-center text-zinc-500 group-hover:text-zinc-600 hover:text-zinc-500 hover:border-zinc-300 hover:bg-zinc-100"
-              }
-              onClick={() => {
-                view &&
-                  execute({
-                    view,
-                    options: { container: view.dom },
-                  })
-              }}
-            >
-              <span className={icon}></span>
-            </button>
-          </Tooltip>
-        )
-      },
+            <span className={icon}></span>
+          </button>
+        </Tooltip>
+      )
+    },
     [view, t],
   )
 
   return (
     <div className="flex group">
       <div className="flex-1 flex space-x-1">
-        {toolbars?.map(renderToolbar(ToolbarMode.Normal))}
+        {toolbars?.map(renderToolbar)}
       </div>
     </div>
   )

src/components/ui/CodeMirror.tsx

@@ -39,7 +39,7 @@ import {
 import { tags } from "@lezer/highlight"
 import { scroll } from "@uiw/codemirror-extensions-events"
 
-import { mentionAutocompletion } from "~/editor/mention-autocompletion"
+import { mentionAutocompletion } from "~/components/dashboard/toolbars/mention-autocompletion"
 import {
   codemirrorReconfigureExtension,
   monospaceFonts,