@cosmicdrift/kumiko-samples 0.388.0 → 0.390.0

package/packages/bundled-features/src/template-resolver/web/document-insert-model.ts

@@ -0,0 +1,164 @@
+import type { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { Editor, JSONContent } from "@tiptap/core";
+import {
+  isAllowedDocumentLinkHref,
+  isDocumentPlaceholderHref,
+  isDocumentReferenceName,
+  isDocumentResourceKey,
+} from "./document-schema.ts";
+import { parseDocumentStepsInput } from "./document-steps.ts";
+import { type PanelKind, repeatTableContent } from "./document-tiptap-helpers.ts";
+
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+type Primitives = ReturnType<typeof usePrimitives>;
+
+export type PanelModel = {
+  readonly t: Translate;
+  readonly Button: Primitives["Button"];
+  readonly Field: Primitives["Field"];
+  readonly Input: Primitives["Input"];
+  readonly editor: Editor;
+  readonly kind: PanelKind;
+  readonly idPrefix: string;
+  readonly variableLabels: Readonly<Record<string, string>>;
+  readonly onClose: () => void;
+  readonly href: string;
+  readonly setHref: (value: string) => void;
+  readonly resource: string;
+  readonly setResource: (value: string) => void;
+  readonly alt: string;
+  readonly setAlt: (value: string) => void;
+  readonly buttonText: string;
+  readonly setButtonText: (value: string) => void;
+  readonly stepsText: string;
+  readonly setStepsText: (value: string) => void;
+  readonly setChosenName: (value: string) => void;
+  readonly setError: (value: string | null) => void;
+  readonly selectable: readonly string[];
+  readonly selectedName: string;
+  readonly noVariables: boolean;
+};
+
+type ChosenNames = {
+  readonly selectable: readonly string[];
+  readonly selectedName: string;
+  readonly noVariables: boolean;
+};
+
+export function chosenNamesOf(
+  kind: PanelKind,
+  variables: readonly string[],
+  chosenName: string,
+): ChosenNames {
+  const referenceNames = variables.filter(isDocumentReferenceName);
+  const buttonTargets = referenceNames.filter((name) => isDocumentPlaceholderHref(`{{${name}}}`));
+  const selectable = kind === "button" ? buttonTargets : referenceNames;
+  const selectedName = selectable.includes(chosenName) ? chosenName : (selectable[0] ?? "");
+  const needsVariables =
+    kind === "button" ||
+    kind === "repeat" ||
+    kind === "placeholder" ||
+    kind === "steps" ||
+    kind === "images";
+  return { selectable, selectedName, noVariables: needsVariables && selectable.length === 0 };
+}
+
+export function insertAndCloseOf(m: PanelModel): (content: JSONContent) => void {
+  return (content) => {
+    m.editor.chain().focus().insertContent(content).run();
+    m.onClose();
+  };
+}
+
+function submitLinkOf(m: PanelModel): () => void {
+  const { editor, href, t } = m;
+  return () => {
+    if (!isAllowedDocumentLinkHref(href)) {
+      m.setError(t("template-resolver.documentEditor.invalidLink"));
+      // skip: invalid input is reported through the panel error
+      return;
+    }
+    const chain = editor.chain().focus();
+    if (!editor.state.selection.empty) chain.setLink({ href }).run();
+    else if (editor.isActive("link")) chain.extendMarkRange("link").setLink({ href }).run();
+    else if (isDocumentPlaceholderHref(href))
+      // Placeholders are never inserted as {{name}} text; the link shows the variable's value.
+      chain
+        .insertContent({
+          type: "variable",
+          attrs: { name: href.slice(2, -2) },
+          marks: [{ type: "link", attrs: { href } }],
+        })
+        .run();
+    else
+      chain
+        .insertContent({ type: "text", text: href, marks: [{ type: "link", attrs: { href } }] })
+        .run();
+    m.onClose();
+  };
+}
+
+function submitImageOf(m: PanelModel): () => void {
+  const { resource, alt, t } = m;
+  return () => {
+    if (!isDocumentResourceKey(resource)) {
+      m.setError(t("template-resolver.documentEditor.invalidResourceKey"));
+      // skip: invalid input is reported through the panel error
+      return;
+    }
+    if (/[<>]/.test(alt)) {
+      m.setError(t("template-resolver.documentEditor.invalidImageAlt"));
+      // skip: invalid input is reported through the panel error
+      return;
+    }
+    insertAndCloseOf(m)({ type: "resource", attrs: { resource, alt: alt || null } });
+  };
+}
+
+function submitStepsOf(m: PanelModel): () => void {
+  return () => {
+    const steps = parseDocumentStepsInput(m.stepsText);
+    if (steps === null) {
+      m.setError(m.t("template-resolver.documentEditor.invalidSteps"));
+      // skip: invalid input is reported through the panel error
+      return;
+    }
+    insertAndCloseOf(m)({ type: "steps", attrs: { variable: m.selectedName, steps } });
+  };
+}
+
+// Variable-bound kinds offer no insert while there is nothing to bind to.
+const INSERT_HANDLERS: Partial<Record<PanelKind, (m: PanelModel) => () => void>> = {
+  link: submitLinkOf,
+  image: submitImageOf,
+  button: (m) => () =>
+    insertAndCloseOf(m)({
+      type: "button",
+      attrs: { href: `{{${m.selectedName}}}` },
+      content: m.buttonText ? [{ type: "text", text: m.buttonText }] : [],
+    }),
+  repeat: (m) => () => insertAndCloseOf(m)(repeatTableContent(m.selectedName)),
+  steps: submitStepsOf,
+  images: (m) => () => insertAndCloseOf(m)({ type: "images", attrs: { variable: m.selectedName } }),
+};
+
+const KINDS_WITHOUT_VARIABLE_GUARD: readonly PanelKind[] = ["link", "image"];
+
+export function panelActionProps(m: PanelModel): {
+  onInsert?: () => void;
+  onRemoveLink?: () => void;
+} {
+  const { editor, kind } = m;
+  const build = INSERT_HANDLERS[kind];
+  const insertAllowed = KINDS_WITHOUT_VARIABLE_GUARD.includes(kind) || !m.noVariables;
+  return {
+    ...(build !== undefined && insertAllowed && { onInsert: build(m) }),
+    ...(kind === "link" &&
+      editor.isActive("link") && {
+        onRemoveLink: () => {
+          editor.chain().focus().extendMarkRange("link").unsetLink().run();
+          m.onClose();
+        },
+      }),
+  };
+}

package/packages/bundled-features/src/template-resolver/web/document-insert-panel.tsx

@@ -0,0 +1,115 @@
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { Editor } from "@tiptap/core";
+import { type ReactNode, useState } from "react";
+import { PANEL_FIELDS } from "./document-insert-fields.tsx";
+import { chosenNamesOf, type PanelModel, panelActionProps } from "./document-insert-model.ts";
+import type { PanelKind } from "./document-tiptap-helpers.ts";
+
+function PanelActions({
+  onInsert,
+  onRemoveLink,
+  onCancel,
+}: {
+  readonly onInsert?: () => void;
+  readonly onRemoveLink?: () => void;
+  readonly onCancel: () => void;
+}): ReactNode {
+  const { Button } = usePrimitives();
+  const t = useTranslation();
+  return (
+    <div className="flex gap-2">
+      {onInsert && (
+        <Button type="button" size="sm" onClick={onInsert}>
+          {t("template-resolver.documentEditor.insert")}
+        </Button>
+      )}
+      {onRemoveLink && (
+        <Button type="button" size="sm" variant="danger-ghost" onClick={onRemoveLink}>
+          {t("template-resolver.documentEditor.removeLink")}
+        </Button>
+      )}
+      <Button type="button" size="sm" variant="secondary" onClick={onCancel}>
+        {t("template-resolver.documentEditor.cancel")}
+      </Button>
+    </div>
+  );
+}
+
+type PanelProps = {
+  readonly editor: Editor;
+  readonly editorId: string;
+  readonly kind: PanelKind;
+  readonly variables: readonly string[];
+  readonly variableLabels: Readonly<Record<string, string>>;
+  readonly onClose: () => void;
+};
+
+export function InsertPanel({
+  editor,
+  editorId,
+  kind,
+  variables,
+  variableLabels,
+  onClose,
+}: PanelProps): ReactNode {
+  const { Button, Field, Input } = usePrimitives();
+  const t = useTranslation();
+  const [href, setHref] = useState(() => {
+    const current = editor.getAttributes("link")["href"];
+    return typeof current === "string" ? current : "";
+  });
+  const [resource, setResource] = useState("");
+  const [alt, setAlt] = useState("");
+  const [buttonText, setButtonText] = useState(() =>
+    t("template-resolver.documentEditor.buttonDefaultText"),
+  );
+  const [stepsText, setStepsText] = useState(() =>
+    t("template-resolver.documentEditor.stepsDefault"),
+  );
+  const [chosenName, setChosenName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const model: PanelModel = {
+    t,
+    Button,
+    Field,
+    Input,
+    editor,
+    kind,
+    idPrefix: `${editorId}-panel`,
+    variableLabels,
+    onClose,
+    href,
+    setHref,
+    resource,
+    setResource,
+    alt,
+    setAlt,
+    buttonText,
+    setButtonText,
+    stepsText,
+    setStepsText,
+    setChosenName,
+    setError,
+    ...chosenNamesOf(kind, variables, chosenName),
+  };
+
+  return (
+    <div className="flex flex-col gap-2 border-b border-input bg-muted/40 p-2">
+      {model.noVariables && (
+        <p className="text-sm text-muted-foreground">
+          {t("template-resolver.documentEditor.noVariables")}
+        </p>
+      )}
+      {PANEL_FIELDS[kind](model)}
+      {error !== null && (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+      <div className="flex flex-wrap gap-2">
+        <PanelActions onCancel={onClose} {...panelActionProps(model)} />
+      </div>
+    </div>
+  );
+}

package/packages/bundled-features/src/template-resolver/web/document-tiptap-bubble.tsx

@@ -0,0 +1,177 @@
+import type { Editor } from "@tiptap/core";
+import { BubbleMenu } from "@tiptap/react/menus";
+import type { ReactNode } from "react";
+import { DOCUMENT_BLOCK_ATTRIBUTE } from "./document-editor-extensions.ts";
+import type { TiptapContext } from "./document-tiptap-context.ts";
+import {
+  buttonTargetLabel,
+  findRepeatTable,
+  toggleRepeatHeader,
+} from "./document-tiptap-helpers.ts";
+
+// The bubble menu registers its plugin once per mount, so a rebuilt editor needs a fresh mount.
+const editorMountKeys = new WeakMap<Editor, number>();
+let lastMountKey = 0;
+function mountKeyOf(editor: Editor): number {
+  const known = editorMountKeys.get(editor);
+  if (known !== undefined) return known;
+  lastMountKey += 1;
+  const created = lastMountKey;
+  editorMountKeys.set(editor, created);
+  return created;
+}
+
+// Board .hb: a small bar that straddles the block's top frame line on the right; above a table it sits fully
+// outside so the header row stays readable.
+const BUBBLE_BAR_CLASS =
+  "flex w-max items-center gap-1 rounded border border-input bg-popover p-px text-xs [&_button]:h-5 [&_button]:px-1.5 [&_button]:text-[10px]";
+
+function bubbleOffset(editor: Editor): (args: { rects: { floating: { height: number } } }) => {
+  mainAxis: number;
+  crossAxis: number;
+} {
+  return ({ rects }) => ({
+    mainAxis: findRepeatTable(editor) !== null ? 2 : -rects.floating.height / 2,
+    crossAxis: -8,
+  });
+}
+
+const BUBBLE_MENU_PLUGIN_KEY = "documentBlockOptions";
+
+// The options bar belongs to the block frame, not to the caret inside it.
+function selectedBlockReference(editor: Editor): {
+  getBoundingClientRect: () => DOMRect;
+  getClientRects: () => DOMRect[];
+  contextElement: Element;
+} | null {
+  const { node } = editor.view.domAtPos(editor.state.selection.from);
+  const start = node instanceof Element ? node : node.parentElement;
+  const block = start?.closest(`[${DOCUMENT_BLOCK_ATTRIBUTE}], table`);
+  if (block === null || block === undefined) return null;
+  return {
+    getBoundingClientRect: () => block.getBoundingClientRect(),
+    getClientRects: () => [block.getBoundingClientRect()],
+    contextElement: block,
+  };
+}
+
+// The bubble is first measured before React has filled it, so it sits at the wrong place until a second pass.
+function repositionBubble(editor: Editor): void {
+  if (editor.isDestroyed) return;
+  editor.view.dispatch(editor.state.tr.setMeta(BUBBLE_MENU_PLUGIN_KEY, "updatePosition"));
+}
+
+function repeatBarLabelOf(c: TiptapContext): string {
+  const { t, repeatListLabel } = c;
+  return repeatListLabel === undefined
+    ? t("template-resolver.documentEditor.repeat")
+    : t("template-resolver.documentEditor.repeatBarList", { list: repeatListLabel });
+}
+
+function renderBlockOptionsBar(
+  c: TiptapContext,
+  selectedBlock: { readonly type: "resource" | "button"; readonly detail: string },
+): ReactNode {
+  const { t, Button, editor } = c;
+  return (
+    <div className={BUBBLE_BAR_CLASS} data-testid="document-block-options">
+      <span className="px-1.5 text-[10px] text-muted-foreground">
+        {selectedBlock.type === "resource"
+          ? t("template-resolver.documentEditor.resourceKey")
+          : t("template-resolver.documentEditor.buttonTarget")}
+        {": "}
+        {selectedBlock.type === "button" ? (
+          <strong>{buttonTargetLabel(selectedBlock.detail, c.variableLabels)}</strong>
+        ) : (
+          <code>{selectedBlock.detail}</code>
+        )}
+      </span>
+      <Button
+        type="button"
+        size="sm"
+        variant="danger-ghost"
+        onClick={() => {
+          editor.chain().focus().deleteNode(selectedBlock.type).run();
+        }}
+      >
+        {t("template-resolver.documentEditor.removeBlock")}
+      </Button>
+    </div>
+  );
+}
+
+function renderBubbleRepeatBar(c: TiptapContext): ReactNode {
+  const { t, Button, editor } = c;
+  const repeatTable = c.activeState?.repeatTable ?? null;
+  return (
+    repeatTable !== null && (
+      <div data-testid="document-repeat-bar" className={BUBBLE_BAR_CLASS}>
+        <span className="px-1.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+          {repeatBarLabelOf(c)}
+        </span>
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          pressed={repeatTable.headerRepeats}
+          onClick={() => toggleRepeatHeader(editor)}
+        >
+          {t("template-resolver.documentEditor.repeatHeader")}
+        </Button>
+      </div>
+    )
+  );
+}
+
+export function renderBubbleMenu(c: TiptapContext): ReactNode {
+  const { editor } = c;
+  const selectedBlock = c.activeState?.selectedBlock ?? null;
+  return (
+    <BubbleMenu
+      key={mountKeyOf(editor)}
+      pluginKey={BUBBLE_MENU_PLUGIN_KEY}
+      editor={editor}
+      options={{
+        strategy: "fixed",
+        placement: "top-end",
+        offset: bubbleOffset(editor),
+        scrollTarget: c.canvasScroller ?? window,
+        onShow: () => requestAnimationFrame(() => repositionBubble(editor)),
+      }}
+      getReferencedVirtualElement={() => selectedBlockReference(editor)}
+      shouldShow={({ editor: e, element }) =>
+        // A leading image is selected by default; the bubble belongs to a deliberate selection.
+        (e.isFocused || element.contains(document.activeElement)) &&
+        (e.isActive("resource") || e.isActive("button") || findRepeatTable(e) !== null)
+      }
+    >
+      {selectedBlock !== null ? renderBlockOptionsBar(c, selectedBlock) : renderBubbleRepeatBar(c)}
+    </BubbleMenu>
+  );
+}
+
+export function renderInlineRepeatBar(c: TiptapContext): ReactNode {
+  const { t, Button, editor } = c;
+  const repeatTable = c.activeState?.repeatTable ?? null;
+  return (
+    repeatTable !== null &&
+    !c.readOnly &&
+    !c.canvas && (
+      <div
+        data-testid="document-repeat-bar"
+        className="flex flex-wrap items-center gap-3 border-b border-input bg-muted/40 px-2 py-1 text-xs"
+      >
+        <span className="font-medium">{repeatBarLabelOf(c)}</span>
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          pressed={repeatTable.headerRepeats}
+          onClick={() => toggleRepeatHeader(editor)}
+        >
+          {t("template-resolver.documentEditor.repeatHeader")}
+        </Button>
+      </div>
+    )
+  );
+}

package/packages/bundled-features/src/template-resolver/web/document-tiptap-content.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@cosmicdrift/kumiko-renderer/web";
+import type { Editor } from "@tiptap/core";
+import { EditorContent } from "@tiptap/react";
+import type { ReactNode } from "react";
+
+export function renderEditorContent(editor: Editor, canvas: boolean, hosted: boolean): ReactNode {
+  return (
+    <EditorContent
+      editor={editor}
+      className={cn(
+        !canvas && "min-h-40 px-3 py-2 text-base outline-none md:text-sm",
+        canvas && "text-sm",
+        "[&_.ProseMirror-focused_.ProseMirror-selectednode]:ring-2 [&_.ProseMirror-focused_.ProseMirror-selectednode]:ring-primary",
+        hosted
+          ? "[&_.ProseMirror]:outline-none"
+          : "[&_.ProseMirror]:min-h-40 [&_.ProseMirror]:outline-none",
+        "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-6 [&_ol]:pl-6",
+        "[&_h1]:text-xl [&_h1]:font-bold [&_h2]:text-lg [&_h2]:font-bold [&_h3]:text-base [&_h3]:font-bold",
+        "[&_a]:underline [&_a]:text-primary",
+        "[&_strong]:font-bold [&_em]:italic [&_u]:underline",
+        canvas
+          ? "[&_table]:mb-2 [&_table]:mt-6 [&_.ProseMirror>:first-child_table]:mt-0 [&_.ProseMirror>table:first-child]:mt-0 [&_td:last-child>p[data-size=small][data-align=right]]:whitespace-nowrap"
+          : "[&_table]:my-2",
+        "[&_table]:w-full [&_table]:border-collapse",
+        "[&_td]:border-b [&_td]:border-border [&_td]:px-2 [&_td]:py-1.5 [&_td>p]:m-0 [&_th>p]:m-0",
+        "[&_th]:border-b [&_th]:border-border [&_th]:px-2 [&_th]:py-1.5 [&_th]:text-left [&_th]:text-xs [&_th]:font-medium [&_th]:text-muted-foreground",
+        "[&_tr[data-each]>td]:bg-muted/50",
+        "[&_[data-align=left]]:text-left [&_[data-align=center]]:text-center [&_[data-align=right]]:text-right [&_[data-align=justify]]:text-justify",
+        "[&_p[data-size=small]]:text-xs [&_p[data-size=small]]:text-muted-foreground",
+        "[&_a[data-button]]:inline-block [&_a[data-button]]:rounded-full [&_a[data-button]]:bg-primary [&_a[data-button]]:px-4 [&_a[data-button]]:py-1.5 [&_a[data-button]]:text-primary-foreground [&_a[data-button]]:no-underline",
+        // A chip in the button would be primary on primary; it inverts to stay readable.
+        "[&_a[data-button]_[data-variable-chip]]:border-primary-foreground/40 [&_a[data-button]_[data-variable-chip]]:bg-primary-foreground/15 [&_a[data-button]_[data-variable-chip]]:text-primary-foreground",
+        "[&_hr]:my-3 [&_hr]:border-input",
+        "[&_.is-editor-empty]:before:pointer-events-none [&_.is-editor-empty]:before:float-left [&_.is-editor-empty]:before:h-0 [&_.is-editor-empty]:before:text-muted-foreground [&_.is-editor-empty]:before:content-[attr(data-placeholder)]",
+      )}
+    />
+  );
+}

package/packages/bundled-features/src/template-resolver/web/document-tiptap-context.ts

@@ -0,0 +1,119 @@
+import type { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { Editor } from "@tiptap/core";
+import type { Dispatch, SetStateAction } from "react";
+import {
+  type ActiveState,
+  BLOCK_PANEL,
+  HEADING_LEVELS,
+  isParagraphStyle,
+  type PanelKind,
+} from "./document-tiptap-helpers.ts";
+import type { DocumentToolbarBlock } from "./document-toolbar-blocks.ts";
+import type { DocumentEditorLabels } from "./use-document-tiptap-model.ts";
+
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+type Primitives = ReturnType<typeof usePrimitives>;
+
+export type TiptapContext = {
+  readonly id: string;
+  readonly t: Translate;
+  readonly Button: Primitives["Button"];
+  readonly Field: Primitives["Field"];
+  readonly Input: Primitives["Input"];
+  readonly ActionOverflowMenu: Primitives["ActionOverflowMenu"];
+  readonly editor: Editor;
+  readonly readOnly: boolean;
+  readonly canvas: boolean;
+  readonly compact: boolean;
+  readonly hosted: boolean;
+  readonly labels: DocumentEditorLabels;
+  readonly activeState: ActiveState | null;
+  readonly openPanel: PanelKind | null;
+  readonly setOpenPanel: Dispatch<SetStateAction<PanelKind | null>>;
+  readonly canvasScroller: HTMLElement | null;
+  readonly setCanvasScroller: Dispatch<SetStateAction<HTMLElement | null>>;
+  readonly showHtml: boolean;
+  readonly setShowHtml: Dispatch<SetStateAction<boolean>>;
+  readonly blocks: readonly DocumentToolbarBlock[];
+  readonly variables: readonly string[];
+  readonly imageVariables: readonly string[];
+  readonly variableLabels: Readonly<Record<string, string>>;
+  readonly stableLabels: Readonly<Record<string, string>>;
+  readonly togglePanel: (kind: PanelKind) => void;
+  readonly runBlock: (block: DocumentToolbarBlock) => void;
+  readonly setBlockStyle: (style: string) => void;
+  readonly repeatListLabel: string | undefined;
+};
+
+export type TiptapContextInput = Pick<
+  TiptapContext,
+  | "id"
+  | "t"
+  | "Button"
+  | "Field"
+  | "Input"
+  | "ActionOverflowMenu"
+  | "editor"
+  | "readOnly"
+  | "canvas"
+  | "compact"
+  | "hosted"
+  | "labels"
+  | "activeState"
+  | "openPanel"
+  | "setOpenPanel"
+  | "canvasScroller"
+  | "setCanvasScroller"
+  | "showHtml"
+  | "setShowHtml"
+  | "blocks"
+  | "variables"
+  | "imageVariables"
+  | "variableLabels"
+  | "stableLabels"
+>;
+
+function repeatListLabelOf(
+  activeState: ActiveState | null,
+  variableLabels: Readonly<Record<string, string>>,
+): string | undefined {
+  const repeatTable = activeState?.repeatTable ?? null;
+  return repeatTable !== null && repeatTable.lists.length === 1
+    ? (variableLabels[repeatTable.lists[0] ?? ""] ?? repeatTable.lists[0])
+    : undefined;
+}
+
+export function buildTiptapContext(input: TiptapContextInput): TiptapContext {
+  const { editor, setOpenPanel } = input;
+  const togglePanel = (kind: PanelKind): void =>
+    setOpenPanel((current) => (current === kind ? null : kind));
+
+  const setBlockStyle = (style: string): void => {
+    // skip: not a paragraph style value
+    if (!isParagraphStyle(style)) return;
+    const chain = editor.chain().focus();
+    if (style === "paragraph") chain.setParagraph().run();
+    else chain.setHeading({ level: HEADING_LEVELS[style] }).run();
+  };
+
+  const runBlock = (block: DocumentToolbarBlock): void => {
+    const panel = BLOCK_PANEL[block];
+    if (panel) {
+      togglePanel(panel);
+      // skip: panel blocks open their panel instead of inserting directly
+      return;
+    }
+    const chain = editor.chain().focus();
+    if (block === "table") chain.insertTable({ rows: 3, cols: 2, withHeaderRow: true }).run();
+    else if (block === "divider") chain.insertContent({ type: "divider" }).run();
+    else if (block === "pageBreak") chain.insertContent({ type: "pageBreak" }).run();
+  };
+
+  return {
+    ...input,
+    togglePanel,
+    runBlock,
+    setBlockStyle,
+    repeatListLabel: repeatListLabelOf(input.activeState, input.variableLabels),
+  };
+}