Changeset 91d948c in Klonkt

Timestamp:

06/18/2026 04:28:28 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

b08b5bc

Parents:

fbc8628

Message:

Editor: blockquote button is now a real toggle (turning it off works)

execCommand('formatBlock','blockquote') turns a quote ON but never turns
it OFF (browser quirk: the <blockquote> wrapper stays, even after ¶).
New toggleBlockquote() detects whether the caret is already inside a
blockquote and unwraps it (content put back in place, caret preserved);
otherwise it applies the quote. Button shows is-active when inside a quote.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

File:

• src/views/pages/post-edit.ejs (modified) (3 diffs)

src/views/pages/post-edit.ejs

@@ -1050 +1050 @@
     execCmd('createLink', url);
   }
+  // De huidige selectie zit in een <blockquote> binnen de editor? Geef 'm terug.
+  function blockquoteAncestor() {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return null;
+    let node = sel.anchorNode;
+    while (node && node !== editor) {
+      if (node.nodeType === 1 && node.tagName === 'BLOCKQUOTE') return node;
+      node = node.parentNode;
+    }
+    return null;
+  }
+  // Echte toggle: execCommand('formatBlock','blockquote') zet 'm wél AAN maar
+  // krijgt 'm nooit meer UIT (browser-quirk). Staat de caret al in een quote →
+  // pak de wrapper uit; anders pas blockquote toe.
+  function toggleBlockquote() {
+    editor.focus();
+    const bq = blockquoteAncestor();
+    if (bq) {
+      const parent = bq.parentNode;
+      // Inhoud uit de quote halen, op z'n plek, en de lege wrapper verwijderen.
+      const ref = bq;
+      let firstMoved = null;
+      while (bq.firstChild) {
+        const child = bq.firstChild;
+        if (!firstMoved) firstMoved = child;
+        parent.insertBefore(child, ref);
+      }
+      parent.removeChild(bq);
+      // Caret terugzetten in de uitgepakte inhoud.
+      if (firstMoved) {
+        const sel = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(firstMoved.nodeType === 1 ? firstMoved : parent);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    } else {
+      document.execCommand('formatBlock', false, 'blockquote');
+    }
+    updateToolbarState();
+    updateCharCount();
+  }
 
   if (toolbar) {
@@ -1060 +1103 @@
       if (cmd === 'link-prompt') linkPrompt();
       else if (cmd === 'code-wrap') wrapCode();
+      else if (cmd === 'formatBlock' && arg === 'blockquote') toggleBlockquote();
       else execCmd(cmd, arg);
     });
@@ -1073 +1117 @@
       try { btn.classList.toggle('is-active', document.queryCommandState(cmd)); } catch(_) {}
     }
+    // Quote-knop: actief als de caret in een <blockquote> staat (toggle-feedback).
+    const bqBtn = toolbar.querySelector('button[data-cmd="formatBlock"][data-arg="blockquote"]');
+    if (bqBtn) bqBtn.classList.toggle('is-active', !!blockquoteAncestor());
   }
   document.addEventListener('selectionchange', () => {