Changeset 1d76e0e in Klonkt for src/assets/js/mod/reply-editor.js

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@…>

File:

• src/assets/js/mod/reply-editor.js (moved) (moved from src/assets/js/reply-editor.js ) (3 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);
+}