| 1 | "use client"; |
| 2 | |
| 3 | import { |
| 4 | PlateElement, |
| 5 | useEditorRef, |
| 6 | type PlateElementProps, |
| 7 | } from "platejs/react"; |
| 8 | |
| 9 | import { IconPicker } from "@/components/ui/icon-picker"; |
| 10 | import { cn } from "@/lib/utils"; |
| 11 | import { type TIconElement } from "../plugins/icon-plugin"; |
| 12 | |
| 13 | // Icon component that uses IconPicker |
| 14 | export const Icon = ({ |
| 15 | element, |
| 16 | className, |
| 17 | ref, |
| 18 | ...props |
| 19 | }: PlateElementProps<TIconElement>) => { |
| 20 | const { query, name } = element; |
| 21 | const editor = useEditorRef(); |
| 22 | |
| 23 | // Handle icon selection |
| 24 | const handleIconSelect = (iconName: string) => { |
| 25 | const path = editor.api.findPath(element); |
| 26 | if (!path) return; |
| 27 | editor.tf.setNodes({ name: iconName } as Partial<TIconElement>, { |
| 28 | at: path, |
| 29 | }); |
| 30 | }; |
| 31 | |
| 32 | return ( |
| 33 | <PlateElement |
| 34 | ref={ref} |
| 35 | element={element} |
| 36 | className={cn("group inline-flex justify-center", className)} |
| 37 | {...props} |
| 38 | > |
| 39 | <div className="mb-2 p-2"> |
| 40 | <IconPicker |
| 41 | defaultIcon={name || query} |
| 42 | hidePlaceholderWhenEmpty |
| 43 | onIconSelect={(iconName) => handleIconSelect(iconName)} |
| 44 | onIconRemove={() => { |
| 45 | const path = editor.api.findPath(element); |
| 46 | if (!path) return; |
| 47 | editor.tf.setNodes({ name: "" } as Partial<TIconElement>, { |
| 48 | at: path, |
| 49 | }); |
| 50 | }} |
| 51 | className="bg-transparent! hover:opacity-80" |
| 52 | /> |
| 53 | </div> |
| 54 | </PlateElement> |
| 55 | ); |
| 56 | }; |
| 57 |