Changeset 1d76e0e in Klonkt

Timestamp:

08/08/2026 09:51:53 PM (4 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

bfd9c73

Parents:

df70d8e

git-author:

Robin <roboburr@…> (08/08/2026 09:51:49 PM)

git-committer:

Robin <roboburr@…> (08/08/2026 09:51:53 PM)

Message:

De reply-editor wordt een module (shaer-nh2)

Stond nog als <script src> onderaan partials/reply-editor.ejs -- het patroon dat
shaer-bqr overal weghaalde, maar dit bestand ging niet mee omdat die migratie
over INLINE scripts ging en dit er een met src is.

Bij een volledige laadbeurt ging het goed: injectCspNonce zet er een nonce op.
Bij een htmx-navigatie draagt de partial de nonce van DAT verzoek, terwijl het
document die van zijn eigen laadbeurt heeft. De CSP is strict-dynamic, dus
alleen die laatste telt en het script draaide niet. Gevolg: geen toolbar, geen
media-drop, geen .re-full -- en op mobiel dus geen fullscreen-compose.

De omzetting was mechanisch, want de opzet was al goed: init(form) had al een
__re-vlag PER FORMULIER. Na een htmx-wissel zijn de formulieren nieuw, dus
geen vlag, dus opnieuw opgewaardeerd. Alleen de IIFE, de window-vlag en de
DOMContentLoaded eromheen konden weg; init(form) heet nu initForm om plaats te
maken voor de geexporteerde init().

pageJs erbij op de drie routes die de editor tonen: Berichten, een post met
reacties, en authorize-interaction.

EN DIT IS DE VOORWAARDE VOOR HET SAMENVOEGEN. Robin wil een herbruikbaar
editor-component; een los script kan niet importeren uit mod/lib.js, een module
wel. Dit is dus stap nul van die samenvoeging en niet alleen een bugfix.

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

Location:

src

Files:

• assets/js/mod/reply-editor.js (moved) (moved from src/assets/js/reply-editor.js ) (3 diffs)
• routes/posts.js (modified) (3 diffs)
• views/partials/reply-editor.ejs (modified) (2 diffs)

src/assets/js/mod/reply-editor.js

@@ +1 @@
+// Rijke reply-editor -- MODULE sinds shaer-nh2.
+//
+// Stond als <script src> onderaan partials/reply-editor.ejs. Bij een volledige
+// laadbeurt ging dat goed (injectCspNonce zet er een nonce op), maar bij een
+// htmx-navigatie draagt de partial de nonce van DAT verzoek terwijl het
+// document die van zijn eigen laadbeurt heeft. De CSP is strict-dynamic, dus
+// alleen die laatste telt -- en het script draaide niet. Gevolg: geen toolbar,
+// geen .re-full, en op mobiel dus geen fullscreen-compose.
+//
+// Als module wordt hij door de bootstrap in de shell geladen, die WEL de juiste
+// nonce heeft. Dat is bovendien de voorwaarde om straks code te DELEN met de
+// posteditor: een los script kan niet importeren uit mod/lib.js.
+
 // Rich reply editor — upgrades every form[data-re] (partials/reply-editor.ejs)
 // from a plain textarea to a contenteditable with a small toolbar and, on
@@ -5 +18 @@
 // before. On submit: `content` = editor HTML (server sanitizes), `text` =
 // plain-text fallback.
-(function () {
-  'use strict';
-  if (window.__replyEditorInit) return;
-  window.__replyEditorInit = true;
 
   var MOBILE = '(max-width: 700px)';
 
-  function init(form) {
+function initForm(form) {
     if (form.__re) return;
     form.__re = true;
@@ -206 +215 @@
   }
 
-  function initAll() {
-    document.querySelectorAll('form[data-re]').forEach(init);
-  }
-  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initAll);
-  else initAll();
-})();
+/**
+ * De bootstrap roept dit aan bij elke paginawissel waarop deze module actief
+ * is. Opnieuw scannen is veilig: init(form) heeft een eigen `__re`-vlag per
+ * FORMULIER, en na een htmx-wissel zijn de formulieren nieuw -- dus geen vlag,
+ * dus opnieuw opgewaardeerd. Precies wat je wilt.
+ */
+export function init() {
+  document.querySelectorAll('form[data-re]').forEach(initForm);
+}

src/routes/posts.js

@@ -802 +802 @@
   }
   renderPage(req, res, 'pages/authorize-interaction', {
-    pageJs: 'authorize-interaction',
+    pageJs: 'authorize-interaction reply-editor',
     pageTitleKey: 'fedi.remote_interact', // i18n: was hardcoded Dutch on non-NL sites
     bodyClass: 'on-special',
@@ -949 +949 @@
     : []).filter((o) => o['shaer:ward'] === gMe && o['shaer:needsMyAccept']);
   renderPage(req, res, 'pages/messages', {
-    pageTitleKey: 'msg.title', bodyClass: 'on-special', pageJs: 'messages', items, seenAt,
+    pageTitleKey: 'msg.title', bodyClass: 'on-special', pageJs: 'messages reply-editor', items, seenAt,
     hasMore, nextOffset: offset + FEED_PAGE, moreBase, guardianOffers,
     success: req.query.success || null, error: req.query.error || null,
@@ -1530 +1530 @@
 
   renderPage(req, res, 'pages/post', {
-    pageJs: 'post',
+    pageJs: 'post reply-editor',
     post,
     poll: ActivityPubService.ownPollView(post),

src/views/partials/reply-editor.ejs

@@ -3 +3 @@
 
   Renders a plain <textarea name="text"> form that works without JS; the shared
-  /assets/js/reply-editor.js upgrades it to a rich contenteditable with a small
+  mod/reply-editor.js upgrades it to a rich contenteditable with a small
   toolbar, a language select and (on ≤700px) a full-screen compose overlay,
   which is the right pattern on mobile. On submit the JS fills the hidden
@@ -83 +83 @@
 <% if (!locals.__reAssets) { locals.__reAssets = 1; %>
 <link rel="stylesheet" href="/assets/css/reply-editor.css">
-<script src="/assets/js/reply-editor.js" defer></script>
 <% } %>