@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { AIChatPlugin } from '@platejs/ai/react';
+import {
+  PlateElement,
+  type PlateElementProps,
+  PlateText,
+  type PlateTextProps,
+  usePluginOption
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export function AILeaf(props: PlateTextProps) {
+  const streaming = usePluginOption(AIChatPlugin, 'streaming');
+  const streamingLeaf = props.editor
+    .getApi(AIChatPlugin)
+    .aiChat.node({ streaming: true });
+
+  const isLast = streamingLeaf?.[0] === props.text;
+
+  return (
+    <PlateText
+      className={cn(
+        'border-b-2 border-b-brand/10 bg-brand/5 text-[rgb(17,96,174)]',
+        'transition-all duration-200 ease-in-out',
+        isLast
+        && streaming
+        && 'after:ml-1.5 after:inline-block after:h-3 after:w-3 after:rounded-full after:bg-primary after:align-middle after:content-[""]'
+      )}
+      {...props} />
+  );
+}
+
+export function AIAnchorElement(props: PlateElementProps) {
+  return (
+    <PlateElement {...props}>
+      <div className="h-[0.1px]" />
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,27 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import { AIChatPlugin } from '@platejs/ai/react';
+import { useEditorPlugin } from 'platejs/react';
+
+import { ToolbarButton } from './toolbar';
+
+export function AIToolbarButton(
+  props: ComponentProps<typeof ToolbarButton>
+) {
+  const { api } = useEditorPlugin(AIChatPlugin);
+
+  return (
+    <ToolbarButton
+      {...props}
+      onClick={() => {
+        api.aiChat.show();
+      }}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }} />
+  );
+}

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

@@ -0,0 +1,147 @@
+'use client';
+
+import {
+  type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, type RefObject
+} from 'react';
+
+import * as React from 'react';
+
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { buttonVariants } from './button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = ({
+  ref,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
+  ref?: RefObject<ElementRef<typeof AlertDialogPrimitive.Overlay> | null>;
+}) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref} />
+);
+
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = ({
+  ref,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+  ref?: RefObject<ElementRef<typeof AlertDialogPrimitive.Content> | null>;
+}) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props} />
+  </AlertDialogPortal>
+);
+
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props} />
+);
+
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props} />
+);
+
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = ({ ref, className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & { ref?: RefObject<ElementRef<typeof AlertDialogPrimitive.Title> | null> }) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props} />
+);
+
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = ({
+  ref,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & {
+  ref?: RefObject<ElementRef<typeof AlertDialogPrimitive.Description> | null>;
+}) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props} />
+);
+
+AlertDialogDescription.displayName
+  = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = ({ ref, className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & { ref?: RefObject<ElementRef<typeof AlertDialogPrimitive.Action> | null> }) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props} />
+);
+
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = ({ ref, className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & { ref?: RefObject<ElementRef<typeof AlertDialogPrimitive.Cancel> | null> }) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props} />
+);
+
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel
+};

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

