@fuma-content/studio 1.0.0 → 1.0.2

package/src/components/editor/ui/list-toolbar-button.tsx

@@ -1,195 +0,0 @@
-"use client";
-
-import { ListStyleType, someList, toggleList } from "@platejs/list";
-import { useIndentTodoToolBarButton, useIndentTodoToolBarButtonState } from "@platejs/list/react";
-import { List, ListOrdered, ListTodoIcon } from "lucide-react";
-import { useEditorRef, useEditorSelector } from "platejs/react";
-import * as React from "react";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-import {
-  ToolbarButton,
-  ToolbarSplitButton,
-  ToolbarSplitButtonPrimary,
-  ToolbarSplitButtonSecondary,
-} from "../../ui/toolbar";
-
-export function BulletedListToolbarButton() {
-  const editor = useEditorRef();
-  const [open, setOpen] = React.useState(false);
-
-  const pressed = useEditorSelector(
-    (editor) => someList(editor, [ListStyleType.Disc, ListStyleType.Circle, ListStyleType.Square]),
-    [],
-  );
-
-  return (
-    <ToolbarSplitButton pressed={open}>
-      <ToolbarSplitButtonPrimary
-        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
-        onClick={() => {
-          toggleList(editor, {
-            listStyleType: ListStyleType.Disc,
-          });
-        }}
-        data-state={pressed ? "on" : "off"}
-      >
-        <List className="size-4" />
-      </ToolbarSplitButtonPrimary>
-
-      <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
-        <DropdownMenuTrigger asChild>
-          <ToolbarSplitButtonSecondary />
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent align="start" alignOffset={-32}>
-          <DropdownMenuGroup>
-            <DropdownMenuItem
-              onClick={() =>
-                toggleList(editor, {
-                  listStyleType: ListStyleType.Disc,
-                })
-              }
-            >
-              <div className="flex items-center gap-2">
-                <div className="size-2 rounded-full border border-current bg-current" />
-                Default
-              </div>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() =>
-                toggleList(editor, {
-                  listStyleType: ListStyleType.Circle,
-                })
-              }
-            >
-              <div className="flex items-center gap-2">
-                <div className="size-2 rounded-full border border-current" />
-                Circle
-              </div>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() =>
-                toggleList(editor, {
-                  listStyleType: ListStyleType.Square,
-                })
-              }
-            >
-              <div className="flex items-center gap-2">
-                <div className="size-2 border border-current bg-current" />
-                Square
-              </div>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </ToolbarSplitButton>
-  );
-}
-
-export function NumberedListToolbarButton() {
-  const editor = useEditorRef();
-  const [open, setOpen] = React.useState(false);
-
-  const pressed = useEditorSelector(
-    (editor) =>
-      someList(editor, [
-        ListStyleType.Decimal,
-        ListStyleType.LowerAlpha,
-        ListStyleType.UpperAlpha,
-        ListStyleType.LowerRoman,
-        ListStyleType.UpperRoman,
-      ]),
-    [],
-  );
-
-  return (
-    <ToolbarSplitButton pressed={open}>
-      <ToolbarSplitButtonPrimary
-        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
-        onClick={() =>
-          toggleList(editor, {
-            listStyleType: ListStyleType.Decimal,
-          })
-        }
-        data-state={pressed ? "on" : "off"}
-      >
-        <ListOrdered className="size-4" />
-      </ToolbarSplitButtonPrimary>
-
-      <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
-        <DropdownMenuTrigger asChild>
-          <ToolbarSplitButtonSecondary />
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent align="start" alignOffset={-32}>
-          <DropdownMenuGroup>
-            <DropdownMenuItem
-              onSelect={() =>
-                toggleList(editor, {
-                  listStyleType: ListStyleType.Decimal,
-                })
-              }
-            >
-              Decimal (1, 2, 3)
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={() =>
-                toggleList(editor, {
-                  listStyleType: ListStyleType.LowerAlpha,
-                })
-              }
-            >
-              Lower Alpha (a, b, c)
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={() =>
-                toggleList(editor, {
-                  listStyleType: ListStyleType.UpperAlpha,
-                })
-              }
-            >
-              Upper Alpha (A, B, C)
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={() =>
-                toggleList(editor, {
-                  listStyleType: ListStyleType.LowerRoman,
-                })
-              }
-            >
-              Lower Roman (i, ii, iii)
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={() =>
-                toggleList(editor, {
-                  listStyleType: ListStyleType.UpperRoman,
-                })
-              }
-            >
-              Upper Roman (I, II, III)
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </ToolbarSplitButton>
-  );
-}
-
-export function TodoListToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
-  const state = useIndentTodoToolBarButtonState({ nodeType: "todo" });
-  const { props: buttonProps } = useIndentTodoToolBarButton(state);
-
-  return (
-    <ToolbarButton {...props} {...buttonProps} tooltip="Todo">
-      <ListTodoIcon />
-    </ToolbarButton>
-  );
-}

