@fuma-content/studio 0.1.0

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

@@ -0,0 +1,218 @@
+"use client";
+
+import * as React from "react";
+import TextareaAutosize, { type TextareaAutosizeProps } from "react-textarea-autosize";
+
+import type { TEquationElement } from "platejs";
+import type { PlateElementProps } from "platejs/react";
+
+import { useEquationElement, useEquationInput } from "@platejs/math/react";
+import { BlockSelectionPlugin } from "@platejs/selection/react";
+import { CornerDownLeftIcon, RadicalIcon } from "lucide-react";
+import {
+  createPrimitiveComponent,
+  PlateElement,
+  useEditorRef,
+  useEditorSelector,
+  useElement,
+  useReadOnly,
+  useSelected,
+} from "platejs/react";
+
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export function EquationElement(props: PlateElementProps<TEquationElement>) {
+  const selected = useSelected();
+  const [open, setOpen] = React.useState(selected);
+  const katexRef = React.useRef<HTMLDivElement | null>(null);
+
+  useEquationElement({
+    element: props.element,
+    katexRef,
+    options: {
+      displayMode: true,
+      errorColor: "#cc0000",
+      fleqn: false,
+      leqno: false,
+      macros: { "\\f": "#1f(#2)" },
+      output: "htmlAndMathml",
+      strict: "warn",
+      throwOnError: false,
+      trust: false,
+    },
+  });
+
+  return (
+    <PlateElement className="my-1" {...props}>
+      <Popover open={open} onOpenChange={setOpen} modal={false}>
+        <PopoverTrigger asChild>
+          <div
+            className={cn(
+              "group flex cursor-pointer select-none items-center justify-center rounded-sm hover:bg-primary/10 data-[selected=true]:bg-primary/10",
+              props.element.texExpression.length === 0 ? "bg-muted p-3 pr-9" : "px-2 py-1",
+            )}
+            data-selected={selected}
+            contentEditable={false}
+            role="button"
+          >
+            {props.element.texExpression.length > 0 ? (
+              <span ref={katexRef} />
+            ) : (
+              <div className="flex h-7 w-full items-center gap-2 whitespace-nowrap text-muted-foreground text-sm">
+                <RadicalIcon className="size-6 text-muted-foreground/80" />
+                <div>Add a Tex equation</div>
+              </div>
+            )}
+          </div>
+        </PopoverTrigger>
+
+        <EquationPopoverContent
+          open={open}
+          placeholder={
+            "f(x) = \\begin{cases}\n  x^2, &\\quad x > 0 \\\\\n  0, &\\quad x = 0 \\\\\n  -x^2, &\\quad x < 0\n\\end{cases}"
+          }
+          isInline={false}
+          setOpen={setOpen}
+        />
+      </Popover>
+
+      {props.children}
+    </PlateElement>
+  );
+}
+
+export function InlineEquationElement(props: PlateElementProps<TEquationElement>) {
+  const element = props.element;
+  const katexRef = React.useRef<HTMLDivElement | null>(null);
+  const selected = useSelected();
+  const isCollapsed = useEditorSelector((editor) => editor.api.isCollapsed(), []);
+  const [open, setOpen] = React.useState(selected && isCollapsed);
+
+  React.useEffect(() => {
+    if (selected && isCollapsed) {
+      setOpen(true);
+    }
+  }, [selected, isCollapsed]);
+
+  useEquationElement({
+    element,
+    katexRef,
+    options: {
+      displayMode: true,
+      errorColor: "#cc0000",
+      fleqn: false,
+      leqno: false,
+      macros: { "\\f": "#1f(#2)" },
+      output: "htmlAndMathml",
+      strict: "warn",
+      throwOnError: false,
+      trust: false,
+    },
+  });
+
+  return (
+    <PlateElement
+      {...props}
+      className={cn("mx-1 inline-block select-none rounded-sm [&_.katex-display]:my-0!")}
+    >
+      <Popover open={open} onOpenChange={setOpen} modal={false}>
+        <PopoverTrigger asChild>
+          <div
+            className={cn(
+              'after:-top-0.5 after:-left-1 after:absolute after:inset-0 after:z-1 after:h-[calc(100%)+4px] after:w-[calc(100%+8px)] after:rounded-sm after:content-[""]',
+              "h-6",
+              ((element.texExpression.length > 0 && open) || selected) && "after:bg-brand/15",
+              element.texExpression.length === 0 && "text-muted-foreground after:bg-neutral-500/10",
+            )}
+            contentEditable={false}
+          >
+            <span
+              ref={katexRef}
+              className={cn(
+                element.texExpression.length === 0 && "hidden",
+                "font-mono leading-none",
+              )}
+            />
+            {element.texExpression.length === 0 && (
+              <span>
+                <RadicalIcon className="mr-1 inline-block h-[19px] w-4 py-[1.5px] align-text-bottom" />
+                New equation
+              </span>
+            )}
+          </div>
+        </PopoverTrigger>
+
+        <EquationPopoverContent
+          className="my-auto"
+          open={open}
+          placeholder="E = mc^2"
+          setOpen={setOpen}
+          isInline
+        />
+      </Popover>
+
+      {props.children}
+    </PlateElement>
+  );
+}
+
+const EquationInput = createPrimitiveComponent(TextareaAutosize)({
+  propsHook: useEquationInput,
+});
+
+const EquationPopoverContent = ({
+  className,
+  isInline,
+  open,
+  setOpen,
+  ...props
+}: {
+  isInline: boolean;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+} & TextareaAutosizeProps) => {
+  const editor = useEditorRef();
+  const readOnly = useReadOnly();
+  const element = useElement<TEquationElement>();
+
+  React.useEffect(() => {
+    if (isInline && open) {
+      setOpen(true);
+    }
+  }, [isInline, open, setOpen]);
+
+  if (readOnly) return null;
+
+  const onClose = () => {
+    setOpen(false);
+
+    if (isInline) {
+      editor.tf.select(element, { focus: true, next: true });
+    } else {
+      editor.getApi(BlockSelectionPlugin).blockSelection.set(element.id as string);
+    }
+  };
+
+  return (
+    <PopoverContent
+      className="flex gap-2"
+      onEscapeKeyDown={(e) => {
+        e.preventDefault();
+      }}
+      contentEditable={false}
+    >
+      <EquationInput
+        className={cn("max-h-[50vh] grow resize-none p-2 text-sm", className)}
+        state={{ isInline, open, onClose }}
+        autoFocus
+        {...props}
+      />
+
+      <Button variant="secondary" className="px-3" onClick={onClose}>
+        Done <CornerDownLeftIcon className="size-3.5" />
+      </Button>
+    </PopoverContent>
+  );
+};

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

