feat: remove preview button

src/components/ui/EditorToolbar.tsx

@@ -7,9 +7,6 @@ import { Tooltip } from "./Tooltip"
 export interface EditorToolbarProps {
   view: EditorView | null
   toolbars: ICommand[]
-  modeToolbars: ICommand[]
-  previewVisible: boolean
-  setPreviewVisible: Dispatch<SetStateAction<boolean>>
 }
 
 enum ToolbarMode {
@@ -17,36 +14,21 @@ enum ToolbarMode {
   Preview,
 }
 
-export const EditorToolbar: FC<EditorToolbarProps> = ({
-  view,
-  toolbars,
-  modeToolbars,
-  previewVisible,
-  setPreviewVisible,
-}) => {
+export const EditorToolbar: FC<EditorToolbarProps> = ({ view, toolbars }) => {
   const renderToolbar =
     (mode: ToolbarMode) =>
     // eslint-disable-next-line react/display-name
     ({ name, icon, label, execute }: ICommand) => {
-      const isPreviewModeCommand = mode === ToolbarMode.Preview
-      const active = isPreviewModeCommand && previewVisible
-      const disabled = !isPreviewModeCommand && previewVisible
       return (
         <Tooltip key={name} label={label} placement="bottom">
           <button
             key={name}
             type="button"
-            disabled={disabled}
-            className={clsx(
-              "w-7 h-7 transition-colors text-lg border border-transparent rounded flex items-center justify-center",
-              active
-                ? `text-white bg-accent border-accent`
-                : disabled
-                ? `text-zinc-400 cursor-not-allowed`
-                : `text-zinc-400 group-hover:text-zinc-600 hover:text-zinc-500 hover:border-zinc-300 hover:bg-zinc-100`,
-            )}
+            className={
+              "w-7 h-7 transition-colors text-lg border border-transparent rounded flex items-center justify-center text-zinc-400 group-hover:text-zinc-600 hover:text-zinc-500 hover:border-zinc-300 hover:bg-zinc-100"
+            }
             onClick={() => {
-              view && execute(view, { setPreviewVisible, container: view.dom })
+              view && execute(view, { container: view.dom })
             }}
           >
             <span className={icon}></span>
@@ -60,9 +42,6 @@ export const EditorToolbar: FC<EditorToolbarProps> = ({
       <div className="flex-1 flex space-x-1">
         {toolbars?.map(renderToolbar(ToolbarMode.Normal))}
       </div>
-      <div className="ml-1">
-        {modeToolbars?.map(renderToolbar(ToolbarMode.Preview))}
-      </div>
     </div>
   )
 }

src/editor/Preview.tsx

@@ -1,10 +0,0 @@
-import { ICommand } from "."
-
-export const Preview: ICommand = {
-  name: "preview",
-  label: "Toggle Preview",
-  icon: "i-bi:eye",
-  execute: (_, options) => {
-    options?.setPreviewVisible?.((visible) => !visible)
-  },
-}

src/editor/index.tsx

@@ -11,7 +11,6 @@ import { Italic } from "./Italic"
 import { Link } from "./Link"
 import { ListOrdered } from "./ListOrdered"
 import { ListUnordered } from "./ListUnordered"
-import { Preview } from "./Preview"
 import { Quote } from "./Quote"
 import { Strikethrough } from "./Strikethrough"
 import { Underline } from "./Underline"
@@ -131,5 +130,3 @@ export const toolbars: ICommand[] = [
   Image,
   UploadImage,
 ]
-
-export const modeToolbars: ICommand[] = [Preview]

src/pages/dashboard/[subdomain]/editor.tsx

@@ -4,7 +4,7 @@ import dayjs from "dayjs"
 import { useRouter } from "next/router"
 import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react"
 import toast from "react-hot-toast"
-import { modeToolbars, toolbars } from "~/editor"
+import { toolbars } from "~/editor"
 import { DashboardLayout } from "~/components/dashboard/DashboardLayout"
 import { DashboardMain } from "~/components/dashboard/DashboardMain"
 import { PublishButton } from "~/components/dashboard/PublishButton"
@@ -76,8 +76,6 @@ export default function SubdomainEditor() {
   })
   const [content, setContent] = useState("")
 
-  const [previewVisible, setPreviewVisible] = useState(false)
-
   type Values = typeof values
 
   const updateValue = useCallback(
@@ -210,13 +208,7 @@ export default function SubdomainEditor() {
       <DashboardLayout title="Editor">
         <DashboardMain fullWidth>
           <header className="flex justify-between absolute top-0 left-0 right-0 z-10 px-5 h-14 border-b items-center text-sm">
-            <EditorToolbar
-              view={view}
-              toolbars={toolbars}
-              modeToolbars={modeToolbars}
-              previewVisible={previewVisible}
-              setPreviewVisible={setPreviewVisible}
-            ></EditorToolbar>
+            <EditorToolbar view={view} toolbars={toolbars}></EditorToolbar>
             <div className="flex items-center space-x-3">
               <span
                 className={clsx(