@jant/core 0.3.40 → 1.0.0

package/src/client/compose-bridge.ts

@@ -31,6 +31,7 @@ import { publicPath } from "./runtime-paths.js";
 import { setupThreadContexts } from "./thread-context.js";
 import { tiptapJsonToMarkdown } from "../lib/tiptap-to-markdown.js";
 import { getMediaCategory } from "../lib/upload.js";
+import { resolveInlineImageUrls } from "./tiptap/inline-image-upload.js";
 
 function getComposeEditorFromEventTarget(
   target: globalThis.EventTarget | null,
@@ -172,6 +173,88 @@ const uploadPromises = new Map<string, Promise<string | null>>();
 /** Track attachments removed while their upload is still in flight */
 const removedClientIds = new Set<string>();
 
+/**
+ * Track completed upload mediaIds by clientId.
+ *
+ * When an attachment is migrated between editor instances (e.g. entering thread
+ * mode while an upload is in-flight), `updateAttachmentStatus` fires on the old
+ * detached editor — not the new thread editor. By the time the user submits,
+ * the upload promise has been deleted from `uploadPromises`, so the deferred
+ * handler can't look it up. This map provides a fallback: we record the result
+ * here as soon as any upload succeeds, and `buildRequestAttachments` reads it
+ * when `attachment.mediaId` is null and the clientId isn't in `uploadPromises`.
+ */
+const completedMediaIds = new Map<string, string>();
+
+/**
+ * Quickly grab the very first decoded frame of a video as a small poster.
+ * Uses a 3s timeout — returns null on any failure so callers don't stall.
+ */
+function captureQuickPoster(file: File): Promise<Blob | null> {
+  return new Promise((resolve) => {
+    const timeout = setTimeout(() => {
+      cleanup();
+      resolve(null);
+    }, 3000);
+
+    const url = URL.createObjectURL(file);
+    const video = document.createElement("video");
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = "auto";
+
+    function cleanup() {
+      clearTimeout(timeout);
+      video.removeAttribute("src");
+      video.load();
+      URL.revokeObjectURL(url);
+    }
+
+    video.onloadeddata = () => {
+      try {
+        const w = video.videoWidth;
+        const h = video.videoHeight;
+        if (!w || !h) {
+          cleanup();
+          resolve(null);
+          return;
+        }
+        const scale = Math.min(640 / w, 1);
+        const pw = Math.round(w * scale);
+        const ph = Math.round(h * scale);
+        const canvas = document.createElement("canvas");
+        canvas.width = pw;
+        canvas.height = ph;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          cleanup();
+          resolve(null);
+          return;
+        }
+        ctx.drawImage(video, 0, 0, pw, ph);
+        canvas.toBlob(
+          (blob) => {
+            cleanup();
+            resolve(blob);
+          },
+          "image/webp",
+          0.6,
+        );
+      } catch {
+        cleanup();
+        resolve(null);
+      }
+    };
+
+    video.onerror = () => {
+      cleanup();
+      resolve(null);
+    };
+
+    video.src = url;
+  });
+}
+
 /**
  * Upload a single file: process locally, then send it through the upload
  * session API so the backend can choose relay vs direct transport.
@@ -186,6 +269,7 @@ async function uploadFile(
     let toUpload: File;
     let width: number | undefined;
     let height: number | undefined;
+    let durationSeconds: number | undefined;
     let blurhash: string | undefined;
     let waveform: string | undefined;
     let poster: Blob | undefined;
@@ -202,6 +286,13 @@ async function uploadFile(
         return null;
       }
 
+      // Capture the first frame quickly so Safari shows a preview while
+      // the heavy transcoding runs. Chrome shows it natively via
+      // <video preload="metadata">, Safari does not.
+      captureQuickPoster(file).then((blob) => {
+        if (blob) editor?.updateAttachmentPoster(clientId, blob);
+      });
+
       editor?.updateAttachmentStatus(clientId, "processing", null, null);
       const result = await VideoProcessor.processToFile(file, (progress) => {
         editor?.updateAttachmentProgress(clientId, progress);
@@ -209,8 +300,12 @@ async function uploadFile(
       toUpload = result.file;
       width = result.width;
       height = result.height;
+      durationSeconds = result.durationSeconds;
       blurhash = result.blurhash;
       poster = result.poster;
+      if (poster) {
+        editor?.updateAttachmentPoster(clientId, poster);
+      }
     } else if (file.type.startsWith("audio/")) {
       // Audio: transcode to AAC (.m4a) (requires WebCodecs)
       if (!AudioProcessor.isSupported()) {
@@ -280,14 +375,20 @@ async function uploadFile(
       height ??= meta.height;
       blurhash ??= meta.blurhash;
       waveform ??= meta.waveform;
-      poster ??= meta.poster;
+      if (!poster && meta.poster) {
+        poster = meta.poster;
+        editor?.updateAttachmentPoster(clientId, poster);
+      }
     }
 
-    // Text attachments keep summary/chars in the media record.
+    // Text attachments keep summary/chars in the media record. This covers
+    // plain text-file uploads (.md, .txt, .csv). Jant-composed rich text
+    // attachments do not go through this upload path — they are sent as
+    // markdown via the compose API and materialized by `createTextAttachment`.
     let summary: string | undefined;
     let chars: number | undefined;
     const category = getMediaCategory(file.type);
-    if (category === "text" && file.type !== "text/x-tiptap+json") {
+    if (category === "text") {
       try {
         const textContent = await toUpload.text();
         const trimmed = textContent.replace(/\s+/g, " ").trim();
@@ -297,12 +398,6 @@ async function uploadFile(
       } catch {
         // Ignore — summary is optional
       }
-    } else if (file.type === "text/x-tiptap+json") {
-      try {
-        chars = extractTiptapAttachmentChars(await toUpload.text());
-      } catch {
-        // Char count is best-effort
-      }
     }
 
     const result = await uploadViaSession(
@@ -310,6 +405,7 @@ async function uploadFile(
       {
         width,
         height,
+        durationSeconds,
         blurhash,
         waveform,
         poster,
@@ -322,6 +418,7 @@ async function uploadFile(
     );
 
     editor?.updateAttachmentStatus(clientId, "done", result.id, null);
+    completedMediaIds.set(clientId, result.id);
     return result.id;
   } catch (error) {
     const message = error instanceof Error ? error.message : "Upload failed";
@@ -331,32 +428,6 @@ async function uploadFile(
   }
 }
 
-function extractTiptapAttachmentChars(raw: string): number | undefined {
-  const envelope = JSON.parse(raw) as {
-    json?: { content?: unknown[] };
-  };
-  if (!envelope.json) {
-    return undefined;
-  }
-
-  let text = "";
-  const walk = (node: Record<string, unknown>) => {
-    if (typeof node.text === "string") {
-      text += node.text;
-    }
-    if (Array.isArray(node.content)) {
-      for (const child of node.content) {
-        if (child && typeof child === "object") {
-          walk(child as Record<string, unknown>);
-        }
-      }
-    }
-  };
-
-  walk(envelope.json as Record<string, unknown>);
-  return text.length;
-}
-
 // ── Attachment removal handler ───────────────────────────────────────
 
 document.addEventListener("jant:attachment-removed", (e: Event) => {
@@ -364,6 +435,8 @@ document.addEventListener("jant:attachment-removed", (e: Event) => {
     e as CustomEvent<{ clientId: string; mediaId: string | null }>
   ).detail;
 
+  completedMediaIds.delete(clientId);
+
   if (mediaId) {
     // Upload already finished — fire-and-forget delete
     fetch(`/api/upload/${mediaId}`, { method: "DELETE" }).catch(() => {});
@@ -420,22 +493,57 @@ function buildPostBody(
 ) {
   const isQuote = detail.format === "quote";
   const isLink = detail.format === "link";
+  const isEdit = !!detail.editPostId;
+  const optionalTextValue = (value: string) => value || undefined;
+  const nullableTextValue = (value: string) => value || null;
 
   return {
     format: detail.format,
-    title: !isQuote ? detail.title || undefined : undefined,
-    body: detail.body || undefined,
-    url: isLink ? detail.url || undefined : undefined,
-    sourceName: isQuote ? detail.quoteAuthor || undefined : undefined,
-    sourceUrl: isQuote ? detail.url || undefined : undefined,
-    quoteText: detail.quoteText || undefined,
+    title: !isQuote
+      ? isEdit
+        ? nullableTextValue(detail.title)
+        : optionalTextValue(detail.title)
+      : undefined,
+    body: isEdit
+      ? nullableTextValue(detail.body)
+      : optionalTextValue(detail.body),
+    url: isLink
+      ? isEdit
+        ? nullableTextValue(detail.url)
+        : optionalTextValue(detail.url)
+      : isEdit
+        ? null
+        : undefined,
+    sourceName: isQuote
+      ? isEdit
+        ? nullableTextValue(detail.quoteAuthor)
+        : optionalTextValue(detail.quoteAuthor)
+      : undefined,
+    sourceUrl: isQuote
+      ? isEdit
+        ? nullableTextValue(detail.url)
+        : optionalTextValue(detail.url)
+      : undefined,
+    quoteText: isQuote
+      ? isEdit
+        ? nullableTextValue(detail.quoteText)
+        : optionalTextValue(detail.quoteText)
+      : isEdit
+        ? null
+        : undefined,
     slug: detail.slug || undefined,
     status: detail.status,
+    publishedAt: detail.status === "published" ? detail.publishedAt : undefined,
     visibility: detail.visibility || undefined,
-    rating: detail.rating || undefined,
+    rating: isEdit
+      ? detail.rating > 0
+        ? detail.rating
+        : null
+      : detail.rating || undefined,
     collectionIds: detail.collectionIds,
     attachments: attachments.length > 0 ? attachments : undefined,
     replyToId: detail.replyToId || undefined,
+    quietReply: detail.quietReply || undefined,
   };
 }
 
@@ -457,7 +565,9 @@ function buildRequestAttachments(
   for (const attachment of detail.attachments) {
     if (attachment.type === "media") {
       const mediaId =
-        attachment.mediaId ?? pendingMediaIds.get(attachment.clientId);
+        attachment.mediaId ??
+        pendingMediaIds.get(attachment.clientId) ??
+        completedMediaIds.get(attachment.clientId);
       if (!mediaId) continue;
 
       requestAttachments.push({
@@ -504,7 +614,10 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
   // Get labels for toast messages
   const labels = composeEl?.labels;
   const uploadingMsg = labels?.uploading ?? "Uploading...";
-  const hasPending = detail.pendingAttachments.length > 0;
+  const hasInlineBlobs = detail.threadPosts
+    ? detail.threadPosts.some((p) => p.body.includes('"blob:'))
+    : detail.body.includes('"blob:');
+  const hasPending = detail.pendingAttachments.length > 0 || hasInlineBlobs;
   const publishedMsg = labels?.published ?? "Published!";
   const viewLabel = labels?.view ?? "View";
 
@@ -534,6 +647,49 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     if (!isPageMode || !composeEl) return;
     composeEl.loading = false;
   };
+  const clearRecoveredLocalDraft = () => {
+    if (isEdit) {
+      if (detail.editPostId) {
+        composeEl?.clearEditDraftFromStorage?.(detail.editPostId);
+      }
+      return;
+    }
+    composeEl?.clearLocalDraftFromStorage?.();
+  };
+  const reopenComposeAfterFailure = async () => {
+    if (!composeEl || isPageMode) return;
+
+    if (isEdit && detail.editPostId) {
+      if (typeof composeEl.openEdit !== "function") return;
+      await composeEl.openEdit(detail.editPostId);
+      return;
+    }
+
+    if (detail.replyToId) {
+      if (typeof composeEl.openReply !== "function") return;
+      await composeEl.openReply(
+        detail.replyToId,
+        undefined,
+        detail.replyThreadRootId,
+        detail.replyRefreshKind && detail.replyRefreshId
+          ? {
+              kind: detail.replyRefreshKind,
+              id: detail.replyRefreshId,
+            }
+          : undefined,
+        { restoreDraft: true, initialFormat: detail.format },
+      );
+      return;
+    }
+
+    if (typeof composeEl.openNew !== "function") return;
+    await composeEl.openNew({ restoreDraft: true });
+  };
+  const handleSubmitError = async (message: string) => {
+    clearPageLoading();
+    await reopenComposeAfterFailure();
+    toastMsg(message, "error");
+  };
   const refreshComposeCollections = async () => {
     await composeEl?.refreshCollections();
   };
@@ -551,43 +707,174 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     return true;
   };
   const isEdit = !!detail.editPostId;
+  const isThread = !!(detail.threadPosts && detail.threadPosts.length >= 2);
   let draftFallback: "upload" | "server" | null = null;
 
   try {
-    // Wait for all pending uploads to complete
+    // Wait for all pending uploads to complete (for thread mode, pendingAttachments
+    // already contains combined attachments from all posts).
+    // Use Promise.resolve(null) for uploads whose promise was already consumed
+    // (e.g. completed before thread-mode migration) to keep indices aligned.
     const pendingClientIds = detail.pendingAttachments.map((a) => a.clientId);
-    const pendingPromises = pendingClientIds
-      .map((id) => uploadPromises.get(id))
-      .filter((p): p is Promise<string | null> => p !== undefined);
+    const pendingPromises = pendingClientIds.map(
+      (id) => uploadPromises.get(id) ?? Promise.resolve(null as string | null),
+    );
 
     const results = await Promise.all(pendingPromises);
 
-    // If any pending upload failed:
-    // - For new publishes: filter out failed uploads and save as draft
-    // - Otherwise: abort
-    const failedCount = results.filter((id) => id === null).length;
+    // If any pending upload failed (null result where we expected a mediaId
+    // AND the upload wasn't already tracked in completedMediaIds):
+    const failedCount = results.filter(
+      (id, i) =>
+        id === null && !completedMediaIds.has(pendingClientIds[i] ?? ""),
+    ).length;
     if (failedCount > 0) {
       if (detail.status === "published" && !isEdit) {
         draftFallback = "upload";
       } else {
-        clearPageLoading();
-        toastMsg("Upload failed. Post not created.", "error");
+        await handleSubmitError("Upload failed. Post not created.");
         return;
       }
     }
 
     // Build clientId → mediaId map for file attachments completed by this submit
+    // For thread mode, this covers attachments from ALL posts (they were combined).
     const mediaClientIdMap = new Map<string, string>();
-    for (const att of detail.pendingAttachments) {
-      const idx = pendingClientIds.indexOf(att.clientId);
-      const mediaId = results[idx];
-      if (mediaId) mediaClientIdMap.set(att.clientId, mediaId);
+    for (let i = 0; i < pendingClientIds.length; i++) {
+      const clientId = pendingClientIds[i];
+      const mediaId = results[i];
+      if (clientId && mediaId) mediaClientIdMap.set(clientId, mediaId);
     }
+
+    // ── Thread submission ────────────────────────────────────────────
+    if (isThread && detail.threadPosts) {
+      const threadPosts = detail.threadPosts;
+      const effectiveStatus = draftFallback ? "draft" : detail.status;
+
+      // Resolve inline blob URLs in each post's body
+      const resolvedPosts = await Promise.all(
+        threadPosts.map(async (post) => {
+          let body = post.body;
+          if (body.includes('"blob:')) {
+            try {
+              const bodyJson = JSON.parse(body);
+              const resolved = await resolveInlineImageUrls(bodyJson);
+              body = resolved ? JSON.stringify(resolved) : "";
+            } catch {
+              // keep original
+            }
+          }
+          return { ...post, body, status: effectiveStatus };
+        }),
+      );
+
+      const postsPayload = resolvedPosts.map((post) =>
+        buildPostBody(post, buildRequestAttachments(post, mediaClientIdMap)),
+      );
+
+      const threadBody: Record<string, unknown> = { posts: postsPayload };
+      if (isEdit && detail.editPostId) {
+        threadBody.replaceThreadId = detail.editPostId;
+      }
+
+      const res = await fetch("/compose/thread", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify(threadBody),
+      });
+
+      if (!res.ok) {
+        // Server error on publish: retry as draft
+        if (detail.status === "published" && !draftFallback) {
+          const retryPayload = {
+            posts: postsPayload.map((p) => ({ ...p, status: "draft" })),
+          };
+          const retryRes = await fetch("/compose/thread", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Accept: "application/json",
+            },
+            body: JSON.stringify(retryPayload),
+          });
+          if (retryRes.ok) {
+            draftFallback = "server";
+            clearRecoveredLocalDraft();
+            const fallbackMsg =
+              labels?.publishFailedDraft ?? "Couldn't publish. Saved as draft.";
+            await refreshComposeCollections();
+            if (!leavePageAfterConfirmSave()) resetPageCompose();
+            toastMsg(fallbackMsg);
+            return;
+          }
+        }
+        const data = await readJsonObject(res);
+        await handleSubmitError(
+          getJsonString(data, "error") ?? "Something went wrong",
+        );
+        return;
+      }
+
+      if (draftFallback === "upload") {
+        clearRecoveredLocalDraft();
+        const fallbackMsg =
+          labels?.uploadFailedDraft ?? "Some uploads failed. Saved as draft.";
+        await refreshComposeCollections();
+        resetPageCompose();
+        toastMsg(fallbackMsg);
+        return;
+      }
+
+      const threadData = await readJsonObject(res);
+      const threadStatus = getJsonString(threadData, "status");
+      const threadPermalink = getJsonString(threadData, "permalink");
+      const threadToast = getJsonString(threadData, "toast");
+
+      if (threadStatus === "published") {
+        clearRecoveredLocalDraft();
+        if (isPageMode) {
+          await refreshComposeCollections();
+          resetPageCompose();
+          toastMsg(publishedMsg);
+        } else {
+          queueSuccessToast(
+            publishedMsg,
+            threadPermalink
+              ? { label: viewLabel, href: threadPermalink }
+              : undefined,
+          );
+          globalThis.location.reload();
+        }
+      } else {
+        clearRecoveredLocalDraft();
+        await refreshComposeCollections();
+        if (!leavePageAfterConfirmSave()) resetPageCompose();
+        toastMsg(threadToast ?? "Draft saved.");
+        dispatchSubmitComplete(composeEl, "draft");
+      }
+      return;
+    }
+
+    // ── Single-post submission ───────────────────────────────────────
     const requestAttachments = buildRequestAttachments(
       detail,
       mediaClientIdMap,
     );
 
+    // Resolve any blob: inline image URLs to real URLs before submitting
+    if (hasInlineBlobs) {
+      try {
+        const bodyJson = JSON.parse(detail.body);
+        const resolved = await resolveInlineImageUrls(bodyJson);
+        detail.body = resolved ? JSON.stringify(resolved) : "";
+      } catch {
+        // If resolution fails, keep original body — server will handle invalid URLs
+      }
+    }
+
     const endpoint = isEdit ? `/api/posts/${detail.editPostId}` : "/compose";
     const method = isEdit ? "PUT" : "POST";
 
@@ -623,6 +910,7 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
 
         if (retryRes.ok) {
           draftFallback = "server";
+          clearRecoveredLocalDraft();
           const retryData = await readJsonObject(retryRes);
           const fallbackMsg =
             labels?.publishFailedDraft ?? "Couldn't publish. Saved as draft.";
@@ -638,16 +926,67 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       }
 
       const data = await readJsonObject(res);
-      clearPageLoading();
-      toastMsg(getJsonString(data, "error") ?? "Something went wrong", "error");
+      await handleSubmitError(
+        getJsonString(data, "error") ?? "Something went wrong",
+      );
       return;
     }
 
     if (isEdit) {
-      queueSuccessToast("Post updated.");
+      clearRecoveredLocalDraft();
+      const editData = await readJsonObject(res);
+      const editPostId = detail.editPostId ?? "";
+      const newSlug = getJsonString(editData, "slug");
+      const newPath = newSlug ? publicPath(`/${newSlug}`) : null;
+
       if (isPageMode) {
-        globalThis.location.assign(globalThis.location.pathname);
+        // On the post detail page: refresh or navigate if slug changed
+        if (newPath && newPath !== globalThis.location.pathname) {
+          queueSuccessToast("Post updated.");
+          globalThis.location.assign(newPath);
+        } else {
+          const refreshed =
+            editPostId && (await refreshPostPageView(editPostId));
+          if (!refreshed) {
+            queueSuccessToast("Post updated.");
+            globalThis.location.assign(globalThis.location.pathname);
+          } else {
+            toastMsg("Post updated.");
+          }
+        }
+      } else if (editPostId) {
+        // On the post detail page: refresh the full view
+        const postView = document.querySelector<HTMLElement>(
+          `[data-post-view][data-post-view-id="${editPostId}"]`,
+        );
+        if (postView) {
+          const refreshed = await refreshPostPageView(editPostId);
+          if (refreshed) {
+            toastMsg("Post updated.");
+          } else {
+            queueSuccessToast("Post updated.");
+            globalThis.location.reload();
+          }
+        } else {
+          // On the timeline: try in-place refresh
+          const article = document.querySelector<HTMLElement>(
+            `article[data-post-id="${editPostId}"]`,
+          );
+          const threadRootId = article?.closest<HTMLElement>(
+            "[data-timeline-item]",
+          )?.dataset.threadRootId;
+          const refreshed = threadRootId
+            ? await refreshTimelineThreadView(threadRootId)
+            : await refreshPostCardView(editPostId);
+          if (refreshed) {
+            toastMsg("Post updated.");
+          } else {
+            queueSuccessToast("Post updated.");
+            globalThis.location.reload();
+          }
+        }
       } else {
+        queueSuccessToast("Post updated.");
         globalThis.location.reload();
       }
       return;
@@ -655,6 +994,7 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
 
     // Upload fallback: show specific message instead of normal flow
     if (draftFallback === "upload") {
+      clearRecoveredLocalDraft();
       const fallbackMsg =
         labels?.uploadFailedDraft ?? "Some uploads failed. Saved as draft.";
       await refreshComposeCollections();
@@ -669,10 +1009,11 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     const toast = getJsonString(data, "toast");
 
     if (status === "published") {
-      if (isPageMode && permalink) {
-        queueSuccessToast(publishedMsg);
-        composeEl?.preparePageLeave?.();
-        globalThis.location.assign(permalink);
+      clearRecoveredLocalDraft();
+      if (isPageMode) {
+        await refreshComposeCollections();
+        resetPageCompose();
+        toastMsg(publishedMsg);
       } else if (detail.replyToId) {
         await refreshComposeCollections();
         const updated = await refreshReplyTarget(detail);
@@ -696,14 +1037,33 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       }
       return;
     } else {
+      clearRecoveredLocalDraft();
       await refreshComposeCollections();
       if (!leavePageAfterConfirmSave()) {
         resetPageCompose();
       }
       toastMsg(toast ?? "Draft saved.");
+      dispatchSubmitComplete(composeEl, "draft");
     }
   } catch {
-    clearPageLoading();
-    toastMsg("Something went wrong", "error");
+    await handleSubmitError("Something went wrong");
   }
 });
+
+/**
+ * Notify any interested listeners (e.g. the compose dialog waiting to open
+ * its drafts panel) that a compose submission has finished writing to the
+ * server. Dispatched on the compose element so it bubbles to the document.
+ */
+function dispatchSubmitComplete(
+  composeEl: JantComposeDialog | null,
+  status: "published" | "draft",
+) {
+  const target = composeEl ?? document;
+  target.dispatchEvent(
+    new CustomEvent("jant:compose-submit-complete", {
+      bubbles: true,
+      detail: { status },
+    }),
+  );
+}