| 1 | import { BaseSuggestionPlugin } from "@platejs/suggestion"; |
| 2 | import { type TSuggestionText } from "platejs"; |
| 3 | import { SlateLeaf, type SlateLeafProps } from "platejs/static"; |
| 4 | |
| 5 | import { cn } from "@/lib/utils"; |
| 6 | |
| 7 | export function SuggestionLeafStatic(props: SlateLeafProps<TSuggestionText>) { |
| 8 | const { editor, leaf } = props; |
| 9 | |
| 10 | const dataList = editor |
| 11 | .getApi(BaseSuggestionPlugin) |
| 12 | .suggestion.dataList(leaf); |
| 13 | const hasRemove = dataList.some((data) => data.type === "remove"); |
| 14 | const diffOperation = { type: hasRemove ? "delete" : "insert" } as const; |
| 15 | |
| 16 | const Component = ({ delete: "del", insert: "ins", update: "span" } as const)[ |
| 17 | diffOperation.type |
| 18 | ]; |
| 19 | |
| 20 | return ( |
| 21 | <SlateLeaf |
| 22 | {...props} |
| 23 | as={Component} |
| 24 | className={cn( |
| 25 | "border-b-2 border-b-brand/24 bg-brand/8 text-brand/80 no-underline transition-colors duration-200", |
| 26 | hasRemove && |
| 27 | "border-b-gray-300 bg-gray-300/25 text-gray-400 line-through", |
| 28 | )} |
| 29 | > |
| 30 | {props.children} |
| 31 | </SlateLeaf> |
| 32 | ); |
| 33 | } |
| 34 |