@fuma-content/studio 0.1.0

package/src/components/editor/ui/font-size-toolbar-button.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { toUnitLess } from "@platejs/basic-styles";
+import { FontSizePlugin } from "@platejs/basic-styles/react";
+import { Minus, Plus } from "lucide-react";
+import type { TElement } from "platejs";
+import { KEYS } from "platejs";
+import { useEditorPlugin, useEditorSelector } from "platejs/react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+import { ToolbarButton } from "../../ui/toolbar";
+
+const DEFAULT_FONT_SIZE = "16";
+
+const FONT_SIZE_MAP = {
+  h1: "36",
+  h2: "24",
+  h3: "20",
+} as const;
+
+export function FontSizeToolbarButton() {
+  const [inputValue, setInputValue] = React.useState(DEFAULT_FONT_SIZE);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const { editor, tf } = useEditorPlugin(FontSizePlugin);
+
+  const cursorFontSize = useEditorSelector((editor) => {
+    const fontSize = editor.api.marks()?.[KEYS.fontSize];
+
+    if (fontSize) {
+      return toUnitLess(fontSize as string);
+    }
+
+    const [block] = editor.api.block<TElement>() || [];
+
+    if (!block?.type) return DEFAULT_FONT_SIZE;
+
+    return block.type in FONT_SIZE_MAP
+      ? FONT_SIZE_MAP[block.type as keyof typeof FONT_SIZE_MAP]
+      : DEFAULT_FONT_SIZE;
+  }, []);
+
+  const handleInputChange = () => {
+    const newSize = toUnitLess(inputValue);
+
+    if (Number.parseInt(newSize, 10) < 1 || Number.parseInt(newSize, 10) > 100) {
+      editor.tf.focus();
+
+      return;
+    }
+    if (newSize !== toUnitLess(cursorFontSize)) {
+      tf.fontSize.addMark(`${newSize}px`);
+    }
+
+    editor.tf.focus();
+  };
+
+  const handleFontSizeChange = (delta: number) => {
+    const newSize = Number(displayValue) + delta;
+    tf.fontSize.addMark(`${newSize}px`);
+    editor.tf.focus();
+  };
+
+  const displayValue = isFocused ? inputValue : cursorFontSize;
+
+  return (
+    <div className="flex h-7 items-center gap-1 rounded-md bg-muted/60 p-0">
+      <ToolbarButton onClick={() => handleFontSizeChange(-1)}>
+        <Minus />
+      </ToolbarButton>
+
+      <input
+        className={cn(
+          "h-full w-10 shrink-0 bg-transparent px-1 text-center text-sm hover:bg-muted",
+        )}
+        value={displayValue}
+        onBlur={() => {
+          setIsFocused(false);
+          handleInputChange();
+        }}
+        onChange={(e) => setInputValue(e.target.value)}
+        onFocus={() => {
+          setIsFocused(true);
+          setInputValue(toUnitLess(cursorFontSize));
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleInputChange();
+          }
+        }}
+        data-plate-focus="true"
+        type="text"
+      />
+
+      <ToolbarButton onClick={() => handleFontSizeChange(1)}>
+        <Plus />
+      </ToolbarButton>
+    </div>
+  );
+}

package/src/components/editor/ui/ghost-text.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { CopilotPlugin } from "@platejs/ai/react";
+import { useElement, usePluginOption } from "platejs/react";
+
+export function GhostText() {
+  const element = useElement();
+
+  const isSuggested = usePluginOption(CopilotPlugin, "isSuggested", element.id as string);
+
+  if (!isSuggested) return null;
+
+  return <GhostTextContent />;
+}
+
+function GhostTextContent() {
+  const suggestionText = usePluginOption(CopilotPlugin, "suggestionText");
+
+  return (
+    <span
+      className="pointer-events-none text-muted-foreground/70 max-sm:hidden"
+      contentEditable={false}
+    >
+      {suggestionText && suggestionText}
+    </span>
+  );
+}

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

