@fuma-content/studio 1.0.0 → 1.0.2

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

@@ -1,242 +0,0 @@
-"use client";
-
-import {
-  CalendarIcon,
-  ChevronRightIcon,
-  Columns3Icon,
-  FileCodeIcon,
-  FilmIcon,
-  Heading1Icon,
-  Heading2Icon,
-  Heading3Icon,
-  ImageIcon,
-  Link2Icon,
-  ListIcon,
-  ListOrderedIcon,
-  MinusIcon,
-  PilcrowIcon,
-  PlusIcon,
-  QuoteIcon,
-  RadicalIcon,
-  SquareIcon,
-  TableIcon,
-  TableOfContentsIcon,
-} from "lucide-react";
-import { KEYS } from "platejs";
-import { type PlateEditor, useEditorRef } from "platejs/react";
-import * as React from "react";
-import { insertBlock, insertInlineElement } from "@/components/editor/transforms";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-import { ToolbarButton, ToolbarMenuGroup } from "../../ui/toolbar";
-
-type Group = {
-  group: string;
-  items: Item[];
-};
-
-type Item = {
-  icon: React.ReactNode;
-  value: string;
-  onSelect: (editor: PlateEditor, value: string) => void;
-  focusEditor?: boolean;
-  label?: string;
-};
-
-const groups: Group[] = [
-  {
-    group: "Basic blocks",
-    items: [
-      {
-        icon: <PilcrowIcon />,
-        label: "Paragraph",
-        value: KEYS.p,
-      },
-      {
-        icon: <Heading1Icon />,
-        label: "Heading 1",
-        value: "h1",
-      },
-      {
-        icon: <Heading2Icon />,
-        label: "Heading 2",
-        value: "h2",
-      },
-      {
-        icon: <Heading3Icon />,
-        label: "Heading 3",
-        value: "h3",
-      },
-      {
-        icon: <TableIcon />,
-        label: "Table",
-        value: KEYS.table,
-      },
-      {
-        icon: <FileCodeIcon />,
-        label: "Code",
-        value: KEYS.codeBlock,
-      },
-      {
-        icon: <QuoteIcon />,
-        label: "Quote",
-        value: KEYS.blockquote,
-      },
-      {
-        icon: <MinusIcon />,
-        label: "Divider",
-        value: KEYS.hr,
-      },
-    ].map((item) => ({
-      ...item,
-      onSelect: (editor, value) => {
-        insertBlock(editor, value);
-      },
-    })),
-  },
-  {
-    group: "Lists",
-    items: [
-      {
-        icon: <ListIcon />,
-        label: "Bulleted list",
-        value: KEYS.ul,
-      },
-      {
-        icon: <ListOrderedIcon />,
-        label: "Numbered list",
-        value: KEYS.ol,
-      },
-      {
-        icon: <SquareIcon />,
-        label: "To-do list",
-        value: KEYS.listTodo,
-      },
-      {
-        icon: <ChevronRightIcon />,
-        label: "Toggle list",
-        value: KEYS.toggle,
-      },
-    ].map((item) => ({
-      ...item,
-      onSelect: (editor, value) => {
-        insertBlock(editor, value);
-      },
-    })),
-  },
-  {
-    group: "Media",
-    items: [
-      {
-        icon: <ImageIcon />,
-        label: "Image",
-        value: KEYS.img,
-      },
-      {
-        icon: <FilmIcon />,
-        label: "Embed",
-        value: KEYS.mediaEmbed,
-      },
-    ].map((item) => ({
-      ...item,
-      onSelect: (editor, value) => {
-        insertBlock(editor, value);
-      },
-    })),
-  },
-  {
-    group: "Advanced blocks",
-    items: [
-      {
-        icon: <TableOfContentsIcon />,
-        label: "Table of contents",
-        value: KEYS.toc,
-      },
-      {
-        icon: <Columns3Icon />,
-        label: "3 columns",
-        value: "action_three_columns",
-      },
-      {
-        focusEditor: false,
-        icon: <RadicalIcon />,
-        label: "Equation",
-        value: KEYS.equation,
-      },
-    ].map((item) => ({
-      ...item,
-      onSelect: (editor, value) => {
-        insertBlock(editor, value);
-      },
-    })),
-  },
-  {
-    group: "Inline",
-    items: [
-      {
-        icon: <Link2Icon />,
-        label: "Link",
-        value: KEYS.link,
-      },
-      {
-        focusEditor: true,
-        icon: <CalendarIcon />,
-        label: "Date",
-        value: KEYS.date,
-      },
-      {
-        focusEditor: false,
-        icon: <RadicalIcon />,
-        label: "Inline Equation",
-        value: KEYS.inlineEquation,
-      },
-    ].map((item) => ({
-      ...item,
-      onSelect: (editor, value) => {
-        insertInlineElement(editor, value);
-      },
-    })),
-  },
-];
-
-export function InsertToolbarButton(props: React.ComponentProps<typeof DropdownMenu>) {
-  const editor = useEditorRef();
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Insert" isDropdown>
-          <PlusIcon />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent
-        className="flex min-w-[180px] max-h-[500px] flex-col overflow-y-auto"
-        align="start"
-      >
-        {groups.map(({ group, items: nestedItems }) => (
-          <ToolbarMenuGroup key={group} label={group}>
-            {nestedItems.map(({ icon, label, value, onSelect }) => (
-              <DropdownMenuItem
-                key={value}
-                onSelect={() => {
-                  onSelect(editor, value);
-                  editor.tf.focus();
-                }}
-              >
-                {icon}
-                {label}
-              </DropdownMenuItem>
-            ))}
-          </ToolbarMenuGroup>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

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

@@ -1,15 +0,0 @@
-import type { SlateLeafProps } from "platejs/static";
-
-import { SlateLeaf } from "platejs/static";
-
-export function KbdLeafStatic(props: SlateLeafProps) {
-  return (
-    <SlateLeaf
-      {...props}
-      as="kbd"
-      className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]"
-    >
-      {props.children}
-    </SlateLeaf>
-  );
-}

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

@@ -1,17 +0,0 @@
-"use client";
-
-import type { PlateLeafProps } from "platejs/react";
-
-import { PlateLeaf } from "platejs/react";
-
-export function KbdLeaf(props: PlateLeafProps) {
-  return (
-    <PlateLeaf
-      {...props}
-      as="kbd"
-      className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]"
-    >
-      {props.children}
-    </PlateLeaf>
-  );
-}

package/src/components/editor/ui/line-height-toolbar-button.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import { LineHeightPlugin } from "@platejs/basic-styles/react";
-
-import { CheckIcon, WrapText } from "lucide-react";
-import { useEditorRef, useSelectionFragmentProp } 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 LineHeightToolbarButton(props: React.ComponentProps<typeof DropdownMenu>) {
-  const editor = useEditorRef();
-  const { defaultNodeValue, validNodeValues: values = [] } =
-    editor.getInjectProps(LineHeightPlugin);
-
-  const value = useSelectionFragmentProp({
-    defaultValue: defaultNodeValue,
-    getProp: (node) => node.lineHeight,
-  });
-
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Line height" isDropdown>
-          <WrapText />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="min-w-0" align="start">
-        <DropdownMenuRadioGroup
-          value={value}
-          onValueChange={(newValue) => {
-            editor.getTransforms(LineHeightPlugin).lineHeight.setNodes(Number(newValue));
-            editor.tf.focus();
-          }}
-        >
-          {values.map((value) => (
-            <DropdownMenuRadioItem
-              key={value}
-              className="min-w-[180px] pl-2 *:first:[span]:hidden"
-              value={value}
-            >
-              <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
-                <DropdownMenuItemIndicator>
-                  <CheckIcon />
-                </DropdownMenuItemIndicator>
-              </span>
-              {value}
-            </DropdownMenuRadioItem>
-          ))}
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

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

@@ -1,21 +0,0 @@
-import type { TLinkElement } from "platejs";
-import type { SlateElementProps } from "platejs/static";
-
-import { getLinkAttributes } from "@platejs/link";
-import { SlateElement } from "platejs/static";
-
-export function LinkElementStatic(props: SlateElementProps<TLinkElement>) {
-  return (
-    <SlateElement
-      {...props}
-      as="a"
-      className="font-medium text-primary underline decoration-primary underline-offset-4"
-      attributes={{
-        ...props.attributes,
-        ...getLinkAttributes(props.editor, props.element),
-      }}
-    >
-      {props.children}
-    </SlateElement>
-  );
-}

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

@@ -1,37 +0,0 @@
-"use client";
-
-import type { TInlineSuggestionData, TLinkElement } from "platejs";
-import type { PlateElementProps } from "platejs/react";
-
-import { getLinkAttributes } from "@platejs/link";
-import { SuggestionPlugin } from "@platejs/suggestion/react";
-import { PlateElement } from "platejs/react";
-
-import { cn } from "@/lib/utils";
-
-export function LinkElement(props: PlateElementProps<TLinkElement>) {
-  const suggestionData = props.editor
-    .getApi(SuggestionPlugin)
-    .suggestion.suggestionData(props.element) as TInlineSuggestionData | undefined;
-
-  return (
-    <PlateElement
-      {...props}
-      as="a"
-      className={cn(
-        "font-medium text-primary underline decoration-primary underline-offset-4",
-        suggestionData?.type === "remove" && "bg-red-100 text-red-700",
-        suggestionData?.type === "insert" && "bg-emerald-100 text-emerald-700",
-      )}
-      attributes={{
-        ...props.attributes,
-        ...getLinkAttributes(props.editor, props.element),
-        onMouseOver: (e) => {
-          e.stopPropagation();
-        },
-      }}
-    >
-      {props.children}
-    </PlateElement>
-  );
-}

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

@@ -1,18 +0,0 @@
-"use client";
-
-import { useLinkToolbarButton, useLinkToolbarButtonState } from "@platejs/link/react";
-import { Link } from "lucide-react";
-import type * as React from "react";
-
-import { ToolbarButton } from "../../ui/toolbar";
-
-export function LinkToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
-  const state = useLinkToolbarButtonState();
-  const { props: buttonProps } = useLinkToolbarButton(state);
-
-  return (
-    <ToolbarButton {...props} {...buttonProps} data-plate-focus tooltip="Link">
-      <Link />
-    </ToolbarButton>
-  );
-}

package/src/components/editor/ui/link-toolbar.tsx

@@ -1,196 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import type { TLinkElement } from "platejs";
-
-import { type UseVirtualFloatingOptions, flip, offset } from "@platejs/floating";
-import { getLinkAttributes } from "@platejs/link";
-import {
-  type LinkFloatingToolbarState,
-  FloatingLinkUrlInput,
-  useFloatingLinkEdit,
-  useFloatingLinkEditState,
-  useFloatingLinkInsert,
-  useFloatingLinkInsertState,
-} from "@platejs/link/react";
-import { cva } from "class-variance-authority";
-import { ExternalLink, Link, Text, Unlink } from "lucide-react";
-import { KEYS } from "platejs";
-import {
-  useEditorRef,
-  useEditorSelection,
-  useFormInputProps,
-  usePluginOption,
-} from "platejs/react";
-
-import { buttonVariants } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-
-const popoverVariants = cva(
-  "z-50 w-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden",
-);
-
-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 LinkFloatingToolbar({ state }: { state?: LinkFloatingToolbarState }) {
-  const activeCommentId = usePluginOption({ key: KEYS.comment }, "activeId");
-  const activeSuggestionId = usePluginOption({ key: KEYS.suggestion }, "activeId");
-
-  const floatingOptions: UseVirtualFloatingOptions = React.useMemo(
-    () => ({
-      middleware: [
-        offset(8),
-        flip({
-          fallbackPlacements: ["bottom-end", "top-start", "top-end"],
-          padding: 12,
-        }),
-      ],
-      placement: activeSuggestionId || activeCommentId ? "top-start" : "bottom-start",
-    }),
-    [activeCommentId, activeSuggestionId],
-  );
-
-  const insertState = useFloatingLinkInsertState({
-    ...state,
-    floatingOptions: {
-      ...floatingOptions,
-      ...state?.floatingOptions,
-    },
-  });
-  const {
-    hidden,
-    props: insertProps,
-    ref: insertRef,
-    textInputProps,
-  } = useFloatingLinkInsert(insertState);
-
-  const editState = useFloatingLinkEditState({
-    ...state,
-    floatingOptions: {
-      ...floatingOptions,
-      ...state?.floatingOptions,
-    },
-  });
-  const {
-    editButtonProps,
-    props: editProps,
-    ref: editRef,
-    unlinkButtonProps,
-  } = useFloatingLinkEdit(editState);
-  const inputProps = useFormInputProps({
-    preventDefaultOnEnterKeydown: true,
-  });
-
-  if (hidden) return null;
-
-  const input = (
-    <div className="flex w-[330px] flex-col" {...inputProps}>
-      <div className="flex items-center">
-        <div className="flex items-center pr-1 pl-2 text-muted-foreground">
-          <Link className="size-4" />
-        </div>
-
-        <FloatingLinkUrlInput
-          className={inputVariants()}
-          placeholder="Paste link"
-          data-plate-focus
-        />
-      </div>
-      <Separator className="my-1" />
-      <div className="flex items-center">
-        <div className="flex items-center pr-1 pl-2 text-muted-foreground">
-          <Text className="size-4" />
-        </div>
-        <input
-          className={inputVariants()}
-          placeholder="Text to display"
-          data-plate-focus
-          {...textInputProps}
-        />
-      </div>
-    </div>
-  );
-
-  const editContent = editState.isEditing ? (
-    input
-  ) : (
-    <div className="box-content flex items-center">
-      <button
-        className={buttonVariants({ size: "sm", variant: "ghost" })}
-        type="button"
-        {...editButtonProps}
-      >
-        Edit link
-      </button>
-
-      <Separator orientation="vertical" />
-
-      <LinkOpenButton />
-
-      <Separator orientation="vertical" />
-
-      <button
-        className={buttonVariants({
-          size: "sm",
-          variant: "ghost",
-        })}
-        type="button"
-        {...unlinkButtonProps}
-      >
-        <Unlink width={18} />
-      </button>
-    </div>
-  );
-
-  return (
-    <>
-      <div ref={insertRef} className={popoverVariants()} {...insertProps}>
-        {input}
-      </div>
-
-      <div ref={editRef} className={popoverVariants()} {...editProps}>
-        {editContent}
-      </div>
-    </>
-  );
-}
-
-function LinkOpenButton() {
-  const editor = useEditorRef();
-  const selection = useEditorSelection();
-
-  const attributes = React.useMemo(
-    () => {
-      const entry = editor.api.node<TLinkElement>({
-        match: { type: editor.getType(KEYS.link) },
-      });
-      if (!entry) {
-        return {};
-      }
-      const [element] = entry;
-      return getLinkAttributes(editor, element);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [editor, selection],
-  );
-
-  return (
-    <a
-      {...attributes}
-      className={buttonVariants({
-        size: "sm",
-        variant: "ghost",
-      })}
-      onMouseOver={(e) => {
-        e.stopPropagation();
-      }}
-      aria-label="Open link in a new tab"
-      target="_blank"
-    >
-      <ExternalLink width={18} />
-    </a>
-  );
-}