doclific 0.1.0

package/frontend/src/components/ui/media-preview-dialog.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import {
+  PreviewImage,
+  useImagePreview,
+  useImagePreviewValue,
+  useScaleInput,
+} from '@platejs/media/react';
+import { cva } from 'class-variance-authority';
+import { ArrowLeft, ArrowRight, Download, Minus, Plus, X } from 'lucide-react';
+import { useEditorRef } from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva('rounded bg-[rgba(0,0,0,0.5)] px-1', {
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      default: 'text-white',
+      disabled: 'cursor-not-allowed text-gray-400',
+    },
+  },
+});
+
+const SCROLL_SPEED = 4;
+
+export function MediaPreviewDialog() {
+  const editor = useEditorRef();
+  const isOpen = useImagePreviewValue('isOpen', editor.id);
+  const scale = useImagePreviewValue('scale');
+  const isEditingScale = useImagePreviewValue('isEditingScale');
+  const {
+    closeProps,
+    currentUrlIndex,
+    maskLayerProps,
+    nextDisabled,
+    nextProps,
+    prevDisabled,
+    prevProps,
+    scaleTextProps,
+    zommOutProps,
+    zoomInDisabled,
+    zoomInProps,
+    zoomOutDisabled,
+  } = useImagePreview({ scrollSpeed: SCROLL_SPEED });
+
+  return (
+    <div
+      className={cn(
+        'fixed top-0 left-0 z-50 h-screen w-screen select-none',
+        !isOpen && 'hidden'
+      )}
+      onContextMenu={(e) => e.stopPropagation()}
+      {...maskLayerProps}
+    >
+      <div className="absolute inset-0 size-full bg-black opacity-30" />
+      <div className="absolute inset-0 size-full bg-black opacity-30" />
+      <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 object-contain transition-transform'
+            )}
+          />
+          <div
+            className="-translate-x-1/2 absolute bottom-0 left-1/2 z-40 flex w-fit justify-center gap-4 p-2 text-center text-white"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex gap-1">
+              <button
+                {...prevProps}
+                className={cn(
+                  buttonVariants({
+                    variant: prevDisabled ? 'disabled' : 'default',
+                  })
+                )}
+                type="button"
+              >
+                <ArrowLeft />
+              </button>
+              {(currentUrlIndex ?? 0) + 1}
+              <button
+                {...nextProps}
+                className={cn(
+                  buttonVariants({
+                    variant: nextDisabled ? 'disabled' : 'default',
+                  })
+                )}
+                type="button"
+              >
+                <ArrowRight />
+              </button>
+            </div>
+            <div className="flex">
+              <button
+                className={cn(
+                  buttonVariants({
+                    variant: zoomOutDisabled ? 'disabled' : 'default',
+                  })
+                )}
+                {...zommOutProps}
+                type="button"
+              >
+                <Minus className="size-4" />
+              </button>
+              <div className="mx-px">
+                {isEditingScale ? (
+                  <>
+                    <ScaleInput className="w-10 rounded px-1 text-slate-500 outline" />{' '}
+                    <span>%</span>
+                  </>
+                ) : (
+                  <span {...scaleTextProps}>{`${scale * 100}%`}</span>
+                )}
+              </div>
+              <button
+                className={cn(
+                  buttonVariants({
+                    variant: zoomInDisabled ? 'disabled' : 'default',
+                  })
+                )}
+                {...zoomInProps}
+                type="button"
+              >
+                <Plus className="size-4" />
+              </button>
+            </div>
+            {/* TODO: downLoad the image */}
+            <button className={cn(buttonVariants())} type="button">
+              <Download className="size-4" />
+            </button>
+            <button
+              {...closeProps}
+              className={cn(buttonVariants())}
+              type="button"
+            >
+              <X className="size-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ScaleInput(props: React.ComponentProps<'input'>) {
+  const { props: scaleInputProps, ref } = useScaleInput();
+
+  return <input {...scaleInputProps} {...props} ref={ref} />;
+}

package/frontend/src/components/ui/media-toolbar-button.tsx

