Changeset 33e1dbd in Klonkt for src/services/ActivityPubService.js

Timestamp:

07/19/2026 05:08:32 PM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

feced2c

Parents:

2d66d66

git-author:

Robin <roboburr@…> (07/19/2026 05:08:12 PM)

git-committer:

Robin <roboburr@…> (07/19/2026 05:08:32 PM)

Message:

Feature: rich replies phase 1 — shared editor, mobile full-screen, language (klonkt-demo-c7f)

Replying to fediverse comments used bare textareas in four places. This adds
ONE shared, progressively-enhanced editor component and mounts it on the two
new-reply spots (inline thread reply in fedi-node, and authorize_interaction);
the edit forms and prutter follow with the media phase.

• partials/reply-editor.ejs + assets/js/reply-editor.js + css: renders a plain textarea that works without JS; the JS upgrades it to a contenteditable with a small toolbar (bold/italic/link/list/quote) and a language select. Assets load once per render even when the partial repeats per comment.
• Mobile (max-width 700px): focusing the editor opens a FULL-SCREEN compose overlay (top bar with cancel and send, scroll lock), the right pattern on phones. Two real-world fixes came out of browser verification: site CSS gives thread forms display:contents, which collapses the form box and breaks both flex and position:fixed (now overridden with !important); and the overlay sits at z-index 1200, above the bottom tab bar (1050) and sheets (1100).
• Server: fedi-reply and authorize_interaction accept content (editor HTML) + language next to text. deliverReply sanitizes the HTML (HtmlSanitizerService), runs the same mention/hashtag/URL enrichment as the plain path, and places the parent mention inline in the first paragraph (own paragraph before block content, merged paragraph around bare inline text). Plain-text path unchanged (no-JS fallback).
• ap_outbox.language (additive) -> contentMap on the outgoing Note.

5 new tests (sanitize, mention placement, plain path unchanged, empty-html
reject, bogus language dropped); 88 green. Live-verified in the browser:
desktop upgrade, mobile full-screen (enter/cancel/scroll-lock), and a real
submit landing in ap_outbox with markup + language intact.

Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• src/services/ActivityPubService.js (modified) (4 diffs)

src/services/ActivityPubService.js

@@ -233 +233 @@
       inReplyTo: post.in_reply_to || undefined,
       content: post.content,
+      // Reply language (rich replies): the AS2 language map next to `content`.
+      contentMap: post.language ? { [post.language]: post.content } : undefined,
       url: post.post_slug ? `${base}/${encodeURIComponent(post.post_slug)}` : undefined,
       published: toISO(post.created_at),
@@ -710 +712 @@
     _listI = db.prepare('SELECT id, kind, object_uri, parent_uri, actor_uri, actor_name, actor_handle, actor_url, actor_icon, content, published, created_at, acted_boost, acted_like, visibility FROM ap_interactions WHERE post_id = ? ORDER BY created_at ASC');
     _getI = db.prepare('SELECT * FROM ap_interactions WHERE id = ?');
-    _insO = db.prepare('INSERT INTO ap_outbox (id, site_slug, post_id, post_slug, in_reply_to, to_actor, to_handle, content, created_at) VALUES (?,?,?,?,?,?,?,?,CURRENT_TIMESTAMP)');
+    _insO = db.prepare('INSERT INTO ap_outbox (id, site_slug, post_id, post_slug, in_reply_to, to_actor, to_handle, content, language, created_at) VALUES (?,?,?,?,?,?,?,?,?,CURRENT_TIMESTAMP)');
     _listO = db.prepare('SELECT * FROM ap_outbox WHERE post_id = ? ORDER BY created_at ASC');
     _getO = db.prepare('SELECT * FROM ap_outbox WHERE id = ?');
@@ -1854 +1856 @@
 // Send a reply FROM this site to a remote actor (in reply to their inbound reply).
 // `parent` = an ap_interactions row (actor_uri, actor_url, actor_handle, object_uri).
-export async function deliverReply(site, { postId, postSlug, parent, text }) {
+export async function deliverReply(site, { postId, postSlug, parent, text, html, language }) {
   const base = (process.env.PUBLIC_BASE_URL || '').replace(/\/+$/, '');
-  if (!base || !site || !site.slug || !parent || !String(text || '').trim()) return null;
+  // Rich replies: `html` is the reply editor's HTML (sanitized here); `text` is
+  // the plain-text fallback (no-JS path, C2S `source`). Either may carry the reply.
+  const richClean = html ? HtmlSanitizerService.sanitize(String(html)) : '';
+  const rich = richClean && HtmlSanitizerService.toPlainText(richClean).trim() ? richClean : '';
+  if (!base || !site || !site.slug || !parent || (!String(text || '').trim() && !rich)) return null;
   const me = actorId(base, site.slug);
   const handle = parent.actor_handle || deriveHandle(parent.actor_uri);
   const dispHandle = handle && handle[0] === '@' ? handle : '@' + (handle || '');
-  const body = escHtml(String(text).trim()).replace(/\r?\n/g, '<br>');
-  const mres = await resolveMentionsInText(base, body); // link inline @mentions + collect their inboxes
   const mention = parent.actor_uri
     ? `<a href="${escHtml(parent.actor_url || parent.actor_uri)}" class="u-url mention" data-actor="${escHtml(parent.actor_uri)}">${escHtml(dispHandle)}</a> ` : '';
-  const content = `<p>${mention}${linkUrls(linkHashtags(base, mres.html))}</p>`;
+  let content;
+  let mres;
+  if (rich) {
+    // Same enrichment pipeline as the plain path (mentions/hashtags/URLs), on
+    // sanitized editor HTML. The parent mention goes inline into the first
+    // paragraph (Mastodon convention), or becomes its own leading one.
+    mres = await resolveMentionsInText(base, rich);
+    const processed = linkUrls(linkHashtags(base, mres.html));
+    if (processed.startsWith('<p>')) {
+      content = processed.replace('<p>', `<p>${mention}`);            // inline in the first paragraph
+    } else if (/^<(blockquote|ul|ol|pre|h[1-6]|div|hr)\b/i.test(processed)) {
+      content = `<p>${mention}</p>${processed}`;                      // block content: own leading paragraph
+    } else {
+      content = `<p>${mention}${processed}</p>`;                      // bare inline text: one paragraph together
+    }
+  } else {
+    const body = escHtml(String(text).trim()).replace(/\r?\n/g, '<br>');
+    mres = await resolveMentionsInText(base, body); // link inline @mentions + collect their inboxes
+    content = `<p>${mention}${linkUrls(linkHashtags(base, mres.html))}</p>`;
+  }
+  const replyLang = /^[a-z]{2,3}(-[A-Za-z0-9-]+)?$/.test(String(language || '')) ? language : null;
   // Dedup: skip if the exact same reply was already sent (double-submit guard).
   const dup = db.prepare('SELECT 1 FROM ap_outbox WHERE site_slug = ? AND IFNULL(in_reply_to, \'\') = ? AND content = ? LIMIT 1')
@@ -1870 +1894 @@
   if (dup) { console.log('[AP] outreply skipped (duplicate)'); return { duplicate: true, delivered: 0 }; }
   const id = crypto.randomUUID();
-  iStmts().insO.run(id, site.slug, postId, postSlug || null, parent.object_uri || null, parent.actor_uri || null, handle, content);
+  iStmts().insO.run(id, site.slug, postId, postSlug || null, parent.object_uri || null, parent.actor_uri || null, handle, content, replyLang);
   const row = iStmts().getO.get(id);
   const note = buildReplyNote(base, site, row);