@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,266 @@
+'use client';
+
+import { useCallback, useState, type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export const dropdownMenuItemVariants = cva(
+  cn(
+    'no-focus-ring relative flex cursor-pointer select-none items-center gap-2 rounded-md align-middle text-sm transition-bg-ease data-disabled:pointer-events-none data-disabled:opacity-50',
+    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-subtle-foreground',
+    'text-accent-foreground hover:bg-accent focus:bg-accent focus:text-accent-foreground'
+  ),
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default'
+    },
+    variants: {
+      size: {
+        default: 'mx-1 h-[28px] w-[calc(100%-8px)] px-2.5',
+        none: ''
+      },
+      variant: {
+        default: 'focus:bg-accent focus:text-accent-foreground',
+        none: ''
+      }
+    }
+  }
+);
+
+const dropdownMenuLabelVariants = cva(
+  cn(
+    'mt-1.5 mb-2 cursor-default select-none px-[14px] font-medium text-muted-foreground text-xs'
+  ),
+  {
+    variants: {
+      inset: {
+        true: 'pl-8'
+      }
+    }
+  }
+);
+
+export type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  return <DropdownMenuPrimitive.Root {...props} />;
+}
+
+export function DropdownMenuTrigger(
+  props: DropdownMenuPrimitive.DropdownMenuTriggerProps
+) {
+  return <DropdownMenuPrimitive.Trigger {...props} />;
+}
+
+export function DropdownMenuGroup(
+  props: DropdownMenuPrimitive.DropdownMenuGroupProps
+) {
+  return <DropdownMenuPrimitive.Group className="py-1.5" {...props} />;
+}
+
+export function DropdownMenuPortal(
+  props: DropdownMenuPrimitive.DropdownMenuPortalProps
+) {
+  return <DropdownMenuPrimitive.Portal {...props} />;
+}
+
+export function DropdownMenuSub(
+  props: DropdownMenuPrimitive.DropdownMenuSubProps
+) {
+  return <DropdownMenuPrimitive.Sub {...props} />;
+}
+
+export function DropdownMenuRadioGroup(
+  props: DropdownMenuPrimitive.DropdownMenuRadioGroupProps
+) {
+  return <DropdownMenuPrimitive.RadioGroup {...props} />;
+}
+
+export function DropdownMenuSubTrigger({
+  children,
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      className={cn(
+        'mx-1 flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
+        'no-focus-ring',
+        'data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        inset && 'pl-8',
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+export function DropdownMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      className={cn(
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-32 overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-floating data-[state=closed]:animate-out data-[state=open]:animate-in',
+        className
+      )}
+      {...props} />
+  );
+}
+
+export function DropdownMenuContent({
+  className,
+  portal,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content> & {
+  portal?: boolean;
+}) {
+  const content = (
+    <DropdownMenuPrimitive.Content
+      className={cn(
+        'no-focus-ring z-50 min-w-32 max-w-[100vw] overflow-hidden rounded-lg bg-popover p-0 text-popover-foreground text-sm shadow-floating',
+        'data-[state=closed]:hidden 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',
+        className
+      )}
+      sideOffset={4}
+      {...props} />
+  );
+
+  if (portal) {
+    return (
+      <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>
+    );
+  }
+
+  return content;
+}
+
+export function DropdownMenuItem({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Item>
+  & VariantProps<typeof dropdownMenuItemVariants>) {
+  return (
+    <DropdownMenuPrimitive.Item
+      className={cn(dropdownMenuItemVariants(), className)}
+      {...props} />
+  );
+}
+
+export function DropdownMenuCheckboxItem({
+  children,
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      className={cn(
+        'no-focus-ring relative flex select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 transition-bg-ease focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4',
+        'mx-1 h-[28px] cursor-pointer px-2.5 data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground',
+        className
+      )}
+      {...props}>
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+export function DropdownMenuRadioItem({
+  children,
+  className,
+  hideIcon,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  hideIcon?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      className={cn(
+        'no-focus-ring relative flex select-none items-center rounded-sm pr-2 pl-8 transition-bg-ease focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'mx-1 h-[28px] cursor-pointer gap-2 px-2.5 data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground [&_svg]:size-4',
+        className
+      )}
+      {...props}>
+      {!hideIcon && (
+        <span className="absolute right-2 flex size-3.5 items-center justify-center">
+          <DropdownMenuPrimitive.ItemIndicator>
+            <CheckIcon />
+          </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+      )}
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+export function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      className={cn(dropdownMenuLabelVariants({ inset }), className)}
+      {...props} />
+  );
+}
+
+export function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-muted', className)}
+      {...props} />
+  );
+}
+
+export function DropdownMenuShortcut({
+  className,
+  ...props
+}: ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props} />
+  );
+}
+
+export const DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
+
+export function useOpenState() {
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = useCallback(
+    (_value = !open) => {
+      setOpen(_value);
+    },
+    [open]
+  );
+
+  return {
+    open,
+    onOpenChange
+  };
+}

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

@@ -0,0 +1,40 @@
+'use client';
+
+import {
+  Plate, PlateContent, type PlateContentProps, usePlateEditor
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { editorVariants } from './editor';
+
+export function EditorStatic({
+  children,
+  className,
+  editor: editorProp,
+  value,
+  variant,
+  ...props
+}: {
+  editor?: any;
+  value?: any;
+  variant?: 'aiChat' | 'comment' | 'default';
+} & Omit<PlateContentProps, 'editor' | 'value'>) {
+  const localEditor = usePlateEditor({ value });
+  const editor = editorProp ?? localEditor;
+
+  return (
+    <Plate editor={editor as any} readOnly>
+      <PlateContent
+        className={cn(
+          editorVariants({ variant }),
+          'pointer-events-none select-text',
+          className
+        )}
+        readOnly
+        {...props}>
+        {children}
+      </PlateContent>
+    </Plate>
+  );
+}

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

@@ -0,0 +1,148 @@
+'use client';
+
+import { type HTMLAttributes } from 'react';
+
+import * as React from 'react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import {
+  PlateContainer,
+  PlateContent,
+  type PlateContentProps,
+  useEditorRef
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+const editorContainerVariants = cva(
+  'relative w-full cursor-text overflow-y-auto font-[ui-sans-serif,_-apple-system,_BlinkMacSystemFont,_"Segoe_UI_Variable_Display",_"Segoe_UI",_Helvetica,_"Apple_Color_Emoji",_Arial,_sans-serif,_"Segoe_UI_Emoji",_"Segoe_UI_Symbol"] caret-primary selection:bg-brand/25 focus-visible:outline-hidden [&_.slate-selection-area]:bg-brand/15',
+  {
+    defaultVariants: {
+      variant: 'default'
+    },
+    variants: {
+      variant: {
+        comment: cn(
+          'flex flex-wrap justify-between gap-1 px-1 py-0.5 text-sm',
+          'rounded-md border-[1.5px] border-transparent bg-transparent',
+          'has-[[data-slate-editor]:focus]:border-brand/50 has-[[data-slate-editor]:focus]:ring-2 has-[[data-slate-editor]:focus]:ring-brand/30',
+          'has-aria-disabled:border-input has-aria-disabled:bg-muted'
+        ),
+        default: 'h-full',
+        demo: 'h-[650px]',
+        select: cn(
+          'group rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+          'has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]'
+        )
+      }
+    }
+  }
+);
+
+export function EditorContainer({
+  className,
+  variant,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & VariantProps<typeof editorContainerVariants>) {
+  const editor = useEditorRef();
+
+  return (
+    <PlateContainer
+      className={cn(
+        'ignore-click-outside/toolbar',
+        editorContainerVariants({ variant }),
+        className
+      )}
+      onClick={(e) => {
+        if (variant === 'comment') {
+          e.preventDefault();
+          editor.tf.focus({ edge: 'endEditor' });
+        }
+      }}
+      onMouseDown={(e) => {
+        if (variant === 'comment') {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }}
+      {...props} />
+  );
+}
+
+export const editorVariants = cva(
+  cn(
+    'group/editor pt-4',
+    'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',
+    'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-hidden',
+    '**:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2 **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',
+    '[&_strong]:font-bold'
+  ),
+  {
+    defaultVariants: {
+      variant: 'default'
+    },
+    variants: {
+      disabled: {
+        true: 'cursor-not-allowed opacity-50'
+      },
+      focused: {
+        true: 'ring-2 ring-ring ring-offset-2'
+      },
+      variant: {
+        ai: 'px-0 text-base md:text-sm',
+        aiChat:
+          'max-h-[min(70vh,320px)] max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',
+        comment: cn('rounded-none border-none bg-transparent text-sm'),
+        default:
+          'min-h-full px-[70px] pb-72 text-base sm:px-[max(100px,calc(50%-350px))]',
+        demo: 'h-full px-[70px] pt-4 pb-72 text-base sm:px-[max(100px,calc(50%-350px))]',
+        fullWidth: 'min-h-full px-[70px] pb-72 text-base',
+        select: 'px-3 py-2 text-base data-readonly:w-fit',
+        update: 'px-0 text-sm',
+        versionHistory: 'px-0 pb-[30vh] text-base'
+      }
+    }
+  }
+);
+
+export type EditorProps = PlateContentProps
+  & VariantProps<typeof editorVariants>;
+
+export function Editor({
+  className,
+  disabled,
+  focused,
+  variant,
+  onClick,
+  onMouseDown,
+  ...props
+}: PlateContentProps & VariantProps<typeof editorVariants>) {
+  return (
+    <PlateContent
+      className={cn(
+        editorVariants({
+          disabled,
+          focused,
+          variant
+        }),
+        className
+      )}
+      disableDefaultStyles
+      onClick={(e) => {
+        if (variant === 'comment') {
+          e.stopPropagation();
+        }
+
+        onClick?.(e);
+      }}
+      onMouseDown={(e) => {
+        if (variant === 'comment') {
+          e.stopPropagation();
+        }
+
+        onMouseDown?.(e);
+      }}
+      {...props} />
+  );
+}

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

@@ -0,0 +1,48 @@
+'use client';
+
+import { type TElement } from 'platejs';
+
+import {
+  PlateElement,
+  type PlateElementProps
+} from 'platejs/react';
+
+type TEmojiInputElement = TElement & { data?: any[] };
+
+import {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxInput,
+  InlineComboboxItem
+} from './inline-combobox';
+
+export function EmojiInputElement(
+  props: PlateElementProps<TEmojiInputElement>
+) {
+  const { element } = props;
+
+  return (
+    <PlateElement {...props} as="span">
+      <InlineCombobox element={element} trigger=":">
+        <InlineComboboxInput />
+
+        <InlineComboboxContent>
+          <InlineComboboxEmpty>No emoji found.</InlineComboboxEmpty>
+
+          {element.data?.map((emoji: any) => (
+            <InlineComboboxItem
+              key={emoji.id}
+              keywords={emoji.keywords}
+              label={emoji.name}
+              value={emoji.id}>
+              <span className="mr-2">{emoji.skins?.[0]?.native}</span>
+              {emoji.name}
+            </InlineComboboxItem>
+          ))}
+        </InlineComboboxContent>
+      </InlineCombobox>
+      {props.children}
+    </PlateElement>
+  );
+}