@jant/core 0.6.7 → 0.6.9

package/src/client/components/jant-compose-editor.ts

@@ -30,6 +30,7 @@ import type {
   ComposeEditorSelection,
   ComposeFullscreenOpenDetail,
 } from "./compose-types.js";
+import type { ComposeConvertFields } from "./compose-format-convert.js";
 import {
   UPLOAD_ACCEPT,
   getMediaCategory,
@@ -178,6 +179,7 @@ export class JantComposeEditor extends LitElement {
     uploadMaxFileSize: { type: Number },
     threadItem: { type: Boolean, attribute: "thread-item" },
     removable: { type: Boolean },
+    inlineFormat: { type: Boolean, attribute: "inline-format" },
     slashCommandDiscovered: { type: Boolean },
     _title: { state: true },
     _bodyJson: { state: true },
@@ -203,6 +205,7 @@ export class JantComposeEditor extends LitElement {
   declare uploadMaxFileSize: number;
   declare threadItem: boolean;
   declare removable: boolean;
+  declare inlineFormat: boolean;
   declare slashCommandDiscovered: boolean;
   declare _title: string;
   declare _bodyJson: JSONContent | null;
@@ -234,6 +237,14 @@ export class JantComposeEditor extends LitElement {
   private _scrollBufferApplied = false;
   private _filePickerCleanup: (() => void) | null = null;
   private _suppressAttachedTextOpenUntil = 0;
+  /**
+   * Set by {@link applyConvertedFields} so the format-conversion content writes
+   * don't emit a content-changed event (which would schedule a draft autosave).
+   * A bare format switch shouldn't persist a local draft — see `_switchFormat`.
+   * Always consumed: a switch also changes `format`, so `updated()` is guaranteed
+   * to run this cycle.
+   */
+  private _suppressContentChangedOnce = false;
   #inlineImageUploadGeneration = 0;
   #inlineImageUploadPromises = new Set<Promise<void>>();
   #sortable: { destroy(): void } | null = null;
@@ -247,9 +258,10 @@ export class JantComposeEditor extends LitElement {
     super();
     this.format = "note";
     this.labels = {} as ComposeLabels;
-    this.uploadMaxFileSize = 500;
+    this.uploadMaxFileSize = 1024;
     this.threadItem = false;
     this.removable = false;
+    this.inlineFormat = false;
     this.slashCommandDiscovered = false;
     this._title = "";
     this._bodyJson = null;
@@ -903,13 +915,19 @@ export class JantComposeEditor extends LitElement {
       }
     }
 
-    // Notify parent dialog of content changes for draft auto-save
-    for (const key of changed.keys()) {
-      if (JantComposeEditor._CONTENT_PROPS.has(key as string)) {
-        this.dispatchEvent(
-          new Event("jant:compose-content-changed", { bubbles: true }),
-        );
-        break;
+    // Notify parent dialog of content changes for draft auto-save. A format
+    // conversion writes content fields too, but it's not a user edit, so skip
+    // the notification once when asked.
+    if (this._suppressContentChangedOnce) {
+      this._suppressContentChangedOnce = false;
+    } else {
+      for (const key of changed.keys()) {
+        if (JantComposeEditor._CONTENT_PROPS.has(key as string)) {
+          this.dispatchEvent(
+            new Event("jant:compose-content-changed", { bubbles: true }),
+          );
+          break;
+        }
       }
     }
   }
@@ -924,6 +942,39 @@ export class JantComposeEditor extends LitElement {
     };
   }
 
+  /**
+   * Raw field values for format conversion. Unlike {@link getData}, this returns
+   * every field regardless of the current format (so a hidden quote/url survives
+   * a switch) plus the freshest, normalized body.
+   */
+  getConvertibleFields(): ComposeConvertFields {
+    return {
+      title: this._title,
+      url: this._url,
+      quoteText: this._quoteText,
+      quoteAuthor: this._quoteAuthor,
+      showTitle: this._showTitle,
+      bodyJson: this._normalizeDocJson(
+        this._editor?.getJSON() ?? this._bodyJson,
+      ),
+    };
+  }
+
+  /**
+   * Write back fields produced by `convertComposeFormat`. The body is applied via
+   * `_bodyJson` only — the imminent format change recreates the editor from it, so
+   * calling `setContent` here would be redundant.
+   */
+  applyConvertedFields(fields: ComposeConvertFields): void {
+    this._suppressContentChangedOnce = true;
+    this._title = fields.title;
+    this._url = fields.url;
+    this._quoteText = fields.quoteText;
+    this._quoteAuthor = fields.quoteAuthor;
+    this._showTitle = fields.showTitle;
+    this._bodyJson = fields.bodyJson;
+  }
+
   /** Pre-fill all fields for edit mode or draft restore */
   populate(data: {
     format: string;
@@ -2433,7 +2484,7 @@ export class JantComposeEditor extends LitElement {
     `;
   }
 
-  private _renderThreadPostHeader() {
+  private _renderFormatHeader() {
     const formatLabels: Record<ComposeFormat, string> = {
       note: this.labels.note,
       link: this.labels.link,
@@ -2463,7 +2514,7 @@ export class JantComposeEditor extends LitElement {
                 @click=${() => {
                   if (this.format !== f) {
                     this.dispatchEvent(
-                      new CustomEvent("jant:thread-format-change", {
+                      new CustomEvent("jant:format-change", {
                         bubbles: true,
                         detail: { format: f },
                       }),
@@ -2518,7 +2569,9 @@ export class JantComposeEditor extends LitElement {
 
   render() {
     return html`
-      ${this.threadItem ? this._renderThreadPostHeader() : nothing}
+      ${this.threadItem || this.inlineFormat
+        ? this._renderFormatHeader()
+        : nothing}
       <section class="compose-body">
         ${this.format === "note"
           ? this._renderNoteFields()

package/src/client/components/jant-settings-general.ts

@@ -20,6 +20,7 @@ import type {
   SettingsLabels,
   SettingsTimezone,
   SettingsCjkFont,
+  SettingsDashboardLanguage,
 } from "./settings-types.js";
 import { showToast } from "../toast.js";
 import {
@@ -37,6 +38,7 @@ export class JantSettingsGeneral extends LitElement {
       type: String,
       attribute: "sitedescription-fallback",
     },
+    dashboardLanguages: { type: Array, attribute: "dashboard-languages" },
     demoMode: { type: Boolean, attribute: "demo-mode" },
     mainFeedUrl: { type: String, attribute: "main-feed-url" },
     latestFeedUrl: { type: String, attribute: "latest-feed-url" },
@@ -52,6 +54,7 @@ export class JantSettingsGeneral extends LitElement {
 
     // Language, CJK & time group
     _siteLanguage: { state: true },
+    _dashboardLanguage: { state: true },
     _localeOpen: { state: true },
     _localeQuery: { state: true },
     _cjkSerifFont: { state: true },
@@ -80,6 +83,7 @@ export class JantSettingsGeneral extends LitElement {
   declare labels: SettingsLabels;
   declare timezones: SettingsTimezone[];
   declare cjkFonts: SettingsCjkFont[];
+  declare dashboardLanguages: SettingsDashboardLanguage[];
   declare siteNameFallback: string;
   declare siteDescriptionFallback: string;
   declare demoMode: boolean;
@@ -101,6 +105,8 @@ export class JantSettingsGeneral extends LitElement {
 
   // Language, CJK & time
   declare _siteLanguage: string;
+  /** Admin dashboard UI locale (one of the translated catalog locales). */
+  declare _dashboardLanguage: string;
   /** Whether the locale combobox dropdown is currently open. */
   declare _localeOpen: boolean;
   /** Search query inside the locale combobox. */
@@ -109,6 +115,7 @@ export class JantSettingsGeneral extends LitElement {
   declare _timeZone: string;
   declare _origLocale: {
     siteLanguage: string;
+    dashboardLanguage: string;
     cjkSerifFont: string;
     timeZone: string;
   };
@@ -145,6 +152,7 @@ export class JantSettingsGeneral extends LitElement {
     this.labels = {} as SettingsLabels;
     this.timezones = [];
     this.cjkFonts = [];
+    this.dashboardLanguages = [];
     this.siteNameFallback = "";
     this.siteDescriptionFallback = "";
     this.demoMode = false;
@@ -164,12 +172,14 @@ export class JantSettingsGeneral extends LitElement {
     this._siteLoading = false;
 
     this._siteLanguage = "en";
+    this._dashboardLanguage = "en";
     this._localeOpen = false;
     this._localeQuery = "";
     this._cjkSerifFont = "off";
     this._timeZone = "UTC";
     this._origLocale = {
       siteLanguage: "en",
+      dashboardLanguage: "en",
       cjkSerifFont: "off",
       timeZone: "UTC",
     };
@@ -213,10 +223,12 @@ export class JantSettingsGeneral extends LitElement {
     this._siteFooter = data.siteFooter;
 
     this._siteLanguage = data.siteLanguage;
+    this._dashboardLanguage = data.dashboardLanguage;
     this._cjkSerifFont = data.cjkSerifFont;
     this._timeZone = data.timeZone;
     this._origLocale = {
       siteLanguage: data.siteLanguage,
+      dashboardLanguage: data.dashboardLanguage,
       cjkSerifFont: data.cjkSerifFont,
       timeZone: data.timeZone,
     };
@@ -255,6 +267,7 @@ export class JantSettingsGeneral extends LitElement {
     } else if (section === "language-time") {
       this._origLocale = {
         siteLanguage: this._siteLanguage,
+        dashboardLanguage: this._dashboardLanguage,
         cjkSerifFont: this._cjkSerifFont,
         timeZone: this._timeZone,
       };
@@ -381,6 +394,7 @@ export class JantSettingsGeneral extends LitElement {
   private _syncLocaleDirty() {
     this._localeDirty =
       this._siteLanguage !== this._origLocale.siteLanguage ||
+      this._dashboardLanguage !== this._origLocale.dashboardLanguage ||
       this._cjkSerifFont !== this._origLocale.cjkSerifFont ||
       this._timeZone !== this._origLocale.timeZone;
   }
@@ -395,6 +409,7 @@ export class JantSettingsGeneral extends LitElement {
           endpoint: "/settings/general/language-time",
           data: {
             siteLanguage: this._siteLanguage,
+            dashboardLanguage: this._dashboardLanguage,
             cjkSerifFont: this._cjkSerifFont,
             timeZone: this._timeZone,
           },
@@ -465,28 +480,22 @@ export class JantSettingsGeneral extends LitElement {
     const noMatches = this.labels.siteLanguageNoMatches || "No matches.";
 
     return html`
-      <div class="relative" data-locale-picker>
+      <div class="relative w-fit max-w-full" data-locale-picker>
         <button
           type="button"
-          class="input flex w-full items-center justify-between text-left"
+          class="flex h-9 w-full cursor-pointer items-center rounded-md border border-input bg-transparent bg-[image:var(--chevron-down-icon-50)] bg-position-[center_right_0.75rem] bg-size-[1rem] bg-no-repeat py-2 pl-3 pr-9 text-left text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50"
           aria-expanded=${this._localeOpen ? "true" : "false"}
           aria-haspopup="listbox"
           aria-labelledby="site-language-label"
           @click=${this._toggleLocalePicker}
         >
-          <span class="truncate">
-            ${current.native}
-            <span class="ml-2 text-xs text-muted-foreground">
-              ${current.tag} · ${Math.round(current.coverage * 100)}% translated
-            </span>
-          </span>
-          <span class="ml-2 text-muted-foreground" aria-hidden="true">▾</span>
+          <span class="min-w-0 truncate">${current.native}</span>
         </button>
 
         ${this._localeOpen
           ? html`
               <div
-                class="absolute left-0 right-0 top-full z-10 mt-1 max-h-72 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md"
+                class="absolute left-0 top-full z-10 mt-1 w-80 min-w-full max-w-[calc(100vw-2rem)] max-h-72 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md"
               >
                 <div class="border-b p-2">
                   <input
@@ -518,21 +527,16 @@ export class JantSettingsGeneral extends LitElement {
                               ? "true"
                               : "false"}
                             class=${[
-                              "flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-accent",
+                              "flex w-full flex-col px-3 py-2 text-left text-sm hover:bg-accent",
                               entry.tag === this._siteLanguage
                                 ? "bg-accent/60"
                                 : "",
                             ].join(" ")}
                             @click=${() => this._selectLocale(entry.tag)}
                           >
-                            <span class="flex flex-col">
-                              <span>${entry.native}</span>
-                              <span class="text-xs text-muted-foreground">
-                                ${entry.tag} · ${entry.english}
-                              </span>
-                            </span>
+                            <span>${entry.native}</span>
                             <span class="text-xs text-muted-foreground">
-                              ${Math.round(entry.coverage * 100)}% translated
+                              ${entry.english}
                             </span>
                           </button>
                         `,
@@ -819,6 +823,40 @@ export class JantSettingsGeneral extends LitElement {
             <p class="text-sm text-muted-foreground mt-1">
               ${this.labels.siteLanguageHelp}
             </p>
+            <p class="text-sm text-muted-foreground mt-1">
+              ${this.labels.contentLanguagePreview}
+              <code class="rounded bg-muted px-1.5 py-0.5 text-xs"
+                >${`<html lang="${this._siteLanguage || "en"}">`}</code
+              >
+            </p>
+          </div>
+
+          <div class="field">
+            <label id="dashboard-language-label" class="label"
+              >${this.labels.dashboardLanguage}</label
+            >
+            <select
+              class="select"
+              aria-labelledby="dashboard-language-label"
+              @change=${(e: Event) => {
+                this._dashboardLanguage = (e.target as HTMLSelectElement).value;
+                this._syncLocaleDirty();
+              }}
+            >
+              ${this.dashboardLanguages.map(
+                (lang) => html`
+                  <option
+                    value=${lang.value}
+                    ?selected=${this._dashboardLanguage === lang.value}
+                  >
+                    ${lang.label}
+                  </option>
+                `,
+              )}
+            </select>
+            <p class="text-sm text-muted-foreground mt-1">
+              ${this.labels.dashboardLanguageHelp}
+            </p>
           </div>
 
           <div class="field">

package/src/client/components/settings-types.ts

@@ -47,6 +47,10 @@ export interface SettingsLabels {
   siteLanguageSearchPlaceholder: string;
   /** Empty-state message when the search filters out every option. */
   siteLanguageNoMatches: string;
+  /** Lead text before the live `<html lang>` preview. */
+  contentLanguagePreview: string;
+  dashboardLanguage: string;
+  dashboardLanguageHelp: string;
   cjkFont: string;
   cjkFontHelp: string;
   timeZone: string;
@@ -75,10 +79,17 @@ export interface SettingsCjkFont {
   label: string;
 }
 
+/** Dashboard UI language option for the select dropdown */
+export interface SettingsDashboardLanguage {
+  value: string;
+  label: string;
+}
+
 export interface SettingsInitialData {
   siteName: string;
   siteDescription: string;
   siteLanguage: string;
+  dashboardLanguage: string;
   cjkSerifFont: string;
   mainRssFeed: string;
   timeZone: string;

package/src/client/compose-bridge.ts

@@ -26,6 +26,7 @@ import {
   queueToastForNextPage,
 } from "./toast.js";
 import { openReplyForArticle } from "./compose-launch.js";
+import { hydratePartial } from "./hydrate-partial.js";
 import { getJsonString, readJsonObject } from "./json.js";
 import { uploadViaSession } from "./upload-session.js";
 import { publicPath } from "./runtime-paths.js";
@@ -75,6 +76,10 @@ async function refreshTimelineThreadView(
     if (!html) return false;
 
     content.innerHTML = html;
+    // Swapped-in markup carries interactions whose per-element setup only runs
+    // on DOMContentLoaded (thread "Show more" toggle, feed video autoplay, audio
+    // waveform); re-initialize them or they stay inert until a full reload.
+    hydratePartial(content);
     return true;
   } catch {
     return false;
@@ -97,6 +102,7 @@ async function refreshPostCardView(postId: string): Promise<boolean> {
       );
       if (!content) return false;
       content.innerHTML = html;
+      hydratePartial(content);
       return true;
     }
 
@@ -106,6 +112,11 @@ async function refreshPostCardView(postId: string): Promise<boolean> {
     if (!article) return false;
 
     article.outerHTML = html;
+    // outerHTML detaches `article`; re-query the replacement to hydrate it.
+    const nextArticle = document.querySelector<HTMLElement>(
+      `article[data-post-id="${postId}"]`,
+    );
+    if (nextArticle) hydratePartial(nextArticle);
     return true;
   } catch {
     return false;
@@ -125,6 +136,12 @@ async function refreshPostPageView(postId: string): Promise<boolean> {
     if (!html) return false;
 
     container.outerHTML = html;
+    // outerHTML detaches `container`; re-query the replacement to hydrate it
+    // (see refreshTimelineThreadView).
+    const next = document.querySelector<HTMLElement>(
+      `[data-post-view][data-post-view-id="${postId}"]`,
+    );
+    if (next) hydratePartial(next);
     return true;
   } catch {
     return false;

package/src/client/feed-video-player.ts

@@ -337,7 +337,7 @@ function handleMuteToggle(event: Event): void {
 }
 
 export function initFeedVideoPlayer(
-  root: globalThis.ParentNode = document,
+  root: globalThis.Document | globalThis.Element = document,
 ): void {
   const videos = root.querySelectorAll<HTMLVideoElement>(
     "[data-feed-short-video]",

package/src/client/hydrate-partial.ts

@@ -0,0 +1,25 @@
+/**
+ * Re-initialize interactive behaviors inside a server-rendered fragment that
+ * was swapped into the DOM after page load — e.g. compose-bridge replacing a
+ * timeline item or post view after a reply or edit.
+ *
+ * Most interactions survive a swap on their own: note-expand and the audio
+ * transport use document-level event delegation, and media-scroll-hint runs its
+ * own MutationObserver. The ones gathered here need per-element setup
+ * (IntersectionObserver / ResizeObserver / canvas drawing) that otherwise only
+ * runs once on DOMContentLoaded, so a freshly swapped fragment would stay inert
+ * until a full reload. Each initializer is idempotent, so calling this on a root
+ * that already contains initialized nodes is safe.
+ */
+
+import { setupThreadContexts } from "./thread-context.js";
+import { initFeedVideoPlayer } from "./feed-video-player.js";
+import { initPrecomputedWaveforms } from "./audio-player.js";
+
+export function hydratePartial(
+  root: globalThis.Document | globalThis.Element,
+): void {
+  setupThreadContexts(root);
+  initFeedVideoPlayer(root);
+  initPrecomputedWaveforms(root);
+}

package/src/client/note-expand.ts

@@ -0,0 +1,63 @@
+/**
+ * Expand-in-place for truncated untitled notes.
+ *
+ * The card renders the full note body with a zero-width `data-note-break`
+ * marker at the summary boundary; CSS (`[data-note-clamp] [data-note-break] ~
+ * *`) hides everything after it until expanded. The "Show more" control (an
+ * `<a>` to the permalink, which is the no-JS fallback) toggles the clamp.
+ *
+ * Because the tail is already laid out below the visible summary, revealing it
+ * inserts content below the browser's scroll anchor — so the note grows in
+ * place without the page jumping. Collapsing pulls the note top back into view
+ * when the reader had scrolled into the now-hidden tail.
+ *
+ * Document-level click delegation keeps this working after compose-bridge
+ * replaces card DOM on edit/reply — per-element listeners would be orphaned.
+ */
+
+/** True for clicks that should keep their native behavior (open in new tab, etc.). */
+function isModifiedClick(e: MouseEvent): boolean {
+  return e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey;
+}
+
+function setLabel(control: HTMLElement, label: string | undefined): void {
+  if (label) control.textContent = label;
+}
+
+function handleClick(e: MouseEvent): void {
+  const target = e.target;
+  if (!(target instanceof globalThis.Element)) return;
+
+  const control = target.closest<HTMLAnchorElement>("a[data-note-expand]");
+  if (!control || isModifiedClick(e)) return;
+
+  // Scope the body to this card — other cards on the page use the same
+  // [data-post-body] attribute. With no clampable body (server fell back to a
+  // full render), let the link navigate to the permalink as the fallback.
+  const article = control.closest<HTMLElement>("article[data-post]");
+  const body = article?.querySelector<HTMLElement>("[data-post-body]");
+  if (!article || !body || !body.querySelector("[data-note-break]")) return;
+
+  e.preventDefault();
+
+  if (body.hasAttribute("data-note-clamp")) {
+    body.removeAttribute("data-note-clamp");
+    control.setAttribute("aria-expanded", "true");
+    setLabel(control, control.dataset.labelLess);
+    return;
+  }
+
+  body.setAttribute("data-note-clamp", "");
+  control.setAttribute("aria-expanded", "false");
+  setLabel(control, control.dataset.labelMore);
+  // Re-clamping shrinks content above the control; if the reader had scrolled
+  // into the tail, bring the note top back into view.
+  if (
+    article.getBoundingClientRect().top < 0 &&
+    typeof article.scrollIntoView === "function"
+  ) {
+    article.scrollIntoView({ block: "start" });
+  }
+}
+
+document.addEventListener("click", handleClick);

package/src/client/settings-bridge.ts

@@ -20,6 +20,8 @@ function parseSettingsInitialData(data: unknown): SettingsInitialData | null {
   const siteName = getJsonString(data, "siteName");
   const siteDescription = getJsonString(data, "siteDescription");
   const siteLanguage = getJsonString(data, "siteLanguage");
+  // Tolerate older payloads without the key: empty = follow content language.
+  const dashboardLanguage = getJsonString(data, "dashboardLanguage") ?? "";
   const cjkSerifFont = getJsonString(data, "cjkSerifFont");
   const mainRssFeed = getJsonString(data, "mainRssFeed");
   const timeZone = getJsonString(data, "timeZone");
@@ -45,6 +47,7 @@ function parseSettingsInitialData(data: unknown): SettingsInitialData | null {
     siteName,
     siteDescription,
     siteLanguage,
+    dashboardLanguage,
     cjkSerifFont,
     mainRssFeed,
     timeZone,

package/src/client/tiptap/__tests__/mark-exit.test.ts

@@ -0,0 +1,99 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
+import { ExitableMarks } from "../exitable-marks.js";
+import { toggleMarkAndExit } from "../bubble-menu.js";
+
+const editors: Editor[] = [];
+
+function createEditor(content: string): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+  const editor = new Editor({
+    element,
+    extensions: [...createMarkdownContentExtensions(), ExitableMarks],
+    content,
+  });
+  editor.view.dispatch(editor.state.tr);
+  editors.push(editor);
+  return editor;
+}
+
+// Mimic real ProseMirror typed input: each char is offered to handleTextInput
+// (used by mark input rules); if unhandled, insert it normally.
+function type(editor: Editor, text: string): void {
+  const view = editor.view;
+  for (const ch of text) {
+    const { from, to } = view.state.selection;
+    const handled = view.someProp("handleTextInput", (f) =>
+      f(view, from, to, ch, () => view.state.tr.insertText(ch, from, to)),
+    );
+    if (!handled) view.dispatch(view.state.tr.insertText(ch, from, to));
+  }
+}
+
+/** Marks on the text node containing the last character of the doc. */
+function marksOfLastText(editor: Editor): string[] {
+  const json = editor.getJSON();
+  const para = json.content?.[0];
+  const last = para?.content?.[para.content.length - 1];
+  return (last?.marks ?? []).map((m: { type: string }) => m.type);
+}
+
+afterEach(() => {
+  while (editors.length) editors.pop()?.destroy();
+});
+
+describe("toggleMarkAndExit", () => {
+  it("formats the selection, then continued typing is plain", () => {
+    const editor = createEditor("<p>hello</p>");
+    editor.chain().setTextSelection({ from: 1, to: 6 }).run();
+
+    toggleMarkAndExit(editor, "strike");
+    type(editor, "Z");
+
+    // "hello" struck, "Z" plain — cursor exited the inclusive mark.
+    expect(editor.getJSON().content?.[0]).toEqual({
+      type: "paragraph",
+      content: [
+        { type: "text", marks: [{ type: "strike" }], text: "hello" },
+        { type: "text", text: "Z" },
+      ],
+    });
+  });
+
+  it("works for bold the same way", () => {
+    const editor = createEditor("<p>word</p>");
+    editor.chain().setTextSelection({ from: 1, to: 5 }).run();
+
+    toggleMarkAndExit(editor, "bold");
+    type(editor, "!");
+
+    expect(marksOfLastText(editor)).toEqual([]);
+  });
+
+  it("toggling a mark off leaves the cursor plain", () => {
+    const editor = createEditor("<p><strong>bold</strong></p>");
+    editor.chain().setTextSelection({ from: 1, to: 5 }).run();
+
+    toggleMarkAndExit(editor, "bold");
+    type(editor, "x");
+
+    // Mark removed from the selection and from the trailing cursor.
+    expect(editor.isActive("bold")).toBe(false);
+    expect(marksOfLastText(editor)).toEqual([]);
+  });
+
+  it("with an empty selection it acts as a plain mode toggle (stays on)", () => {
+    const editor = createEditor("<p></p>");
+    editor.chain().setTextSelection(1).run();
+
+    toggleMarkAndExit(editor, "bold");
+    type(editor, "ab");
+
+    // No selection → mode toggle: typed text carries the mark.
+    expect(marksOfLastText(editor)).toEqual(["bold"]);
+  });
+});