doclific 0.2.0 → 0.2.2

package/frontend/src/components/ui/media-embed-node.tsx

@@ -1,136 +0,0 @@
-
-import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import { Tweet } from 'react-tweet';
-
-import type { TMediaEmbedElement } from 'platejs';
-import type { PlateElementProps } from 'platejs/react';
-
-import { parseTwitterUrl, parseVideoUrl } from '@platejs/media';
-import { MediaEmbedPlugin, useMediaState } from '@platejs/media/react';
-import { ResizableProvider, useResizableValue } from '@platejs/resizable';
-import { PlateElement, withHOC } from 'platejs/react';
-
-import { cn } from '@/lib/utils';
-
-import { Caption, CaptionTextarea } from './caption';
-import { MediaToolbar } from './media-toolbar';
-import {
-  mediaResizeHandleVariants,
-  Resizable,
-  ResizeHandle,
-} from './resize-handle';
-
-export const MediaEmbedElement = withHOC(
-  ResizableProvider,
-  function MediaEmbedElement(props: PlateElementProps<TMediaEmbedElement>) {
-    const {
-      align = 'center',
-      embed,
-      focused,
-      isTweet,
-      isVideo,
-      isYoutube,
-      readOnly,
-      selected,
-    } = useMediaState({
-      urlParsers: [parseTwitterUrl, parseVideoUrl],
-    });
-    const width = useResizableValue('width');
-    const provider = embed?.provider;
-
-    return (
-      <MediaToolbar plugin={MediaEmbedPlugin}>
-        <PlateElement className="py-2.5" {...props}>
-          <figure
-            className="group relative m-0 w-full cursor-default"
-            contentEditable={false}
-          >
-            <Resizable
-              align={align}
-              options={{
-                align,
-                maxWidth: isTweet ? 550 : '100%',
-                minWidth: isTweet ? 300 : 100,
-              }}
-            >
-              <ResizeHandle
-                className={mediaResizeHandleVariants({ direction: 'left' })}
-                options={{ direction: 'left' }}
-              />
-
-              {isVideo ? (
-                isYoutube ? (
-                  <LiteYouTubeEmbed
-                    id={embed!.id!}
-                    title="youtube"
-                    wrapperClass={cn(
-                      'rounded-sm',
-                      focused && selected && 'ring-2 ring-ring ring-offset-2',
-                      'relative block cursor-pointer bg-black bg-center bg-cover [contain:content]',
-                      '[&.lyt-activated]:before:absolute [&.lyt-activated]:before:top-0 [&.lyt-activated]:before:h-[60px] [&.lyt-activated]:before:w-full [&.lyt-activated]:before:bg-top [&.lyt-activated]:before:bg-repeat-x [&.lyt-activated]:before:pb-[50px] [&.lyt-activated]:before:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
-                      '[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]',
-                      'after:block after:pb-[var(--aspect-ratio)] after:content-[""]',
-                      '[&_>_iframe]:absolute [&_>_iframe]:top-0 [&_>_iframe]:left-0 [&_>_iframe]:size-full',
-                      '[&_>_.lty-playbtn]:z-1 [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
-                      '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',
-                      '[&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:content-[""]',
-                      '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',
-                      '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',
-                      '[&.lyt-activated]:cursor-[unset]',
-                      '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',
-                      '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:opacity-0!'
-                    )}
-                  />
-                ) : (
-                  <div
-                    className={cn(
-                      provider === 'vimeo' && 'pb-[75%]',
-                      provider === 'youku' && 'pb-[56.25%]',
-                      provider === 'dailymotion' && 'pb-[56.0417%]',
-                      provider === 'coub' && 'pb-[51.25%]'
-                    )}
-                  >
-                    <iframe
-                      className={cn(
-                        'absolute top-0 left-0 size-full rounded-sm',
-                        isVideo && 'border-0',
-                        focused && selected && 'ring-2 ring-ring ring-offset-2'
-                      )}
-                      title="embed"
-                      src={embed!.url}
-                      allowFullScreen
-                    />
-                  </div>
-                )
-              ) : null}
-
-              {isTweet && (
-                <div
-                  className={cn(
-                    '[&_.react-tweet-theme]:my-0',
-                    !readOnly &&
-                    selected &&
-                    '[&_.react-tweet-theme]:ring-2 [&_.react-tweet-theme]:ring-ring [&_.react-tweet-theme]:ring-offset-2'
-                  )}
-                >
-                  <Tweet id={embed!.id!} />
-                </div>
-              )}
-
-              <ResizeHandle
-                className={mediaResizeHandleVariants({ direction: 'right' })}
-                options={{ direction: 'right' }}
-              />
-            </Resizable>
-
-            <Caption style={{ width }} align={align}>
-              <CaptionTextarea placeholder="Write a caption..." />
-            </Caption>
-          </figure>
-
-          {props.children}
-        </PlateElement>
-      </MediaToolbar>
-    );
-  }
-);