package/src/components/editor/ui/mark-toolbar-button.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import { useMarkToolbarButton, useMarkToolbarButtonState } from "platejs/react";
-import type * as React from "react";
-
-import { ToolbarButton } from "../../ui/toolbar";
-
-export function MarkToolbarButton({
-  clear,
-  nodeType,
-  ...props
-}: React.ComponentProps<typeof ToolbarButton> & {
-  nodeType: string;
-  clear?: string[] | string;
-}) {
-  const state = useMarkToolbarButtonState({ clear, nodeType });
-  const { props: buttonProps } = useMarkToolbarButton(state);
-
-  return <ToolbarButton {...props} {...buttonProps} />;
-}

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

@@ -1,33 +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/src/components/editor/ui/media-image-node.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { useDraggable } from "@platejs/dnd";
-import { Image, ImagePlugin, useMediaState } from "@platejs/media/react";
-import { ResizableProvider, useResizableValue } from "@platejs/resizable";
-import type { TImageElement } from "platejs";
-import type { PlateElementProps } from "platejs/react";
-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/src/components/editor/ui/media-placeholder-node.tsx

@@ -1,235 +0,0 @@
-"use client";
-
-import { PlaceholderPlugin, PlaceholderProvider, updateUploadHistory } from "@platejs/media/react";
-import { AudioLines, FileUp, Film, ImageIcon, Loader2Icon } from "lucide-react";
-import type { TPlaceholderElement } from "platejs";
-import { KEYS } from "platejs";
-import type { PlateElementProps } from "platejs/react";
-import { PlateElement, useEditorPlugin, withHOC } from "platejs/react";
-import * as React from "react";
-import { useUploadFile } from "@/hooks/use-upload-file";
-import { cn } from "@/lib/utils";
-
-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 !== undefined;
-
-    const currentContent = CONTENT[element.mediaType];
-
-    const isImage = element.mediaType === KEYS.img;
-
-    const imageRef = React.useRef<HTMLImageElement>(null);
-    const inputId = React.useId();
-
-    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}>
-        <input
-          id={inputId}
-          type="file"
-          hidden
-          onChange={(e) => {
-            const updatedFiles = e.target.files;
-            if (!updatedFiles) return;
-            const [firstFile, ...restFiles] = Array.from(updatedFiles);
-
-            replaceCurrentPlaceholder(firstFile);
-            if (restFiles.length > 0) {
-              editor
-                .getTransforms(PlaceholderPlugin)
-                .insert.media(restFiles as unknown as FileList);
-            }
-          }}
-          accept={currentContent.accept.join(", ")}
-          multiple
-          disabled={loading}
-        />
-        {(!loading || !isImage) && (
-          <label
-            htmlFor={inputId}
-            className="flex cursor-pointer select-none items-center rounded-sm bg-muted p-3 pr-9 hover:bg-primary/10"
-            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>
-          </label>
-        )}
-
-        {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")
-  }`;
-}

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

@@ -1,145 +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 inset-0 z-50 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} />;
-}