@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,441 @@
+'use client';
+
+import {
+  useCallback, useEffect, useRef, useState, type ChangeEvent, type ReactNode, type RefObject
+} from 'react';
+
+import {
+  PlaceholderPlugin,
+  PlaceholderProvider,
+  usePlaceholderElementState,
+  usePlaceholderPopoverState
+} from '@platejs/media/react';
+import {
+  AudioLinesIcon, FileUpIcon, FilmIcon, ImageIcon
+} from 'lucide-react';
+import { KEYS, nanoid } from 'platejs';
+import {
+  PlateElement,
+  type PlateElementProps,
+  useEditorPlugin,
+  withHOC
+} from 'platejs/react';
+
+import { setMediaNode } from '@platejs/media';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { BlockActionButton } from './block-context-menu';
+import { Button } from './button';
+import { Input } from './input';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { Spinner } from './spinner';
+import {
+  Tabs, TabsContent, TabsList, TabsTrigger
+} from './tabs';
+
+import { useUploadFile } from '../hooks/use-upload-file';
+
+const CONTENT: Record<
+  string,
+  {
+    content: ReactNode;
+    icon: ReactNode;
+  }
+> = {
+  [KEYS.audio]: {
+    content: 'Add an audio file',
+    icon: <AudioLinesIcon />
+  },
+  [KEYS.file]: {
+    content: 'Add a file',
+    icon: <FileUpIcon />
+  },
+  [KEYS.img]: {
+    content: 'Add an image',
+    icon: <ImageIcon />
+  },
+  [KEYS.video]: {
+    content: 'Add a video',
+    icon: <FilmIcon />
+  }
+};
+
+export const PlaceholderElement = withHOC(
+  PlaceholderProvider,
+  (props: PlateElementProps) => {
+    const {
+      mediaType, progresses, progressing, setSize, updatedFiles
+    }
+      = usePlaceholderElementState();
+
+    const currentContent = CONTENT[mediaType];
+
+    const isImage = mediaType === KEYS.img;
+
+    const file: File | undefined = updatedFiles?.[0];
+    const progress = file ? progresses?.[file.name] : undefined;
+
+    const imageRef = useRef<HTMLImageElement>(null);
+
+    useEffect(() => {
+      if (!imageRef.current) return;
+
+      const { height, width } = imageRef.current;
+
+      setSize?.({
+        height,
+        width
+      });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [imageRef.current]);
+
+    return (
+      <PlateElement className="my-1" {...props}>
+        <MediaPlaceholderPopover>
+          {(!progressing || !isImage) && (
+            <div
+              className={cn(
+                'flex cursor-pointer select-none items-center rounded-sm bg-muted p-3 pr-9 transition-bg-ease hover:bg-primary/10'
+              )}
+              contentEditable={false}
+              role="button">
+              <div className="relative mr-3 flex text-muted-foreground/80 [&_svg]:size-6">
+                {currentContent.icon}
+              </div>
+              <div className="whitespace-nowrap text-muted-foreground text-sm">
+                <div>{progressing ? file?.name : currentContent.content}</div>
+
+                {progressing && !isImage && (
+                  <div className="mt-1 flex items-center gap-1.5">
+                    <div>{formatBytes(file.size)}</div>
+                    <div>-</div>
+                    <div className="flex items-center">
+                      <Spinner className="mr-1 size-3.5" />
+                      {progress ?? 0}%
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </MediaPlaceholderPopover>
+
+        {isImage && progressing && file && (
+          <ImageProgress file={file} imageRef={imageRef} progress={progress} />
+        )}
+
+        <BlockActionButton />
+
+        {props.children}
+      </PlateElement>
+    );
+  }
+);
+
+const MEDIA_CONFIG: Record<
+  string,
+  {
+    accept: string[];
+    buttonText: string;
+    embedText: string;
+  }
+> = {
+  [KEYS.audio]: {
+    accept: ['audio/*'],
+    buttonText: 'Upload Audio',
+    embedText: 'Embed audio'
+  },
+  [KEYS.file]: {
+    accept: ['*'],
+    buttonText: 'Choose a file',
+    embedText: 'Embed file'
+  },
+  [KEYS.img]: {
+    accept: ['image/*'],
+    buttonText: 'Upload file',
+    embedText: 'Embed image'
+  },
+  [KEYS.video]: {
+    accept: ['video/*'],
+    buttonText: 'Upload video',
+    embedText: 'Embed video'
+  }
+};
+
+function MediaPlaceholderPopover({ children }: { children: ReactNode }) {
+  const {
+    api, editor, getOption, tf
+  } = useEditorPlugin(PlaceholderPlugin);
+
+  const {
+    id,
+    element,
+    mediaType,
+    readOnly,
+    selected,
+    setIsUploading,
+    setProgresses,
+    setUpdatedFiles,
+    size
+  } = usePlaceholderPopoverState();
+  const [open, setOpen] = useState(false);
+
+  const currentMedia = MEDIA_CONFIG[mediaType];
+
+  const multiple = getOption('multiple') ?? true;
+
+  const {
+    isUploading, progress, uploadedFile, uploadFile, uploadingFile
+  }
+    = useUploadFile({
+      onUploadComplete() {
+        // Replace with actual file creation logic
+      }
+    });
+
+  const replaceCurrentPlaceholder = useCallback(
+    (file: File) => {
+      setUpdatedFiles([file]);
+      void uploadFile(file);
+      api.placeholder.addUploadingFile(element.id as string, file);
+    },
+    [
+      element.id,
+      setUpdatedFiles,
+      uploadFile,
+      api.placeholder
+    ]
+  );
+
+  /** Open file picker using native input */
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const openFilePicker = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+      fileInputRef.current.click();
+    }
+  }, []);
+
+  const handleFilesSelected = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const updatedFiles: File[] = Array.from(e.target.files || []);
+
+      if (!updatedFiles.length) return;
+
+      const firstFile = updatedFiles[0];
+      const restFiles = updatedFiles.slice(1);
+
+      replaceCurrentPlaceholder(firstFile);
+
+      if (restFiles.length > 0) {
+        tf.insert.media(restFiles as unknown as FileList);
+      }
+    },
+    [replaceCurrentPlaceholder, tf.insert]
+  );
+
+  // React dev mode will call useEffect twice
+  const isReplaced = useRef(false);
+
+  /** Paste and drop */
+  useEffect(() => {
+    if (isReplaced.current) return;
+
+    isReplaced.current = true;
+    const currentFiles = api.placeholder.getUploadingFile(element.id as string);
+
+    if (!currentFiles) return;
+
+    replaceCurrentPlaceholder(currentFiles);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isReplaced]);
+
+  useEffect(() => {
+    if (!uploadedFile) return;
+
+    const path = editor.api.findPath(element);
+
+    setMediaNode(
+      editor,
+      {
+        id: nanoid(),
+        initialHeight: size?.height,
+        initialWidth: size?.width,
+        isUpload: true,
+        name: mediaType === KEYS.file ? uploadedFile.name : '',
+        placeholderId: element.id as string,
+        type: mediaType!,
+        url: uploadedFile.url
+      },
+      { at: path }
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadedFile, element.id, size]);
+
+  const [embedValue, setEmbedValue] = useState('');
+
+  const onEmbed = useCallback(
+    (value: string) => {
+      setMediaNode(editor, {
+        type: mediaType,
+        url: value
+      });
+    },
+    [editor, mediaType]
+  );
+
+  useEffect(() => {
+    setOpen(selected);
+  }, [selected, setOpen]);
+
+  useEffect(() => {
+    if (isUploading) {
+      setOpen(false);
+    }
+  }, [isUploading]);
+
+  useEffect(() => {
+    setProgresses({ [uploadingFile?.name ?? '']: progress });
+    setIsUploading(isUploading);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    id,
+    progress,
+    isUploading,
+    uploadingFile
+  ]);
+
+  if (readOnly) return <>{children}</>;
+
+  return (
+    <Popover modal={false} onOpenChange={setOpen} open={open}>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={currentMedia.accept.join(',')}
+        multiple={multiple}
+        onChange={handleFilesSelected}
+        className="hidden" />
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+
+      <PopoverContent
+        className="flex flex-col"
+        onOpenAutoFocus={e => e.preventDefault()}
+        variant="media">
+        <Tabs className="w-full shrink-0" defaultValue="account">
+          <TabsList className="px-2" onMouseDown={e => e.preventDefault()}>
+            <TabsTrigger value="account">Upload</TabsTrigger>
+            <TabsTrigger value="password">Embed link</TabsTrigger>
+          </TabsList>
+          <TabsContent className="w-[300px] px-3 py-2" value="account">
+            <Button className="w-full" onClick={openFilePicker} variant="brand">
+              {currentMedia.buttonText}
+            </Button>
+            <div className="mt-3 text-muted-foreground text-xs">
+              The maximum size per file is 5MB
+            </div>
+          </TabsContent>
+
+          <TabsContent
+            className="w-[300px] px-3 pt-2 pb-3 text-center"
+            value="password">
+            <Input
+              onChange={e => setEmbedValue(e.target.value)}
+              placeholder="Paste the link..."
+              value={embedValue} />
+
+            <Button
+              className="mt-2 w-full max-w-[300px]"
+              onClick={() => onEmbed(embedValue)}
+              variant="brand">
+              {currentMedia.embedText}
+            </Button>
+          </TabsContent>
+        </Tabs>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function ImageProgress({
+  className,
+  file,
+  imageRef,
+  progress = 0
+}: {
+  file: File;
+  className?: string;
+  imageRef?: RefObject<HTMLImageElement | null>;
+  progress?: number;
+}) {
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+
+  // Create and manage Object URL lifecycle
+  useEffect(() => {
+    const url = URL.createObjectURL(file);
+
+    setObjectUrl(url);
+
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [file]);
+
+  if (!objectUrl) {
+    return null;
+  }
+
+  return (
+    <div className={cn('relative', className)} contentEditable={false}>
+      <img
+        alt={file.name}
+        className="h-auto w-full rounded-xs object-cover"
+        ref={imageRef}
+        src={objectUrl} />
+      {progress < 100 && (
+        <div className="absolute right-1 bottom-1 flex items-center space-x-2 rounded-full bg-black/50 px-1 py-0.5">
+          <Spinner />
+          <span className="font-medium text-white text-xs">
+            {Math.round(progress)}%
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatBytes(
+  bytes: number,
+  opts: {
+    decimals?: number;
+    sizeType?: 'accurate' | 'normal';
+  } = {}
+) {
+  const { decimals = 0, sizeType = 'normal' } = opts;
+
+  const sizes = [
+    'Bytes',
+    'KB',
+    'MB',
+    'GB',
+    'TB'
+  ];
+  const accurateSizes = [
+    'Bytes',
+    'KiB',
+    'MiB',
+    'GiB',
+    'TiB'
+  ];
+
+  if (bytes === 0) return '0 Byte';
+
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+  return `${(bytes / 1024 ** i).toFixed(decimals)} ${
+    sizeType === 'accurate' ? (accurateSizes[i] ?? 'Bytest') : (sizes[i] ?? 'Bytes')
+  }`;
+}

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

@@ -0,0 +1,127 @@
+'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} />;
+}