Changeset ff3b8ce in Klonkt for src/assets/js

Timestamp:

07/19/2026 11:36:33 PM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

8ed65a6

Parents:

e9c9ae1

git-author:

Robin <roboburr@…> (07/19/2026 11:36:10 PM)

git-committer:

Robin <roboburr@…> (07/19/2026 11:36:33 PM)

Message:

Polish: reply editor styled as a sibling of the post editor (klonkt-demo-3dp)

The rich reply editor worked but looked ad-hoc. This is a visual pass, no
behavior change:

• Toolbar: text glyphs (B/I/link/list/quote/paperclip) replaced with the post editor's Feather SVG icons; 32px buttons, transparent border, 6px radius, hover only on hover-capable devices, and an is-active accent-filled state reflecting the caret's formatting (bold/italic/list) via queryCommandState.
• Editor box: framed with a rule border and an accent focus ring, tidy paragraph/list/blockquote/link spacing.
• Footer, language select, mentions chips and attachment chips restyled to the same rule/paper/accent tokens; the mobile full-screen top bar gets a divider.

Reuses the theme's --rule/--paper/--paper-2/--accent tokens so it tracks light
and dark. 97 tests green; browser-verified: 32px SVG buttons + separator, framed
editor (10px radius), bold shows is-active on selection, mobile full-screen top
bar order and z-index intact.

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

File:

• src/assets/js/reply-editor.js (modified) (1 diff)

src/assets/js/reply-editor.js

@@ -107 +107 @@
       }
     });
+
+    // Reflect the current formatting on the toolbar (bold/italic/list active),
+    // like the post editor, while the caret is inside this editor.
+    function syncToolbar() {
+      if (document.activeElement !== ed) return;
+      var map = { bold: 'bold', italic: 'italic', list: 'insertUnorderedList' };
+      bar.querySelectorAll('button[data-cmd]').forEach(function (b) {
+        var c = map[b.getAttribute('data-cmd')];
+        if (!c) return;
+        var on = false; try { on = document.queryCommandState(c); } catch (e) { on = false; }
+        b.classList.toggle('is-active', on);
+      });
+    }
+    document.addEventListener('selectionchange', syncToolbar);
+    ed.addEventListener('keyup', syncToolbar);
+    ed.addEventListener('mouseup', syncToolbar);
+
     if (fileInput) fileInput.addEventListener('change', function () {
       uploadFiles(fileInput.files);