callout-node

1'use client';
2 
3import * as React from 'react';
4 
5import { useCalloutEmojiPicker } from '@platejs/callout/react';
6import { useEmojiDropdownMenuState } from '@platejs/emoji/react';
7import { PlateElement } from 'platejs/react';
8 
9import { Button } from '@/components/ui/button';
10import { cn } from '@/lib/utils';
11 
12import { EmojiPicker, EmojiPopover } from './emoji-toolbar-button';
13 
14export function CalloutElement({
15  attributes,
16  children,
17  className,
18  ...props
19}: React.ComponentProps<typeof PlateElement>) {
20  const { emojiPickerState, isOpen, setIsOpen } = useEmojiDropdownMenuState({
21    closeOnSelect: true,
22  });
23 
24  const { emojiToolbarDropdownProps, props: calloutProps } =
25    useCalloutEmojiPicker({
26      isOpen,
27      setIsOpen,
28    });
29 
30  return (
31    <PlateElement
32      className={cn('my-1 flex rounded-sm bg-muted p-4 pl-3', className)}
33      style={{
34        backgroundColor: props.element.backgroundColor as any,
35      }}
36      attributes={{
37        ...attributes,
38        'data-plate-open-context-menu': true,
39      }}
40      {...props}
41    >
42      <div className="flex w-full gap-2 rounded-md">
43        <EmojiPopover
44          {...emojiToolbarDropdownProps}
45          control={
46            <Button
47              variant="ghost"
48              className="size-6 select-none p-1 text-[18px] hover:bg-muted-foreground/15"
49              style={{
50                fontFamily:
51                  '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols',
52              }}
53              contentEditable={false}
54            >
55              {(props.element.icon as any) || '💡'}
56            </Button>
57          }
58        >
59          <EmojiPicker {...emojiPickerState} {...calloutProps} />
60        </EmojiPopover>
61        <div className="w-full">{children}</div>
62      </div>
63    </PlateElement>
64  );
65}