| 1 | "use client"; |
| 2 | |
| 3 | import { |
| 4 | BoldIcon, |
| 5 | ItalicIcon, |
| 6 | StrikethroughIcon, |
| 7 | UnderlineIcon, |
| 8 | WandSparklesIcon, |
| 9 | } from "lucide-react"; |
| 10 | import { KEYS } from "platejs"; |
| 11 | import { useEditorReadOnly } from "platejs/react"; |
| 12 | |
| 13 | import { AIToolbarButton } from "./ai-toolbar-button"; |
| 14 | import { AlignToolbarButton } from "./align-toolbar-button"; |
| 15 | import { CommentToolbarButton } from "./comment-toolbar-button"; |
| 16 | import { FontColorPickerToolbarButton } from "./font-color-picker-toolbar-button"; |
| 17 | import { FontFamilyToolbarButton } from "./font-family-toolbar-button"; |
| 18 | import { FontSizeToolbarButton } from "./font-size-toolbar-button"; |
| 19 | import { HighlightToolbarButton } from "./highlight-toolbar-button"; |
| 20 | import { |
| 21 | BulletedListToolbarButton, |
| 22 | NumberedListToolbarButton, |
| 23 | TodoListToolbarButton, |
| 24 | } from "./list-toolbar-button"; |
| 25 | import { MarkToolbarButton } from "./mark-toolbar-button"; |
| 26 | import { SuggestionToolbarButton } from "./suggestion-toolbar-button"; |
| 27 | import { TextCaseToolbarButton } from "./text-case-toolbar-button"; |
| 28 | import { TextToDiagramToolbarButton } from "./text-to-diagram-toolbar-button"; |
| 29 | import { ToolbarGroup } from "./toolbar"; |
| 30 | import { TurnIntoToolbarButton } from "./turn-into-toolbar-button"; |
| 31 | |
| 32 | export function FloatingToolbarButtons() { |
| 33 | const readOnly = useEditorReadOnly(); |
| 34 | |
| 35 | return ( |
| 36 | <> |
| 37 | {!readOnly && ( |
| 38 | <> |
| 39 | {/* Font Controls Group */} |
| 40 | <ToolbarGroup> |
| 41 | <FontFamilyToolbarButton /> |
| 42 | <TurnIntoToolbarButton /> |
| 43 | <FontSizeToolbarButton /> |
| 44 | <FontColorPickerToolbarButton /> |
| 45 | <TextCaseToolbarButton /> |
| 46 | </ToolbarGroup> |
| 47 | |
| 48 | {/* Text Formatting Group */} |
| 49 | <ToolbarGroup> |
| 50 | <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)"> |
| 51 | <BoldIcon /> |
| 52 | </MarkToolbarButton> |
| 53 | |
| 54 | <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)"> |
| 55 | <ItalicIcon /> |
| 56 | </MarkToolbarButton> |
| 57 | |
| 58 | <MarkToolbarButton |
| 59 | nodeType={KEYS.underline} |
| 60 | tooltip="Underline (⌘+U)" |
| 61 | > |
| 62 | <UnderlineIcon /> |
| 63 | </MarkToolbarButton> |
| 64 | |
| 65 | <MarkToolbarButton |
| 66 | nodeType={KEYS.strikethrough} |
| 67 | tooltip="Strikethrough (⌘+⇧+M)" |
| 68 | > |
| 69 | <StrikethroughIcon /> |
| 70 | </MarkToolbarButton> |
| 71 | </ToolbarGroup> |
| 72 | |
| 73 | {/* Lists & Quote Group */} |
| 74 | <ToolbarGroup> |
| 75 | <TodoListToolbarButton /> |
| 76 | <BulletedListToolbarButton /> |
| 77 | <NumberedListToolbarButton /> |
| 78 | <HighlightToolbarButton /> |
| 79 | <AlignToolbarButton /> |
| 80 | </ToolbarGroup> |
| 81 | |
| 82 | {/* AI & Actions Group */} |
| 83 | <ToolbarGroup> |
| 84 | <AIToolbarButton tooltip="AI commands"> |
| 85 | <WandSparklesIcon /> |
| 86 | </AIToolbarButton> |
| 87 | |
| 88 | <TextToDiagramToolbarButton /> |
| 89 | <CommentToolbarButton /> |
| 90 | <SuggestionToolbarButton /> |
| 91 | </ToolbarGroup> |
| 92 | </> |
| 93 | )} |
| 94 | </> |
| 95 | ); |
| 96 | } |
| 97 |