doclific 0.1.0

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

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

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

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

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

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

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