package/frontend/src/components/ui/media-file-node-static.tsx

@@ -1,29 +0,0 @@
-import type { TFileElement } from 'platejs';
-import type { SlateElementProps } from 'platejs/static';
-
-import { FileUp } from 'lucide-react';
-import { SlateElement } from 'platejs/static';
-
-export function FileElementStatic(props: SlateElementProps<TFileElement>) {
-  const { name, url } = props.element;
-
-  return (
-    <SlateElement className="my-px rounded-sm" {...props}>
-      <a
-        className="group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px] hover:bg-muted"
-        contentEditable={false}
-        download={name}
-        href={url}
-        rel="noopener noreferrer"
-        role="button"
-        target="_blank"
-      >
-        <div className="flex items-center gap-1 p-1">
-          <FileUp className="size-5" />
-          <div>{name}</div>
-        </div>
-      </a>
-      {props.children}
-    </SlateElement>
-  );
-}

package/frontend/src/components/ui/media-file-node.tsx

@@ -1,47 +0,0 @@
-
-
-import type { TFileElement } from 'platejs';
-import type { PlateElementProps } from 'platejs/react';
-
-import { useMediaState } from '@platejs/media/react';
-import { ResizableProvider } from '@platejs/resizable';
-import { FileUp } from 'lucide-react';
-import { PlateElement, useReadOnly, withHOC } from 'platejs/react';
-
-import { Caption, CaptionTextarea } from './caption';
-
-export const FileElement = withHOC(
-  ResizableProvider,
-  function FileElement(props: PlateElementProps<TFileElement>) {
-    const readOnly = useReadOnly();
-    const { name, unsafeUrl } = useMediaState();
-
-    return (
-      <PlateElement className="my-px rounded-sm" {...props}>
-        <a
-          className="group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px] hover:bg-muted"
-          contentEditable={false}
-          download={name}
-          href={unsafeUrl}
-          rel="noopener noreferrer"
-          role="button"
-          target="_blank"
-        >
-          <div className="flex items-center gap-1 p-1">
-            <FileUp className="size-5" />
-            <div>{name}</div>
-          </div>
-
-          <Caption align="left">
-            <CaptionTextarea
-              className="text-left"
-              readOnly={readOnly}
-              placeholder="Write a caption..."
-            />
-          </Caption>
-        </a>
-        {props.children}
-      </PlateElement>
-    );
-  }
-);

package/frontend/src/components/ui/media-image-node-static.tsx

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

package/frontend/src/components/ui/media-image-node.tsx