@@ -0,0 +1,54 @@
+import type * as React from "react";
+
+import type { SlateElementProps } from "platejs/static";
+
+import { type VariantProps, cva } from "class-variance-authority";
+import { SlateElement } from "platejs/static";
+
+const headingVariants = cva("relative mb-1", {
+  variants: {
+    variant: {
+      h1: "mt-[1.6em] pb-1 font-bold font-heading text-4xl",
+      h2: "mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight",
+      h3: "mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight",
+      h4: "mt-[0.75em] font-heading font-semibold text-lg tracking-tight",
+      h5: "mt-[0.75em] font-semibold text-lg tracking-tight",
+      h6: "mt-[0.75em] font-semibold text-base tracking-tight",
+    },
+  },
+});
+
+export function HeadingElementStatic({
+  variant = "h1",
+  ...props
+}: SlateElementProps & VariantProps<typeof headingVariants>) {
+  return (
+    <SlateElement as={variant!} className={headingVariants({ variant })} {...props}>
+      {props.children}
+    </SlateElement>
+  );
+}
+
+export function H1ElementStatic(props: SlateElementProps) {
+  return <HeadingElementStatic variant="h1" {...props} />;
+}
+
+export function H2ElementStatic(props: React.ComponentProps<typeof HeadingElementStatic>) {
+  return <HeadingElementStatic variant="h2" {...props} />;
+}
+
+export function H3ElementStatic(props: React.ComponentProps<typeof HeadingElementStatic>) {
+  return <HeadingElementStatic variant="h3" {...props} />;
+}
+
+export function H4ElementStatic(props: React.ComponentProps<typeof HeadingElementStatic>) {
+  return <HeadingElementStatic variant="h4" {...props} />;
+}
+
+export function H5ElementStatic(props: React.ComponentProps<typeof HeadingElementStatic>) {
+  return <HeadingElementStatic variant="h5" {...props} />;
+}
+
+export function H6ElementStatic(props: React.ComponentProps<typeof HeadingElementStatic>) {
+  return <HeadingElementStatic variant="h6" {...props} />;
+}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import type { PlateElementProps } from "platejs/react";
+
+import { type VariantProps, cva } from "class-variance-authority";
+import { PlateElement } from "platejs/react";
+
+const headingVariants = cva("relative mb-1", {
+  variants: {
+    variant: {
+      h1: "mt-[1.6em] pb-1 font-bold font-heading text-4xl",
+      h2: "mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight",
+      h3: "mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight",
+      h4: "mt-[0.75em] font-heading font-semibold text-lg tracking-tight",
+      h5: "mt-[0.75em] font-semibold text-lg tracking-tight",
+      h6: "mt-[0.75em] font-semibold text-base tracking-tight",
+    },
+  },
+});
+
+export function HeadingElement({
+  variant = "h1",
+  ...props
+}: PlateElementProps & VariantProps<typeof headingVariants>) {
+  return (
+    <PlateElement as={variant!} className={headingVariants({ variant })} {...props}>
+      {props.children}
+    </PlateElement>
+  );
+}
+
+export function H1Element(props: PlateElementProps) {
+  return <HeadingElement variant="h1" {...props} />;
+}
+
+export function H2Element(props: PlateElementProps) {
+  return <HeadingElement variant="h2" {...props} />;
+}
+
+export function H3Element(props: PlateElementProps) {
+  return <HeadingElement variant="h3" {...props} />;
+}
+
+export function H4Element(props: PlateElementProps) {
+  return <HeadingElement variant="h4" {...props} />;
+}
+
+export function H5Element(props: PlateElementProps) {
+  return <HeadingElement variant="h5" {...props} />;
+}
+
+export function H6Element(props: PlateElementProps) {
+  return <HeadingElement variant="h6" {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import type { SlateLeafProps } from "platejs/static";
+
+import { SlateLeaf } from "platejs/static";
+
+export function HighlightLeafStatic(props: SlateLeafProps) {
+  return (
+    <SlateLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
+      {props.children}
+    </SlateLeaf>
+  );
+}

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

@@ -0,0 +1,13 @@
+"use client";
+
+import type { PlateLeafProps } from "platejs/react";
+
+import { PlateLeaf } from "platejs/react";
+
+export function HighlightLeaf(props: PlateLeafProps) {
+  return (
+    <PlateLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
+      {props.children}
+    </PlateLeaf>
+  );
+}

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { Redo2Icon, Undo2Icon } from "lucide-react";
+import { useEditorRef, useEditorSelector } from "platejs/react";
+import type * as React from "react";
+
+import { ToolbarButton } from "../../ui/toolbar";
+
+export function RedoToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
+  const editor = useEditorRef();
+  const disabled = useEditorSelector((editor) => editor.history.redos.length === 0, []);
+
+  return (
+    <ToolbarButton
+      {...props}
+      disabled={disabled}
+      onClick={() => editor.redo()}
+      onMouseDown={(e) => e.preventDefault()}
+      tooltip="Redo"
+    >
+      <Redo2Icon />
+    </ToolbarButton>
+  );
+}
+
+export function UndoToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
+  const editor = useEditorRef();
+  const disabled = useEditorSelector((editor) => editor.history.undos.length === 0, []);
+
+  return (
+    <ToolbarButton
+      {...props}
+      disabled={disabled}
+      onClick={() => editor.undo()}
+      onMouseDown={(e) => e.preventDefault()}
+      tooltip="Undo"
+    >
+      <Undo2Icon />
+    </ToolbarButton>
+  );
+}

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

