Align Toolbar Button

1'use client';
2 
3import * as React from 'react';
4 
5import type { Alignment } from '@platejs/basic-styles';
6import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
7 
8import { TextAlignPlugin } from '@platejs/basic-styles/react';
9import {
10  AlignCenterIcon,
11  AlignJustifyIcon,
12  AlignLeftIcon,
13  AlignRightIcon,
14} from 'lucide-react';
15import { useEditorPlugin, useSelectionFragmentProp } from 'platejs/react';
16 
17import {
18  DropdownMenu,
19  DropdownMenuContent,
20  DropdownMenuRadioGroup,
21  DropdownMenuRadioItem,
22  DropdownMenuTrigger,
23} from '@/components/ui/dropdown-menu';
24 
25import { ToolbarButton } from './toolbar';
26 
27const items = [
28  {
29    icon: AlignLeftIcon,
30    value: 'left',
31  },
32  {
33    icon: AlignCenterIcon,
34    value: 'center',
35  },
36  {
37    icon: AlignRightIcon,
38    value: 'right',
39  },
40  {
41    icon: AlignJustifyIcon,
42    value: 'justify',
43  },
44];
45 
46export function AlignToolbarButton(props: DropdownMenuProps) {
47  const { editor, tf } = useEditorPlugin(TextAlignPlugin);
48  const value =
49    useSelectionFragmentProp({
50      defaultValue: 'start',
51      getProp: (node) => node.align,
52    }) ?? 'left';
53 
54  const [open, setOpen] = React.useState(false);
55  const IconValue =
56    items.find((item) => item.value === value)?.icon ?? AlignLeftIcon;
57 
58  return (
59    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
60      <DropdownMenuTrigger asChild>
61        <ToolbarButton pressed={open} tooltip="Align" isDropdown>
62          <IconValue />
63        </ToolbarButton>
64      </DropdownMenuTrigger>
65 
66      <DropdownMenuContent className="min-w-0" align="start">
67        <DropdownMenuRadioGroup
68          value={value}
69          onValueChange={(value) => {
70            tf.textAlign.setNodes(value as Alignment);
71            editor.tf.focus();
72          }}
73        >
74          {items.map(({ icon: Icon, value: itemValue }) => (
75            <DropdownMenuRadioItem
76              key={itemValue}
77              className="pl-2 data-[state=checked]:bg-accent *:first:[span]:hidden"
78              value={itemValue}
79            >
80              <Icon />
81            </DropdownMenuRadioItem>
82          ))}
83        </DropdownMenuRadioGroup>
84      </DropdownMenuContent>
85    </DropdownMenu>
86  );
87}