@@ -1,80 +0,0 @@
-
-
-import type { TImageElement } from 'platejs';
-import type { PlateElementProps } from 'platejs/react';
-
-import { useDraggable } from '@platejs/dnd';
-import { Image, ImagePlugin, useMediaState } from '@platejs/media/react';
-import { ResizableProvider, useResizableValue } from '@platejs/resizable';
-import { PlateElement, withHOC } from 'platejs/react';
-
-import { cn } from '@/lib/utils';
-
-import { Caption, CaptionTextarea } from './caption';
-import { MediaToolbar } from './media-toolbar';
-import {
-  mediaResizeHandleVariants,
-  Resizable,
-  ResizeHandle,
-} from './resize-handle';
-
-export const ImageElement = withHOC(
-  ResizableProvider,
-  function ImageElement(props: PlateElementProps<TImageElement>) {
-    const { align = 'center', focused, readOnly, selected } = useMediaState();
-    const width = useResizableValue('width');
-
-    const { isDragging, handleRef } = useDraggable({
-      element: props.element,
-    });
-
-    return (
-      <MediaToolbar plugin={ImagePlugin}>
-        <PlateElement {...props} className="py-2.5">
-          <figure className="group relative m-0" contentEditable={false}>
-            <Resizable
-              align={align}
-              options={{
-                align,
-                readOnly,
-              }}
-            >
-              <ResizeHandle
-                className={mediaResizeHandleVariants({ direction: 'left' })}
-                options={{ direction: 'left' }}
-              />
-              <Image
-                ref={handleRef}
-                className={cn(
-                  'block w-full max-w-full cursor-pointer object-cover px-0',
-                  'rounded-sm',
-                  focused && selected && 'ring-2 ring-ring ring-offset-2',
-                  isDragging && 'opacity-50'
-                )}
-                alt={props.attributes.alt as string | undefined}
-              />
-              <ResizeHandle
-                className={mediaResizeHandleVariants({
-                  direction: 'right',
-                })}
-                options={{ direction: 'right' }}
-              />
-            </Resizable>
-
-            <Caption style={{ width }} align={align}>
-              <CaptionTextarea
-                readOnly={readOnly}
-                onFocus={(e) => {
-                  e.preventDefault();
-                }}
-                placeholder="Write a caption..."
-              />
-            </Caption>
-          </figure>
-
-          {props.children}
-        </PlateElement>
-      </MediaToolbar>
-    );
-  }
-);

package/frontend/src/components/ui/media-placeholder-node.tsx

