@cosmicdrift/kumiko-samples 0.389.0 → 0.390.0

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

@@ -0,0 +1,161 @@
+import { isOneOf } from "@cosmicdrift/kumiko-types/type-guards";
+import type { Editor, JSONContent } from "@tiptap/core";
+import type { DocumentResourcePreview, DocumentToolbarBlock } from "./document-toolbar-blocks.ts";
+
+export const NO_LABELS: Readonly<Record<string, string>> = {};
+export const NO_NAMES: readonly string[] = [];
+export const NO_PREVIEWS: Readonly<Record<string, DocumentResourcePreview>> = {};
+
+export function previewsKey(previews: Readonly<Record<string, DocumentResourcePreview>>): string {
+  return Object.entries(previews)
+    .map(([key, { src, caption }]) => `${key}|${src.length}|${src.slice(-24)}|${caption ?? ""}`)
+    .join("\n");
+}
+
+export type PanelKind =
+  | "link"
+  | "placeholder"
+  | "image"
+  | "button"
+  | "repeat"
+  | "align"
+  | "steps"
+  | "images";
+
+// Blocks that stay in the canvas toolbar; the rest moves into the overflow menu.
+export const CANVAS_INLINE_BLOCKS: readonly DocumentToolbarBlock[] = ["image", "table"];
+
+export const BLOCK_PANEL: Partial<Record<DocumentToolbarBlock, PanelKind>> = {
+  image: "image",
+  button: "button",
+  repeat: "repeat",
+  align: "align",
+  steps: "steps",
+  images: "images",
+};
+
+export type RepeatTableState = {
+  readonly lists: readonly string[];
+  readonly headerRepeats: boolean;
+  readonly firstRowPos: number;
+};
+
+// print-document moves the leading rows flagged repeatHeader into thead, so the
+// toggle reads and writes the table's first row.
+export function findRepeatTable(editor: Editor): RepeatTableState | null {
+  const { $from } = editor.state.selection;
+  for (let depth = $from.depth; depth > 0; depth--) {
+    const node = $from.node(depth);
+    if (node.type.name !== "table") continue;
+    const lists: string[] = [];
+    node.forEach((row) => {
+      const each: unknown = row.attrs["each"];
+      if (typeof each === "string" && each !== "" && !lists.includes(each)) lists.push(each);
+    });
+    if (lists.length === 0) return null;
+    return {
+      lists,
+      headerRepeats: node.firstChild?.attrs["repeatHeader"] === true,
+      firstRowPos: $from.start(depth),
+    };
+  }
+  return null;
+}
+
+export function toggleRepeatHeader(editor: Editor): void {
+  const found = findRepeatTable(editor);
+  // skip: the cursor is not inside a repeat table
+  if (found === null) return;
+  editor
+    .chain()
+    .focus()
+    .command(({ tr }) => {
+      const row = tr.doc.nodeAt(found.firstRowPos);
+      if (row === null) return false;
+      tr.setNodeMarkup(found.firstRowPos, undefined, {
+        ...row.attrs,
+        repeatHeader: !found.headerRepeats,
+      });
+      return true;
+    })
+    .run();
+}
+
+const PARAGRAPH_STYLES = ["paragraph", "1", "2", "3"] as const;
+type ParagraphStyle = (typeof PARAGRAPH_STYLES)[number];
+
+export const HEADING_LEVELS = { "1": 1, "2": 2, "3": 3 } as const;
+
+const PLACEHOLDER_HREF = /^\{\{([^{}]+)\}\}$/;
+
+export function variableLabelOf(name: string, labels: Readonly<Record<string, string>>): string {
+  return Object.hasOwn(labels, name) ? (labels[name] ?? name) : name;
+}
+
+export function buttonTargetLabel(href: string, labels: Readonly<Record<string, string>>): string {
+  const name = PLACEHOLDER_HREF.exec(href)?.[1];
+  return name === undefined ? href : variableLabelOf(name, labels);
+}
+
+export function isParagraphStyle(value: string): value is ParagraphStyle {
+  return isOneOf(PARAGRAPH_STYLES, value);
+}
+
+function emptyParagraph(): JSONContent {
+  return { type: "paragraph" };
+}
+
+export function repeatTableContent(listName: string): JSONContent {
+  const headerRow: JSONContent = {
+    type: "tableRow",
+    content: [
+      { type: "tableHeader", content: [emptyParagraph()] },
+      { type: "tableHeader", content: [emptyParagraph()] },
+    ],
+  };
+  const repeatRow: JSONContent = {
+    type: "tableRow",
+    attrs: { each: listName },
+    content: [
+      { type: "tableCell", content: [emptyParagraph()] },
+      { type: "tableCell", content: [emptyParagraph()] },
+    ],
+  };
+  return { type: "table", content: [headerRow, repeatRow] };
+}
+
+function blockStyleOf(e: Editor): "1" | "2" | "3" | "paragraph" {
+  if (e.isActive("heading", { level: 1 })) return "1";
+  if (e.isActive("heading", { level: 2 })) return "2";
+  if (e.isActive("heading", { level: 3 })) return "3";
+  return "paragraph";
+}
+
+function selectedBlockOf(
+  e: Editor,
+): { readonly type: "resource" | "button"; readonly detail: string } | null {
+  if (e.isActive("resource")) {
+    return { type: "resource", detail: String(e.getAttributes("resource")["resource"]) };
+  }
+  if (e.isActive("button")) {
+    return { type: "button", detail: String(e.getAttributes("button")["href"]) };
+  }
+  return null; // skip: no resource or button selected
+}
+
+export function activeStateOf(e: Editor, showHtml: boolean) {
+  return {
+    blockStyle: blockStyleOf(e),
+    bold: e.isActive("bold"),
+    italic: e.isActive("italic"),
+    underline: e.isActive("underline"),
+    selectedBlock: selectedBlockOf(e),
+    html: showHtml ? e.getHTML() : "",
+    bulletList: e.isActive("bulletList"),
+    orderedList: e.isActive("orderedList"),
+    link: e.isActive("link"),
+    repeatTable: findRepeatTable(e),
+  };
+}
+
+export type ActiveState = ReturnType<typeof activeStateOf>;

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

