@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/plate-ui/inline-combobox.tsx

@@ -0,0 +1,409 @@
+'use client';
+
+import {
+  createContext, startTransition, use, useCallback, useEffect, useMemo, useRef, useState, type ComponentProps, type HTMLAttributes, type ReactNode, type RefObject
+} from 'react';
+
+import { type Point, type TElement } from 'platejs';
+
+import { filterWords } from '@platejs/combobox';
+import {
+  type UseComboboxInputResult,
+  useComboboxInput,
+  useHTMLInputCursorState
+} from '@platejs/combobox/react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { useComposedRef, useEditorRef } from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { Ariakit } from './menu';
+
+type FilterFn = (
+  item: {
+    value: string; group?: string; keywords?: string[]; label?: string;
+  },
+  search: string
+) => boolean;
+
+type InlineComboboxContextValue = {
+  filter: FilterFn | false;
+  inputProps: UseComboboxInputResult['props'];
+  inputRef: RefObject<HTMLInputElement | null>;
+  removeInput: UseComboboxInputResult['removeInput'];
+  showTrigger: boolean;
+  trigger: string;
+  setHasEmpty: (hasEmpty: boolean) => void;
+};
+
+const InlineComboboxContext = createContext<InlineComboboxContextValue>(
+  null as any
+);
+
+const defaultFilter: FilterFn = (
+  {
+    group, keywords = [], label, value
+  },
+  search
+) => {
+  const uniqueTerms = new Set(
+    [
+      value,
+      ...keywords,
+      group,
+      label
+    ].filter(Boolean)
+  );
+
+  return Array.from(uniqueTerms).some(keyword => filterWords(keyword!, search));
+};
+
+type InlineComboboxProps = {
+  children: ReactNode;
+  element: TElement;
+  trigger: string;
+  filter?: FilterFn | false;
+  hideWhenNoValue?: boolean;
+  showTrigger?: boolean;
+  value?: string;
+  setValue?: (value: string) => void;
+};
+
+function InlineCombobox({
+  children,
+  element,
+  filter = defaultFilter,
+  hideWhenNoValue = false,
+  setValue: setValueProp,
+  showTrigger = true,
+  trigger,
+  value: valueProp
+}: InlineComboboxProps) {
+  const editor = useEditorRef();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const cursorState = useHTMLInputCursorState(inputRef);
+
+  const [valueState, setValueState] = useState('');
+  const hasValueProp = valueProp !== undefined;
+  const value = hasValueProp ? valueProp : valueState;
+
+  // Check if current user is the creator of this element (for Yjs collaboration)
+  const isCreator = useMemo(() => {
+    const elementUserId = (element as any).userId;
+    const currentUserId = editor.meta.userId;
+
+    // If no userId (backwards compatibility or non-Yjs), allow
+    if (!elementUserId) return true;
+
+    return elementUserId === currentUserId;
+  }, [editor, element]);
+
+  const setValue = useCallback(
+    (newValue: string) => {
+      setValueProp?.(newValue);
+
+      if (!hasValueProp) {
+        setValueState(newValue);
+      }
+    },
+    [setValueProp, hasValueProp]
+  );
+
+  const insertPoint = useRef<Point | null>(null);
+
+  useEffect(() => {
+    const path = editor.api.findPath(element);
+
+    if (!path) return;
+
+    const point = editor.api.before(path);
+
+    if (!point) return;
+
+    const pointRef = editor.api.pointRef(point);
+
+    insertPoint.current = pointRef.current;
+
+    return () => {
+      pointRef.unref();
+    };
+  }, [editor, element]);
+
+  const { props: inputProps, removeInput } = useComboboxInput({
+    cancelInputOnBlur: false,
+    cursorState,
+    autoFocus: isCreator,
+    ref: inputRef,
+    onCancelInput: (cause) => {
+      if (cause !== 'backspace') {
+        editor.tf.insertText(trigger + value, {
+          at: insertPoint?.current ?? undefined
+        });
+      }
+      if (cause === 'arrowLeft' || cause === 'arrowRight') {
+        editor.tf.move({
+          distance: 1,
+          reverse: cause === 'arrowLeft'
+        });
+      }
+    }
+  });
+
+  const [hasEmpty, setHasEmpty] = useState(false);
+
+  const contextValue: InlineComboboxContextValue = useMemo(
+    () => ({
+      filter,
+      inputProps,
+      inputRef,
+      removeInput,
+      setHasEmpty,
+      showTrigger,
+      trigger
+    }),
+    [
+      trigger,
+      showTrigger,
+      filter,
+      inputRef,
+      inputProps,
+      removeInput,
+      setHasEmpty
+    ]
+  );
+
+  const store = Ariakit.useComboboxStore({
+    setValue: newValue => startTransition(() => setValue(newValue))
+  });
+
+  const items = store.useState('items');
+
+  return (
+    <span contentEditable={false}>
+      <Ariakit.ComboboxProvider
+        open={
+          isCreator
+          && (items.length > 0 || hasEmpty)
+          && (!hideWhenNoValue || value.length > 0)
+        }
+        store={store}>
+        <InlineComboboxContext value={contextValue}>
+          {children}
+        </InlineComboboxContext>
+      </Ariakit.ComboboxProvider>
+    </span>
+  );
+}
+
+function InlineComboboxInput({
+  className,
+  ref: refProp,
+  ...props
+}: ComponentProps<'input'>) {
+  const {
+    inputProps,
+    inputRef: contextRef,
+    showTrigger,
+    trigger
+  } = use(InlineComboboxContext);
+
+  const store = Ariakit.useComboboxContext()!;
+  const value = store.useState('value');
+
+  const ref = useComposedRef(refProp, contextRef);
+
+  return (
+    <>
+      {showTrigger && trigger}
+
+      <span className="relative min-h-[1lh]">
+        <span
+          aria-hidden="true"
+          className="invisible overflow-hidden text-nowrap">
+          {value || props.placeholder || '\u200B'}
+        </span>
+
+        <Ariakit.Combobox
+          autoSelect
+          className={cn(
+            'absolute top-0 left-0 size-full bg-transparent outline-hidden',
+            className
+          )}
+          ref={ref}
+          value={value}
+          {...inputProps}
+          {...props} />
+      </span>
+    </>
+  );
+}
+
+const comboboxVariants = cva(
+  'z-500 mt-1 h-full max-h-[40vh] min-w-[180px] max-w-[calc(100vw-24px)] animate-popover overflow-y-auto rounded-lg bg-popover shadow-floating',
+  {
+    defaultVariants: {
+      variant: 'default'
+    },
+    variants: {
+      variant: {
+        default: '',
+        emoji: 'max-h-[270px] w-[408px]',
+        mention: 'w-[300px]',
+        slash: 'w-[320px]'
+      }
+    }
+  }
+);
+
+const comboboxItemVariants = cva(
+  'relative mx-1 flex select-none items-center rounded-sm px-2 py-1 text-foreground text-sm outline-hidden transition-bg-ease [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    defaultVariants: {
+      interactive: true
+    },
+    variants: {
+      interactive: {
+        false: '',
+        true: 'cursor-pointer hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground'
+      }
+    }
+  }
+);
+
+function InlineComboboxContent({
+  className,
+  variant,
+  ...props
+}: ComponentProps<typeof Ariakit.ComboboxPopover>
+  & VariantProps<typeof comboboxVariants>) {
+  return (
+    <Ariakit.Portal>
+      <Ariakit.ComboboxPopover
+        className={cn(comboboxVariants({ variant }), className)}
+        {...props}>
+        {props.children}
+      </Ariakit.ComboboxPopover>
+    </Ariakit.Portal>
+  );
+}
+
+function InlineComboboxItem({
+  className,
+  focusEditor = true,
+  group,
+  keywords,
+  label,
+  onClick,
+  ...props
+}: {
+  focusEditor?: boolean;
+  group?: string;
+  keywords?: string[];
+  label?: string;
+} & Ariakit.ComboboxItemProps
+& Required<Pick<Ariakit.ComboboxItemProps, 'value'>>) {
+  const { value } = props;
+
+  const { filter, removeInput } = use(InlineComboboxContext);
+
+  const store = Ariakit.useComboboxContext()!;
+
+  const search = filter && store.useState('value');
+
+  const visible = useMemo(
+    () => !filter || filter({
+      group, keywords, label, value
+    }, search as string),
+    [
+      filter,
+      group,
+      keywords,
+      value,
+      label,
+      search
+    ]
+  );
+
+  if (!visible) return null;
+
+  return (
+    <Ariakit.ComboboxItem
+      className={cn(comboboxItemVariants(), className)}
+      onClick={(event) => {
+        removeInput(focusEditor);
+        onClick?.(event);
+      }}
+      {...props} />
+  );
+}
+
+function InlineComboboxEmpty({
+  children,
+  className
+}: HTMLAttributes<HTMLDivElement>) {
+  const { setHasEmpty } = use(InlineComboboxContext);
+  const store = Ariakit.useComboboxContext()!;
+  const items = store.useState('items');
+
+  useEffect(() => {
+    setHasEmpty(true);
+
+    return () => {
+      setHasEmpty(false);
+    };
+  }, [setHasEmpty]);
+
+  if (items.length > 0) return null;
+
+  return (
+    <div
+      className={cn(
+        comboboxItemVariants({ interactive: false }),
+        'my-1.5 text-muted-foreground',
+        className
+      )}>
+      {children}
+    </div>
+  );
+}
+
+function InlineComboboxGroup({
+  className,
+  ...props
+}: ComponentProps<typeof Ariakit.ComboboxGroup>) {
+  return (
+    <Ariakit.ComboboxGroup
+      className={cn(
+        'hidden not-last:border-b py-1.5 [&:has([role=option])]:block',
+        className
+      )}
+      {...props} />
+  );
+}
+
+function InlineComboboxGroupLabel({
+  className,
+  ...props
+}: ComponentProps<typeof Ariakit.ComboboxGroupLabel>) {
+  return (
+    <Ariakit.ComboboxGroupLabel
+      className={cn(
+        'mt-1.5 mb-2 px-3 font-medium text-muted-foreground text-xs',
+        className
+      )}
+      {...props} />
+  );
+}
+
+const InlineComboboxRow = Ariakit.ComboboxRow;
+
+export {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxGroup,
+  InlineComboboxGroupLabel,
+  InlineComboboxInput,
+  InlineComboboxItem,
+  InlineComboboxRow
+};