@@ -0,0 +1,16 @@
+import type { SlateElementProps } from "platejs/static";
+
+import { SlateElement } from "platejs/static";
+
+import { cn } from "@/lib/utils";
+
+export function HrElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement {...props}>
+      <div className="cursor-text py-6" contentEditable={false}>
+        <hr className={cn("h-0.5 rounded-sm border-none bg-muted bg-clip-content")} />
+      </div>
+      {props.children}
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,28 @@
+"use client";
+
+import type { PlateElementProps } from "platejs/react";
+
+import { PlateElement, useFocused, useReadOnly, useSelected } from "platejs/react";
+
+import { cn } from "@/lib/utils";
+
+export function HrElement(props: PlateElementProps) {
+  const readOnly = useReadOnly();
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement {...props}>
+      <div className="py-6" contentEditable={false}>
+        <hr
+          className={cn(
+            "h-0.5 rounded-sm border-none bg-muted bg-clip-content",
+            selected && focused && "ring-2 ring-ring ring-offset-2",
+            !readOnly && "cursor-pointer",
+          )}
+        />
+      </div>
+      {props.children}
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { useIndentButton, useOutdentButton } from "@platejs/indent/react";
+import { IndentIcon, OutdentIcon } from "lucide-react";
+import type * as React from "react";
+
+import { ToolbarButton } from "../../ui/toolbar";
+
+export function IndentToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
+  const { props: buttonProps } = useIndentButton();
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} tooltip="Indent">
+      <IndentIcon />
+    </ToolbarButton>
+  );
+}
+
+export function OutdentToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
+  const { props: buttonProps } = useOutdentButton();
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} tooltip="Outdent">
+      <OutdentIcon />
+    </ToolbarButton>
+  );
+}

