@jant/core 0.6.7 → 0.6.9

package/src/client/components/__tests__/jant-settings-avatar.test.ts

@@ -38,10 +38,13 @@ const labels: SettingsLabels = {
   siteName: "Site Name",
   aboutBlog: "About this blog",
   aboutBlogHelp: "Displayed above your blog posts.",
-  siteLanguage: "Site Language",
-  siteLanguageHelp: "Language used for the site UI.",
+  siteLanguage: "Content language",
+  siteLanguageHelp: "The language your posts are written in.",
   siteLanguageSearchPlaceholder: "Search…",
   siteLanguageNoMatches: "No matches.",
+  contentLanguagePreview: "Readers and search engines see",
+  dashboardLanguage: "Dashboard language",
+  dashboardLanguageHelp: "The language this admin dashboard shows in.",
   cjkFont: "CJK Font",
   cjkFontHelp:
     "Load a serif font optimized for Chinese, Japanese, or Korean content.",

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

@@ -5,6 +5,7 @@ import type {
   SettingsLabels,
   SettingsTimezone,
   SettingsCjkFont,
+  SettingsDashboardLanguage,
   SettingsSaveDetail,
 } from "../settings-types.js";
 import { MAX_SITE_NAME_LENGTH } from "../../../types.js";
@@ -81,10 +82,13 @@ const labels: SettingsLabels = {
   siteName: "Site Name",
   aboutBlog: "About this blog",
   aboutBlogHelp: "Displayed above your blog posts.",
-  siteLanguage: "Site Language",
-  siteLanguageHelp: "Language used for the site UI.",
+  siteLanguage: "Content language",
+  siteLanguageHelp: "The language your posts are written in.",
   siteLanguageSearchPlaceholder: "Search…",
   siteLanguageNoMatches: "No matches.",
+  contentLanguagePreview: "Readers and search engines see",
+  dashboardLanguage: "Dashboard language",
+  dashboardLanguageHelp: "The language this admin dashboard shows in.",
   cjkFont: "CJK Font",
   cjkFontHelp:
     "Load a serif font optimized for Chinese, Japanese, or Korean content.",
@@ -127,10 +131,17 @@ const cjkFonts: SettingsCjkFont[] = [
   { value: "zh-Hans", label: "简体中文 (Simplified Chinese)" },
 ];
 
+const dashboardLanguages: SettingsDashboardLanguage[] = [
+  { value: "en", label: "English" },
+  { value: "zh-Hans", label: "简体中文" },
+  { value: "zh-Hant", label: "繁體中文" },
+];
+
 const initialData = {
   siteName: "My Blog",
   siteDescription: "A test blog",
   siteLanguage: "en",
+  dashboardLanguage: "en",
   cjkSerifFont: "off",
   timeZone: "UTC",
   mainRssFeed: "featured",
@@ -161,6 +172,7 @@ async function createElement(
   el.labels = labels;
   el.timezones = timezones;
   el.cjkFonts = cjkFonts;
+  el.dashboardLanguages = dashboardLanguages;
   el.siteNameFallback = "Fallback Name";
   el.siteDescriptionFallback = "Fallback Description";
   el.mainFeedUrl = "/feed";
@@ -239,10 +251,11 @@ describe("JantSettingsGeneral", () => {
     expect(trigger.getAttribute("aria-expanded")).toBe("true");
 
     const options = el.querySelectorAll<HTMLButtonElement>('[role="option"]');
+    // The content-language picker lists the full BCP 47 catalog so any public
+    // content language is reachable. Coverage / raw tags are not shown here.
     expect(options.length).toBeGreaterThanOrEqual(20);
-    // Each option carries the universal "translated" coverage suffix.
     for (const option of options) {
-      expect(option.textContent).toMatch(/% translated/);
+      expect(option.textContent).not.toMatch(/% translated/);
     }
 
     const search = requireElement(
@@ -258,7 +271,7 @@ describe("JantSettingsGeneral", () => {
     expect(filtered[0]?.textContent).toMatch(/Suomi|Finnish/);
   });
 
-  it("selects a non-catalog locale and reports 0% translated coverage on it", async () => {
+  it("selects a non-catalog content language and shows its native name", async () => {
     const el = await createElement();
     const trigger = requireElement(
       el.querySelector<HTMLButtonElement>(
@@ -285,9 +298,43 @@ describe("JantSettingsGeneral", () => {
 
     // Picker closes after selection.
     expect(trigger.getAttribute("aria-expanded")).toBe("false");
-    // Trigger reflects the new tag and shows 0% coverage.
-    expect(trigger.textContent).toMatch(/fi/);
-    expect(trigger.textContent).toMatch(/0% translated/);
+    // Trigger shows the selected language's native name only — no raw BCP 47
+    // tag, no coverage metric.
+    expect(trigger.textContent).toMatch(/suomi|finnish/i);
+    expect(trigger.textContent).not.toMatch(/% translated/);
+    expect(trigger.textContent).not.toMatch(/\bfi\b/);
+  });
+
+  it("renders dashboard language options and saves the selection", async () => {
+    const el = await createElement();
+    const select = requireElement(
+      el.querySelector(
+        'select[aria-labelledby="dashboard-language-label"]',
+      ) as globalThis.HTMLSelectElement | null,
+      "expected dashboard language select",
+    );
+    const values = Array.from(select.options).map((o) => o.value);
+    expect(values).toEqual(["en", "zh-Hans", "zh-Hant"]);
+    expect(select.value).toBe("en");
+
+    const saves: SettingsSaveDetail[] = [];
+    el.addEventListener("jant:settings-save", (e) => {
+      saves.push((e as CustomEvent<SettingsSaveDetail>).detail);
+    });
+
+    select.value = "zh-Hant";
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+    await el.updateComplete;
+
+    const saveButton = requireElement(
+      findSaveButtonByHeading(el, labels.languageAndTime),
+      "expected language & time save button",
+    );
+    saveButton.click();
+
+    expect(saves).toHaveLength(1);
+    expect(saves[0]?.endpoint).toBe("/settings/general/language-time");
+    expect(saves[0]?.data.dashboardLanguage).toBe("zh-Hant");
   });
 
   it("renders CJK font options", async () => {

package/src/client/components/compose-format-convert.ts

@@ -0,0 +1,255 @@
+/**
+ * Compose format conversion
+ *
+ * When a post's format changes while editing (note / link / quote), each format
+ * stores a different subset of structured fields. This module converts those
+ * fields so nothing is silently lost:
+ *
+ * - **Fold** (when *leaving* a format): any field the target format can't hold is
+ *   pushed into the body as a visible block (a blockquote, a heading, or a link
+ *   paragraph) and the field is cleared. This never loses data.
+ * - **Extract** (when *entering* a format): only `blockquote → quoteText` is
+ *   recovered from the body front, which keeps the common `quote → note → quote`
+ *   round-trip lossless. url/title are not auto-extracted — they stay visible in
+ *   the body and the author re-fills the field if needed.
+ *
+ * Pure and DOM-free so it can be unit-tested in isolation. It deep-clones the
+ * body it is given and never mutates its input.
+ */
+
+import type { JSONContent } from "@tiptap/core";
+
+import type { ComposeFormat } from "./compose-types.js";
+
+/** The subset of compose fields that participate in format conversion. */
+export interface ComposeConvertFields {
+  title: string;
+  url: string;
+  quoteText: string;
+  quoteAuthor: string;
+  showTitle: boolean;
+  bodyJson: JSONContent | null;
+}
+
+/** Matches an attribution paragraph: `— Author` or `— Author https://source`. */
+const ATTRIBUTION_RE = /^—\s*(.*?)(?:\s+(https?:\/\/\S+))?\s*$/;
+
+function cloneDoc(doc: JSONContent | null): JSONContent | null {
+  return doc ? (JSON.parse(JSON.stringify(doc)) as JSONContent) : null;
+}
+
+/** Concatenate all descendant text of a node. */
+function nodeText(node: JSONContent | undefined): string {
+  if (!node) return "";
+  if (typeof node.text === "string") return node.text;
+  if (!Array.isArray(node.content)) return "";
+  return node.content.map(nodeText).join("");
+}
+
+function makeHeading(text: string, level = 2): JSONContent {
+  return {
+    type: "heading",
+    attrs: { level },
+    content: [{ type: "text", text }],
+  };
+}
+
+function makeParagraph(text: string): JSONContent {
+  return text
+    ? { type: "paragraph", content: [{ type: "text", text }] }
+    : { type: "paragraph" };
+}
+
+function makeLinkParagraph(url: string): JSONContent {
+  return {
+    type: "paragraph",
+    content: [
+      {
+        type: "text",
+        text: url,
+        marks: [{ type: "link", attrs: { href: url } }],
+      },
+    ],
+  };
+}
+
+function parseAttribution(text: string): {
+  author: string;
+  url: string | null;
+} {
+  const match = ATTRIBUTION_RE.exec(text.trim());
+  if (!match) return { author: "", url: null };
+  return { author: match[1].trim(), url: match[2] ?? null };
+}
+
+/** First link href found anywhere within a node (depth-first), or null. */
+function findLinkHref(node: JSONContent | undefined): string | null {
+  if (!node) return null;
+  if (Array.isArray(node.marks)) {
+    const href = node.marks.find((mark) => mark.type === "link")?.attrs?.href;
+    if (typeof href === "string" && href) return href;
+  }
+  if (Array.isArray(node.content)) {
+    for (const child of node.content) {
+      const found = findLinkHref(child);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * Build the `— Author` attribution paragraph for a folded quote. The author name
+ * is linked to the source url so the body stays clean (no raw url) while the
+ * `note → quote` round-trip can still recover the url from the link mark. When
+ * there is no author, the url itself becomes the link text. Null if neither.
+ */
+function makeAttributionParagraph(
+  author: string,
+  url: string | null,
+): JSONContent | null {
+  const name = author.trim();
+  const href = url?.trim() ?? "";
+  if (!name && !href) return null;
+
+  const linked = (text: string): JSONContent => ({
+    type: "text",
+    text,
+    marks: [{ type: "link", attrs: { href } }],
+  });
+  if (name && href) {
+    return {
+      type: "paragraph",
+      content: [{ type: "text", text: "— " }, linked(name)],
+    };
+  }
+  if (name) {
+    return {
+      type: "paragraph",
+      content: [{ type: "text", text: `— ${name}` }],
+    };
+  }
+  return {
+    type: "paragraph",
+    content: [{ type: "text", text: "— " }, linked(href)],
+  };
+}
+
+function makeBlockquote(
+  quoteText: string,
+  attribution: JSONContent | null,
+): JSONContent {
+  const paragraphs = quoteText.split("\n").map((line) => makeParagraph(line));
+  if (attribution) paragraphs.push(attribution);
+  return { type: "blockquote", content: paragraphs };
+}
+
+/**
+ * Convert compose fields from one post format to another.
+ *
+ * @param from - the current format
+ * @param to - the target format
+ * @param fields - the current field values (not mutated)
+ * @returns new field values appropriate for the target format
+ * @example
+ * // quote → note: the quote becomes a leading blockquote in the body
+ * convertComposeFormat("quote", "note", {
+ *   title: "", url: "", quoteText: "Stay hungry", quoteAuthor: "Jobs",
+ *   showTitle: false, bodyJson: null,
+ * });
+ */
+export function convertComposeFormat(
+  from: ComposeFormat,
+  to: ComposeFormat,
+  fields: ComposeConvertFields,
+): ComposeConvertFields {
+  if (from === to) return fields;
+
+  const out: ComposeConvertFields = { ...fields };
+  const body = cloneDoc(fields.bodyJson);
+  const content: JSONContent[] = Array.isArray(body?.content)
+    ? [...body.content]
+    : [];
+
+  // ── Extract: leading bare-link paragraph → url (reverses the link→note
+  //    fold so link↔note round-trips). Only a "bare" link (text === href) is
+  //    pulled out, so a labeled link line keeps its label instead of silently
+  //    losing it. ─────────────────────────────────────────────────────────
+  if (to === "link" && out.url === "") {
+    const first = content[0];
+    const href = findLinkHref(first);
+    if (
+      href &&
+      first?.type === "paragraph" &&
+      Array.isArray(first.content) &&
+      first.content.length === 1 &&
+      nodeText(first) === href
+    ) {
+      out.url = href;
+      content.shift();
+    }
+  }
+
+  // ── Extract (focused: blockquote → quoteText only) ──────────────────
+  if (
+    to === "quote" &&
+    out.quoteText === "" &&
+    content[0]?.type === "blockquote"
+  ) {
+    const paragraphs = Array.isArray(content[0].content)
+      ? [...content[0].content]
+      : [];
+    const last = paragraphs[paragraphs.length - 1];
+    const lastText = nodeText(last);
+    if (paragraphs.length > 0 && /^—/.test(lastText.trim())) {
+      const parsed = parseAttribution(lastText);
+      // Prefer the link mark's href (the linked-author form) over a url parsed
+      // from plain text (legacy `— Author https://…`).
+      const url = findLinkHref(last) ?? parsed.url;
+      // When the attribution is url-only, the link text is the url itself —
+      // don't mistake it for an author.
+      const author = parsed.author === url ? "" : parsed.author;
+      if (author) out.quoteAuthor = out.quoteAuthor || author;
+      if (url && out.url === "") out.url = url;
+      paragraphs.pop();
+    }
+    out.quoteText = paragraphs.map(nodeText).join("\n").trim();
+    content.shift();
+  }
+
+  // ── Harvest (fold fields the target can't hold into the body) ───────
+  const prepend: JSONContent[] = [];
+
+  // Title → heading (only quote can't hold a title)
+  if (to === "quote" && out.title.trim() !== "") {
+    prepend.push(makeHeading(out.title.trim()));
+    out.title = "";
+  }
+
+  // quoteText → blockquote (note and link can't hold a quote)
+  if (to !== "quote" && out.quoteText.trim() !== "") {
+    // For a note, the source url has no home either, so fold it into the
+    // attribution. For a link, url maps to link.url and is preserved.
+    const foldUrl = to === "note" ? out.url : null;
+    prepend.push(
+      makeBlockquote(
+        out.quoteText,
+        makeAttributionParagraph(out.quoteAuthor, foldUrl),
+      ),
+    );
+    out.quoteText = "";
+    out.quoteAuthor = "";
+    if (to === "note") out.url = "";
+  } else if (to === "note" && out.url.trim() !== "") {
+    // Source was a link (no quote text): notes can't hold a url, so fold it.
+    prepend.push(makeLinkParagraph(out.url.trim()));
+    out.url = "";
+  }
+
+  if (prepend.length) content.unshift(...prepend);
+
+  out.bodyJson = content.length ? { type: "doc", content } : null;
+  out.showTitle = to === "note" && out.title.trim().length > 0;
+
+  return out;
+}

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

@@ -214,6 +214,8 @@ export interface ComposeLabels {
   showMore: string;
   showLess: string;
   newThread: string;
+  replyTitle: string;
+  editTitle: string;
   slashHint: string;
   collectionFormLabels: CollectionFormLabels;
 }

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

@@ -36,6 +36,7 @@ import {
   getSelectedFirstOrder,
 } from "../collection-picker-order.js";
 import type { JantComposeEditor } from "./jant-compose-editor.js";
+import { convertComposeFormat } from "./compose-format-convert.js";
 import { getMediaCategory } from "../../lib/upload.js";
 import { getSlugValidationIssue } from "../../lib/slug-format.js";
 import { createTiptapEditor } from "../tiptap/create-editor.js";
@@ -666,7 +667,7 @@ export class JantComposeDialog extends LitElement {
     super();
     this.collections = [];
     this.labels = {} as ComposeLabels;
-    this.uploadMaxFileSize = 500;
+    this.uploadMaxFileSize = 1024;
     this.pageMode = false;
     this.closeHref = "/";
     this.autoRestoreDraft = false;
@@ -743,13 +744,14 @@ export class JantComposeDialog extends LitElement {
       this._scheduleCollectionPickerAutofocus();
     }
     if (
-      changed.has("_format") ||
       changed.has("_collectionIds") ||
       changed.has("_slug") ||
       changed.has("_publishedAtInput") ||
       changed.has("_visibility")
     ) {
-      // Schedule draft auto-save (new-post and edit modes, not draft-load)
+      // Schedule draft auto-save (new-post and edit modes, not draft-load).
+      // `_format` is intentionally excluded: a bare format switch is exploratory
+      // and shouldn't persist a draft on its own (see `_switchFormat`).
       if (!this._draftSourceId) {
         this._scheduleDraftSave();
       }
@@ -2456,7 +2458,7 @@ export class JantComposeDialog extends LitElement {
           "jant-compose-editor",
         )[this._focusedThreadIndex];
         editor?.dispatchEvent(
-          new CustomEvent("jant:thread-format-change", {
+          new CustomEvent("jant:format-change", {
             detail: { format: target },
             bubbles: true,
           }),
@@ -3052,6 +3054,14 @@ export class JantComposeDialog extends LitElement {
     const editor = this._editor;
     if (!editor) return;
 
+    // Only persist genuine unsaved changes. Without this, merely opening a post
+    // for edit (or restoring a draft) would write a local draft of the
+    // unchanged content, since loading fires content-change events.
+    if (!this._hasUnsavedChanges()) {
+      globalThis.localStorage.removeItem(this._currentDraftStorageKey());
+      return;
+    }
+
     const data = editor.getData();
     const hasContent =
       !!data.body ||
@@ -3063,7 +3073,7 @@ export class JantComposeDialog extends LitElement {
       data.attachedTexts.length > 0;
 
     if (!hasContent) {
-      globalThis.localStorage.removeItem(JantComposeDialog._DRAFT_KEY);
+      globalThis.localStorage.removeItem(this._currentDraftStorageKey());
       return;
     }
 
@@ -3098,7 +3108,7 @@ export class JantComposeDialog extends LitElement {
 
     try {
       globalThis.localStorage.setItem(
-        JantComposeDialog._DRAFT_KEY,
+        this._currentDraftStorageKey(),
         JSON.stringify(draft),
       );
     } catch {
@@ -3549,10 +3559,43 @@ export class JantComposeDialog extends LitElement {
 
   private static readonly _FORMATS: ComposeFormat[] = ["note", "link", "quote"];
 
+  /**
+   * Whether a format switch should convert fields (fold/extract). Only when
+   * editing an existing post or a server draft — for a brand-new post, switching
+   * just hides/shows fields and nothing is persisted yet, so conversion would
+   * pollute the body for no benefit.
+   */
+  private _shouldConvertOnFormatSwitch(): boolean {
+    return !!(this._editPostId || this._draftSourceId);
+  }
+
   private _switchFormat(target: ComposeFormat) {
     if (this._format === target) return;
-    if (this._editPostId) return;
+    const editor = this._editor;
+    if (editor && this._shouldConvertOnFormatSwitch()) {
+      // Fold fields the target can't hold into the body before the format
+      // change recreates the editor from `_bodyJson`. Synchronous, so the old
+      // Tiptap instance can't fire onUpdate and clobber what we just wrote.
+      // `applyConvertedFields` suppresses the one content-change event the
+      // conversion emits, so the switch itself never schedules a draft save.
+      editor.applyConvertedFields(
+        convertComposeFormat(
+          this._format,
+          target,
+          editor.getConvertibleFields(),
+        ),
+      );
+    }
+    // A bare format switch shouldn't persist a local draft, so drop any save
+    // already pending from loading the post.
+    this._cancelDraftSaveTimer();
     this._format = target;
+    // Sync the editor's format this tick. Lit commits the `.format` binding
+    // only after this render returns, so `_canPublish()` (which reads
+    // `editor.getData()`, keyed on the editor's format) would otherwise compute
+    // against the stale format for one render and leave the submit button
+    // wrongly disabled.
+    if (editor) editor.format = target;
     this._showPublishPanel = false;
     if (this._shouldAutofocusFormatInput()) {
       globalThis.requestAnimationFrame(() => this._editor?.focusInput());
@@ -3571,6 +3614,16 @@ export class JantComposeDialog extends LitElement {
     const draftButtonLabel = this._hasContent()
       ? this.labels.saveAsDraft
       : this.labels.drafts;
+    // Format selector sits inline (above each post) whenever more than one post
+    // is on screen — a reply (parent shown above) or a multi-post thread. The
+    // header then shows a plain title instead of the format selector.
+    const isReply = !!(this._replyToId && this._replyToData);
+    const showTitle = isReply || this._threadItems.length > 0;
+    const headerTitle = this._editPostId
+      ? this.labels.editTitle
+      : isReply
+        ? this.labels.replyTitle
+        : this.labels.newThread;
 
     return html`
       <header class="compose-dialog-header">
@@ -3583,39 +3636,33 @@ export class JantComposeDialog extends LitElement {
         </button>
 
         <div class="compose-dialog-header-center">
-          ${this._editPostId
-            ? html`<span class="compose-dialog-title"
-                >${this.labels.editPost}</span
-              >`
-            : this._threadItems.length > 0
-              ? html`<span class="compose-dialog-title"
-                  >${this.labels.newThread}</span
-                >`
-              : html`
-                  <div class="compose-segmented">
-                    <div
-                      class=${classMap({
-                        "compose-format-pill": true,
-                        "compose-format-pill-link": this._format === "link",
-                        "compose-format-pill-quote": this._format === "quote",
-                      })}
-                    ></div>
-                    ${formats.map(
-                      (f) => html`
-                        <button
-                          type="button"
-                          class=${classMap({
-                            "compose-segmented-item": true,
-                            "compose-segmented-item-active": this._format === f,
-                          })}
-                          @click=${() => this._switchFormat(f)}
-                        >
-                          ${formatLabels[f]}
-                        </button>
-                      `,
-                    )}
-                  </div>
-                `}
+          ${showTitle
+            ? html`<span class="compose-dialog-title">${headerTitle}</span>`
+            : html`
+                <div class="compose-segmented">
+                  <div
+                    class=${classMap({
+                      "compose-format-pill": true,
+                      "compose-format-pill-link": this._format === "link",
+                      "compose-format-pill-quote": this._format === "quote",
+                    })}
+                  ></div>
+                  ${formats.map(
+                    (f) => html`
+                      <button
+                        type="button"
+                        class=${classMap({
+                          "compose-segmented-item": true,
+                          "compose-segmented-item-active": this._format === f,
+                        })}
+                        @click=${() => this._switchFormat(f)}
+                      >
+                        ${formatLabels[f]}
+                      </button>
+                    `,
+                  )}
+                </div>
+              `}
         </div>
 
         <div class="compose-dialog-header-actions">
@@ -5297,14 +5344,24 @@ export class JantComposeDialog extends LitElement {
         @focusin=${() => {
           this._focusedThreadIndex = index;
         }}
-        @jant:thread-format-change=${(
-          e: CustomEvent<{ format: ComposeFormat }>,
-        ) => {
+        @jant:format-change=${(e: CustomEvent<{ format: ComposeFormat }>) => {
           e.stopPropagation();
           this._threadItems = this._threadItems.map((it, i) =>
             i === index ? { ...it, format: e.detail.format } : it,
           );
           this._format = e.detail.format;
+          // Move focus to the new format's input, mirroring the single-post
+          // composer's `_switchFormat`. The editor re-renders its fields only
+          // after both this dialog and the editor itself finish updating, so
+          // wait for both before routing focus to the now-visible control.
+          if (this._shouldAutofocusFormatInput()) {
+            this.updateComplete.then(() => {
+              const editor = this.querySelectorAll<JantComposeEditor>(
+                "jant-compose-editor",
+              )[index];
+              editor?.updateComplete.then(() => editor.focusInput());
+            });
+          }
         }}
         @jant:thread-remove=${(e: Event) => {
           e.stopPropagation();
@@ -5423,6 +5480,7 @@ export class JantComposeDialog extends LitElement {
       .format=${this._format}
       .labels=${this.labels}
       .uploadMaxFileSize=${this.uploadMaxFileSize}
+      .inlineFormat=${isReply}
       .slashCommandDiscovered=${this.slashCommandDiscovered}
     ></jant-compose-editor>`;
 
@@ -5446,7 +5504,15 @@ export class JantComposeDialog extends LitElement {
               ? html`
                   <div class="compose-thread-layout">
                     ${this._renderReplyContext()}
-                    <div class="compose-editor-row">
+                    <div
+                      class="compose-editor-row"
+                      @jant:format-change=${(
+                        e: CustomEvent<{ format: ComposeFormat }>,
+                      ) => {
+                        e.stopPropagation();
+                        this._switchFormat(e.detail.format);
+                      }}
+                    >
                       <div class="compose-thread-dot"></div>
                       ${editor}
                     </div>