@fuma-content/studio 0.1.0

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

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

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

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

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

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

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

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

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