feat: introduce fixed toolbar and insert button for enhanced editor functionality

surfsense_web/components/ui/insert-toolbar-button.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import * as React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import {
+  ChevronRightIcon,
+  FileCodeIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  InfoIcon,
+  ListIcon,
+  ListOrderedIcon,
+  MinusIcon,
+  PilcrowIcon,
+  PlusIcon,
+  QuoteIcon,
+  RadicalIcon,
+  SquareIcon,
+  TableIcon,
+} from 'lucide-react';
+import { KEYS } from 'platejs';
+import { type PlateEditor, useEditorRef } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  insertBlock,
+  insertInlineElement,
+} from '@/components/editor/transforms';
+
+import { ToolbarButton, ToolbarMenuGroup } from './toolbar';
+
+type Group = {
+  group: string;
+  items: Item[];
+};
+
+type Item = {
+  icon: React.ReactNode;
+  value: string;
+  onSelect: (editor: PlateEditor, value: string) => void;
+  focusEditor?: boolean;
+  label?: string;
+};
+
+const groups: Group[] = [
+  {
+    group: 'Basic blocks',
+    items: [
+      {
+        icon: <PilcrowIcon />,
+        label: 'Paragraph',
+        value: KEYS.p,
+      },
+      {
+        icon: <Heading1Icon />,
+        label: 'Heading 1',
+        value: 'h1',
+      },
+      {
+        icon: <Heading2Icon />,
+        label: 'Heading 2',
+        value: 'h2',
+      },
+      {
+        icon: <Heading3Icon />,
+        label: 'Heading 3',
+        value: 'h3',
+      },
+      {
+        icon: <TableIcon />,
+        label: 'Table',
+        value: KEYS.table,
+      },
+      {
+        icon: <FileCodeIcon />,
+        label: 'Code block',
+        value: KEYS.codeBlock,
+      },
+      {
+        icon: <QuoteIcon />,
+        label: 'Quote',
+        value: KEYS.blockquote,
+      },
+      {
+        icon: <MinusIcon />,
+        label: 'Divider',
+        value: KEYS.hr,
+      },
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor: PlateEditor, value: string) => {
+        insertBlock(editor, value);
+      },
+    })),
+  },
+  {
+    group: 'Lists',
+    items: [
+      {
+        icon: <ListIcon />,
+        label: 'Bulleted list',
+        value: KEYS.ul,
+      },
+      {
+        icon: <ListOrderedIcon />,
+        label: 'Numbered list',
+        value: KEYS.ol,
+      },
+      {
+        icon: <SquareIcon />,
+        label: 'To-do list',
+        value: KEYS.listTodo,
+      },
+      {
+        icon: <ChevronRightIcon />,
+        label: 'Toggle list',
+        value: KEYS.toggle,
+      },
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor: PlateEditor, value: string) => {
+        insertBlock(editor, value);
+      },
+    })),
+  },
+  {
+    group: 'Advanced',
+    items: [
+      {
+        icon: <InfoIcon />,
+        label: 'Callout',
+        value: KEYS.callout,
+      },
+      {
+        focusEditor: false,
+        icon: <RadicalIcon />,
+        label: 'Equation',
+        value: KEYS.equation,
+      },
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor: PlateEditor, value: string) => {
+        if (item.value === KEYS.equation) {
+          insertInlineElement(editor, value);
+        } else {
+          insertBlock(editor, value);
+        }
+      },
+    })),
+  },
+];
+
+export function InsertToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Insert" isDropdown>
+          <PlusIcon />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto"
+        align="start"
+      >
+        {groups.map(({ group, items }) => (
+          <React.Fragment key={group}>
+            <ToolbarMenuGroup>
+              {items.map(({ icon, label, value, onSelect, focusEditor }) => (
+                <DropdownMenuItem
+                  key={value}
+                  onSelect={() => {
+                    onSelect(editor, value);
+                    if (focusEditor !== false) {
+                      editor.tf.focus();
+                    }
+                    setOpen(false);
+                  }}
+                  className="group"
+                >
+                  <div className="flex items-center text-sm text-muted-foreground focus:text-accent-foreground group-aria-selected:text-accent-foreground">
+                    {icon}
+                    <span className="ml-2">{label || value}</span>
+                  </div>
+                </DropdownMenuItem>
+              ))}
+            </ToolbarMenuGroup>
+          </React.Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+