@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.5

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

@@ -1,41 +0,0 @@
-'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

@@ -1,25 +0,0 @@
-'use client';
-
-import { type ComponentProps } 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

@@ -1,145 +0,0 @@
-'use client';
-
-import {
-  type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, type RefObject
-} 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

@@ -1,88 +0,0 @@
-'use client';
-
-import { useState } 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

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

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

@@ -1,104 +0,0 @@
-'use client';
-
-import { type ReactNode } 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>
-  );
-}