@fuma-content/studio 1.0.0 → 1.0.2

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

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

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

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

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

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

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

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

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

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