@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/plate-ui/mention-node-static.tsx

@@ -0,0 +1,46 @@
+
+import { type TMentionElement, IS_APPLE } from 'platejs';
+
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export function MentionElementStatic({
+  prefix,
+  ...props
+}: SlateElementProps<TMentionElement> & {
+  prefix?: string;
+}) {
+  const { element } = props;
+
+  return (
+    <SlateElement
+      {...props}
+      attributes={{
+        ...props.attributes,
+        'data-slate-value': element.value
+      }}
+      className={cn(
+        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline font-medium text-sm',
+        element.children[0].bold === true && 'font-bold',
+        element.children[0].italic === true && 'italic',
+        element.children[0].underline === true && 'underline'
+      )}>
+      {IS_APPLE ? (
+        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
+        <>
+          {props.children}
+          {prefix}
+          {element.value}
+        </>
+      ) : (
+        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
+        <>
+          {prefix}
+          {element.value}
+          {props.children}
+        </>
+      )}
+    </SlateElement>
+  );
+}

package/src/internal/plate-editor/plate-ui/mention-node.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { IS_APPLE, type TElement } from 'platejs';
+import {
+  PlateElement,
+  type PlateElementProps,
+  useSelected
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxInput
+} from './inline-combobox';
+
+type TMentionElement = TElement & { value: string };
+type TMentionInputElement = TElement;
+
+export function MentionElement(
+  props: PlateElementProps<TMentionElement> & { prefix?: string }
+) {
+  const { prefix } = props;
+  const { element } = props;
+  const selected = useSelected();
+
+  return (
+    <PlateElement
+      {...props}
+      attributes={{
+        ...props.attributes,
+        'data-slate-value': element.value
+      }}
+      className={cn(
+        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline font-medium text-sm',
+        selected && 'ring-2 ring-ring',
+        element.children[0].bold === true && 'font-bold',
+        element.children[0].italic === true && 'italic',
+        element.children[0].underline === true && 'underline'
+      )}>
+      {IS_APPLE ? (
+        <>
+          {props.children}
+          {prefix}
+          {element.value}
+        </>
+      ) : (
+        <>
+          {prefix}
+          {element.value}
+          {props.children}
+        </>
+      )}
+    </PlateElement>
+  );
+}
+
+export function MentionInputElement(
+  props: PlateElementProps<TMentionInputElement>
+) {
+  const { element } = props;
+
+  return (
+    <PlateElement {...props} as="span">
+      <InlineCombobox element={element} trigger="@">
+        <InlineComboboxInput />
+
+        <InlineComboboxContent>
+          <InlineComboboxEmpty>No results found.</InlineComboboxEmpty>
+
+          {/* Mention items would be populated by the mention plugin */}
+        </InlineComboboxContent>
+      </InlineCombobox>
+      {props.children}
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,532 @@
+'use client';
+
+import {
+  createContext, use, useEffect, useRef, useState, type ComponentProps, type MouseEvent, type ReactNode
+} from 'react';
+
+import * as Ariakit from '@ariakit/react';
+import { useComposedRef } from 'platejs/react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { CornerDownLeftIcon } from 'lucide-react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { useOnClickOutside } from '../hooks/use-on-click-outside';
+
+export type Action = {
+  filterItems?: boolean;
+  focusEditor?: boolean;
+  group?: string;
+  icon?: ReactNode;
+  items?: Action[];
+  keywords?: string[];
+  label?: string;
+  shortcut?: string;
+  value?: string;
+};
+
+export type ActionGroup = {
+  group?: string;
+  value?: string;
+};
+
+const SearchableContext = createContext(false);
+
+const MenuContext = createContext<{
+  isRootMenu: boolean;
+  open: boolean;
+}>({
+  isRootMenu: false,
+  open: false
+});
+
+export type MenuProps = Ariakit.MenuProviderProps & {
+  trigger?: ReactNode;
+  value?: string;
+  onOpenChange?: Ariakit.MenuProviderProps['setOpen'];
+  onRootMenuClose?: () => void;
+  onValueChange?: Ariakit.ComboboxProviderProps['setValue'];
+  onValuesChange?: Ariakit.MenuProviderProps['setValues'];
+};
+
+export function Menu({
+  children,
+  trigger,
+  value,
+  onOpenChange,
+  onRootMenuClose: _onRootMenuClose,
+  onValueChange = () => {},
+  onValuesChange,
+  ...props
+}: MenuProps) {
+  const isRootMenu = !Ariakit.useMenuContext();
+  const [open, setOpen] = useState(false);
+
+  const searchable = !!onValuesChange || isRootMenu;
+
+  const content = (
+    <Ariakit.MenuProvider
+      open={open}
+      setOpen={(v) => {
+        if (props.open === undefined) {
+          setOpen(v);
+        }
+
+        onOpenChange?.(v);
+      }}
+      setValues={onValuesChange}
+      showTimeout={100}
+      {...props}>
+      {trigger}
+
+      <MenuContext value={{ isRootMenu, open: props.open ?? open }}>
+        <SearchableContext value={searchable}>
+          {children}
+        </SearchableContext>
+      </MenuContext>
+    </Ariakit.MenuProvider>
+  );
+
+  return searchable ? (
+    <Ariakit.ComboboxProvider
+      includesBaseElement={false}
+      resetValueOnHide
+      setValue={onValueChange}
+      value={value}>
+      {content}
+    </Ariakit.ComboboxProvider>
+  ) : (
+    content
+  );
+}
+
+export function MenuTrigger({
+  children,
+  icon,
+  label,
+  ...props
+}: ComponentProps<typeof Ariakit.MenuButton> & {
+  icon?: ReactNode;
+  label?: ReactNode;
+}) {
+  return (
+    <Ariakit.MenuButton render={(children as any) ?? <MenuItem />} {...props}>
+      {icon}
+      {label && <span>{label}</span>}
+      <Ariakit.MenuButtonArrow className="ml-auto text-muted-foreground/80" />
+    </Ariakit.MenuButton>
+  );
+}
+
+const menuVariants = cva(
+  cn(
+    'group/menu',
+    'z-50 flex h-full min-w-[180px] max-w-[calc(100vw-24px)] flex-col p-0 text-popover-foreground',
+    'data-[state=closed]:hidden'
+  ),
+  {
+    defaultVariants: {
+      animateZoom: false,
+      variant: 'default'
+    },
+    variants: {
+      animateZoom: {
+        false: 'data-[state=open]:animate-popover',
+        true: 'data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom data-[state=open]:animate-zoom'
+      },
+      variant: {
+        ai: 'w-full px-12 sm:px-[max(64px,calc(50%-350px))]',
+        aiSub: 'max-h-[70vh] w-[220px] rounded-xl bg-popover shadow-floating',
+        default:
+          'max-h-[70vh] w-[260px] overflow-y-auto rounded-xl bg-popover shadow-floating'
+      }
+    }
+  }
+);
+
+export type MenuContentProps = Ariakit.MenuProps
+  & VariantProps<typeof menuVariants> & {
+    animateZoom?: boolean;
+    onClickOutside?: (event: MouseEvent) => void;
+  };
+
+export function MenuContent({
+  animateZoom,
+  children,
+  className,
+  ref,
+  variant,
+  onClickOutside,
+  ...props
+}: MenuContentProps) {
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const { open } = use(MenuContext);
+  const side = useMenuSide();
+
+  useOnClickOutside(menuRef, onClickOutside);
+
+  return (
+    <Ariakit.Menu
+      className={cn(menuVariants({ animateZoom, variant }), className)}
+      data-side={side}
+      data-state={open ? 'open' : 'closed'}
+      fitViewport={true}
+      flip
+      gutter={4}
+      ref={useComposedRef(ref, menuRef)}
+      unmountOnHide
+      {...props}>
+      {children}
+    </Ariakit.Menu>
+  );
+}
+
+export function MenuSeparator(
+  props: ComponentProps<typeof Ariakit.MenuSeparator>
+) {
+  return <Ariakit.MenuSeparator {...props} className={cn(props.className)} />;
+}
+
+export function MenuGroup({
+  label,
+  ...props
+}: ComponentProps<typeof Ariakit.MenuGroup> & {
+  label?: ReactNode;
+}) {
+  return (
+    <>
+      <MenuSeparator
+        className={cn(
+          'hidden',
+          'peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=option]]/menu-group:block'
+        )} />
+
+      <Ariakit.MenuGroup
+        {...props}
+        className={cn(
+          'hidden',
+          'peer/menu-group group/menu-group my-1.5 has-[[role=menuitem]]:block has-[[role=option]]:block',
+          props.className
+        )}>
+        {label && (
+          <Ariakit.MenuGroupLabel className="select-none px-[14px] pt-1.5 pb-2 font-medium text-muted-foreground text-xs">
+            {label}
+          </Ariakit.MenuGroupLabel>
+        )}
+        {props.children}
+      </Ariakit.MenuGroup>
+    </>
+  );
+}
+
+export function MenuShortcut({ ...props }: ComponentProps<'span'>) {
+  return (
+    <span
+      {...props}
+      className={cn('text-muted-foreground/80 text-xs', props.className)} />
+  );
+}
+
+const menuItemVariants = cva(
+  'group/menu-item relative flex min-h-[28px] select-none items-center justify-between gap-2 px-2.5 text-accent-foreground text-sm outline-hidden transition-bg-ease data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4',
+  {
+    defaultVariants: {
+      isEmpty: false,
+      variant: 'default'
+    },
+    variants: {
+      isEmpty: {
+        false:
+          'cursor-pointer hover:bg-accent aria-expanded:bg-accent aria-selected:bg-accent data-active-item:bg-accent data-active-item:text-accent-foreground',
+        true: 'text-muted-foreground'
+      },
+      variant: {
+        default: 'mx-1 w-[calc(100%-8px)] rounded-sm'
+      }
+    }
+  }
+);
+
+export type MenuItemProps = Omit<Ariakit.ComboboxItemProps, 'store'> & {
+  checked?: boolean;
+  group?: string;
+  icon?: ReactNode;
+  label?: string;
+  name?: string;
+  parentGroup?: string;
+  preventClose?: boolean;
+  shortcut?: ReactNode;
+  shortcutEnter?: boolean;
+  value?: string;
+} & VariantProps<typeof menuItemVariants>;
+
+export function MenuItem({
+  checked,
+  className,
+  group,
+  icon,
+  isEmpty,
+  label,
+  name,
+  parentGroup,
+  preventClose,
+  shortcut,
+  shortcutEnter,
+  variant,
+  ...props
+}: Omit<Ariakit.ComboboxItemProps, 'store'> & {
+  checked?: boolean;
+  group?: string;
+  icon?: ReactNode;
+  label?: string;
+  name?: string;
+  parentGroup?: string;
+  preventClose?: boolean;
+  shortcut?: ReactNode;
+  shortcutEnter?: boolean;
+  value?: string;
+} & VariantProps<typeof menuItemVariants>) {
+  const menu = Ariakit.useMenuContext();
+
+  if (!menu) throw new Error('MenuItem should be used inside a Menu');
+
+  const searchable = use(SearchableContext);
+
+  const hasShortcut = !!shortcut || shortcutEnter;
+
+  const baseProps: MenuItemProps = {
+    blurOnHoverEnd: false,
+    focusOnHover: true,
+    label,
+    ...props,
+    className: cn(
+      menuItemVariants({ isEmpty, variant }),
+      !!hasShortcut && 'justify-between',
+      className
+    ),
+    group: parentGroup,
+    name: group
+  };
+
+  baseProps.children = (
+    <>
+      <div className="flex w-full items-center gap-2 whitespace-nowrap">
+        {icon && (
+          <span className="menu-item-icon text-subtle-foreground">{icon}</span>
+        )}
+        {baseProps.children ?? label}
+      </div>
+
+      {(hasShortcut || checked) && (
+        <div className="flex shrink-0 items-center justify-end">
+          {checked && <Ariakit.MenuItemCheck checked={checked} />}
+          {hasShortcut && (
+            <MenuShortcut>
+              {shortcut ?? (
+                <CornerDownLeftIcon className="hidden group-data-[active-item='true']/menu-item:inline-block" />
+              )}
+            </MenuShortcut>
+          )}
+          {checked && searchable && (
+            <Ariakit.VisuallyHidden>
+              {checked ? 'checked' : 'not checked'}
+            </Ariakit.VisuallyHidden>
+          )}
+        </div>
+      )}
+    </>
+  );
+
+  if (!searchable) {
+    if (!!name && props.value !== null) {
+      const radioProps = {
+        ...baseProps,
+        hideOnClick: true,
+        name,
+        value: props.value as any
+      };
+
+      return <Ariakit.MenuItemRadio {...radioProps} />;
+    }
+
+    return <Ariakit.MenuItem {...baseProps} />;
+  }
+
+  const hideOnClick = (event: MouseEvent<HTMLElement, MouseEvent>) => {
+    const expandable = event.currentTarget.hasAttribute('aria-expanded');
+
+    if (expandable) return false;
+    if (preventClose) return false;
+
+    menu.hideAll();
+
+    return false;
+  };
+
+  return <Ariakit.ComboboxItem {...baseProps} hideOnClick={hideOnClick} />;
+}
+
+export const comboboxVariants = cva('', {
+  defaultVariants: {
+    variant: 'default'
+  },
+  variants: {
+    variant: {
+      ai: 'min-w-[280px] max-w-[calc(100vw-24px)] rounded-xl bg-popover py-0.5 shadow-toolbar',
+      default: 'mx-3 pt-3.5 pb-1.5'
+    }
+  }
+});
+
+export function ComboboxContent({
+  className,
+  variant = 'default',
+  ...props
+}: ComponentProps<'div'> & VariantProps<typeof comboboxVariants>) {
+  return (
+    <div className={cn(comboboxVariants({ variant }), className)} {...props} />
+  );
+}
+
+const comboboxListVariants = cva(
+  cn(
+    'group/combobox-list',
+    'h-full max-h-[70vh] grow overflow-y-auto rounded-lg [&:has(>:last-child:not([role=group]))]:pb-1.5',
+    'hidden has-[[role=option]]:block'
+  ),
+  {
+    defaultVariants: {
+      variant: 'default'
+    },
+    variants: {
+      variant: {
+        ai: 'my-1 h-full max-h-[min(40vh,320px)] w-fit min-w-[280px] max-w-[320px] overflow-y-auto bg-popover p-0 shadow-floating',
+        default: ''
+      }
+    }
+  }
+);
+
+export function ComboboxList({
+  className,
+  variant = 'default',
+  ...props
+}: ComponentProps<typeof Ariakit.ComboboxList>
+  & VariantProps<typeof comboboxListVariants>) {
+  return (
+    <Ariakit.ComboboxList
+      className={cn(comboboxListVariants({ variant }), className)}
+      {...props} />
+  );
+}
+
+export function ComboboxInput({
+  children,
+  ...props
+}: ComponentProps<typeof Ariakit.Combobox>) {
+  return <Ariakit.Combobox autoSelect render={children as any} {...props} />;
+}
+
+export function ComboboxEmpty() {
+  return (
+    <div className="py-1.5 group-has-[[role=option]]/combobox-list:hidden">
+      <div
+        className={cn(menuItemVariants({ isEmpty: true }), '')}
+        role="menuitem">
+        No results
+      </div>
+    </div>
+  );
+}
+
+// biome-ignore lint/performance/noBarrelFile: intentional re-export
+export * as Ariakit from '@ariakit/react';
+
+export function filterMenuItems(
+  { items = [], ...group }: Action,
+  searchValue: string
+): Action[] {
+  if (!searchValue) return items;
+  if (
+    [group.label, ...(group.keywords || [])]
+      .join(' ')
+      .toLowerCase()
+      .includes(searchValue.toLowerCase())
+  ) {
+    return items;
+  }
+
+  return items.filter(
+    item => item.filterItems
+      || [item.label, item.value, ...(item.keywords || [])]
+        .join(' ')
+        .toLowerCase()
+        .includes(searchValue.toLowerCase())
+  );
+}
+
+export function filterMenuGroups(
+  menuGroups: Action[],
+  searchValue: string
+): Action[] {
+  if (!searchValue) return menuGroups;
+
+  return menuGroups.reduce<Action[]>((acc, group) => {
+    const filteredItems = filterMenuItems(group, searchValue);
+
+    if (filteredItems.length > 0) {
+      acc.push({
+        ...group,
+        items: filteredItems
+      });
+    }
+
+    return acc;
+  }, []);
+}
+
+export function useComboboxValueState() {
+  const store = Ariakit.useComboboxContext();
+  const searchValue = store?.useState('value') ?? '';
+
+  return [searchValue, store!.setValue] as const;
+}
+
+export function useMenuSide() {
+  const store = Ariakit.useMenuStore();
+  const currentPlacement = store?.useState('currentPlacement').split('-')[0];
+
+  return currentPlacement;
+}
+
+export function useContextMenu(anchorRect: { x: number; y: number }) {
+  const menu = Ariakit.useMenuStore();
+
+  useEffect(() => {
+    if (anchorRect) {
+      menu.render();
+    }
+  }, [anchorRect, menu]);
+
+  return {
+    store: menu,
+    getAnchorRect: () => anchorRect,
+    show: () => {
+      menu.show();
+      menu.setAutoFocusOnShow(true);
+    }
+  };
+}
+
+export function useMenuStore() {
+  const menu = Ariakit.useMenuStore();
+
+  return {
+    store: menu,
+    show: (anchorElement: HTMLElement) => {
+      menu.setAnchorElement(anchorElement);
+      menu.show();
+      menu.setAutoFocusOnShow(true);
+    }
+  };
+}