@@ -0,0 +1,225 @@
+import React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+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 '@/components/ui/alert-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+
+import {
+  ToolbarSplitButton,
+  ToolbarSplitButtonPrimary,
+  ToolbarSplitButtonSecondary,
+} from './toolbar';
+
+const MEDIA_CONFIG: Record<
+  string,
+  {
+    accept: string[];
+    icon: React.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] = React.useState(false);
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+
+  const { openFilePicker } = useFilePicker({
+    accept: currentConfig.accept,
+    multiple: true,
+    onFilesSelected: ({ plainFiles: updatedFiles }) => {
+      editor.getTransforms(PlaceholderPlugin).insert.media(updatedFiles);
+    },
+  });
+
+  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>
+
+          <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>
+        </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] = React.useState('');
+
+  const embedMedia = React.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/frontend/src/components/ui/media-toolbar.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+
+import type { WithRequiredKey } from 'platejs';
+
+import {
+  FloatingMedia as FloatingMediaPrimitive,
+  FloatingMediaStore,
+  useFloatingMediaValue,
+  useImagePreviewValue,
+} from '@platejs/media/react';
+import { cva } from 'class-variance-authority';
+import { Link, Trash2Icon } from 'lucide-react';
+import {
+  useEditorRef,
+  useEditorSelector,
+  useElement,
+  useFocusedLast,
+  useReadOnly,
+  useRemoveNodeButton,
+  useSelected,
+} from 'platejs/react';
+
+import { Button, buttonVariants } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from '@/components/ui/popover';
+import { Separator } from '@/components/ui/separator';
+
+import { CaptionButton } from './caption';
+
+const inputVariants = cva(
+  'flex h-[28px] w-full rounded-md border-none bg-transparent px-1.5 py-1 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-transparent md:text-sm'
+);
+
+export function MediaToolbar({
+  children,
+  plugin,
+}: {
+  children: React.ReactNode;
+  plugin: WithRequiredKey;
+}) {
+  const editor = useEditorRef();
+  const readOnly = useReadOnly();
+  const selected = useSelected();
+  const isFocusedLast = useFocusedLast();
+  const selectionCollapsed = useEditorSelector(
+    (editor) => !editor.api.isExpanded(),
+    []
+  );
+  const isImagePreviewOpen = useImagePreviewValue('isOpen', editor.id);
+  const open =
+    isFocusedLast &&
+    !readOnly &&
+    selected &&
+    selectionCollapsed &&
+    !isImagePreviewOpen;
+  const isEditing = useFloatingMediaValue('isEditing');
+
+  React.useEffect(() => {
+    if (!open && isEditing) {
+      FloatingMediaStore.set('isEditing', false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const element = useElement();
+  const { props: buttonProps } = useRemoveNodeButton({ element });
+
+  return (
+    <Popover open={open} modal={false}>
+      <PopoverAnchor>{children}</PopoverAnchor>
+
+      <PopoverContent
+        className="w-auto p-1"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        {isEditing ? (
+          <div className="flex w-[330px] flex-col">
+            <div className="flex items-center">
+              <div className="flex items-center pr-1 pl-2 text-muted-foreground">
+                <Link className="size-4" />
+              </div>
+
+              <FloatingMediaPrimitive.UrlInput
+                className={inputVariants()}
+                placeholder="Paste the embed link..."
+                options={{ plugin }}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="box-content flex items-center">
+            <FloatingMediaPrimitive.EditButton
+              className={buttonVariants({ size: 'sm', variant: 'ghost' })}
+            >
+              Edit link
+            </FloatingMediaPrimitive.EditButton>
+
+            <CaptionButton size="sm" variant="ghost">
+              Caption
+            </CaptionButton>
+
+            <Separator orientation="vertical" className="mx-1 h-6" />
+
+            <Button size="sm" variant="ghost" {...buttonProps}>
+              <Trash2Icon />
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/frontend/src/components/ui/media-upload-toast.tsx

@@ -0,0 +1,66 @@
+import React 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');
+
+  React.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/frontend/src/components/ui/media-video-node-static.tsx

@@ -0,0 +1,30 @@
+import type { TCaptionElement, TResizableProps, TVideoElement } from 'platejs';
+import type { SlateElementProps } from 'platejs/static';
+
+import { NodeApi } from 'platejs';
+import { SlateElement } from 'platejs/static';
+
+export function VideoElementStatic(
+  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="w-full max-w-full rounded-sm object-cover px-0"
+            src={url}
+            controls
+          />
+          {caption && <figcaption>{NodeApi.string(caption[0])}</figcaption>}
+        </figure>
+      </div>
+      {props.children}
+    </SlateElement>
+  );
+}