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

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

@@ -1,52 +0,0 @@
-'use client';
-
-import { useMediaState } from '@platejs/media/react';
-import { ResizableProvider } from '@platejs/resizable';
-import { FileUpIcon } from 'lucide-react';
-import {
-  PlateElement,
-  type PlateElementProps,
-  useReadOnly,
-  withHOC
-} from 'platejs/react';
-
-import { BlockActionButton } from './block-context-menu';
-import { Caption, CaptionTextarea } from './caption';
-
-export const MediaFileElement = withHOC(
-  ResizableProvider,
-  (props: PlateElementProps) => {
-    const readOnly = useReadOnly();
-    const { name, unsafeUrl } = useMediaState();
-
-    const onDownload = () => {
-      window.open(unsafeUrl);
-    };
-
-    return (
-      <PlateElement className="my-px rounded-sm" {...props}>
-        <div
-          className="group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px] transition-bg-ease hover:bg-muted"
-          contentEditable={false}
-          onClick={onDownload}
-          role="button">
-          <div className="flex items-center gap-1 p-1">
-            <FileUpIcon className="size-5" />
-            <div>{name}</div>
-          </div>
-
-          <Caption align="left">
-            <CaptionTextarea
-              className="text-left"
-              placeholder="Write a caption..."
-              readOnly={readOnly} />
-          </Caption>
-
-          <BlockActionButton className="-translate-y-1/2 top-1/2" />
-        </div>
-
-        {props.children}
-      </PlateElement>
-    );
-  }
-);

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

@@ -1,37 +0,0 @@
-
-import {
-  type TCaptionElement, type TImageElement, type TResizableProps, NodeApi
-} from 'platejs';
-
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-export function ImageElementStatic(
-  props: SlateElementProps<TImageElement & TCaptionElement & TResizableProps>
-) {
-  const {
-    align = 'center', caption, url, width
-  } = props.element;
-
-  return (
-    <SlateElement className="py-2.5" {...props}>
-      <figure className="group relative m-0 inline-block">
-        <div
-          className="relative min-w-[92px] max-w-full"
-          style={{ textAlign: align }}>
-          <div className="inline-block" style={{ width }}>
-            <img
-              alt={(props.attributes as any).alt}
-              className="w-full max-w-full cursor-default rounded-sm object-cover px-0"
-              src={url} />
-            {caption && (
-              <figcaption className="mx-auto mt-2 h-[24px] max-w-full">
-                {NodeApi.string(caption[0])}
-              </figcaption>
-            )}
-          </div>
-        </div>
-      </figure>
-      {props.children}
-    </SlateElement>
-  );
-}

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

