@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,380 @@
+'use client';
+
+import {
+  useEffect, useState, type ComponentProps, type ComponentPropsWithoutRef, type ElementType, type ReactNode
+} from 'react';
+
+import * as React from 'react';
+
+import { type VariantProps, cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+import { Toolbar as ToolbarPrimitive, Tooltip as TooltipPrimitive } from 'radix-ui';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import {
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator
+} from './dropdown-menu';
+import { Separator } from './separator';
+import { Tooltip, TooltipProvider, TooltipTrigger } from './tooltip';
+
+export function Toolbar({
+  className,
+  ...props
+}: ComponentProps<typeof ToolbarPrimitive.Root>) {
+  return (
+    <ToolbarPrimitive.Root
+      className={cn('relative flex flex-nowrap select-none items-center gap-1', className)}
+      {...props} />
+  );
+}
+
+export function ToolbarToggleGroup({
+  className,
+  ...props
+}: ComponentProps<typeof ToolbarPrimitive.ToolbarToggleGroup>) {
+  return (
+    <ToolbarPrimitive.ToolbarToggleGroup
+      className={cn('flex items-center', className)}
+      {...props} />
+  );
+}
+
+export function ToolbarLink({
+  className,
+  ...props
+}: ComponentProps<typeof ToolbarPrimitive.Link>) {
+  return (
+    <ToolbarPrimitive.Link
+      className={cn('font-medium underline underline-offset-4', className)}
+      {...props} />
+  );
+}
+
+export function ToolbarSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof ToolbarPrimitive.Separator>) {
+  return (
+    <ToolbarPrimitive.Separator
+      className={cn('mx-2 my-1 w-px shrink-0 bg-border', className)}
+      {...props} />
+  );
+}
+
+// From toggleVariants
+export const toolbarButtonVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-checked:bg-accent aria-checked:text-accent-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default'
+    },
+    variants: {
+      size: {
+        default: 'h-9 min-w-9 px-2',
+        lg: 'h-10 min-w-10 px-2.5',
+        sm: 'h-8 min-w-8 px-1.5',
+        none: ''
+      },
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+        media:
+          'no-focus-ring m-0 h-auto rounded-none not-last:border-r not-last:border-r-white/20 bg-black/20 px-1.5 py-1 text-white hover:bg-white/5 focus:bg-white/5 [&_svg]:size-[14px] [&_svg]:text-white'
+      }
+    }
+  }
+);
+
+const dropdownArrowVariants = cva(
+  cn(
+    'inline-flex items-center justify-center rounded-r-md font-medium text-foreground text-sm transition-colors disabled:pointer-events-none disabled:opacity-50'
+  ),
+  {
+    defaultVariants: {
+      size: 'sm',
+      variant: 'default'
+    },
+    variants: {
+      size: {
+        default: 'h-9 w-6',
+        lg: 'h-10 w-8',
+        sm: 'h-8 w-4'
+      },
+      variant: {
+        default:
+          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',
+        outline:
+          'border border-input border-l-0 bg-transparent hover:bg-accent hover:text-accent-foreground'
+      }
+    }
+  }
+);
+
+type ToolbarButtonProps = {
+  isDropdown?: boolean;
+  pressed?: boolean;
+} & Omit<
+  ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
+  'asChild' | 'value'
+>
+& VariantProps<typeof toolbarButtonVariants>;
+
+export const ToolbarButton = withTooltip(({
+  children,
+  className,
+  isDropdown,
+  pressed,
+  size = 'sm',
+  variant,
+  ...props
+}: ToolbarButtonProps) => {
+  return typeof pressed === 'boolean' ? (
+    <ToolbarToggleGroup disabled={props.disabled} value="single" type="single">
+      <ToolbarToggleItem
+        className={cn(
+          toolbarButtonVariants({
+            size,
+            variant
+          }),
+          isDropdown && 'justify-between gap-1 pr-1',
+          className
+        )}
+        value={pressed ? 'single' : ''}
+        {...props}>
+        {isDropdown ? (
+          <>
+            <div className="flex flex-1 items-center gap-2 whitespace-nowrap">
+              {children}
+            </div>
+            <div>
+              <ChevronDown
+                className="size-3.5 text-muted-foreground"
+                data-icon />
+            </div>
+          </>
+        ) : (
+          children
+        )}
+      </ToolbarToggleItem>
+    </ToolbarToggleGroup>
+  ) : (
+    <ToolbarPrimitive.Button
+      className={cn(
+        toolbarButtonVariants({
+          size,
+          variant
+        }),
+        isDropdown && 'pr-1',
+        className
+      )}
+      {...props}>
+      {children}
+    </ToolbarPrimitive.Button>
+  );
+});
+
+export function ToolbarSplitButton({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof ToolbarButton>) {
+  return (
+    <ToolbarButton
+      className={cn('group flex gap-0 px-0 hover:bg-transparent', className)}
+      {...props} />
+  );
+}
+
+type ToolbarSplitButtonPrimaryProps = Omit<
+  ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
+  'value'
+>
+& VariantProps<typeof toolbarButtonVariants>;
+
+export function ToolbarSplitButtonPrimary({
+  children,
+  className,
+  size = 'sm',
+  variant,
+  ...props
+}: ToolbarSplitButtonPrimaryProps) {
+  return (
+    <span
+      className={cn(
+        toolbarButtonVariants({
+          size,
+          variant
+        }),
+        'rounded-r-none',
+        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
+        className
+      )}
+      {...props}>
+      {children}
+    </span>
+  );
+}
+
+export function ToolbarSplitButtonSecondary({
+  className,
+  size,
+  variant,
+  ...props
+}: ComponentPropsWithoutRef<'span'>
+  & VariantProps<typeof dropdownArrowVariants>) {
+  return (
+    <span
+      className={cn(
+        dropdownArrowVariants({
+          size,
+          variant
+        }),
+        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
+        className
+      )}
+      onClick={e => e.stopPropagation()}
+      role="button"
+      {...props}>
+      <ChevronDown className="size-3.5 text-muted-foreground" data-icon />
+    </span>
+  );
+}
+
+export function ToolbarToggleItem({
+  className,
+  size = 'sm',
+  variant,
+  ...props
+}: ComponentProps<typeof ToolbarPrimitive.ToggleItem>
+  & VariantProps<typeof toolbarButtonVariants>) {
+  return (
+    <ToolbarPrimitive.ToggleItem
+      className={cn(toolbarButtonVariants({ size, variant }), className)}
+      {...props} />
+  );
+}
+
+export function ToolbarGroup({
+  children,
+  className
+}: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'group/toolbar-group',
+        'relative hidden has-[button]:flex flex-shrink-0',
+        className
+      )}>
+      <div className="flex items-center flex-shrink-0">{children}</div>
+
+      <div className="group-last/toolbar-group:hidden! mx-1.5 py-0.5">
+        <Separator orientation="vertical" />
+      </div>
+    </div>
+  );
+}
+
+type TooltipProps<T extends ElementType> = {
+  tooltip?: ReactNode;
+  tooltipContentProps?: Omit<
+    ComponentPropsWithoutRef<typeof TooltipContent>,
+    'children'
+  >;
+  tooltipProps?: Omit<
+    ComponentPropsWithoutRef<typeof Tooltip>,
+    'children'
+  >;
+  tooltipTriggerProps?: ComponentPropsWithoutRef<typeof TooltipTrigger>;
+} & ComponentProps<T>;
+
+function withTooltip<T extends ElementType>(Component: T) {
+  return function ExtendComponent({
+    tooltip,
+    tooltipContentProps,
+    tooltipProps,
+    tooltipTriggerProps,
+    ...props
+  }: TooltipProps<T>) {
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+      setMounted(true);
+    }, []);
+
+    const component = <Component {...(props as ComponentProps<T>)} />;
+
+    if (tooltip && mounted) {
+      return (
+        <TooltipProvider>
+          <Tooltip {...tooltipProps}>
+            <TooltipTrigger asChild {...tooltipTriggerProps}>
+              {component}
+            </TooltipTrigger>
+
+            <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    }
+
+    return component;
+  };
+}
+
+function TooltipContent({
+  children,
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        className={cn(
+          'z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs',
+          className
+        )}
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        {...props}>
+        {children}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export function ToolbarMenuGroup({
+  children,
+  className,
+  label,
+  ...props
+}: ComponentProps<typeof DropdownMenuRadioGroup> & { label?: string }) {
+  return (
+    <>
+      <DropdownMenuSeparator
+        className={cn(
+          'hidden',
+          'mb-0 shrink-0 peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=menuitemradio]]/menu-group:block peer-has-[[role=option]]/menu-group:block'
+        )} />
+
+      <DropdownMenuRadioGroup
+        {...props}
+        className={cn(
+          'hidden',
+          'peer/menu-group group/menu-group my-1.5 has-[[role=menuitem]]:block has-[[role=menuitemradio]]:block has-[[role=option]]:block',
+          className
+        )}>
+        {label && (
+          <DropdownMenuLabel className="select-none font-semibold text-muted-foreground text-xs">
+            {label}
+          </DropdownMenuLabel>
+        )}
+        {children}
+      </DropdownMenuRadioGroup>
+    </>
+  );
+}

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

@@ -0,0 +1,149 @@
+'use client';
+
+import * as React from 'react';
+import {
+  useSyncExternalStore, type ComponentProps, type ComponentPropsWithoutRef, type ElementType, type ReactNode
+} from 'react';
+
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+const useMounted = () => {
+  return useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false
+  );
+};
+
+export function TooltipProvider({
+  delayDuration = 200,
+  disableHoverableContent = true,
+  skipDelayDuration = 0,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      delayDuration={delayDuration}
+      disableHoverableContent={disableHoverableContent}
+      skipDelayDuration={skipDelayDuration}
+      {...props} />
+  );
+}
+
+export const Tooltip = TooltipPrimitive.Root;
+
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export const TooltipPortal = TooltipPrimitive.Portal;
+
+export function TooltipContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Content
+      className={cn(
+        'z-9999 overflow-hidden rounded-md bg-primary px-2 py-1.5 font-semibold text-primary-foreground text-xs shadow-md',
+        className
+      )}
+      sideOffset={sideOffset}
+      {...props} />
+  );
+}
+
+export function TooltipTC({
+  children,
+  className,
+  content,
+  defaultOpen,
+  delayDuration,
+  disableHoverableContent,
+  open,
+  onOpenChange,
+  ...props
+}: {
+  content: ReactNode;
+} & ComponentProps<typeof TooltipPrimitive.Content>
+& ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) {
+  const mounted = useMounted();
+
+  if (!mounted) {
+    return children;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip
+        defaultOpen={defaultOpen}
+        delayDuration={delayDuration}
+        disableHoverableContent={disableHoverableContent}
+        onOpenChange={onOpenChange}
+        open={open}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+
+        <TooltipPortal>
+          <TooltipContent className={className} {...props}>
+            {content}
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+type TooltipProps<T extends ElementType> = {
+  shortcut?: ReactNode;
+  tooltip?: ReactNode;
+  tooltipContentProps?: Omit<
+    ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+    'children'
+  >;
+  tooltipProps?: Omit<
+    ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+    'children'
+  >;
+  tooltipTriggerProps?: ComponentPropsWithoutRef<
+    typeof TooltipPrimitive.Trigger
+  >;
+} & ComponentProps<T>;
+
+export function withTooltip<T extends ElementType>(Component: T) {
+  return function ExtendComponent({
+    shortcut,
+    tooltip,
+    tooltipContentProps,
+    tooltipProps,
+    tooltipTriggerProps,
+    ...props
+  }: TooltipProps<T>) {
+    const isMounted = useMounted();
+
+    const component = <Component {...(props as ComponentProps<T>)} />;
+
+    if (tooltip && isMounted) {
+      return (
+        <TooltipProvider>
+          <Tooltip {...tooltipProps}>
+            <TooltipTrigger asChild {...tooltipTriggerProps}>
+              {component}
+            </TooltipTrigger>
+
+            <TooltipPortal>
+              <TooltipContent {...tooltipContentProps}>
+                {tooltip}
+                {shortcut && (
+                  <div className="mt-px text-gray-400">{shortcut}</div>
+                )}
+              </TooltipContent>
+            </TooltipPortal>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    }
+
+    return component;
+  };
+}

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

@@ -0,0 +1,177 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import * as React from 'react';
+
+import {
+  ChevronDownIcon,
+  Code2Icon,
+  Columns3Icon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  LightbulbIcon,
+  ListIcon,
+  ListOrderedIcon,
+  PilcrowIcon,
+  QuoteIcon,
+  SquareIcon
+} from 'lucide-react';
+import { KEYS } from 'platejs';
+import { useEditorRef, useSelectionFragmentProp } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  type DropdownMenuProps,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState
+} from './dropdown-menu';
+
+import { ToolbarButton } from './toolbar';
+
+import {
+  getBlockType,
+  setBlockType
+} from '../editor/transforms';
+
+export const turnIntoItems = [
+  {
+    icon: <PilcrowIcon />,
+    keywords: ['paragraph'],
+    label: 'Text',
+    value: KEYS.p
+  },
+  {
+    icon: <Heading1Icon />,
+    keywords: ['title', 'h1'],
+    label: 'Heading 1',
+    value: KEYS.h1
+  },
+  {
+    icon: <Heading2Icon />,
+    keywords: ['subtitle', 'h2'],
+    label: 'Heading 2',
+    value: KEYS.h2
+  },
+  {
+    icon: <Heading3Icon />,
+    keywords: ['subtitle', 'h3'],
+    label: 'Heading 3',
+    value: KEYS.h3
+  },
+  {
+    icon: <SquareIcon />,
+    keywords: [
+      'checklist',
+      'task',
+      'checkbox',
+      '[]'
+    ],
+    label: 'To-do list',
+    value: KEYS.listTodo
+  },
+  {
+    icon: <ListIcon />,
+    keywords: ['unordered', 'ul', '-'],
+    label: 'Bulleted list',
+    value: KEYS.ul
+  },
+  {
+    icon: <ListOrderedIcon />,
+    keywords: ['ordered', 'ol', '1'],
+    label: 'Numbered list',
+    value: KEYS.ol
+  },
+  {
+    icon: <ChevronDownIcon />,
+    keywords: ['collapsible', 'expandable'],
+    label: 'Toggle list',
+    value: KEYS.toggle
+  },
+  {
+    icon: <Code2Icon />,
+    keywords: ['```'],
+    label: 'Code',
+    value: KEYS.codeBlock
+  },
+  {
+    icon: <QuoteIcon />,
+    keywords: ['citation', 'blockquote', '>'],
+    label: 'Quote',
+    value: KEYS.blockquote
+  },
+  {
+    icon: <LightbulbIcon />,
+    keywords: ['highlight', 'note', 'important'],
+    label: 'Callout',
+    value: KEYS.callout
+  },
+  {
+    icon: <Columns3Icon />,
+    label: '3 columns',
+    value: 'action_three_columns'
+  }
+];
+
+export function TurnIntoToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const openState = useOpenState();
+
+  const value = useSelectionFragmentProp({
+    defaultValue: KEYS.p,
+    getProp: node => getBlockType(node as any)
+  });
+  const selectedItem = useMemo(
+    () => turnIntoItems.find(item => item.value === (value ?? KEYS.p))
+      ?? turnIntoItems[0],
+    [value]
+  );
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton isDropdown pressed={openState.open} tooltip="Turn into">
+          {selectedItem.label}
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          align="start"
+          className="ignore-click-outside/toolbar min-w-0"
+          data-plate-prevent-overlay>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Turn into</DropdownMenuLabel>
+
+            <DropdownMenuRadioGroup
+              className="flex flex-col gap-0.5"
+              onValueChange={(type) => {
+                setBlockType(editor, type);
+                editor.tf.focus();
+              }}
+              value={selectedItem.value}>
+              {turnIntoItems.map(({ icon, label, value: itemValue }) => (
+                <DropdownMenuRadioItem
+                  className="min-w-[180px]"
+                  key={itemValue}
+                  value={itemValue}>
+                  <div className="mr-2 flex size-5 items-center justify-center rounded-sm border border-foreground/15 bg-white p-0.5 text-subtle-foreground [&_svg]:size-3">
+                    {icon}
+                  </div>
+                  {label}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
+  );
+}