@@ -0,0 +1,24 @@
+"use client";
+
+import { insertInlineEquation } from "@platejs/math";
+import { RadicalIcon } from "lucide-react";
+import { useEditorRef } from "platejs/react";
+import type * as React from "react";
+
+import { ToolbarButton } from "../../ui/toolbar";
+
+export function InlineEquationToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
+  const editor = useEditorRef();
+
+  return (
+    <ToolbarButton
+      {...props}
+      onClick={() => {
+        insertInlineEquation(editor);
+      }}
+      tooltip="Mark as equation"
+    >
+      <RadicalIcon />
+    </ToolbarButton>
+  );
+}

package/src/components/editor/ui/fixed-toolbar-buttons.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import {
+  BaselineIcon,
+  BoldIcon,
+  Code2Icon,
+  HighlighterIcon,
+  ItalicIcon,
+  PaintBucketIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+  WandSparklesIcon,
+} from "lucide-react";
+import { KEYS } from "platejs";
+import { useEditorReadOnly } from "platejs/react";
+import { ToolbarGroup } from "../../ui/toolbar";
+import { AIToolbarButton } from "./ai-toolbar-button";
+import { AlignToolbarButton } from "./align-toolbar-button";
+import { CommentToolbarButton } from "./comment-toolbar-button";
+import { EmojiToolbarButton } from "./emoji-toolbar-button";
+import { FontColorToolbarButton } from "./font-color-toolbar-button";
+import { FontSizeToolbarButton } from "./font-size-toolbar-button";
+import { RedoToolbarButton, UndoToolbarButton } from "./history-toolbar-button";
+import { IndentToolbarButton, OutdentToolbarButton } from "./indent-toolbar-button";
+import { InsertToolbarButton } from "./insert-toolbar-button";
+import { LineHeightToolbarButton } from "./line-height-toolbar-button";
+import { LinkToolbarButton } from "./link-toolbar-button";
+import {
+  BulletedListToolbarButton,
+  NumberedListToolbarButton,
+  TodoListToolbarButton,
+} from "./list-toolbar-button";
+import { MarkToolbarButton } from "./mark-toolbar-button";
+import { MEDIA_CONFIG, MediaToolbarButton } from "./media-toolbar-button";
+import { ModeToolbarButton } from "./mode-toolbar-button";
+import { TableToolbarButton } from "./table-toolbar-button";
+import { TurnIntoToolbarButton } from "./turn-into-toolbar-button";
+
+export function FixedToolbarButtons() {
+  const readOnly = useEditorReadOnly();
+
+  return (
+    <div className="flex w-full">
+      {!readOnly && (
+        <>
+          <ToolbarGroup>
+            <UndoToolbarButton />
+            <RedoToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <AIToolbarButton tooltip="AI commands">
+              <WandSparklesIcon />
+            </AIToolbarButton>
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <InsertToolbarButton />
+            <TurnIntoToolbarButton />
+            <FontSizeToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
+              <BoldIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
+              <ItalicIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.underline} tooltip="Underline (⌘+U)">
+              <UnderlineIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.strikethrough} tooltip="Strikethrough (⌘+⇧+M)">
+              <StrikethroughIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
+              <Code2Icon />
+            </MarkToolbarButton>
+
+            <FontColorToolbarButton nodeType={KEYS.color} tooltip="Text color">
+              <BaselineIcon />
+            </FontColorToolbarButton>
+
+            <FontColorToolbarButton nodeType={KEYS.backgroundColor} tooltip="Background color">
+              <PaintBucketIcon />
+            </FontColorToolbarButton>
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <AlignToolbarButton />
+
+            <NumberedListToolbarButton />
+            <BulletedListToolbarButton />
+            <TodoListToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <LinkToolbarButton />
+            <TableToolbarButton />
+            <EmojiToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            {Object.keys(MEDIA_CONFIG).map((nodeType) => (
+              <MediaToolbarButton key={nodeType} nodeType={nodeType} />
+            ))}
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <LineHeightToolbarButton />
+            <OutdentToolbarButton />
+            <IndentToolbarButton />
+          </ToolbarGroup>
+        </>
+      )}
+
+      <div className="grow" />
+
+      <ToolbarGroup>
+        <MarkToolbarButton nodeType={KEYS.highlight} tooltip="Highlight">
+          <HighlighterIcon />
+        </MarkToolbarButton>
+        <CommentToolbarButton />
+      </ToolbarGroup>
+
+      <ToolbarGroup>
+        <ModeToolbarButton />
+      </ToolbarGroup>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+import { Toolbar } from "../../ui/toolbar";
+
+export function FixedToolbar(props: React.ComponentProps<typeof Toolbar>) {
+  return (
+    <Toolbar
+      {...props}
+      className={cn(
+        "sticky top-(--toolbar-offset,0) z-20 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 p-1 backdrop-blur-sm supports-backdrop-blur:bg-background/60 [scrollbar-width:none]",
+        props.className,
+      )}
+    />
+  );
+}

