@cosmicdrift/kumiko-renderer-web 0.193.1 → 0.195.0

package/src/app/__tests__/merge-content-editors.test.ts

@@ -19,7 +19,7 @@ describe("mergeContentEditors", () => {
     expect(merged["rich"]).toBe(richEditor);
   });
 
-  test("Key-Kollision → warnt + last-wins gewinnt", () => {
+  test("key collision → warns + last-wins applies", () => {
     const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
     const first = editor();
     const second = editor();
@@ -37,7 +37,7 @@ describe("mergeContentEditors", () => {
     warnSpy.mockRestore();
   });
 
-  test("clientFeatures ohne contentEditors werden übersprungen", () => {
+  test("clientFeatures without contentEditors are skipped", () => {
     const features: ClientFeatureDefinition[] = [{ name: "a" }];
     expect(mergeContentEditors(features)).toEqual({});
   });

package/src/app/__tests__/plain-content-editor.test.tsx

@@ -1,4 +1,5 @@
 import { describe, expect, test } from "bun:test";
+import { CONTENT_EDITOR_ELEMENT_ID } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useState } from "react";
 import { fireEvent, render, screen } from "../../__tests__/test-utils";
 import { PlainContentEditor } from "../plain-content-editor";
@@ -6,21 +7,41 @@ import { PlainContentEditor } from "../plain-content-editor";
 function Controlled({ initial }: { readonly initial: string }): ReactNode {
   const [value, setValue] = useState(initial);
   return (
-    <PlainContentEditor value={value} onChange={setValue} variables={["name"]} readOnly={false} />
+    <PlainContentEditor
+      id={CONTENT_EDITOR_ELEMENT_ID}
+      value={value}
+      onChange={setValue}
+      variables={["name"]}
+      readOnly={false}
+    />
   );
 }
 
 describe("PlainContentEditor", () => {
   test("renders the textarea plus one chip per variable", () => {
     render(
-      <PlainContentEditor value="" onChange={() => {}} variables={["name"]} readOnly={false} />,
+      <PlainContentEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value=""
+        onChange={() => {}}
+        variables={["name"]}
+        readOnly={false}
+      />,
     );
     expect(screen.getByRole("textbox")).toBeTruthy();
     expect(screen.getByText("{{name}}")).toBeTruthy();
   });
 
   test("no variables → no chips", () => {
-    render(<PlainContentEditor value="" onChange={() => {}} variables={[]} readOnly={false} />);
+    render(
+      <PlainContentEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value=""
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
+    );
     expect(screen.queryAllByRole("button")).toHaveLength(0);
   });
 
@@ -32,6 +53,10 @@ describe("PlainContentEditor", () => {
     textarea.setSelectionRange(6, 6);
     fireEvent.click(screen.getByText("{{name}}"));
     expect(textarea.value).toBe("Hello {{name}} world");
+    // Caret-restore effect: focus + selection must land right after the
+    // inserted placeholder, not wherever the DOM happened to leave it.
+    expect(textarea.selectionStart).toBe(14);
+    expect(textarea.selectionEnd).toBe(14);
   });
 
   test("chip click replaces a selection instead of inserting alongside it", () => {

package/src/app/__tests__/rich-content-editor.test.tsx

@@ -7,6 +7,7 @@ describe("RichContentEditor", () => {
   test("falls back to the plain textarea while the tiptap chunk loads, then swaps in the editor", async () => {
     render(
       <RichContentEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
         value="<p>hello</p>"
         onChange={() => {}}
         variables={[]}
@@ -15,7 +16,10 @@ describe("RichContentEditor", () => {
     );
     // The textarea id proves #1794's "never an empty panel" fallback is the
     // Suspense boundary — a null fallback would leave nothing to find here.
-    expect(document.getElementById(CONTENT_EDITOR_ELEMENT_ID)).not.toBeNull();
-    expect(await screen.findByText("hello")).toBeTruthy();
+    // TiptapEditor puts the same id on its contenteditable, so asserting
+    // presence alone wouldn't distinguish the two; assert the tag instead.
+    expect(document.getElementById(CONTENT_EDITOR_ELEMENT_ID)?.tagName).toBe("TEXTAREA");
+    const editable = await screen.findByText("hello");
+    expect(editable.closest('[contenteditable="true"]')).not.toBeNull();
   });
 });

package/src/app/__tests__/tiptap-editor.test.tsx

@@ -6,7 +6,33 @@ import TiptapEditor from "../tiptap-editor";
 
 function Controlled({ initial }: { readonly initial: string }): ReactNode {
   const [value, setValue] = useState(initial);
-  return <TiptapEditor value={value} onChange={setValue} variables={["name"]} readOnly={false} />;
+  return (
+    <TiptapEditor
+      id={CONTENT_EDITOR_ELEMENT_ID}
+      value={value}
+      onChange={setValue}
+      variables={["name"]}
+      readOnly={false}
+    />
+  );
+}
+
+function ReadOnlyToggle({ initial }: { readonly initial: string }): ReactNode {
+  const [readOnly, setReadOnly] = useState(false);
+  return (
+    <div>
+      <button type="button" onClick={() => setReadOnly((r) => !r)}>
+        toggle readOnly
+      </button>
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value={initial}
+        onChange={() => {}}
+        variables={[]}
+        readOnly={readOnly}
+      />
+    </div>
+  );
 }
 
 // Mirrors the real caller: TextBlockEditor mounts with value="" and only
@@ -20,7 +46,13 @@ function LateValue({ loaded }: { readonly loaded: string }): ReactNode {
       <button type="button" onClick={() => setValue(loaded)}>
         load
       </button>
-      <TiptapEditor value={value} onChange={setValue} variables={[]} readOnly={false} />
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value={value}
+        onChange={setValue}
+        variables={[]}
+        readOnly={false}
+      />
     </div>
   );
 }
@@ -28,22 +60,40 @@ function LateValue({ loaded }: { readonly loaded: string }): ReactNode {
 describe("TiptapEditor — jsdom smoke", () => {
   test("mounts a contenteditable surface for the given HTML", async () => {
     render(
-      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="<p>hello</p>"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
     );
     const editable = await screen.findByText("hello");
     expect(editable.closest('[contenteditable="true"]')).not.toBeNull();
   });
 
-  test("the contenteditable surface carries CONTENT_EDITOR_ELEMENT_ID so the wrapping Field's label stays associated", async () => {
+  test("the editor's id prop lands on the contenteditable surface so the wrapping Field's label stays associated", async () => {
     render(
-      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="<p>hello</p>"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
     );
     expect(document.getElementById(CONTENT_EDITOR_ELEMENT_ID)).not.toBeNull();
   });
 
   test("no variables → no chip bar", async () => {
     render(
-      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="<p>hello</p>"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
     );
     await screen.findByText("hello");
     expect(screen.queryAllByRole("button", { name: "Bold" })).toHaveLength(1);
@@ -52,7 +102,13 @@ describe("TiptapEditor — jsdom smoke", () => {
 
   test("every toolbar action resolves by its accessible name", async () => {
     render(
-      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="<p>hello</p>"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
     );
     await screen.findByText("hello");
     for (const name of [
@@ -91,4 +147,43 @@ describe("TiptapEditor — jsdom smoke", () => {
     fireEvent.click(screen.getByText("{{name}}"));
     expect(await screen.findByText("{{name}}", { selector: "p" })).toBeTruthy();
   });
+
+  test("toggling readOnly flips the surface's contenteditable and disables the toolbar", async () => {
+    // @tiptap/react re-applies `editable` from options on every options
+    // refresh, overriding what `editable: !readOnly` set at creation — so
+    // this only stays correct across a readOnly prop change via the
+    // `editor.setEditable` effect. A test that only mounts with a fixed
+    // readOnly value can't catch that effect being removed.
+    render(<ReadOnlyToggle initial="<p>hello</p>" />);
+    const editable = await screen.findByText("hello");
+    expect(editable.closest('[contenteditable="true"]')).not.toBeNull();
+    expect((screen.getByRole("button", { name: "Bold" }) as HTMLButtonElement).disabled).toBe(
+      false,
+    );
+
+    fireEvent.click(screen.getByText("toggle readOnly"));
+
+    expect(editable.closest('[contenteditable="false"]')).not.toBeNull();
+    expect((screen.getByRole("button", { name: "Bold" }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  // Documents the ponytail-noted ceiling on useEditor: markup StarterKit's
+  // schema doesn't model (tables, raw divs/spans, style attrs) is dropped on
+  // first parse, invisible until the first onChange fires. Not a bug to fix
+  // here — a fixture for whoever hits the ceiling next.
+  test("markup outside StarterKit's schema (a <table>) is dropped on the first onChange", async () => {
+    const values: string[] = [];
+    render(
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="<table><tbody><tr><td>cell</td></tr></tbody></table><p>hello</p>"
+        onChange={(html) => values.push(html)}
+        variables={[]}
+        readOnly={false}
+      />,
+    );
+    const editable = (await screen.findByText("hello")).closest('[contenteditable="true"]');
+    fireEvent.click(screen.getByRole("button", { name: "Bold" }));
+    expect(editable?.innerHTML).not.toContain("<table");
+  });
 });

package/src/app/client-plugin.tsx

@@ -90,12 +90,12 @@ export type ClientFeatureDefinition = {
     collections: readonly QualifiedContentCollection[],
   ) => CollectionNavProviders;
 
-  /** Content-Editor-Components — Map `contentFormat` ("plain" | "rich" | "markdown") →
-   *  React-Component. `r.contentCollection()` declares which format an
+  /** Content editor components — map `contentFormat` ("plain" | "rich" | "markdown") →
+   *  React component. `r.contentCollection()` declares which format an
    *  editor edits; the collection's editor UI (template-resolver's
    *  TextBlockEditor et al.) looks the component up here and falls back to
    *  a plain textarea when no clientFeature registered one for that
-   *  format. Same Last-Wins-Semantik wie columnRenderers. Public component
+   *  format. Same last-wins semantics as columnRenderers. Public component
    *  contract: `{ value, onChange, variables, readOnly }`. */
   readonly contentEditors?: Readonly<Record<string, ContentEditorComponent>>;
 

package/src/app/create-app.tsx

@@ -9,7 +9,6 @@ import type {
 import {
   AppFeaturesProvider,
   type AppSchema,
-  type ColumnRendererComponent,
   ColumnRenderersProvider,
   type ContentEditorComponent,
   ContentEditorsProvider,
@@ -18,7 +17,6 @@ import {
   DispatcherProvider,
   type DraftStorage,
   DraftStorageProvider,
-  type ExtensionSectionComponent,
   ExtensionSectionsProvider,
   type FeatureSchema,
   KumikoScreen,
@@ -99,7 +97,7 @@ export function buildNavProviderMaps(
     for (const [navId, provider] of Object.entries(f.navProviders ?? {})) {
       const qn = qualifyNavProviderKey(f.name, navId);
       if (navProviders.has(qn) && !derivedQns.delete(qn)) {
-        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
+        // biome-ignore lint/suspicious/noConsole: dev warning for schema conflicts
         console.warn(
           `[kumiko] navProvider for "${qn}" defined by multiple clientFeatures — last wins.`,
         );
@@ -228,26 +226,39 @@ export function firstOpenScreenQn(features: readonly FeatureSchema[]): string |
   return undefined;
 }
 
-// Merges the content-editor map — same last-wins semantics as
-// columnRenderers. No entry for a contentFormat → useContentEditor falls
-// back to the textarea on its own, no warning needed.
-export function mergeContentEditors(
+// Last-wins merge for a clientFeature-contributed map (contentEditors,
+// columnRenderers, extensionSectionComponents, ...): later features in
+// `clientFeatures` override earlier ones on key collision, logging once
+// per collision so an accidental override isn't silent.
+function mergeByKey<T>(
   clientFeatures: readonly ClientFeatureDefinition[],
-): Record<string, ContentEditorComponent> {
-  const contentEditors: Record<string, ContentEditorComponent> = {};
+  pick: (f: ClientFeatureDefinition) => Record<string, T> | undefined,
+  label: string,
+): Record<string, T> {
+  const merged: Record<string, T> = {};
   for (const f of clientFeatures) {
-    if (f.contentEditors === undefined) continue;
-    for (const [key, value] of Object.entries(f.contentEditors)) {
-      if (contentEditors[key] !== undefined) {
-        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
+    const entries = pick(f);
+    if (entries === undefined) continue;
+    for (const [key, value] of Object.entries(entries)) {
+      if (merged[key] !== undefined) {
+        // biome-ignore lint/suspicious/noConsole: dev warning for schema conflicts
         console.warn(
-          `[kumiko] contentEditor "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
+          `[kumiko] ${label} "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
         );
       }
-      contentEditors[key] = value;
+      merged[key] = value;
     }
   }
-  return contentEditors;
+  return merged;
+}
+
+// Merges the content-editor map — same last-wins semantics as
+// columnRenderers. No entry for a contentFormat → useContentEditor falls
+// back to the textarea on its own, no warning needed.
+export function mergeContentEditors(
+  clientFeatures: readonly ClientFeatureDefinition[],
+): Record<string, ContentEditorComponent> {
+  return mergeByKey(clientFeatures, (f) => f.contentEditors, "contentEditor");
 }
 
 export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonly root: Root } {
@@ -321,39 +332,19 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
   for (const f of clientFeatures) {
     if (f.components !== undefined) Object.assign(customScreens, f.components);
   }
-  // Column-Renderer-Map mergen — gleiche Last-Wins-Semantik wie bei
-  // customScreens. Doppelte Keys über Features sind selten gewollt;
-  // wir warnen einmalig pro Kollision damit das nicht stillschweigend
-  // den Renderer einer Library überschreibt.
-  const columnRenderers: Record<string, ColumnRendererComponent> = {};
-  for (const f of clientFeatures) {
-    if (f.columnRenderers === undefined) continue;
-    for (const [key, value] of Object.entries(f.columnRenderers)) {
-      if (columnRenderers[key] !== undefined) {
-        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
-        console.warn(
-          `[kumiko] columnRenderer "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
-        );
-      }
-      columnRenderers[key] = value;
-    }
-  }
-  // Extension-Section-Components — same Last-Wins + Warn-Semantik wie
-  // columnRenderers. Mountet sich am ExtensionSectionsProvider; RenderEdit
-  // löst die Component aus dem `__component`-Marker der section.
-  const extensionSectionComponents: Record<string, ExtensionSectionComponent> = {};
-  for (const f of clientFeatures) {
-    if (f.extensionSectionComponents === undefined) continue;
-    for (const [key, value] of Object.entries(f.extensionSectionComponents)) {
-      if (extensionSectionComponents[key] !== undefined) {
-        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
-        console.warn(
-          `[kumiko] extensionSectionComponent "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
-        );
-      }
-      extensionSectionComponents[key] = value;
-    }
-  }
+  // Column-renderer map, same last-wins semantics as customScreens —
+  // duplicate keys across features are rarely intentional, so a
+  // collision logs once instead of silently overriding a library's
+  // renderer.
+  const columnRenderers = mergeByKey(clientFeatures, (f) => f.columnRenderers, "columnRenderer");
+  // Extension-section components — same last-wins + warn semantics as
+  // columnRenderers. Mounted on ExtensionSectionsProvider; RenderEdit
+  // resolves the component from the section's `__component` marker.
+  const extensionSectionComponents = mergeByKey(
+    clientFeatures,
+    (f) => f.extensionSectionComponents,
+    "extensionSectionComponent",
+  );
 
   const contentEditors = mergeContentEditors(clientFeatures);
 

package/src/app/plain-content-editor.tsx

@@ -5,14 +5,13 @@
 // variable-chip bar underneath. A chip click inserts `{{name}}` at the caret
 // instead of appending to the end.
 //
-// ponytail: looks the textarea up by CONTENT_EDITOR_ELEMENT_ID rather than a
-// ref threaded through the primitives Input contract — that contract is
-// cross-platform (RN has no DOM node), this file is `@runtime client`-only
-// and CONTENT_EDITOR_ELEMENT_ID exists exactly as this DOM hook. Upgrade to a
-// forwarded ref if a screen ever needs two plain editors mounted at once.
+// ponytail: looks the textarea up via document.getElementById(id) rather
+// than a ref threaded through the primitives Input contract — that contract
+// is cross-platform (RN has no DOM node), this file is `@runtime client`-
+// only. `id` is per-instance (caller passes a stable unique id via
+// ContentEditorProps.id), so two plain editors mounted at once don't collide.
 
 import {
-  CONTENT_EDITOR_ELEMENT_ID,
   type ContentEditorProps,
   TextareaContentEditor,
   VariableChips,
@@ -21,6 +20,7 @@ import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 
 export function PlainContentEditor({
+  id,
   value,
   onChange,
   variables,
@@ -31,7 +31,7 @@ export function PlainContentEditor({
   // biome-ignore lint/correctness/useExhaustiveDependencies: keyed on value only — must fire once per committed insert, not on every caret write
   useEffect(() => {
     if (caret === null) return;
-    const el = document.getElementById(CONTENT_EDITOR_ELEMENT_ID);
+    const el = document.getElementById(id);
     if (el instanceof HTMLTextAreaElement) {
       el.focus();
       el.setSelectionRange(caret, caret);
@@ -40,7 +40,7 @@ export function PlainContentEditor({
   }, [value]);
 
   const insertAtCaret = (name: string): void => {
-    const el = document.getElementById(CONTENT_EDITOR_ELEMENT_ID);
+    const el = document.getElementById(id);
     const placeholder = `{{${name}}}`;
     if (!(el instanceof HTMLTextAreaElement)) {
       onChange(value + placeholder);
@@ -55,6 +55,7 @@ export function PlainContentEditor({
   return (
     <div>
       <TextareaContentEditor
+        id={id}
         value={value}
         onChange={onChange}
         variables={variables}

package/src/app/tiptap-editor.tsx

@@ -7,14 +7,13 @@
 // link button, so no URL-prompt UI to build or test.
 
 import {
-  CONTENT_EDITOR_ELEMENT_ID,
   type ContentEditorProps,
   TextareaContentEditor,
   usePrimitives,
   useTranslation,
   VariableChips,
 } from "@cosmicdrift/kumiko-renderer";
-import { EditorContent, useEditor } from "@tiptap/react";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import {
   Bold as BoldIcon,
@@ -62,12 +61,19 @@ function Toolbar({
 }
 
 export default function TiptapEditor({
+  id,
   value,
   onChange,
   variables,
   readOnly,
 }: ContentEditorProps): ReactNode {
   const t = useTranslation();
+  // ponytail: rich = StarterKit's schema (bold/italic/lists/headings/links).
+  // Anything the schema doesn't model — <table>, <div>/<span>, style attrs,
+  // <img>, classes — is dropped on first parse (setContent below, and the
+  // initial `content: value` here). Upgrade if that ceiling is hit: add the
+  // matching tiptap extensions, or a raw-HTML mode for markup StarterKit
+  // can't represent.
   const editor = useEditor({
     extensions: [StarterKit],
     content: value,
@@ -76,13 +82,34 @@ export default function TiptapEditor({
     // this component before committing it; immediate render would create
     // an editor instance during that throwaway pass.
     immediatelyRender: false,
-    // Same id the textarea fallback uses — the Field wrapping the editor
-    // (TextBlockEditor) associates its label via this id; the editor
-    // contract has no `id` prop of its own, see content-editors.tsx.
-    editorProps: { attributes: { id: CONTENT_EDITOR_ELEMENT_ID } },
+    // Caller-supplied id — the Field wrapping the editor (TextBlockEditor)
+    // associates its label via this id, see ContentEditorProps.id in
+    // content-editors.tsx.
+    editorProps: { attributes: { id } },
     onUpdate: ({ editor: e }) => onChange(e.getHTML()),
   });
 
+  // `useEditor` alone leaves `editor.isActive(...)` reads in the render body
+  // frozen on the last prop-driven render — @tiptap/react v3 defaults
+  // `shouldRerenderOnTransaction` to false, so a selection-only change (e.g.
+  // moving the cursor into bold text without typing) never triggers a
+  // re-render on its own. `useEditorState` subscribes to transactions itself
+  // and only re-renders when the selected slice of state actually changes.
+  const activeState = useEditorState({
+    editor,
+    selector: ({ editor: e }) =>
+      e === null
+        ? null
+        : {
+            bold: e.isActive("bold"),
+            italic: e.isActive("italic"),
+            heading1: e.isActive("heading", { level: 1 }),
+            heading2: e.isActive("heading", { level: 2 }),
+            bulletList: e.isActive("bulletList"),
+            orderedList: e.isActive("orderedList"),
+          },
+  });
+
   // TextBlockEditor loads the entry's content asynchronously (by-slug query
   // resolves after mount), so `value` arrives after useEditor already read
   // its initial (empty) content once. Sync it in — guarded against
@@ -100,6 +127,7 @@ export default function TiptapEditor({
   if (!editor)
     return (
       <TextareaContentEditor
+        id={id}
         value={value}
         onChange={onChange}
         variables={variables}
@@ -111,37 +139,37 @@ export default function TiptapEditor({
     {
       label: t("kumiko.contentEditor.bold"),
       icon: BoldIcon,
-      isActive: editor.isActive("bold"),
+      isActive: activeState?.bold ?? false,
       onClick: () => editor.chain().focus().toggleBold().run(),
     },
     {
       label: t("kumiko.contentEditor.italic"),
       icon: ItalicIcon,
-      isActive: editor.isActive("italic"),
+      isActive: activeState?.italic ?? false,
       onClick: () => editor.chain().focus().toggleItalic().run(),
     },
     {
       label: t("kumiko.contentEditor.heading1"),
       icon: Heading1,
-      isActive: editor.isActive("heading", { level: 1 }),
+      isActive: activeState?.heading1 ?? false,
       onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
     },
     {
       label: t("kumiko.contentEditor.heading2"),
       icon: Heading2,
-      isActive: editor.isActive("heading", { level: 2 }),
+      isActive: activeState?.heading2 ?? false,
       onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
     },
     {
       label: t("kumiko.contentEditor.bulletList"),
       icon: List,
-      isActive: editor.isActive("bulletList"),
+      isActive: activeState?.bulletList ?? false,
       onClick: () => editor.chain().focus().toggleBulletList().run(),
     },
     {
       label: t("kumiko.contentEditor.orderedList"),
       icon: ListOrdered,
-      isActive: editor.isActive("orderedList"),
+      isActive: activeState?.orderedList ?? false,
       onClick: () => editor.chain().focus().toggleOrderedList().run(),
     },
   ];

package/src/index.ts

@@ -153,6 +153,7 @@ export {
   DropdownMenuTrigger,
 } from "./primitives/dropdown-menu";
 export { PageSection, Stack } from "./primitives/layout";
+export { formatMoney } from "./primitives/money-input";
 export type { ToastOptions, ToastProviderProps, ToastVariant } from "./primitives/toast";
 export { ToastProvider, useToast } from "./primitives/toast";
 export type { CreateEventSourceLiveEventsOptions } from "./sse/live-events";