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

package/src/internal/plate-editor/plate-ui/media-preview-dialog.tsx

@@ -1,127 +0,0 @@
-'use client';
-
-import { type ComponentProps } from 'react';
-
-import {
-  PreviewImage,
-  useImagePreview,
-  useImagePreviewValue,
-  useScaleInput
-} from '@platejs/media/react';
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  CircleArrowDown,
-  Minimize2,
-  Minus,
-  Plus
-} from 'lucide-react';
-import { useEditorRef } from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { Button } from './button';
-
-import { downloadFile } from '../lib/download-file';
-
-const SCROLL_SPEED = 4;
-
-export function ImagePreview() {
-  const editor = useEditorRef();
-  const isOpen = useImagePreviewValue('isOpen', editor.id);
-  const scale = useImagePreviewValue('scale');
-  const isEditingScale = useImagePreviewValue('isEditingScale');
-  const currentPreview = useImagePreviewValue('currentPreview');
-  const {
-    closeProps,
-    maskLayerProps,
-    nextDisabled,
-    nextProps,
-    prevDisabled,
-    prevProps,
-    scaleTextProps,
-    zommOutProps,
-    zoomInDisabled,
-    zoomInProps,
-    zoomOutDisabled
-  } = useImagePreview({
-    scrollSpeed: SCROLL_SPEED
-  });
-
-  return (
-    <div
-      className={cn(
-        'fade-in fixed top-0 left-0 z-50 h-screen w-screen animate-in cursor-default text-sm duration-200 ease-in-out',
-        !isOpen && 'hidden'
-      )}
-      onContextMenu={e => e.stopPropagation()}
-      {...maskLayerProps}>
-      <div className="absolute inset-0 size-full bg-black/80" />
-
-      <div className="absolute inset-0 flex items-center justify-center">
-        <div className="relative flex max-h-screen w-full items-center">
-          <PreviewImage
-            className={cn(
-              'mx-auto block max-h-[calc(100vh-4rem)] w-auto select-none object-contain transition-transform'
-            )} />
-        </div>
-      </div>
-
-      <div
-        className="-translate-x-1/2 absolute bottom-[30px] left-1/2 z-40 flex justify-center gap-2 text-white"
-        onClick={e => e.stopPropagation()}>
-        {!prevDisabled && !nextDisabled && (
-          <div className="flex rounded-sm bg-black/70">
-            <Button {...prevProps} disabled={prevDisabled}>
-              <ArrowLeftIcon className="size-5" />
-            </Button>
-            <Button {...nextProps} disabled={nextDisabled}>
-              <ArrowRightIcon className="size-5" />
-            </Button>
-          </div>
-        )}
-
-        {currentPreview && (
-          <div className="flex rounded-sm bg-black/70">
-            <Button
-              {...zommOutProps}
-              disabled={zoomOutDisabled}
-              tooltip="Zoom out">
-              <Minus className="size-4" />
-            </Button>
-            <div className="flex w-[46px] items-center justify-center space-x-1 text-neutral-400">
-              {isEditingScale ? (
-                <ScaleInput className="h-[19px] w-full rounded-sm border border-brand/70 bg-transparent text-sm text-white outline-hidden" />
-              ) : (
-                <div {...scaleTextProps}>{scale * 100}</div>
-              )}
-              <div>%</div>
-            </div>
-            <Button
-              {...zoomInProps}
-              disabled={zoomInDisabled}
-              tooltip="Zoom in">
-              <Plus className="size-4" />
-            </Button>
-            <Button
-              onClick={() => {
-                void downloadFile(currentPreview.url, currentPreview.id!);
-              }}
-              tooltip="Download">
-              <CircleArrowDown className="size-4" />
-            </Button>
-            <Button {...closeProps} tooltip="Close">
-              <Minimize2 className="size-4" />
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ScaleInput(props: ComponentProps<'input'>) {
-  const { props: scaleInputProps, ref } = useScaleInput();
-
-  return <input {...scaleInputProps} {...props} ref={ref} />;
-}

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

@@ -1,227 +0,0 @@
-'use client';
-
-import { useCallback, useState, type ReactNode } from 'react';
-
-import { PlaceholderPlugin } from '@platejs/media/react';
-import {
-  AudioLinesIcon,
-  FileUpIcon,
-  FilmIcon,
-  ImageIcon,
-  LinkIcon
-} from 'lucide-react';
-import { isUrl, KEYS } from 'platejs';
-import { useEditorRef } from 'platejs/react';
-import { toast } from 'sonner';
-import { useFilePicker } from 'use-file-picker';
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle
-} from './alert-dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  type DropdownMenuProps
-} from './dropdown-menu';
-import { Input } from './input';
-
-import {
-  ToolbarSplitButton,
-  ToolbarSplitButtonPrimary,
-  ToolbarSplitButtonSecondary
-} from './toolbar';
-
-const MEDIA_CONFIG: Record<
-  string,
-  {
-    accept: string[];
-    icon: ReactNode;
-    title: string;
-    tooltip: string;
-  }
-> = {
-  [KEYS.audio]: {
-    accept: ['audio/*'],
-    icon: <AudioLinesIcon className="size-4" />,
-    title: 'Insert Audio',
-    tooltip: 'Audio'
-  },
-  [KEYS.file]: {
-    accept: ['*'],
-    icon: <FileUpIcon className="size-4" />,
-    title: 'Insert File',
-    tooltip: 'File'
-  },
-  [KEYS.img]: {
-    accept: ['image/*'],
-    icon: <ImageIcon className="size-4" />,
-    title: 'Insert Image',
-    tooltip: 'Image'
-  },
-  [KEYS.video]: {
-    accept: ['video/*'],
-    icon: <FilmIcon className="size-4" />,
-    title: 'Insert Video',
-    tooltip: 'Video'
-  }
-};
-
-export function MediaToolbarButton({
-  nodeType,
-  ...props
-}: DropdownMenuProps & { nodeType: string }) {
-  const currentConfig = MEDIA_CONFIG[nodeType];
-
-  const editor = useEditorRef();
-  const [open, setOpen] = useState(false);
-  const [dialogOpen, setDialogOpen] = useState(false);
-
-  const { openFilePicker } = useFilePicker({
-    accept: currentConfig.accept,
-    multiple: true,
-    onFilesSelected: (data: { plainFiles?: File[] }) => {
-      if (!data.plainFiles || data.plainFiles.length === 0) return;
-      editor.getTransforms(PlaceholderPlugin).insert.media(data.plainFiles as unknown as FileList);
-    }
-  });
-
-  return (
-    <>
-      <ToolbarSplitButton
-        onClick={() => {
-          openFilePicker();
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            setOpen(true);
-          }
-        }}
-        pressed={open}>
-        <ToolbarSplitButtonPrimary>
-          {currentConfig.icon}
-        </ToolbarSplitButtonPrimary>
-
-        <DropdownMenu
-          open={open}
-          onOpenChange={setOpen}
-          modal={false}
-          {...props}>
-          <DropdownMenuTrigger asChild>
-            <ToolbarSplitButtonSecondary />
-          </DropdownMenuTrigger>
-
-          <DropdownMenuPortal>
-            <DropdownMenuContent
-              onClick={e => e.stopPropagation()}
-              align="start"
-              alignOffset={-32}>
-              <DropdownMenuGroup>
-                <DropdownMenuItem onSelect={() => openFilePicker()}>
-                  {currentConfig.icon}
-                  Upload from computer
-                </DropdownMenuItem>
-                <DropdownMenuItem onSelect={() => setDialogOpen(true)}>
-                  <LinkIcon />
-                  Insert via URL
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenuPortal>
-        </DropdownMenu>
-      </ToolbarSplitButton>
-
-      <AlertDialog
-        open={dialogOpen}
-        onOpenChange={(value) => {
-          setDialogOpen(value);
-        }}>
-        <AlertDialogContent className="gap-6">
-          <MediaUrlDialogContent
-            currentConfig={currentConfig}
-            nodeType={nodeType}
-            setOpen={setDialogOpen} />
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}
-
-function MediaUrlDialogContent({
-  currentConfig,
-  nodeType,
-  setOpen
-}: {
-  currentConfig: (typeof MEDIA_CONFIG)[string];
-  nodeType: string;
-  setOpen: (value: boolean) => void;
-}) {
-  const editor = useEditorRef();
-  const [url, setUrl] = useState('');
-
-  const embedMedia = useCallback(() => {
-    if (!isUrl(url)) return toast.error('Invalid URL');
-
-    setOpen(false);
-    editor.tf.insertNodes({
-      children: [{ text: '' }],
-      name: nodeType === KEYS.file ? url.split('/').pop() : undefined,
-      type: nodeType,
-      url
-    });
-  }, [
-    url,
-    editor,
-    nodeType,
-    setOpen
-  ]);
-
-  return (
-    <>
-      <AlertDialogHeader>
-        <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>
-      </AlertDialogHeader>
-
-      <AlertDialogDescription className="group relative w-full">
-        <label
-          className="-translate-y-1/2 absolute top-1/2 block cursor-text px-1 text-muted-foreground/70 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:font-medium group-focus-within:text-foreground group-focus-within:text-xs has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground has-[+input:not(:placeholder-shown)]:text-xs"
-          htmlFor="url">
-          <span className="inline-flex bg-background px-2">URL</span>
-        </label>
-        <Input
-          id="url"
-          className="w-full"
-          value={url}
-          onChange={e => setUrl(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') embedMedia();
-          }}
-          placeholder=""
-          type="url"
-          autoFocus />
-      </AlertDialogDescription>
-
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction
-          onClick={(e) => {
-            e.preventDefault();
-            embedMedia();
-          }}>
-          Accept
-        </AlertDialogAction>
-      </AlertDialogFooter>
-    </>
-  );
-}

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

@@ -1,214 +0,0 @@
-'use client';
-
-import { type ComponentProps, type Dispatch, type SetStateAction } from 'react';
-
-import { type TMediaElement, type TTextAlignProps, KEYS } from 'platejs';
-
-import { showCaption } from '@platejs/caption/react';
-import {
-  openImagePreview,
-  useMediaController,
-  useMediaControllerDropDownMenu,
-  useMediaControllerState
-} from '@platejs/media/react';
-import { BlockMenuPlugin } from '@platejs/selection/react';
-import {
-  AlignCenter,
-  AlignLeft,
-  AlignRight,
-  CaptionsIcon,
-  CircleArrowDownIcon,
-  MoreHorizontalIcon,
-  MoveUpRightIcon,
-  ZoomInIcon
-} from 'lucide-react';
-import { useEditorRef, useElement } from 'platejs/react';
-
-import { toast } from 'sonner';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  type DropdownMenuProps,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-  useOpenState
-} from './dropdown-menu';
-
-import { Toolbar, ToolbarButton, toolbarButtonVariants } from './toolbar';
-
-import { downloadFile } from '../lib/download-file';
-
-export function MediaToolbar({
-  className: _className,
-  ...props
-}: ComponentProps<typeof Toolbar>) {
-  return (
-    <Toolbar
-      className={cn(
-        'group-data-[readonly=true]/editor:hidden',
-        'top-1 right-1 opacity-0 group-hover/media:opacity-100',
-        'group-has-data-[resizing=true]/media:opacity-0 group-has-data-[state=open]/media:opacity-100 group-data-[state=open]/context-menu:opacity-0'
-      )}
-      {...props}>
-      <MediaToolbarButtons />
-    </Toolbar>
-  );
-}
-
-const alignItems = [
-  {
-    icon: AlignLeft,
-    value: 'left'
-  },
-  {
-    icon: AlignCenter,
-    value: 'center'
-  },
-  {
-    icon: AlignRight,
-    value: 'right'
-  }
-];
-
-function MediaToolbarButtons() {
-  const editor = useEditorRef();
-  const element = useElement<TMediaElement>();
-  const state = useMediaControllerState();
-  const { MediaControllerDropDownMenuProps: mediaToolbarDropDownMenuProps }
-    = useMediaController(state);
-
-  const handleDownload = () => {
-    toast.promise(downloadFile(element.url, element.id || 'file'), {
-      error: 'Download failed. Please try again.',
-      loading: 'Downloading...'
-    });
-  };
-
-  return (
-    <>
-      <MediaAlignButton {...mediaToolbarDropDownMenuProps} />
-      <ToolbarButton
-        onClick={() => showCaption(editor, element)}
-        size="none"
-        tooltip="Caption"
-        variant="media">
-        <CaptionsIcon />
-      </ToolbarButton>
-      {element.type === KEYS.img && (
-        <ToolbarButton
-          onClick={() => {
-            openImagePreview(editor, element);
-          }}
-          size="none"
-          tooltip="Expand"
-          variant="media">
-          <ZoomInIcon />
-        </ToolbarButton>
-      )}
-
-      {element.type === KEYS.img && (
-        <ToolbarButton
-          onClick={handleDownload}
-          size="none"
-          tooltip="Download"
-          variant="media">
-          <CircleArrowDownIcon />
-        </ToolbarButton>
-      )}
-
-      {element.type !== KEYS.img && (
-        <ToolbarButton
-          onClick={() => {
-            window.open(element.url, '_blank');
-          }}
-          size="none"
-          tooltip="Original"
-          variant="media">
-          <MoveUpRightIcon />
-        </ToolbarButton>
-      )}
-
-      <ToolbarButton
-        onClick={(e) => {
-          editor
-            .getApi(BlockMenuPlugin)
-            .blockMenu.showContextMenu(element.id as string, {
-              x: e.clientX,
-              y: e.clientY
-            });
-        }}
-        size="none"
-        tooltip="More actions"
-        variant="media">
-        <MoreHorizontalIcon />
-      </ToolbarButton>
-    </>
-  );
-}
-
-function MediaAlignButton({
-  children: _children,
-  ...props
-}: {
-  setAlignOpen: Dispatch<SetStateAction<boolean>>;
-} & DropdownMenuProps) {
-  const editor = useEditorRef();
-  const element = useElement<TMediaElement & TTextAlignProps>();
-  const openState = useOpenState();
-
-  const value = element.align ?? 'left';
-
-  const IconValue
-    = alignItems.find(item => item.value === value)?.icon ?? AlignLeft;
-
-  useMediaControllerDropDownMenu({
-    openState,
-    setAlignOpen: props.setAlignOpen
-  });
-
-  return (
-    <DropdownMenu modal={false} {...openState} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton
-          data-state={openState.open ? 'open' : 'closed'}
-          size="none"
-          tooltip="Align"
-          variant="media">
-          <IconValue className="size-4" />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent
-        align="start"
-        className="min-w-0 rounded-md border-none bg-black/60 p-0 shadow-none"
-        portal={false}>
-        <DropdownMenuRadioGroup
-          className="flex hover:bg-transparent"
-          onValueChange={(value) => {
-            editor.tf.setNodes({ align: value as any }, { at: element });
-          }}
-          value={value}>
-          {alignItems.map(({ icon: Icon, value: itemValue }) => (
-            <DropdownMenuRadioItem
-              className={cn(
-                toolbarButtonVariants({
-                  size: 'none',
-                  variant: 'media'
-                }),
-                'size-[26px] opacity-60 hover:opacity-100 data-[state=checked]:bg-black/5 data-[state=checked]:opacity-100'
-              )}
-              hideIcon
-              key={itemValue}
-              value={itemValue}>
-              <Icon className="size-4" />
-            </DropdownMenuRadioItem>
-          ))}
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/internal/plate-editor/plate-ui/media-upload-toast.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-import { PlaceholderPlugin, UploadErrorCode } from '@platejs/media/react';
-import { usePluginOption } from 'platejs/react';
-import { toast } from 'sonner';
-
-export function MediaUploadToast() {
-  useUploadErrorToast();
-
-  return null;
-}
-
-const useUploadErrorToast = () => {
-  const uploadError = usePluginOption(PlaceholderPlugin, 'error');
-
-  useEffect(() => {
-    if (!uploadError) return;
-
-    const { code, data } = uploadError;
-
-    switch (code) {
-      case UploadErrorCode.INVALID_FILE_SIZE: {
-        toast.error(
-          `The size of files ${data.files
-            .map(f => f.name)
-            .join(', ')} is invalid`
-        );
-
-        break;
-      }
-
-      case UploadErrorCode.INVALID_FILE_TYPE: {
-        toast.error(
-          `The type of files ${data.files
-            .map(f => f.name)
-            .join(', ')} is invalid`
-        );
-
-        break;
-      }
-
-      case UploadErrorCode.TOO_LARGE: {
-        toast.error(
-          `The size of files ${data.files
-            .map(f => f.name)
-            .join(', ')} is too large than ${data.maxFileSize}`
-        );
-
-        break;
-      }
-
-      case UploadErrorCode.TOO_LESS_FILES: {
-        toast.error(
-          `The mini um number of files is ${data.minFileCount} for ${data.fileType}`
-        );
-
-        break;
-      }
-
-      case UploadErrorCode.TOO_MANY_FILES: {
-        toast.error(
-          `The maximum number of files is ${data.maxFileCount} ${
-            data.fileType ? `for ${data.fileType}` : ''
-          }`
-        );
-
-        break;
-      }
-    }
-  }, [uploadError]);
-};

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

@@ -1,35 +0,0 @@
-
-import {
-  NodeApi,
-  type TCaptionElement,
-  type TResizableProps,
-  type TVideoElement
-} from 'platejs';
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-export function MediaVideoElementStatic(
-  props: SlateElementProps<TVideoElement & TCaptionElement & TResizableProps>
-) {
-  const {
-    align = 'center', caption, url, width
-  } = props.element;
-
-  return (
-    <SlateElement className="py-2.5" {...props}>
-      <div style={{ textAlign: align }}>
-        <figure
-          className="group relative m-0 inline-block cursor-default"
-          style={{ width }}>
-          <video
-            className={cn('w-full max-w-full object-cover px-0', 'rounded-sm')}
-            controls
-            src={url} />
-          {caption && <figcaption>{NodeApi.string(caption[0])}</figcaption>}
-        </figure>
-      </div>
-      {props.children}
-    </SlateElement>
-  );
-}