| 1 | "use client"; |
| 2 | |
| 3 | import { |
| 4 | ArrowUpToLineIcon, |
| 5 | BaselineIcon, |
| 6 | BoldIcon, |
| 7 | Code2Icon, |
| 8 | ItalicIcon, |
| 9 | PaintBucketIcon, |
| 10 | StrikethroughIcon, |
| 11 | UnderlineIcon, |
| 12 | WandSparklesIcon, |
| 13 | } from "lucide-react"; |
| 14 | import { KEYS } from "platejs"; |
| 15 | import { useEditorReadOnly } from "platejs/react"; |
| 16 | |
| 17 | import { cn } from "@/lib/utils"; |
| 18 | import { useNotesState } from "@/states/notes-state"; |
| 19 | import { AIToolbarButton } from "./ai-toolbar-button"; |
| 20 | import { AlignToolbarButton } from "./align-toolbar-button"; |
| 21 | import { CommentToolbarButton } from "./comment-toolbar-button"; |
| 22 | import { EmojiToolbarButton } from "./emoji-toolbar-button"; |
| 23 | import { ExportToolbarButton } from "./export-toolbar-button"; |
| 24 | import { FontColorToolbarButton } from "./font-color-toolbar-button"; |
| 25 | import { FontSizeToolbarButton } from "./font-size-toolbar-button"; |
| 26 | import { HighlightToolbarButton } from "./highlight-toolbar-button"; |
| 27 | import { RedoToolbarButton, UndoToolbarButton } from "./history-toolbar-button"; |
| 28 | import { ImportToolbarButton } from "./import-toolbar-button"; |
| 29 | import { |
| 30 | IndentToolbarButton, |
| 31 | OutdentToolbarButton, |
| 32 | } from "./indent-toolbar-button"; |
| 33 | import { InsertToolbarButton } from "./insert-toolbar-button"; |
| 34 | import { LineHeightToolbarButton } from "./line-height-toolbar-button"; |
| 35 | import { LinkToolbarButton } from "./link-toolbar-button"; |
| 36 | import { |
| 37 | BulletedListToolbarButton, |
| 38 | NumberedListToolbarButton, |
| 39 | TodoListToolbarButton, |
| 40 | } from "./list-toolbar-button"; |
| 41 | import { MarkToolbarButton } from "./mark-toolbar-button"; |
| 42 | import { MediaToolbarButton } from "./media-toolbar-button"; |
| 43 | import { ModeToolbarButton } from "./mode-toolbar-button"; |
| 44 | import { MoreToolbarButton } from "./more-toolbar-button"; |
| 45 | import { PrintToolbarButton } from "./print-toolbar-button"; |
| 46 | import { SuggestionToolbarButton } from "./suggestion-toolbar-button"; |
| 47 | import { TableToolbarButton } from "./table-toolbar-button"; |
| 48 | import { TextToDiagramToolbarButton } from "./text-to-diagram-toolbar-button"; |
| 49 | import { ToggleToolbarButton } from "./toggle-toolbar-button"; |
| 50 | import { ToolbarGroup } from "./toolbar"; |
| 51 | import { TurnIntoToolbarButton } from "./turn-into-toolbar-button"; |
| 52 | |
| 53 | export function FixedToolbarButtons() { |
| 54 | const readOnly = useEditorReadOnly(); |
| 55 | const isGenerating = useNotesState((state) => state.isGenerating); |
| 56 | const shouldHideEditingActions = readOnly && !isGenerating; |
| 57 | const isToolbarInteractionDisabled = isGenerating; |
| 58 | |
| 59 | return ( |
| 60 | <div |
| 61 | aria-disabled={isToolbarInteractionDisabled} |
| 62 | className={cn( |
| 63 | "flex w-full", |
| 64 | isToolbarInteractionDisabled && "pointer-events-none opacity-50", |
| 65 | )} |
| 66 | > |
| 67 | {!shouldHideEditingActions && ( |
| 68 | <> |
| 69 | <ToolbarGroup> |
| 70 | <UndoToolbarButton /> |
| 71 | <RedoToolbarButton /> |
| 72 | </ToolbarGroup> |
| 73 | |
| 74 | <ToolbarGroup> |
| 75 | <AIToolbarButton tooltip="AI commands"> |
| 76 | <WandSparklesIcon /> |
| 77 | </AIToolbarButton> |
| 78 | |
| 79 | <TextToDiagramToolbarButton /> |
| 80 | </ToolbarGroup> |
| 81 | |
| 82 | <ToolbarGroup> |
| 83 | <ExportToolbarButton> |
| 84 | <ArrowUpToLineIcon /> |
| 85 | </ExportToolbarButton> |
| 86 | |
| 87 | <ImportToolbarButton /> |
| 88 | <PrintToolbarButton /> |
| 89 | </ToolbarGroup> |
| 90 | |
| 91 | <ToolbarGroup> |
| 92 | <InsertToolbarButton /> |
| 93 | <TurnIntoToolbarButton /> |
| 94 | <FontSizeToolbarButton /> |
| 95 | </ToolbarGroup> |
| 96 | |
| 97 | <ToolbarGroup> |
| 98 | <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)"> |
| 99 | <BoldIcon /> |
| 100 | </MarkToolbarButton> |
| 101 | |
| 102 | <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)"> |
| 103 | <ItalicIcon /> |
| 104 | </MarkToolbarButton> |
| 105 | |
| 106 | <MarkToolbarButton |
| 107 | nodeType={KEYS.underline} |
| 108 | tooltip="Underline (⌘+U)" |
| 109 | > |
| 110 | <UnderlineIcon /> |
| 111 | </MarkToolbarButton> |
| 112 | |
| 113 | <MarkToolbarButton |
| 114 | nodeType={KEYS.strikethrough} |
| 115 | tooltip="Strikethrough (⌘+⇧+M)" |
| 116 | > |
| 117 | <StrikethroughIcon /> |
| 118 | </MarkToolbarButton> |
| 119 | |
| 120 | <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)"> |
| 121 | <Code2Icon /> |
| 122 | </MarkToolbarButton> |
| 123 | |
| 124 | <FontColorToolbarButton nodeType={KEYS.color} tooltip="Text color"> |
| 125 | <BaselineIcon /> |
| 126 | </FontColorToolbarButton> |
| 127 | |
| 128 | <FontColorToolbarButton |
| 129 | nodeType={KEYS.backgroundColor} |
| 130 | tooltip="Background color" |
| 131 | > |
| 132 | <PaintBucketIcon /> |
| 133 | </FontColorToolbarButton> |
| 134 | </ToolbarGroup> |
| 135 | |
| 136 | <ToolbarGroup> |
| 137 | <AlignToolbarButton /> |
| 138 | |
| 139 | <NumberedListToolbarButton /> |
| 140 | <BulletedListToolbarButton /> |
| 141 | <TodoListToolbarButton /> |
| 142 | <ToggleToolbarButton /> |
| 143 | </ToolbarGroup> |
| 144 | |
| 145 | <ToolbarGroup> |
| 146 | <LinkToolbarButton /> |
| 147 | <TableToolbarButton /> |
| 148 | <EmojiToolbarButton /> |
| 149 | <CommentToolbarButton /> |
| 150 | <SuggestionToolbarButton /> |
| 151 | </ToolbarGroup> |
| 152 | |
| 153 | <ToolbarGroup> |
| 154 | <MediaToolbarButton nodeType={KEYS.img} /> |
| 155 | <MediaToolbarButton nodeType={KEYS.video} /> |
| 156 | <MediaToolbarButton nodeType={KEYS.audio} /> |
| 157 | <MediaToolbarButton nodeType={KEYS.file} /> |
| 158 | </ToolbarGroup> |
| 159 | |
| 160 | <ToolbarGroup> |
| 161 | <LineHeightToolbarButton /> |
| 162 | <OutdentToolbarButton /> |
| 163 | <IndentToolbarButton /> |
| 164 | </ToolbarGroup> |
| 165 | |
| 166 | <ToolbarGroup> |
| 167 | <MoreToolbarButton /> |
| 168 | </ToolbarGroup> |
| 169 | </> |
| 170 | )} |
| 171 | |
| 172 | <div className="grow" /> |
| 173 | |
| 174 | <ToolbarGroup> |
| 175 | <HighlightToolbarButton /> |
| 176 | </ToolbarGroup> |
| 177 | |
| 178 | <ToolbarGroup> |
| 179 | <ModeToolbarButton /> |
| 180 | </ToolbarGroup> |
| 181 | </div> |
| 182 | ); |
| 183 | } |
| 184 |