@fuma-content/studio 0.1.0

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

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

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

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

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

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

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