package/src/components/editor/ui/floating-toolbar-buttons.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  BoldIcon,
+  Code2Icon,
+  ItalicIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+  WandSparklesIcon,
+} from "lucide-react";
+import { KEYS } from "platejs";
+import { useEditorReadOnly } from "platejs/react";
+import { ToolbarGroup } from "../../ui/toolbar";
+import { AIToolbarButton } from "./ai-toolbar-button";
+import { CommentToolbarButton } from "./comment-toolbar-button";
+import { InlineEquationToolbarButton } from "./equation-toolbar-button";
+import { LinkToolbarButton } from "./link-toolbar-button";
+import { MarkToolbarButton } from "./mark-toolbar-button";
+import { SuggestionToolbarButton } from "./suggestion-toolbar-button";
+import { TurnIntoToolbarButton } from "./turn-into-toolbar-button";
+
+export function FloatingToolbarButtons() {
+  const readOnly = useEditorReadOnly();
+
+  return (
+    <>
+      {!readOnly && (
+        <>
+          <ToolbarGroup>
+            <AIToolbarButton tooltip="AI commands">
+              <WandSparklesIcon />
+              Ask AI
+            </AIToolbarButton>
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <TurnIntoToolbarButton />
+
+            <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
+              <BoldIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
+              <ItalicIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.underline} tooltip="Underline (⌘+U)">
+              <UnderlineIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.strikethrough} tooltip="Strikethrough (⌘+⇧+M)">
+              <StrikethroughIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
+              <Code2Icon />
+            </MarkToolbarButton>
+
+            <InlineEquationToolbarButton />
+
+            <LinkToolbarButton />
+          </ToolbarGroup>
+        </>
+      )}
+
+      <ToolbarGroup>
+        <CommentToolbarButton />
+        <SuggestionToolbarButton />
+      </ToolbarGroup>
+    </>
+  );
+}

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