package/src/internal/plate-editor/plate-ui/input.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export const inputVariants = cva(
+  cn(
+    'flex w-full rounded-md text-base outline-hidden file:border-0 file:bg-transparent file:font-medium file:text-sm disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+    'h-[28px] border-[1.5px] border-input bg-muted/80 px-1.5 placeholder:text-muted-foreground/80',
+    'read-only:ring-0 read-only:focus:border-input'
+  ),
+  {
+    defaultVariants: {
+      variant: 'default'
+    },
+    variants: {
+      variant: {
+        default: 'focus:border-brand/50 focus:ring-2 focus:ring-brand/30',
+        flat: '',
+        link: 'border-none bg-transparent',
+        search: 'border-none bg-transparent text-lg'
+      }
+    }
+  }
+);
+
+export type InputProps = ComponentProps<'input'>
+  & VariantProps<typeof inputVariants>;
+
+export function Input({ className, variant, ...props }: InputProps) {
+  return (
+    <input className={cn(inputVariants({ variant }), className)} {...props} />
+  );
+}

package/src/internal/plate-editor/plate-ui/insert-toolbar-button.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+
+import * as React from 'react';
+
+import {
+  CalendarIcon,
+  ChevronRightIcon,
+  Columns3Icon,
+  FileCodeIcon,
+  FilmIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  ImageIcon,
+  Link2Icon,
+  ListIcon,
+  ListOrderedIcon,
+  MinusIcon,
+  PenToolIcon,
+  PilcrowIcon,
+  PlusIcon,
+  QuoteIcon,
+  RadicalIcon,
+  SquareIcon,
+  TableIcon,
+  ListTree as TableOfContentsIcon
+} from 'lucide-react';
+import { KEYS } from 'platejs';
+import { type PlateEditor, useEditorRef } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  type DropdownMenuProps
+} from './dropdown-menu';
+import {
+  insertBlock,
+  insertInlineElement
+} from '../editor/transforms';
+
+import { ToolbarButton, ToolbarMenuGroup } from './toolbar';
+
+type Group = {
+  group: string;
+  items: Item[];
+};
+
+type Item = {
+  icon: 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',
+        value: KEYS.codeBlock
+      },
+      {
+        icon: <QuoteIcon />,
+        label: 'Quote',
+        value: KEYS.blockquote
+      },
+      {
+        icon: <MinusIcon />,
+        label: 'Divider',
+        value: KEYS.hr
+      }
+    ].map(item => ({
+      ...item,
+      onSelect: (editor, value) => {
+        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, value) => {
+        insertBlock(editor, value);
+      }
+    }))
+  },
+  {
+    group: 'Media',
+    items: [
+      {
+        icon: <ImageIcon />,
+        label: 'Image',
+        value: KEYS.img
+      },
+      {
+        icon: <FilmIcon />,
+        label: 'Embed',
+        value: KEYS.mediaEmbed
+      }
+    ].map(item => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value);
+      }
+    }))
+  },
+  {
+    group: 'Advanced blocks',
+    items: [
+      {
+        icon: <TableOfContentsIcon />,
+        label: 'Table of contents',
+        value: KEYS.toc
+      },
+      {
+        icon: <Columns3Icon />,
+        label: '3 columns',
+        value: 'action_three_columns'
+      },
+      {
+        focusEditor: false,
+        icon: <RadicalIcon />,
+        label: 'Equation',
+        value: KEYS.equation
+      },
+      {
+        icon: <PenToolIcon />,
+        label: 'Excalidraw',
+        value: KEYS.excalidraw
+      }
+    ].map(item => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value);
+      }
+    }))
+  },
+  {
+    group: 'Inline',
+    items: [
+      {
+        icon: <Link2Icon />,
+        label: 'Link',
+        value: KEYS.link
+      },
+      {
+        focusEditor: true,
+        icon: <CalendarIcon />,
+        label: 'Date',
+        value: KEYS.date
+      },
+      {
+        focusEditor: false,
+        icon: <RadicalIcon />,
+        label: 'Inline Equation',
+        value: KEYS.inlineEquation
+      }
+    ].map(item => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertInlineElement(editor, value);
+      }
+    }))
+  }
+];
+
+export function InsertToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Insert" isDropdown>
+          <PlusIcon />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto"
+          align="start">
+          {groups.map(({ group, items: nestedItems }) => (
+            <ToolbarMenuGroup key={group} label={group}>
+              {nestedItems.map(({
+                icon, label, value, onSelect
+              }) => (
+                <DropdownMenuItem
+                  key={value}
+                  className="min-w-[180px]"
+                  onSelect={() => {
+                    onSelect(editor, value);
+                    editor.tf.focus();
+                  }}>
+                  {icon}
+                  {label}
+                </DropdownMenuItem>
+              ))}
+            </ToolbarMenuGroup>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
+  );
+}

package/src/internal/plate-editor/plate-ui/label.tsx

@@ -0,0 +1 @@
+export { Label } from '@docyrus/ui-pro-shared/label';