@jant/core 0.6.7 → 0.6.8

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,9 +5344,7 @@ 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,
@@ -5423,6 +5468,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 +5492,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>

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()