@@ -1,249 +0,0 @@
-import React from 'react';
-
-import type { TPlaceholderElement } from 'platejs';
-import type { PlateElementProps } from 'platejs/react';
-
-import {
-  PlaceholderPlugin,
-  PlaceholderProvider,
-  updateUploadHistory,
-} from '@platejs/media/react';
-import { AudioLines, FileUp, Film, ImageIcon, Loader2Icon } from 'lucide-react';
-import { KEYS } from 'platejs';
-import { PlateElement, useEditorPlugin, withHOC } from 'platejs/react';
-import { useFilePicker } from 'use-file-picker';
-
-import { cn } from '@/lib/utils';
-import { useUploadFile } from '@/hooks/use-upload-file';
-
-const CONTENT: Record<
-  string,
-  {
-    accept: string[];
-    content: React.ReactNode;
-    icon: React.ReactNode;
-  }
-> = {
-  [KEYS.audio]: {
-    accept: ['audio/*'],
-    content: 'Add an audio file',
-    icon: <AudioLines />,
-  },
-  [KEYS.file]: {
-    accept: ['*'],
-    content: 'Add a file',
-    icon: <FileUp />,
-  },
-  [KEYS.img]: {
-    accept: ['image/*'],
-    content: 'Add an image',
-    icon: <ImageIcon />,
-  },
-  [KEYS.video]: {
-    accept: ['video/*'],
-    content: 'Add a video',
-    icon: <Film />,
-  },
-};
-
-export const PlaceholderElement = withHOC(
-  PlaceholderProvider,
-  function PlaceholderElement(props: PlateElementProps<TPlaceholderElement>) {
-    const { editor, element } = props;
-
-    const { api } = useEditorPlugin(PlaceholderPlugin);
-
-    const { isUploading, progress, uploadedFile, uploadFile, uploadingFile } =
-      useUploadFile();
-
-    const loading = isUploading && uploadingFile;
-
-    const currentContent = CONTENT[element.mediaType];
-
-    const isImage = element.mediaType === KEYS.img;
-
-    const imageRef = React.useRef<HTMLImageElement>(null);
-
-    const { openFilePicker } = useFilePicker({
-      accept: currentContent.accept,
-      multiple: true,
-      onFilesSelected: ({ plainFiles: updatedFiles }) => {
-        const firstFile = updatedFiles[0];
-        const restFiles = updatedFiles.slice(1);
-
-        replaceCurrentPlaceholder(firstFile);
-
-        if (restFiles.length > 0) {
-          editor.getTransforms(PlaceholderPlugin).insert.media(restFiles);
-        }
-      },
-    });
-
-    const replaceCurrentPlaceholder = React.useCallback(
-      (file: File) => {
-        void uploadFile(file);
-        api.placeholder.addUploadingFile(element.id as string, file);
-      },
-      [api.placeholder, element.id, uploadFile]
-    );
-
-    React.useEffect(() => {
-      if (!uploadedFile) return;
-
-      const path = editor.api.findPath(element);
-
-      editor.tf.withoutSaving(() => {
-        editor.tf.removeNodes({ at: path });
-
-        const node = {
-          children: [{ text: '' }],
-          initialHeight: imageRef.current?.height,
-          initialWidth: imageRef.current?.width,
-          isUpload: true,
-          name: element.mediaType === KEYS.file ? uploadedFile.name : '',
-          placeholderId: element.id as string,
-          type: element.mediaType!,
-          url: uploadedFile.url,
-        };
-
-        editor.tf.insertNodes(node, { at: path });
-
-        updateUploadHistory(editor, node);
-      });
-
-      api.placeholder.removeUploadingFile(element.id as string);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [uploadedFile, element.id]);
-
-    // React dev mode will call React.useEffect twice
-    const isReplaced = React.useRef(false);
-
-    /** Paste and drop */
-    React.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]);
-
-    return (
-      <PlateElement className="my-1" {...props}>
-        {(!loading || !isImage) && (
-          <div
-            className={cn(
-              'flex cursor-pointer select-none items-center rounded-sm bg-muted p-3 pr-9 hover:bg-primary/10'
-            )}
-            onClick={() => !loading && openFilePicker()}
-            contentEditable={false}
-          >
-            <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>
-                {loading ? uploadingFile?.name : currentContent.content}
-              </div>
-
-              {loading && !isImage && (
-                <div className="mt-1 flex items-center gap-1.5">
-                  <div>{formatBytes(uploadingFile?.size ?? 0)}</div>
-                  <div>–</div>
-                  <div className="flex items-center">
-                    <Loader2Icon className="mr-1 size-3.5 animate-spin text-muted-foreground" />
-                    {progress ?? 0}%
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {isImage && loading && (
-          <ImageProgress
-            file={uploadingFile}
-            imageRef={imageRef}
-            progress={progress}
-          />
-        )}
-
-        {props.children}
-      </PlateElement>
-    );
-  }
-);
-
-export function ImageProgress({
-  className,
-  file,
-  imageRef,
-  progress = 0,
-}: {
-  file: File;
-  className?: string;
-  imageRef?: React.RefObject<HTMLImageElement | null>;
-  progress?: number;
-}) {
-  const [objectUrl, setObjectUrl] = React.useState<string | null>(null);
-
-  React.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
-        ref={imageRef}
-        className="h-auto w-full rounded-sm object-cover"
-        alt={file.name}
-        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">
-          <Loader2Icon className="size-3.5 animate-spin text-muted-foreground" />
-          <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')
-    }`;
-}