| 1 | "use client"; |
| 2 | |
| 3 | import { SuggestionPlugin } from "@platejs/suggestion/react"; |
| 4 | import { PencilLineIcon } from "lucide-react"; |
| 5 | import { useEditorPlugin, usePluginOption } from "platejs/react"; |
| 6 | |
| 7 | import { discussionPlugin } from "@/components/plate/plugins/discussion-kit"; |
| 8 | import { cn } from "@/lib/utils"; |
| 9 | import { ToolbarButton } from "./toolbar"; |
| 10 | |
| 11 | export function SuggestionToolbarButton() { |
| 12 | const { setOption } = useEditorPlugin(SuggestionPlugin); |
| 13 | const currentUserId = usePluginOption(discussionPlugin, "currentUserId"); |
| 14 | const isSuggesting = usePluginOption(SuggestionPlugin, "isSuggesting"); |
| 15 | const isDisabled = !currentUserId; |
| 16 | |
| 17 | return ( |
| 18 | <ToolbarButton |
| 19 | className={cn(isSuggesting && "text-brand/80 hover:text-brand/80")} |
| 20 | disabled={isDisabled} |
| 21 | onClick={() => { |
| 22 | if (isDisabled) { |
| 23 | return; |
| 24 | } |
| 25 | |
| 26 | setOption("isSuggesting", !isSuggesting); |
| 27 | }} |
| 28 | onMouseDown={(e) => e.preventDefault()} |
| 29 | tooltip={isSuggesting ? "Turn off suggesting" : "Suggestion edits"} |
| 30 | > |
| 31 | <PencilLineIcon /> |
| 32 | </ToolbarButton> |
| 33 | ); |
| 34 | } |
| 35 |