@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,126 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+
+import * as React from 'react';
+
+import { SuggestionPlugin } from '@platejs/suggestion/react';
+import {
+  CheckIcon, EyeIcon, PencilLineIcon, PenIcon
+} from 'lucide-react';
+import { useEditorRef, usePlateState, usePluginOption } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItemIndicator,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  type DropdownMenuProps
+} from './dropdown-menu';
+
+import { ToolbarButton } from './toolbar';
+
+export function ModeToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const [readOnly, setReadOnly] = usePlateState('readOnly');
+  const [open, setOpen] = useState(false);
+
+  const isSuggesting = usePluginOption(SuggestionPlugin, 'isSuggesting');
+
+  let value = 'editing';
+
+  if (readOnly) value = 'viewing';
+
+  if (isSuggesting) value = 'suggestion';
+
+  const item: Record<string, { icon: ReactNode; label: string }> = {
+    editing: {
+      icon: <PenIcon />,
+      label: 'Editing'
+    },
+    suggestion: {
+      icon: <PencilLineIcon />,
+      label: 'Suggestion'
+    },
+    viewing: {
+      icon: <EyeIcon />,
+      label: 'Viewing'
+    }
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Editing mode" isDropdown>
+          {item[value].icon}
+          <span className="hidden lg:inline">{item[value].label}</span>
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuContent className="min-w-[180px]" align="start">
+          <DropdownMenuRadioGroup
+            value={value}
+            onValueChange={(newValue) => {
+              if (newValue === 'viewing') {
+                setReadOnly(true);
+
+                return;
+              }
+              setReadOnly(false);
+
+              if (newValue === 'suggestion') {
+                editor.setOption(SuggestionPlugin, 'isSuggesting', true);
+
+                return;
+              }
+              editor.setOption(SuggestionPlugin, 'isSuggesting', false);
+
+              if (newValue === 'editing') {
+                editor.tf.focus();
+
+                return;
+              }
+            }}>
+            <DropdownMenuRadioItem
+              className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
+              value="editing">
+              <Indicator />
+              {item.editing.icon}
+              {item.editing.label}
+            </DropdownMenuRadioItem>
+
+            <DropdownMenuRadioItem
+              className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
+              value="viewing">
+              <Indicator />
+              {item.viewing.icon}
+              {item.viewing.label}
+            </DropdownMenuRadioItem>
+
+            <DropdownMenuRadioItem
+              className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
+              value="suggestion">
+              <Indicator />
+              {item.suggestion.icon}
+              {item.suggestion.label}
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
+  );
+}
+
+function Indicator() {
+  return (
+    <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <CheckIcon />
+      </DropdownMenuItemIndicator>
+    </span>
+  );
+}

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { BlockMenuPlugin } from '@platejs/selection/react';
+import { MoreHorizontal } from 'lucide-react';
+import { useEditorRef } from 'platejs/react';
+
+import { useOpenState } from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+export function MoreToolbarButton() {
+  const editor = useEditorRef();
+  const openState = useOpenState();
+
+  return (
+    <ToolbarButton
+      data-plate-prevent-overlay
+      onClick={(e) => {
+        const blockAbove = editor.api.block()?.[0];
+
+        if (!blockAbove) return;
+
+        editor
+          .getApi(BlockMenuPlugin)
+          .blockMenu.showContextMenu(blockAbove.id as string, {
+            x: e.clientX,
+            y: e.clientY
+          });
+      }}
+      pressed={openState.open}
+      tooltip="More">
+      <MoreHorizontal />
+    </ToolbarButton>
+  );
+}

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

