SurfSense/surfsense_web/components/ui/slash-node.tsx

'use client';

import * as React from 'react';

import type { PlateElementProps } from 'platejs/react';

import { SlashInputPlugin } from '@platejs/slash-command/react';
import {
  ChevronRightIcon,
  Code2Icon,
  FileCodeIcon,
  Heading1Icon,
  Heading2Icon,
  Heading3Icon,
  InfoIcon,
  ListIcon,
  ListOrderedIcon,
  MinusIcon,
  PilcrowIcon,
  QuoteIcon,
  RadicalIcon,
  SquareIcon,
  TableIcon,
} from 'lucide-react';
import { KEYS } from 'platejs';
import { PlateElement, useEditorRef } from 'platejs/react';

import {
  InlineCombobox,
  InlineComboboxContent,
  InlineComboboxEmpty,
  InlineComboboxGroup,
  InlineComboboxGroupLabel,
  InlineComboboxInput,
  InlineComboboxItem,
} from '@/components/ui/inline-combobox';
import { insertBlock, insertInlineElement } from '@/components/editor/transforms';

interface SlashCommandItem {
  icon: React.ReactNode;
  keywords: string[];
  label: string;
  value: string;
  onSelect: (editor: any) => void;
}

const slashCommandGroups: { heading: string; items: SlashCommandItem[] }[] = [
  {
    heading: 'Basic Blocks',
    items: [
      {
        icon: <PilcrowIcon />,
        keywords: ['paragraph', 'text', 'plain'],
        label: 'Text',
        value: 'text',
        onSelect: (editor) => insertBlock(editor, KEYS.p),
      },
      {
        icon: <Heading1Icon />,
        keywords: ['title', 'h1', 'heading'],
        label: 'Heading 1',
        value: 'heading1',
        onSelect: (editor) => insertBlock(editor, 'h1'),
      },
      {
        icon: <Heading2Icon />,
        keywords: ['subtitle', 'h2', 'heading'],
        label: 'Heading 2',
        value: 'heading2',
        onSelect: (editor) => insertBlock(editor, 'h2'),
      },
      {
        icon: <Heading3Icon />,
        keywords: ['subtitle', 'h3', 'heading'],
        label: 'Heading 3',
        value: 'heading3',
        onSelect: (editor) => insertBlock(editor, 'h3'),
      },
      {
        icon: <QuoteIcon />,
        keywords: ['citation', 'blockquote'],
        label: 'Quote',
        value: 'quote',
        onSelect: (editor) => insertBlock(editor, KEYS.blockquote),
      },
      {
        icon: <MinusIcon />,
        keywords: ['divider', 'separator', 'line'],
        label: 'Divider',
        value: 'divider',
        onSelect: (editor) => insertBlock(editor, KEYS.hr),
      },
    ],
  },
  {
    heading: 'Lists',
    items: [
      {
        icon: <ListIcon />,
        keywords: ['unordered', 'ul', 'bullet'],
        label: 'Bulleted list',
        value: 'bulleted-list',
        onSelect: (editor) => insertBlock(editor, KEYS.ul),
      },
      {
        icon: <ListOrderedIcon />,
        keywords: ['ordered', 'ol', 'numbered'],
        label: 'Numbered list',
        value: 'numbered-list',
        onSelect: (editor) => insertBlock(editor, KEYS.ol),
      },
      {
        icon: <SquareIcon />,
        keywords: ['checklist', 'task', 'checkbox', 'todo'],
        label: 'To-do list',
        value: 'todo-list',
        onSelect: (editor) => insertBlock(editor, KEYS.listTodo),
      },
    ],
  },
  {
    heading: 'Advanced',
    items: [
      {
        icon: <TableIcon />,
        keywords: ['table', 'grid'],
        label: 'Table',
        value: 'table',
        onSelect: (editor) => insertBlock(editor, KEYS.table),
      },
      {
        icon: <FileCodeIcon />,
        keywords: ['code', 'codeblock', 'snippet'],
        label: 'Code block',
        value: 'code-block',
        onSelect: (editor) => insertBlock(editor, KEYS.codeBlock),
      },
      {
        icon: <InfoIcon />,
        keywords: ['callout', 'note', 'info', 'warning', 'tip'],
        label: 'Callout',
        value: 'callout',
        onSelect: (editor) => insertBlock(editor, KEYS.callout),
      },
      {
        icon: <ChevronRightIcon />,
        keywords: ['toggle', 'collapsible', 'expand'],
        label: 'Toggle',
        value: 'toggle',
        onSelect: (editor) => insertBlock(editor, KEYS.toggle),
      },
      {
        icon: <RadicalIcon />,
        keywords: ['equation', 'math', 'formula', 'latex'],
        label: 'Equation',
        value: 'equation',
        onSelect: (editor) => insertInlineElement(editor, KEYS.equation),
      },
    ],
  },
  {
    heading: 'Inline',
    items: [
      {
        icon: <Code2Icon />,
        keywords: ['link', 'url', 'href'],
        label: 'Link',
        value: 'link',
        onSelect: (editor) => insertInlineElement(editor, KEYS.link),
      },
    ],
  },
];

export function SlashInputElement({
  children,
  ...props
}: PlateElementProps) {
  const editor = useEditorRef();

  return (
    <PlateElement {...props} as="span">
      <InlineCombobox
        element={props.element}
        trigger="/"
      >
        <InlineComboboxInput />

        <InlineComboboxContent className="dark:bg-neutral-800 dark:border dark:border-neutral-700">
          <InlineComboboxEmpty>No results found.</InlineComboboxEmpty>

          {slashCommandGroups.map(({ heading, items }) => (
            <InlineComboboxGroup key={heading}>
              <InlineComboboxGroupLabel>{heading}</InlineComboboxGroupLabel>

              {items.map(({ icon, keywords, label, value, onSelect }) => (
                <InlineComboboxItem
                  key={value}
                  className="flex items-center gap-3 px-2 py-1.5"
                  keywords={keywords}
                  label={label}
                  value={value}
                  group={heading}
                  onClick={() => {
                    onSelect(editor);
                    editor.tf.focus();
                  }}
                >
                  <span className="flex size-5 items-center justify-center text-muted-foreground">
                    {icon}
                  </span>
                  {label}
                </InlineComboboxItem>
              ))}
            </InlineComboboxGroup>
          ))}
        </InlineComboboxContent>
      </InlineCombobox>

      {children}
    </PlateElement>
  );
}