doclific 0.2.0 → 0.2.2

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

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

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

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

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

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