Changeset feced2c in Klonkt for src/assets/js/reply-editor.js

Timestamp:

07/19/2026 05:25:26 PM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

5190152

Parents:

33e1dbd

git-author:

Robin <roboburr@…> (07/19/2026 05:24:58 PM)

git-committer:

Robin <roboburr@…> (07/19/2026 05:25:26 PM)

Message:

Feature: media in replies — rich replies phase 2 (klonkt-demo-c7f)

Drop, paste or pick images/audio/video in the reply editor; they upload, show
as removable chips, travel as AS2 attachments on the federated Note, and render
in the thread.

• POST /posts/upload-reply-media (requireSiteManager): image/audio/video by extension AND mimetype, stored as-is under /media/reply-media/ (no transcode; a reply attachment is not a track), 32MB cap, returns {url, mediaType, name}.
• Editor: paperclip button + hidden file input (the mobile path), paste-files and drag/drop handlers, busy/error chips, image thumbnails, max 4, hidden attachments JSON field. Media-only submit allowed (text no longer required when something is attached).
• deliverReply({attachments}): re-validates server-side — own /media/ paths only (the upload route is the sole producer, remote URLs rejected), image|audio|video mimetypes, capped at 4; stored as JSON on ap_outbox (additive column). Dedup guard now includes attachments so two media-only replies to the same parent are distinct from each other but double-submits still dedup.
• buildNote reply branch: attachment array with Image/Audio/Video types and absolute URLs. getInteractions passes media through; fedi-node renders it (img/audio/video) for visitors too, loading the stylesheet when the owner-only editor is not on the page.

3 new tests (foreign-URL and type rejection, typed absolute Note attachments,
media-only allowed, only-invalid rejected); 91 green. Browser-verified end to
end: real upload via the endpoint, paste-event -> chip with thumbnail ->
submit -> ap_outbox row with content+language+attachments -> media rendered in
the thread -> /ap/notes/<id> serves the typed absolute attachment.

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

File:

• src/assets/js/reply-editor.js (modified) (4 diffs)

src/assets/js/reply-editor.js

@@ -32 +32 @@
     if (lang) lang.hidden = false;
 
+    // ── Media attachments: picker (📎), drag/drop and paste ──────────────
+    var attWrap = form.querySelector('.re-attachments');
+    var attField = form.querySelector('input[name="attachments"]');
+    var fileInput = form.querySelector('.re-file');
+    var attachments = [];
+
+    function syncAtt() {
+      attField.value = attachments.length ? JSON.stringify(attachments) : '';
+      attWrap.hidden = attachments.length === 0;
+    }
+    function addChip(a) {
+      var chip = document.createElement('span');
+      chip.className = 're-att';
+      if (a.mediaType.indexOf('image/') === 0) {
+        var img = document.createElement('img');
+        img.src = a.url; img.alt = a.name || '';
+        chip.appendChild(img);
+      } else {
+        chip.appendChild(document.createTextNode((a.mediaType.indexOf('audio/') === 0 ? '🎵 ' : '🎬 ') + (a.name || a.mediaType)));
+      }
+      var del = document.createElement('button');
+      del.type = 'button'; del.className = 're-att-del'; del.textContent = '×';
+      del.addEventListener('click', function () {
+        attachments = attachments.filter(function (x) { return x !== a; });
+        chip.remove(); syncAtt();
+      });
+      chip.appendChild(del);
+      attWrap.appendChild(chip);
+    }
+    function uploadFiles(files) {
+      Array.prototype.forEach.call(files, function (file) {
+        if (!/^(image|audio|video)\//.test(file.type) || attachments.length >= 4) return;
+        var chip = document.createElement('span');
+        chip.className = 're-att re-att-busy';
+        chip.textContent = '⏳ ' + file.name;
+        attWrap.hidden = false;
+        attWrap.appendChild(chip);
+        var fd = new FormData();
+        fd.append('media', file);
+        fetch(form.getAttribute('data-upload'), { method: 'POST', body: fd })
+          .then(function (r) { return r.json().then(function (j) { return r.ok ? j : Promise.reject(j); }); })
+          .then(function (j) {
+            chip.remove();
+            var a = { url: j.url, mediaType: j.mediaType, name: j.name || file.name };
+            attachments.push(a); addChip(a); syncAtt();
+          })
+          .catch(function (err) {
+            chip.className = 're-att re-att-err';
+            chip.textContent = (form.getAttribute('data-upload-err') || 'Upload failed') + (err && err.error ? ': ' + err.error : '');
+            setTimeout(function () { chip.remove(); syncAtt(); }, 5000);
+          });
+      });
+    }
+
     // Toolbar commands (execCommand is deprecated-but-universal; same approach
     // as the post editor).
@@ -38 +92 @@
       if (!btn) return;
       e.preventDefault();
+      var cmd = btn.getAttribute('data-cmd');
+      if (cmd === 'attach') { fileInput.click(); return; }   // no editor focus: keeps the picker usable on mobile
       ed.focus();
-      var cmd = btn.getAttribute('data-cmd');
       if (cmd === 'bold') document.execCommand('bold');
       else if (cmd === 'italic') document.execCommand('italic');
@@ -49 +104 @@
       }
     });
+    fileInput.addEventListener('change', function () {
+      uploadFiles(fileInput.files);
+      fileInput.value = '';
+    });
 
-    // Paste as plain text (rich paste becomes messy HTML; formatting is what
-    // the toolbar is for). Media paste/drop lands in the media phase.
+    // Paste: files become attachments; text pastes as plain text (rich paste
+    // becomes messy HTML; formatting is what the toolbar is for).
     ed.addEventListener('paste', function (e) {
-      var txt = (e.clipboardData || window.clipboardData).getData('text/plain');
+      var cd = e.clipboardData || window.clipboardData;
+      if (cd.files && cd.files.length) {
+        e.preventDefault();
+        uploadFiles(cd.files);
+        return;
+      }
+      var txt = cd.getData('text/plain');
       if (!txt) return;
       e.preventDefault();
       document.execCommand('insertText', false, txt);
+    });
+
+    // Drag/drop media onto the editor.
+    ed.addEventListener('dragover', function (e) {
+      if (e.dataTransfer && Array.prototype.some.call(e.dataTransfer.types || [], function (t) { return t === 'Files'; })) {
+        e.preventDefault();
+        ed.classList.add('re-drop');
+      }
+    });
+    ed.addEventListener('dragleave', function () { ed.classList.remove('re-drop'); });
+    ed.addEventListener('drop', function (e) {
+      ed.classList.remove('re-drop');
+      if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
+        e.preventDefault();
+        uploadFiles(e.dataTransfer.files);
+      }
     });
 
@@ -72 +153 @@
     if (cancel) cancel.addEventListener('click', function () { setFull(false); });
 
-    // Serialize on submit; block truly empty replies.
+    // Serialize on submit; block truly empty replies (media-only is fine).
     form.addEventListener('submit', function (e) {
       var html = ed.innerHTML.trim();
       var plain = (ed.innerText || '').replace(/ /g, ' ').trim();
-      if (!plain) { e.preventDefault(); ed.focus(); return; }
-      hidden.value = html;
+      if (!plain && !attachments.length) { e.preventDefault(); ed.focus(); return; }
+      hidden.value = plain ? html : '';
       ta.value = plain;
       document.documentElement.classList.remove('re-lock');