@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  type FloatingToolbarState,
+  flip,
+  offset,
+  useFloatingToolbar,
+  useFloatingToolbarState,
+} from "@platejs/floating";
+import { KEYS } from "platejs";
+import { useEditorId, useEventEditorValue, useComposedRef, usePluginOption } from "platejs/react";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+import { Toolbar } from "../../ui/toolbar";
+
+export function FloatingToolbar({
+  children,
+  className,
+  state,
+  ...props
+}: React.ComponentProps<typeof Toolbar> & {
+  state?: FloatingToolbarState;
+}) {
+  const editorId = useEditorId();
+  const focusedEditorId = useEventEditorValue("focus");
+  const isFloatingLinkOpen = !!usePluginOption({ key: KEYS.link }, "mode");
+  const isAIChatOpen = usePluginOption({ key: KEYS.aiChat }, "open");
+
+  const floatingToolbarState = useFloatingToolbarState({
+    editorId,
+    focusedEditorId,
+    hideToolbar: isFloatingLinkOpen || isAIChatOpen,
+    ...state,
+    floatingOptions: {
+      strategy: "fixed",
+      middleware: [
+        offset(12),
+        flip({
+          fallbackPlacements: ["top-start", "top-end", "bottom-start", "bottom-end"],
+          padding: 12,
+        }),
+      ],
+      placement: "top",
+      ...state?.floatingOptions,
+    },
+  });
+
+  const {
+    clickOutsideRef,
+    hidden,
+    props: rootProps,
+    ref: floatingRef,
+  } = useFloatingToolbar(floatingToolbarState);
+
+  const ref = useComposedRef<HTMLDivElement>(props.ref, floatingRef);
+
+  if (hidden) return null;
+
+  return (
+    <div ref={clickOutsideRef}>
+      <Toolbar
+        {...props}
+        {...rootProps}
+        ref={ref}
+        className={cn(
+          "absolute z-50 overflow-x-auto whitespace-nowrap rounded-md border bg-popover text-popover-foreground p-1 opacity-100 shadow-md max-w-[80vw] print:hidden [scrollbar-width:none]",
+          className,
+        )}
+      >
+        {children}
+      </Toolbar>
+    </div>
+  );
+}