| 1 | import { IS_APPLE, KEYS, type TMentionElement } from "platejs"; |
| 2 | import { SlateElement, type SlateElementProps } from "platejs/static"; |
| 3 | import * as React from "react"; |
| 4 | |
| 5 | import { cn } from "@/lib/utils"; |
| 6 | |
| 7 | export function MentionElementStatic( |
| 8 | props: SlateElementProps<TMentionElement> & { |
| 9 | prefix?: string; |
| 10 | }, |
| 11 | ) { |
| 12 | const { prefix } = props; |
| 13 | const element = props.element; |
| 14 | |
| 15 | return ( |
| 16 | <SlateElement |
| 17 | className={cn( |
| 18 | "inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm font-medium", |
| 19 | element.children[0]![KEYS.bold] === true && "font-bold", |
| 20 | element.children[0]![KEYS.italic] === true && "italic", |
| 21 | element.children[0]![KEYS.underline] === true && "underline", |
| 22 | )} |
| 23 | data-slate-value={element.value} |
| 24 | {...props} |
| 25 | > |
| 26 | {IS_APPLE ? ( |
| 27 | // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490 |
| 28 | <React.Fragment> |
| 29 | {props.children} |
| 30 | {prefix} |
| 31 | {element.value} |
| 32 | </React.Fragment> |
| 33 | ) : ( |
| 34 | // Others like Android https://github.com/ianstormtaylor/slate/pull/5360 |
| 35 | <React.Fragment> |
| 36 | {prefix} |
| 37 | {element.value} |
| 38 | {props.children} |
| 39 | </React.Fragment> |
| 40 | )} |
| 41 | </SlateElement> |
| 42 | ); |
| 43 | } |
| 44 |