@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

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

@@ -1,409 +0,0 @@
-'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

@@ -1,37 +0,0 @@
-'use client';
-
-import { type ComponentProps } 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

@@ -1,258 +0,0 @@
-'use client';
-
-import { useState, type ReactNode } 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

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