@@ -0,0 +1,15 @@
+
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+export function ParagraphElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement
+      {...props}
+      className="my-px px-0.5 py-[3px]"
+      style={{
+        backgroundColor: props.element.backgroundColor as any
+      }}>
+      {props.children}
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,16 @@
+'use client';
+
+import { PlateElement, type PlateElementProps } from 'platejs/react';
+
+export function ParagraphElement(props: PlateElementProps) {
+  return (
+    <PlateElement
+      {...props}
+      className="px-0.5 py-[3px]"
+      style={{
+        backgroundColor: props.element.backgroundColor as any
+      }}>
+      {props.children}
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,77 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+const popoverVariants = cva(
+  cn(
+    'group/popover',
+    'z-50 max-w-[calc(100vw-24px)] animate-popover overflow-hidden rounded-md bg-popover text-popover-foreground shadow-floating outline-hidden'
+  ),
+  {
+    defaultVariants: {
+      variant: 'default'
+    },
+    variants: {
+      variant: {
+        combobox: '',
+        default: 'w-72',
+        equation: 'w-[400px] rounded-lg px-2.5 py-2',
+        equationInline: 'w-[400px] rounded-lg px-2.5 py-2',
+        media: 'max-h-[70vh] min-w-[180px] rounded-lg'
+      }
+    }
+  }
+);
+
+function Popover({
+  ...props
+}: ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverAnchor({
+  ...props
+}: ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+function PopoverContent({
+  align = 'center',
+  className,
+  sideOffset = 4,
+  variant,
+  ...props
+}: ComponentProps<typeof PopoverPrimitive.Content>
+  & VariantProps<typeof popoverVariants>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        className={cn(popoverVariants({ variant }), className)}
+        data-slot="popover-content"
+        sideOffset={sideOffset}
+        {...props} />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  popoverVariants
+};

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

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

package/src/internal/plate-editor/plate-ui/remote-cursor-overlay.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import * as React from 'react';
+
+import {
+  type CursorData,
+  type CursorOverlayState,
+  useCursorOverlay
+} from '@platejs/selection/react';
+
+type CursorComponentProps<TCursorData extends Record<string, unknown>> = CursorOverlayState<TCursorData> & {
+  disableCaret?: boolean;
+  disableSelection?: boolean;
+  classNames?: Record<string, string>;
+};
+
+function Cursor({
+  caretPosition,
+  data,
+  disableCaret,
+  disableSelection,
+  selectionRects
+}: CursorComponentProps<CursorData & { color?: string; name?: string }>) {
+  const { style, selectionStyle } = useMemo(() => {
+    const cursorColor = data?.color || '#aaa';
+
+    return {
+      selectionStyle: {
+        backgroundColor: cursorColor,
+        opacity: 0.3
+      },
+      style: {
+        backgroundColor: cursorColor
+      }
+    };
+  }, [data?.color]);
+
+  return (
+    <>
+      {!disableSelection
+        && selectionRects.map((position, i) => (
+          <div
+            className="pointer-events-none absolute z-10"
+            key={i}
+            style={{
+              ...selectionStyle,
+              ...position
+            }} />
+        ))}
+      {!disableCaret && caretPosition && (
+        <div
+          className="pointer-events-none absolute z-10 w-0.5"
+          style={{ ...caretPosition, ...style }}>
+          {data?.name && (
+            <div
+              className="absolute top-0 left-[-2px] whitespace-nowrap rounded rounded-bl-none px-1.5 py-0.5 text-white text-xs leading-tight"
+              style={{
+                backgroundColor: data.color || '#aaa'
+              }}>
+              {data.name}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+
+export function RemoteCursorOverlay() {
+  const { cursors } = useCursorOverlay<CursorData & { color?: string; name?: string }>();
+
+  return (
+    <>
+      {cursors.map(cursor => (
+        <Cursor key={cursor.id} {...cursor} />
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,88 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import {
+  Resizable as ResizablePrimitive,
+  type ResizeHandle as ResizeHandlePrimitive,
+  useResizeHandle,
+  useResizeHandleState
+} from '@platejs/resizable';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export const mediaResizeHandleVariants = cva(
+  cn(
+    'absolute inset-y-0 flex w-4 select-none flex-col justify-center',
+    "after:flex after:h-12 after:max-h-[50%] after:w-1.5 after:rounded-[20px] after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-['_'] group-hover/media:after:opacity-100",
+    'after:border after:border-white/90 after:bg-black/60 after:bg-opacity-[60]'
+  ),
+  {
+    variants: {
+      direction: {
+        left: 'left-0 pl-[5px]',
+        right: 'right-0 items-end pr-[5px]'
+      }
+    }
+  }
+);
+
+const resizeHandleVariants = cva(cn('absolute z-40'), {
+  variants: {
+    direction: {
+      bottom: 'w-full cursor-row-resize',
+      left: 'h-full cursor-col-resize',
+      right: 'h-full cursor-col-resize',
+      top: 'w-full cursor-row-resize'
+    }
+  }
+});
+
+type ResizeHandleProps = ComponentProps<typeof ResizeHandlePrimitive>
+  & VariantProps<typeof resizeHandleVariants>;
+
+export function ResizeHandle({
+  className,
+  options,
+  ...props
+}: ResizeHandleProps) {
+  const state = useResizeHandleState(options ?? {});
+  const resizeHandle = useResizeHandle(state);
+
+  if (state.readOnly) return null;
+
+  return (
+    <div
+      className={cn(
+        resizeHandleVariants({ direction: options?.direction }),
+        className
+      )}
+      data-resizing={state.isResizing}
+      {...resizeHandle.props}
+      {...props} />
+  );
+}
+
+const resizableVariants = cva('', {
+  variants: {
+    align: {
+      center: 'mx-auto',
+      left: 'mr-auto',
+      right: 'ml-auto'
+    }
+  }
+});
+
+type ResizableProps = ComponentProps<typeof ResizablePrimitive>
+  & VariantProps<typeof resizableVariants>;
+
+export function Resizable({ align, className, ...props }: ResizableProps) {
+  return (
+    <ResizablePrimitive
+      {...props}
+      className={cn(resizableVariants({ align }), className)} />
+  );
+}

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+const separatorVariants = cva('shrink-0 bg-border', {
+  defaultVariants: {
+    orientation: 'horizontal'
+  },
+  variants: {
+    orientation: {
+      horizontal: 'h-px w-full',
+      vertical: 'h-full w-px'
+    }
+  }
+});
+
+export function Separator({
+  className,
+  decorative = true,
+  orientation = 'horizontal',
+  ...props
+}: ComponentProps<typeof SeparatorPrimitive.Root>
+  & VariantProps<typeof separatorVariants>) {
+  return (
+    <SeparatorPrimitive.Root
+      className={cn(
+        separatorVariants({
+          orientation
+        }),
+        className
+      )}
+      decorative={decorative}
+      orientation={orientation}
+      {...props} />
+  );
+}