@fuma-content/studio 0.1.0

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

@@ -0,0 +1,202 @@
+"use client";
+
+import { PlaceholderPlugin } from "@platejs/media/react";
+
+import { FilmIcon, ImageIcon, LinkIcon } from "lucide-react";
+import { isUrl, KEYS } from "platejs";
+import { useEditorRef } from "platejs/react";
+import * as React from "react";
+import { toast } from "sonner";
+
+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 "../../ui/toolbar";
+
+export const MEDIA_CONFIG: Record<
+  string,
+  {
+    accept: string[];
+    icon: React.ReactNode;
+    title: string;
+    tooltip: string;
+  }
+> = {
+  [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
+}: React.ComponentProps<typeof DropdownMenu> & { nodeType: string }) {
+  const currentConfig = MEDIA_CONFIG[nodeType];
+
+  const editor = useEditorRef();
+  const [open, setOpen] = React.useState(false);
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const inputId = React.useId();
+
+  return (
+    <>
+      <ToolbarSplitButton
+        onKeyDown={(e) => {
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
+        pressed={open}
+      >
+        <label htmlFor={inputId}>
+          <ToolbarSplitButtonPrimary>{currentConfig.icon}</ToolbarSplitButtonPrimary>
+        </label>
+        <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+          <DropdownMenuTrigger asChild>
+            <ToolbarSplitButtonSecondary />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent onClick={(e) => e.stopPropagation()} align="start" alignOffset={-32}>
+            <DropdownMenuGroup>
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()} asChild>
+                <label htmlFor={inputId}>
+                  {currentConfig.icon}
+                  Upload from computer
+                </label>
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => setDialogOpen(true)}>
+                <LinkIcon />
+                Insert via URL
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ToolbarSplitButton>
+      <input
+        id={inputId}
+        type="file"
+        hidden
+        multiple
+        accept={currentConfig.accept.join(", ")}
+        onChange={(e) => {
+          const files = e.target.files;
+          if (!files) return;
+
+          editor.getTransforms(PlaceholderPlugin).insert.media(files);
+          setOpen(false);
+        }}
+      />
+
+      <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/src/components/editor/ui/media-toolbar.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import {
+  FloatingMedia as FloatingMediaPrimitive,
+  FloatingMediaStore,
+  useFloatingMediaValue,
+  useImagePreviewValue,
+} from "@platejs/media/react";
+import { cva } from "class-variance-authority";
+import { Link, Trash2Icon } from "lucide-react";
+import type { WithRequiredKey } from "platejs";
+import {
+  useEditorRef,
+  useEditorSelector,
+  useElement,
+  useFocusedLast,
+  useReadOnly,
+  useRemoveNodeButton,
+  useSelected,
+} from "platejs/react";
+import * as React from "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/src/components/editor/ui/media-upload-toast.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import * as 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/src/components/editor/ui/media-video-node-static.tsx

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

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

@@ -0,0 +1,121 @@
+"use client";
+
+import { SuggestionPlugin } from "@platejs/suggestion/react";
+import { CheckIcon, EyeIcon, PencilLineIcon, PenIcon } from "lucide-react";
+import { useEditorRef, usePlateState, usePluginOption } from "platejs/react";
+import * as React from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import { ToolbarButton } from "../../ui/toolbar";
+
+export function ModeToolbarButton(props: React.ComponentProps<typeof DropdownMenu>) {
+  const editor = useEditorRef();
+  const [readOnly, setReadOnly] = usePlateState("readOnly");
+  const [open, setOpen] = React.useState(false);
+
+  const isSuggesting = usePluginOption(SuggestionPlugin, "isSuggesting");
+
+  let value = "editing";
+
+  if (readOnly) value = "viewing";
+
+  if (isSuggesting) value = "suggestion";
+
+  const item: Record<string, { icon: React.ReactNode; label: string }> = {
+    editing: {
+      icon: <PenIcon />,
+      label: "Editing",
+    },
+    suggestion: {
+      icon: <PencilLineIcon />,
+      label: "Suggestion",
+    },
+    viewing: {
+      icon: <EyeIcon />,
+      label: "Viewing",
+    },
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Editing mode" isDropdown>
+          {item[value].icon}
+          <span className="hidden lg:inline">{item[value].label}</span>
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="min-w-[180px]" align="start">
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(newValue) => {
+            if (newValue === "viewing") {
+              setReadOnly(true);
+
+              return;
+            }
+            setReadOnly(false);
+
+            if (newValue === "suggestion") {
+              editor.setOption(SuggestionPlugin, "isSuggesting", true);
+
+              return;
+            }
+            editor.setOption(SuggestionPlugin, "isSuggesting", false);
+
+            if (newValue === "editing") {
+              editor.tf.focus();
+
+              return;
+            }
+          }}
+        >
+          <DropdownMenuRadioItem
+            className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
+            value="editing"
+          >
+            <Indicator />
+            {item.editing.icon}
+            {item.editing.label}
+          </DropdownMenuRadioItem>
+
+          <DropdownMenuRadioItem
+            className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
+            value="viewing"
+          >
+            <Indicator />
+            {item.viewing.icon}
+            {item.viewing.label}
+          </DropdownMenuRadioItem>
+
+          <DropdownMenuRadioItem
+            className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
+            value="suggestion"
+          >
+            <Indicator />
+            {item.suggestion.icon}
+            {item.suggestion.label}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function Indicator() {
+  return (
+    <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <CheckIcon />
+      </DropdownMenuItemIndicator>
+    </span>
+  );
+}

package/src/components/editor/ui/paragraph-node-static.tsx

@@ -0,0 +1,13 @@
+import type { SlateElementProps } from "platejs/static";
+
+import { SlateElement } from "platejs/static";
+
+import { cn } from "@/lib/utils";
+
+export function ParagraphElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement {...props} className={cn("m-0 px-0 py-1")}>
+      {props.children}
+    </SlateElement>
+  );
+}

package/src/components/editor/ui/paragraph-node.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { PlateElementProps } from "platejs/react";
+
+import { PlateElement } from "platejs/react";
+
+import { cn } from "@/lib/utils";
+
+export function ParagraphElement(props: PlateElementProps) {
+  return (
+    <PlateElement {...props} className={cn("m-0 px-0 py-1")}>
+      {props.children}
+    </PlateElement>
+  );
+}

package/src/components/editor/ui/resize-handle.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type * as React from "react";
+
+import type { VariantProps } from "class-variance-authority";
+
+import {
+  type ResizeHandle as ResizeHandlePrimitive,
+  Resizable as ResizablePrimitive,
+  useResizeHandle,
+  useResizeHandleState,
+} from "@platejs/resizable";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+export const mediaResizeHandleVariants = cva(
+  cn(
+    "top-0 flex w-6 select-none flex-col justify-center",
+    "after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100",
+  ),
+  {
+    variants: {
+      direction: {
+        left: "-left-3 -ml-3 pl-3",
+        right: "-right-3 -mr-3 items-end pr-3",
+      },
+    },
+  },
+);
+
+const resizeHandleVariants = cva("absolute z-40", {
+  variants: {
+    direction: {
+      bottom: "w-full cursor-row-resize",
+      left: "h-full cursor-col-resize",
+      right: "h-full cursor-col-resize",
+      top: "w-full cursor-row-resize",
+    },
+  },
+});
+
+export function ResizeHandle({
+  className,
+  options,
+  ...props
+}: React.ComponentProps<typeof ResizeHandlePrimitive> & VariantProps<typeof resizeHandleVariants>) {
+  const state = useResizeHandleState(options ?? {});
+  const resizeHandle = useResizeHandle(state);
+
+  if (state.readOnly) return null;
+
+  return (
+    <div
+      className={cn(resizeHandleVariants({ direction: options?.direction }), className)}
+      data-resizing={state.isResizing}
+      {...resizeHandle.props}
+      {...props}
+    />
+  );
+}
+
+const resizableVariants = cva("", {
+  variants: {
+    align: {
+      center: "mx-auto",
+      left: "mr-auto",
+      right: "ml-auto",
+    },
+  },
+});
+
+export function Resizable({
+  align,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive> & VariantProps<typeof resizableVariants>) {
+  return <ResizablePrimitive {...props} className={cn(resizableVariants({ align }), className)} />;
+}