package/src/components/editor/ui/inline-combobox.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { Combobox } from "@base-ui/react";
+import { useControlled } from "@base-ui/utils/useControlled";
+import { useStableCallback } from "@base-ui/utils/useStableCallback";
+import { useComboboxInput, useHTMLInputCursorState } from "@platejs/combobox/react";
+import { cva } from "class-variance-authority";
+import type { Point, TElement } from "platejs";
+import { useComposedRef, useEditorRef } from "platejs/react";
+import * as React from "react";
+import { useIsCreator } from "@/hooks/editor/use-is-creator";
+import { cn } from "@/lib/utils";
+
+interface InlineComboboxContextValue {
+  showTrigger: boolean;
+  trigger: string;
+  removeInput: (focus: boolean) => void;
+
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  inputOnBlur: React.FocusEventHandler<HTMLElement>;
+  inputOnKeyDown: React.KeyboardEventHandler<HTMLElement>;
+}
+
+const InlineComboboxContext = React.createContext<InlineComboboxContextValue>(
+  null as unknown as InlineComboboxContextValue,
+);
+
+interface InlineComboboxProps extends React.ComponentProps<typeof Combobox.Root> {
+  element: TElement;
+  trigger: string;
+  hideWhenNoValue?: boolean;
+  showTrigger?: boolean;
+}
+
+function InlineCombobox({
+  children,
+  element,
+  hideWhenNoValue = false,
+  showTrigger = true,
+  trigger,
+  inputValue: inputValueProp,
+  onInputValueChange: onInputValueChangeProp,
+  defaultInputValue = "",
+  ...rest
+}: InlineComboboxProps) {
+  const editor = useEditorRef();
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const cursorState = useHTMLInputCursorState(inputRef);
+  const isCreator = useIsCreator(element);
+  const [inputValue, setInputValueUnwrapped] = useControlled({
+    name: "InlineCombobox",
+    controlled: inputValueProp,
+    default: defaultInputValue,
+  });
+
+  /**
+   * Track the point just before the input element so we know where to
+   * insertText if the combobox closes due to a selection change.
+   */
+  const insertPoint = React.useRef<Point | null>(null);
+
+  React.useEffect(() => {
+    const path = editor.api.findPath(element);
+    if (!path) return;
+
+    const point = editor.api.before(path);
+    if (!point) return;
+
+    const pointRef = editor.api.pointRef(point);
+    insertPoint.current = pointRef.current;
+
+    return () => {
+      pointRef.unref();
+    };
+  }, [editor, element]);
+
+  const { props: inputProps, removeInput } = useComboboxInput({
+    cancelInputOnBlur: true,
+    cursorState,
+    autoFocus: isCreator,
+    ref: inputRef,
+    onCancelInput: (cause) => {
+      if (cause !== "backspace") {
+        editor.tf.insertText(trigger + inputValue, {
+          at: insertPoint?.current ?? undefined,
+        });
+      }
+      if (cause === "arrowLeft" || cause === "arrowRight") {
+        editor.tf.move({
+          distance: 1,
+          reverse: cause === "arrowLeft",
+        });
+      }
+    },
+  });
+  const onKeyDown = useStableCallback(inputProps.onKeyDown);
+  const onBlur = useStableCallback(inputProps.onBlur);
+  const contextValue: InlineComboboxContextValue = React.useMemo(
+    () => ({
+      showTrigger,
+      trigger,
+      inputProps,
+      inputRef,
+      removeInput,
+      inputOnBlur: onBlur,
+      inputOnKeyDown: onKeyDown,
+    }),
+    [trigger, showTrigger, onBlur, onKeyDown],
+  );
+
+  return (
+    <span contentEditable={false}>
+      <InlineComboboxContext.Provider value={contextValue}>
+        <Combobox.Root
+          open
+          inputValue={inputValue}
+          onInputValueChange={(v, e) => {
+            setInputValueUnwrapped(v);
+            return onInputValueChangeProp?.(v, e);
+          }}
+          {...rest}
+        >
+          {children}
+        </Combobox.Root>
+      </InlineComboboxContext.Provider>
+    </span>
+  );
+}
+
+function InlineComboboxInput({ ref, className, ...props }: React.ComponentProps<"input">) {
+  const { showTrigger, trigger, inputOnBlur, inputOnKeyDown, inputRef } =
+    React.useContext(InlineComboboxContext);
+
+  return (
+    <>
+      {showTrigger && trigger}
+      <Combobox.Input
+        ref={useComposedRef(inputRef, ref)}
+        className={cn("bg-transparent outline-none", className)}
+        onBlur={inputOnBlur}
+        onKeyDown={inputOnKeyDown}
+        {...props}
+      />
+    </>
+  );
+}
+
+function InlineComboboxContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <Combobox.Portal>
+      <Combobox.Positioner className="z-50">
+        <Combobox.Popup
+          className={cn(
+            "max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-lg border",
+            className,
+          )}
+          {...props}
+        />
+      </Combobox.Positioner>
+    </Combobox.Portal>
+  );
+}
+
+const comboboxItemVariants = cva(
+  "relative mx-1 flex h-[28px] select-none items-center rounded-sm px-2 text-foreground text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      interactive: {
+        false: "",
+        true: "cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      interactive: true,
+    },
+  },
+);
+
+function InlineComboboxItem({
+  className,
+  focusEditor = true,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Combobox.Item> & {
+  focusEditor?: boolean;
+}) {
+  const { removeInput } = React.useContext(InlineComboboxContext);
+
+  return (
+    <Combobox.Item
+      className={cn(comboboxItemVariants(), className)}
+      onClick={(event) => {
+        // Focus editor if needed
+        removeInput(focusEditor);
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+}
+
+function InlineComboboxEmpty({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Combobox.Empty>) {
+  return (
+    <Combobox.Empty
+      className={cn("p-4 text-muted-foreground text-sm empty:hidden", className)}
+      {...props}
+    >
+      {children}
+    </Combobox.Empty>
+  );
+}
+
+const InlineComboboxList = Combobox.List;
+const InlineComboboxCollection = Combobox.Collection;
+
+function InlineComboboxGroup({ className, ...props }: React.ComponentProps<typeof Combobox.Group>) {
+  return (
+    <Combobox.Group
+      {...props}
+      className={cn("hidden not-last:border-b py-1.5 [&:has([role=option])]:block", className)}
+    />
+  );
+}
+
+function InlineComboboxGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Combobox.GroupLabel>) {
+  return (
+    <Combobox.GroupLabel
+      {...props}
+      className={cn("mt-1.5 mb-2 px-3 font-medium text-muted-foreground text-xs", className)}
+    />
+  );
+}
+
+export {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxGroup,
+  InlineComboboxGroupLabel,
+  InlineComboboxInput,
+  InlineComboboxItem,
+  InlineComboboxList,
+  InlineComboboxCollection,
+};