@@ -1,183 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-
-import { type TImageElement } from 'platejs';
-
-import { useDraggable } from '@platejs/dnd';
-import {
-  PlaceholderPlugin,
-  useImage,
-  useMediaState
-} from '@platejs/media/react';
-import { ResizableProvider, useResizableValue } from '@platejs/resizable';
-import {
-  PlateElement,
-  type PlateElementProps,
-  useEditorPlugin,
-  withHOC
-} from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { blockSelectionVariants } from './block-selection';
-import { Caption, CaptionTextarea } from './caption';
-import { MediaToolbar } from './media-toolbar';
-import {
-  mediaResizeHandleVariants,
-  Resizable,
-  ResizeHandle
-} from './resize-handle';
-
-export const ImageElement = withHOC(
-  ResizableProvider,
-  (props: PlateElementProps<TImageElement>) => {
-    const { api, editor } = useEditorPlugin(PlaceholderPlugin);
-
-    const print = editor.meta.mode === 'print';
-
-    const { element } = props;
-
-    const currentUploadingFile = useMemo(() => {
-      if (!element.placeholderId) return;
-
-      return api.placeholder.getUploadingFile(element.placeholderId);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [element.placeholderId]);
-
-    const {
-      align = 'center', focused, readOnly, selected
-    } = useMediaState();
-
-    const [loading, setLoading] = useState(true);
-
-    const width = useResizableValue('width');
-
-    const { props: imageProps } = useImage();
-
-    const height = useMemo<number | null>(() => {
-      if (print) return null;
-      if (!element.initialHeight || !element.initialWidth) {
-        // Embed image we don't have height and width using 200 by default
-        return loading ? 200 : null;
-      }
-      if (typeof width !== 'number' || width === 0)
-        return Number(element.initialHeight.toFixed(2));
-
-      const aspectRatio = Number(
-        (element.initialWidth! / element.initialHeight!).toFixed(2)
-      );
-
-      return Number((width / aspectRatio).toFixed(2));
-    }, [
-      element.initialHeight,
-      element.initialWidth,
-      loading,
-      print,
-      width
-    ]);
-
-    const { isDragging, handleRef } = useDraggable({
-      element: props.element
-    });
-
-    return (
-      <PlateElement className="my-1" {...props}>
-        <figure className="relative m-0" contentEditable={false}>
-          <Resizable
-            align={align}
-            options={{
-              align,
-              readOnly
-            }}>
-            <div className="group/media">
-              <ResizeHandle
-                className={mediaResizeHandleVariants({ direction: 'left' })}
-                options={{ direction: 'left' }} />
-              <ResizeHandle
-                className={mediaResizeHandleVariants({ direction: 'right' })}
-                options={{ direction: 'right' }} />
-
-              <div
-                className={cn(
-                  'relative block w-full max-w-full cursor-pointer object-cover px-0',
-                  blockSelectionVariants({ active: focused && selected }),
-                  'group-has-data-[resizing=true]/media:before:opacity-0'
-                )}
-                style={{
-                  height: height ? `${height}px` : 'auto'
-                }}>
-                {print ? (
-                  <img
-                    alt=""
-                    className={cn('h-full rounded-xs')}
-                    height="auto"
-                    width="100%"
-                    {...imageProps} />
-                ) : (
-                  <img
-                    className={cn(
-                      'h-full w-full rounded-xs opacity-100',
-                      loading && 'opacity-0',
-                      isDragging && 'opacity-50'
-                    )}
-                    height="auto"
-                    onLoad={() => {
-                      setLoading(false);
-                      if (currentUploadingFile) {
-                        api.placeholder.removeUploadingFile(
-                          props.element.fromPlaceholderId as string
-                        );
-                      }
-                    }}
-                    width="100%"
-                    ref={handleRef as any}
-                    {...imageProps} />
-                )}
-
-                {loading && <ImagePlaceholder file={currentUploadingFile} />}
-              </div>
-
-              <MediaToolbar />
-            </div>
-          </Resizable>
-
-          <Caption align={align} style={{ width }}>
-            <CaptionTextarea
-              onFocus={(e) => {
-                e.preventDefault();
-              }}
-              placeholder="Write a caption..."
-              readOnly={readOnly} />
-          </Caption>
-        </figure>
-
-        {props.children}
-      </PlateElement>
-    );
-  }
-);
-
-const ImagePlaceholder = ({ file }: { file?: File }) => {
-  const objectUrl = useMemo(
-    () => (file ? URL.createObjectURL(file) : null),
-    [file]
-  );
-
-  useEffect(() => {
-    if (!objectUrl) return;
-
-    return () => URL.revokeObjectURL(objectUrl);
-  }, [objectUrl]);
-
-  return (
-    <div className="absolute inset-0 overflow-hidden bg-[rgb(247,246,245)] before:absolute before:inset-0 before:z-10 before:animate-shimmer before:bg-linear-to-r before:from-transparent before:via-gray-200/50 before:to-transparent">
-      {file && objectUrl && (
-        <img
-          alt={file.name}
-          className="h-auto w-full rounded-xs object-cover"
-          src={objectUrl} />
-      )}
-    </div>
-  );
-};

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

@@ -1,441 +0,0 @@
-'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')
-  }`;
-}