@cosmicdrift/kumiko-samples 0.389.0 → 0.390.0

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),
+  };
+}