@@ -0,0 +1,90 @@
+'use client';
+
+import { useState } from 'react';
+
+import * as React from 'react';
+
+import { type Alignment } from '@platejs/basic-styles';
+
+import { TextAlignPlugin } from '@platejs/basic-styles/react';
+import {
+  AlignCenterIcon,
+  AlignJustifyIcon,
+  AlignLeftIcon,
+  AlignRightIcon
+} from 'lucide-react';
+import { useEditorPlugin, useSelectionFragmentProp } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  type DropdownMenuProps
+} from './dropdown-menu';
+
+import { ToolbarButton } from './toolbar';
+
+const items = [
+  {
+    icon: AlignLeftIcon,
+    value: 'left'
+  },
+  {
+    icon: AlignCenterIcon,
+    value: 'center'
+  },
+  {
+    icon: AlignRightIcon,
+    value: 'right'
+  },
+  {
+    icon: AlignJustifyIcon,
+    value: 'justify'
+  }
+];
+
+export function AlignToolbarButton(props: DropdownMenuProps) {
+  const { editor, tf } = useEditorPlugin(TextAlignPlugin);
+  const value
+    = useSelectionFragmentProp({
+      defaultValue: 'start',
+      getProp: node => node.align
+    }) ?? 'left';
+
+  const [open, setOpen] = useState(false);
+  const IconValue
+    = items.find(item => item.value === value)?.icon ?? AlignLeftIcon;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Align" isDropdown>
+          <IconValue />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuContent className="min-w-0" align="start">
+          <DropdownMenuRadioGroup
+            value={value}
+            onValueChange={(value) => {
+              tf.textAlign.setNodes(value as Alignment);
+              editor.tf.focus();
+            }}>
+            {items.map(({ icon: Icon, value: itemValue }) => (
+              <DropdownMenuRadioItem
+                key={itemValue}
+                className="pl-2 data-[state=checked]:bg-accent *:first:[span]:hidden"
+                value={itemValue}>
+                <Icon />
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,3 @@
+'use client';
+
+export { Avatar, AvatarFallback, AvatarImage } from '@docyrus/ui-pro-shared/avatar';

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

@@ -0,0 +1,106 @@
+'use client';
+
+import { type ReactNode } from 'react';
+
+import * as React from 'react';
+
+import {
+  BLOCK_CONTEXT_MENU_ID,
+  BlockMenuPlugin
+} from '@platejs/selection/react';
+import { MoreHorizontal } from 'lucide-react';
+import {
+  useEditorPlugin,
+  useEditorRef,
+  useElement,
+  usePluginOption
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { BlockMenu } from './block-menu';
+
+import { Button, type ButtonProps } from './button';
+
+import { useContextMenu } from './menu';
+
+import { useIsTouchDevice } from '../hooks/use-is-touch-device';
+import { useLockScroll } from '../hooks/use-lock-scroll';
+
+export function BlockContextMenu({ children }: { children: ReactNode }) {
+  const { api, editor } = useEditorPlugin(BlockMenuPlugin);
+  const anchorRect = usePluginOption(BlockMenuPlugin, 'position');
+  const openId = usePluginOption(BlockMenuPlugin, 'openId');
+  const isTouch = useIsTouchDevice();
+
+  useLockScroll(openId === BLOCK_CONTEXT_MENU_ID, `#${editor.meta.uid}`);
+
+  const { getAnchorRect, show, store } = useContextMenu(anchorRect);
+
+  if (isTouch) {
+    return children;
+  }
+
+  return (
+    <div
+      className="group/context-menu w-full"
+      data-plate-selectable
+      data-state={openId === BLOCK_CONTEXT_MENU_ID ? 'open' : 'closed'}
+      onContextMenu={(event) => {
+        const { dataset } = event.target as HTMLElement;
+
+        const disabled = dataset?.slateEditor === 'true';
+
+        if (disabled) return;
+
+        event.preventDefault();
+
+        show();
+        api.blockMenu.show(BLOCK_CONTEXT_MENU_ID, {
+          x: event.clientX,
+          y: event.clientY
+        });
+      }}>
+      {children}
+
+      <BlockMenu
+        getAnchorRect={getAnchorRect}
+        open={openId === BLOCK_CONTEXT_MENU_ID}
+        store={store} />
+    </div>
+  );
+}
+
+export function BlockActionButton({
+  className,
+  defaultStyles = true,
+  ...props
+}: Partial<ButtonProps> & { defaultStyles?: boolean }) {
+  const editor = useEditorRef();
+  const element = useElement();
+
+  return (
+    <Button
+      className={cn(
+        defaultStyles
+        && 'absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100',
+        className
+      )}
+      contentEditable={false}
+      onClick={(e) => {
+        e.stopPropagation();
+        editor
+          .getApi(BlockMenuPlugin)
+          .blockMenu.showContextMenu(element.id as string, {
+            x: e.clientX,
+            y: e.clientY
+          });
+      }}
+      size="blockAction"
+      tooltip="More actions"
+      variant="blockAction"
+      {...props}>
+      <MoreHorizontal />
+    </Button>
+  );
+}