@@ -0,0 +1,83 @@
+import { cn } from "@cosmicdrift/kumiko-renderer/web";
+import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { InsertPanel } from "./document-insert-panel.tsx";
+import { renderBubbleMenu, renderInlineRepeatBar } from "./document-tiptap-bubble.tsx";
+import type { TiptapContext } from "./document-tiptap-context.ts";
+import { renderToolbarBar } from "./document-tiptap-toolbar.tsx";
+
+function renderInsertPanel(c: TiptapContext): ReactNode {
+  const { openPanel } = c;
+  return (
+    openPanel !== null &&
+    !c.readOnly && (
+      <InsertPanel
+        key={openPanel}
+        editor={c.editor}
+        editorId={c.id}
+        kind={openPanel}
+        variables={openPanel === "images" ? c.imageVariables : c.variables}
+        variableLabels={c.stableLabels}
+        onClose={() => c.setOpenPanel(null)}
+      />
+    )
+  );
+}
+
+export function renderHostedEditor(
+  c: TiptapContext,
+  toolbarHost: HTMLElement | null,
+  editorContent: ReactNode,
+): ReactNode {
+  return (
+    <>
+      {toolbarHost !== null &&
+        createPortal(
+          <>
+            {renderToolbarBar(c)}
+            {renderInsertPanel(c)}
+          </>,
+          toolbarHost,
+        )}
+      {!c.readOnly && renderBubbleMenu(c)}
+      {editorContent}
+    </>
+  );
+}
+
+function renderHtmlSource(c: TiptapContext): ReactNode {
+  return (
+    c.canvas &&
+    !c.hosted &&
+    c.showHtml && (
+      <section aria-label={c.t("template-resolver.documentEditor.htmlSource")}>
+        <pre className="h-40 overflow-auto whitespace-pre-wrap break-all border-b border-input bg-muted p-2 font-mono text-xs">
+          {c.activeState?.html ?? ""}
+        </pre>
+      </section>
+    )
+  );
+}
+
+export function renderInlineEditor(c: TiptapContext, paper: ReactNode): ReactNode {
+  const { canvas, hosted } = c;
+  return (
+    <div
+      className={cn(
+        canvas ? "flex min-h-0 flex-1 flex-col" : "rounded-md border border-input bg-transparent",
+      )}
+    >
+      {!hosted && renderToolbarBar(c)}
+      {canvas && !c.readOnly && renderBubbleMenu(c)}
+      {renderHtmlSource(c)}
+      {!hosted && renderInsertPanel(c)}
+      {renderInlineRepeatBar(c)}
+      <div
+        ref={c.setCanvasScroller}
+        className={cn(canvas && "min-h-0 flex-1 overflow-auto bg-muted px-8 py-6")}
+      >
+        {paper}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,153 @@
+import { cn } from "@cosmicdrift/kumiko-renderer/web";
+import {
+  Bold as BoldIcon,
+  Italic as ItalicIcon,
+  Link as LinkIcon,
+  List,
+  ListOrdered,
+  Underline as UnderlineIcon,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import type { TiptapContext } from "./document-tiptap-context.ts";
+
+// Canvas chrome is one flat row: unframed ghost buttons, glyph plus text for the longer names.
+export function iconButton(
+  c: TiptapContext,
+  label: string,
+  icon: ReactNode,
+  isActive: boolean,
+  onClick: () => void,
+  text?: string,
+): ReactNode {
+  const { Button, canvas, readOnly } = c;
+  return canvas ? (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      pressed={isActive}
+      disabled={readOnly}
+      onClick={onClick}
+      ariaLabel={label}
+      title={label}
+    >
+      {icon}
+      {text}
+    </Button>
+  ) : (
+    <Button
+      type="button"
+      variant={isActive ? "primary" : "secondary"}
+      size="icon"
+      pressed={isActive}
+      disabled={readOnly}
+      onClick={onClick}
+      ariaLabel={label}
+      title={label}
+    >
+      {icon}
+    </Button>
+  );
+}
+
+function markContent(
+  canvas: boolean,
+  letter: string,
+  icon: ReactNode,
+  className: string,
+): ReactNode {
+  return canvas ? <span className={className}>{letter}</span> : icon;
+}
+
+export function renderParagraphStyleSelect(c: TiptapContext): ReactNode {
+  const { t, Field, Input, id, canvas, compact, readOnly, activeState } = c;
+  const paragraphStyleLabel = t("template-resolver.documentEditor.paragraphStyle");
+  const styleOptions = [
+    { value: "paragraph", label: t("template-resolver.documentEditor.paragraph") },
+    { value: "1", label: t("kumiko.contentEditor.heading1") },
+    { value: "2", label: t("kumiko.contentEditor.heading2") },
+    { value: "3", label: t("template-resolver.documentEditor.heading3") },
+  ];
+  return (
+    <div
+      // kumiko-lint-ignore raw-classname the toolbar paragraph select sits flush in the editor toolbar; ComboboxInput has no flat trigger variant
+      className={cn(
+        !canvas && (compact ? "w-24" : "w-40"),
+        canvas &&
+          "w-auto shrink-0 [&_button[aria-haspopup=listbox]]:border-transparent [&_button[aria-haspopup=listbox]]:bg-transparent [&_button[aria-haspopup=listbox]]:shadow-none",
+      )}
+    >
+      <Field id={`${id}-paragraph-style`} label={paragraphStyleLabel} hideLabel>
+        <Input
+          kind="select"
+          id={`${id}-paragraph-style`}
+          name="paragraph-style"
+          value={activeState?.blockStyle ?? "paragraph"}
+          onChange={c.setBlockStyle}
+          options={styleOptions}
+          display="dropdown"
+          disabled={readOnly}
+        />
+      </Field>
+    </div>
+  );
+}
+
+export function renderMarkButtons(c: TiptapContext): ReactNode {
+  const { t, editor, canvas, activeState } = c;
+  return (
+    <>
+      {iconButton(
+        c,
+        t("kumiko.contentEditor.bold"),
+        markContent(canvas, "B", <BoldIcon size={16} />, "font-bold"),
+        activeState?.bold ?? false,
+        () => editor.chain().focus().toggleBold().run(),
+      )}
+      {iconButton(
+        c,
+        t("kumiko.contentEditor.italic"),
+        markContent(canvas, "I", <ItalicIcon size={16} />, "italic"),
+        activeState?.italic ?? false,
+        () => editor.chain().focus().toggleItalic().run(),
+      )}
+      {iconButton(
+        c,
+        t("template-resolver.documentEditor.underline"),
+        markContent(canvas, "U", <UnderlineIcon size={16} />, "underline"),
+        activeState?.underline ?? false,
+        () => editor.chain().focus().toggleUnderline().run(),
+      )}
+    </>
+  );
+}
+
+export function renderListButtons(c: TiptapContext): ReactNode {
+  const { t, editor, canvas, activeState } = c;
+  return (
+    <>
+      {iconButton(
+        c,
+        t("kumiko.contentEditor.bulletList"),
+        <List size={16} />,
+        activeState?.bulletList ?? false,
+        () => editor.chain().focus().toggleBulletList().run(),
+        canvas ? undefined : t("template-resolver.documentEditor.list"),
+      )}
+      {iconButton(
+        c,
+        t("kumiko.contentEditor.orderedList"),
+        <ListOrdered size={16} />,
+        activeState?.orderedList ?? false,
+        () => editor.chain().focus().toggleOrderedList().run(),
+      )}
+      {iconButton(
+        c,
+        t("template-resolver.documentEditor.link"),
+        <LinkIcon size={16} />,
+        activeState?.link ?? false,
+        () => c.togglePanel("link"),
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,182 @@
+import type { ActionMenuItemSpec } from "@cosmicdrift/kumiko-renderer";
+import { cn } from "@cosmicdrift/kumiko-renderer/web";
+import {
+  AlignLeft,
+  Braces,
+  ChevronDown,
+  GalleryThumbnails,
+  Image as ImageIcon,
+  ListChecks,
+  Minus,
+  MousePointerClick,
+  Repeat,
+  Scissors,
+  Table as TableIcon,
+} from "lucide-react";
+import { Fragment, type ReactNode } from "react";
+import type { TiptapContext } from "./document-tiptap-context.ts";
+import { CANVAS_INLINE_BLOCKS } from "./document-tiptap-helpers.ts";
+import {
+  iconButton,
+  renderListButtons,
+  renderMarkButtons,
+  renderParagraphStyleSelect,
+} from "./document-tiptap-toolbar-groups.tsx";
+import type { DocumentToolbarBlock } from "./document-toolbar-blocks.ts";
+
+type BlockButtons = Record<DocumentToolbarBlock, { label: string; icon: ReactNode }>;
+
+function Separator({ compact = false }: { readonly compact?: boolean }): ReactNode {
+  return (
+    <span aria-hidden="true" className={cn("h-5 w-px bg-border", compact ? "mx-0.5" : "mx-2")} />
+  );
+}
+
+function blockButtonsOf(c: TiptapContext): BlockButtons {
+  const { t } = c;
+  const { imageLabel, pageBreakLabel, stepsLabel, imagesLabel } = c.labels;
+  return {
+    image: { label: imageLabel, icon: <ImageIcon size={16} /> },
+    table: { label: t("template-resolver.documentEditor.table"), icon: <TableIcon size={16} /> },
+    button: {
+      label: t("template-resolver.documentEditor.button"),
+      icon: <MousePointerClick size={16} />,
+    },
+    divider: { label: t("template-resolver.documentEditor.divider"), icon: <Minus size={16} /> },
+    repeat: { label: t("template-resolver.documentEditor.repeat"), icon: <Repeat size={16} /> },
+    pageBreak: { label: pageBreakLabel, icon: <Scissors size={16} /> },
+    align: { label: t("template-resolver.documentEditor.align"), icon: <AlignLeft size={16} /> },
+    steps: { label: stepsLabel, icon: <ListChecks size={16} /> },
+    images: { label: imagesLabel, icon: <GalleryThumbnails size={16} /> },
+  };
+}
+
+type LabelledButtonSpec = {
+  readonly key?: string;
+  readonly label: string;
+  readonly icon: ReactNode;
+  readonly showIcon: boolean;
+  readonly trailingIcon?: ReactNode;
+  readonly expanded?: boolean;
+  readonly onClick: () => void;
+};
+
+function labelledButton(c: TiptapContext, spec: LabelledButtonSpec): ReactNode {
+  const { Button, canvas, compact, readOnly } = c;
+  const flatVariant = canvas ? "ghost" : "secondary";
+  const shared = {
+    type: "button",
+    variant: flatVariant,
+    disabled: readOnly,
+    onClick: spec.onClick,
+    ...(spec.expanded !== undefined && { expanded: spec.expanded }),
+  } as const;
+  return compact ? (
+    <Button key={spec.key} {...shared} size="icon" ariaLabel={spec.label} title={spec.label}>
+      {spec.icon}
+    </Button>
+  ) : (
+    <Button key={spec.key} {...shared} size="sm">
+      {spec.showIcon && spec.icon}
+      {spec.label}
+      {spec.trailingIcon}
+    </Button>
+  );
+}
+
+function renderInlineBlock(
+  c: TiptapContext,
+  block: DocumentToolbarBlock,
+  blockButtons: BlockButtons,
+): ReactNode {
+  if (c.canvas) {
+    return (
+      <Fragment key={block}>
+        {iconButton(c, blockButtons[block].label, blockButtons[block].icon, false, () =>
+          c.runBlock(block),
+        )}
+      </Fragment>
+    );
+  }
+  return labelledButton(c, {
+    key: block,
+    label: blockButtons[block].label,
+    icon: blockButtons[block].icon,
+    showIcon: true,
+    onClick: () => c.runBlock(block),
+  });
+}
+
+function overflowItemsOf(
+  c: TiptapContext,
+  menuBlocks: readonly DocumentToolbarBlock[],
+  blockButtons: BlockButtons,
+): readonly ActionMenuItemSpec[] {
+  const { t, canvas, hosted, readOnly } = c;
+  return [
+    ...menuBlocks.map((block) => ({
+      id: block,
+      label: blockButtons[block].label,
+      disabled: readOnly,
+      onSelect: () => c.runBlock(block),
+    })),
+    ...(canvas && !hosted
+      ? [
+          {
+            id: "html",
+            label: t("template-resolver.documentEditor.showHtml"),
+            onSelect: () => c.setShowHtml((current) => !current),
+          },
+        ]
+      : []),
+  ];
+}
+
+export function renderToolbarBar(c: TiptapContext): ReactNode {
+  const { t, id, canvas, compact, ActionOverflowMenu } = c;
+  const blockButtons = blockButtonsOf(c);
+  // The canvas toolbar never scrolls sideways: the rarer blocks and the HTML view sit in the menu.
+  const menuBlocks =
+    canvas && ActionOverflowMenu !== undefined
+      ? c.blocks.filter((block) => !CANVAS_INLINE_BLOCKS.includes(block))
+      : [];
+  const inlineBlocks = c.blocks.filter((block) => !menuBlocks.includes(block));
+  const overflowItems = overflowItemsOf(c, menuBlocks, blockButtons);
+
+  return (
+    <div
+      className={cn(
+        "flex items-center border-b border-input",
+        canvas
+          ? "min-h-9 flex-nowrap gap-0 overflow-hidden bg-background px-1.5 [&>*]:shrink-0 [&_button]:h-7 [&_button]:gap-1 [&_button]:px-1 [&_button]:text-xs"
+          : "flex-wrap gap-1 p-1",
+      )}
+    >
+      {renderParagraphStyleSelect(c)}
+      <Separator compact={compact || canvas} />
+      {renderMarkButtons(c)}
+      <Separator compact={compact || canvas} />
+      {renderListButtons(c)}
+      <Separator compact={compact || canvas} />
+      {labelledButton(c, {
+        label: t("template-resolver.documentEditor.insertPlaceholder"),
+        icon: <Braces size={16} />,
+        showIcon: true,
+        trailingIcon: canvas ? <ChevronDown size={12} /> : undefined,
+        expanded: c.openPanel === "placeholder",
+        onClick: () => c.togglePanel("placeholder"),
+      })}
+      {inlineBlocks.length > 0 && <Separator compact={compact || canvas} />}
+      {inlineBlocks.map((block) => renderInlineBlock(c, block, blockButtons))}
+      {overflowItems.length > 0 && ActionOverflowMenu !== undefined && (
+        <span className="ml-auto shrink-0">
+          <ActionOverflowMenu
+            items={overflowItems}
+            label={t("template-resolver.documentEditor.more")}
+            testId={`${id}-toolbar-more`}
+          />
+        </span>
+      )}
+    </div>
+  );
+}

package/packages/bundled-features/src/template-resolver/web/editor-handle.ts

@@ -1,4 +1,5 @@
 import type { Editor } from "@tiptap/core";
+import { useEffect, useRef } from "react";
 import { isDocumentReferenceName, isDocumentResourceKey } from "./document-schema.ts";
 import type { DocumentEditorHandle } from "./document-toolbar-blocks.ts";
 
@@ -23,3 +24,20 @@ export function createEditorHandle(editor: Editor): DocumentEditorHandle {
     },
   };
 }
+
+// Reported from the commit, not tiptap's onCreate/onDestroy: tiptap destroys an unmounted editor on
+// a later timer than it announces its replacement, so the old editor's late null would unregister
+// the new handle after a remount. Effect cleanups of the unmounting component run before the new report.
+export function useEditorHandleReport(
+  editor: Editor | null,
+  onEditorReady: ((handle: DocumentEditorHandle | null) => void) | undefined,
+): void {
+  const reportRef = useRef(onEditorReady);
+  reportRef.current = onEditorReady;
+  useEffect(() => {
+    // skip: useEditor creates the instance in a later effect; the next run reports it
+    if (editor === null) return;
+    reportRef.current?.(createEditorHandle(editor));
+    return () => reportRef.current?.(null);
+  }, [editor]);
+}

package/packages/bundled-features/src/template-resolver/web/placeholder-line-editor.tsx

@@ -8,11 +8,11 @@ import { Extension, Node } from "@tiptap/core";
 import { Placeholder, UndoRedo } from "@tiptap/extensions";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { type ReactNode, useMemo, useState } from "react";
+import { type ReactNode, useMemo, useRef, useState } from "react";
 import { createVariableView } from "./document-editor-extensions.ts";
 import { DocumentVariable } from "./document-schema.ts";
 import type { DocumentEditorHandle } from "./document-toolbar-blocks.ts";
-import { createEditorHandle } from "./editor-handle.ts";
+import { useEditorHandleReport } from "./editor-handle.ts";
 import { contentToLine, lineToContent, singleLine } from "./placeholder-text.ts";
 import { useStableByKey } from "./use-stable-by-key.ts";
 
@@ -118,10 +118,9 @@ function LineEditorBody({
       // Rich pastes would bring several paragraphs; only their text is kept.
       transformPastedHTML: (html) => singleLine(html.replace(/<[^>]*>/g, " ")),
     },
-    onCreate: ({ editor: created }) => onEditorReady?.(createEditorHandle(created)),
-    onDestroy: () => onEditorReady?.(null),
     onUpdate: ({ editor: e }) => onChange(contentToLine(e.getJSON().content?.[0]?.content)),
   });
+  useEditorHandleReport(editor, onEditorReady);
 
   return (
     <EditorContent
@@ -165,9 +164,23 @@ export default function PlaceholderLineEditor({
     setEpoch((current) => current + 1);
   }
 
+  const bodyKey = `${epoch}-${readOnly}-${JSON.stringify(stableLabels)}-${stableSystem.join("\n")}`;
+  const liveBodyKey = useRef(bodyKey);
+  liveBodyKey.current = bodyKey;
+
+  // TipTap destroys a replaced editor in a deferred timer that can fire after the successor's
+  // create; its late null must not delete the successor's handle.
+  const reportEditorReady =
+    onEditorReady === undefined
+      ? undefined
+      : (handle: DocumentEditorHandle | null): void => {
+          if (handle === null && liveBodyKey.current !== bodyKey) return;
+          onEditorReady(handle);
+        };
+
   return (
     <LineEditorBody
-      key={`${epoch}-${readOnly}-${JSON.stringify(stableLabels)}-${stableSystem.join("\n")}`}
+      key={bodyKey}
       id={id}
       initialValue={value}
       onChange={(next) => {
@@ -179,7 +192,7 @@ export default function PlaceholderLineEditor({
       readOnly={readOnly}
       flat={flat}
       placeholder={placeholder}
-      onEditorReady={onEditorReady}
+      onEditorReady={reportEditorReady}
       ariaLabel={ariaLabel}
     />
   );