Changeset cbfbf88 in Klonkt

Timestamp:

06/19/2026 12:06:00 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

f8e8f9e

Parents:

5f7dba2

Message:

fix(editor): no view jump on formatting button — hold scroll position

execCommand/insert scrolls the caret into view by default → the view
jumps when clicking bold/italic/quote/code. keepScroll() saves and
restores the scroll position (window + editor, sync + after 1 frame)
around execCmd/wrapCode/toggleBlockquote. The user now scrolls manually.

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

Files:

• CHANGELOG.md (modified) (1 diff)
• src/views/pages/post-edit.ejs (modified) (3 diffs)

CHANGELOG.md

@@ -15 +15 @@
 
 ### Opgelost
+- Editor: het beeld verspringt niet meer bij het aanklikken van een opmaakknop.
+  `execCommand` scrollde de caret in beeld; de scrollpositie wordt nu vastgehouden
+  rond elk opmaak-commando, zodat je zelf scrollt.
 - Post-editor op mobiel: de Opslaan/Annuleren-balk blijft nu net bóven het
   toetsenbord (sticky met dynamische bottom-offset = max van toetsenbord- en

src/views/pages/post-edit.ejs

@@ -1074 +1074 @@
 
   // ── Toolbar wiring
+  // Houd de scrollpositie vast rond een edit-commando. execCommand/insert scrollt
+  // standaard de caret in beeld → het beeld "verspringt" bij het aanklikken van een
+  // opmaakknop. Door de positie te bewaren en terug te zetten (sync + na 1 frame)
+  // blijft het beeld staan; de gebruiker scrollt zelf.
+  function keepScroll(fn) {
+    const x = window.scrollX, y = window.scrollY, es = editor.scrollTop;
+    fn();
+    window.scrollTo(x, y); editor.scrollTop = es;
+    requestAnimationFrame(function () { window.scrollTo(x, y); editor.scrollTop = es; });
+  }
   function execCmd(cmd, arg) {
-    editor.focus({ preventScroll: true });
-    document.execCommand(cmd, false, arg);
+    keepScroll(function () {
+      editor.focus({ preventScroll: true });
+      document.execCommand(cmd, false, arg);
+    });
     updateToolbarState();
     updateCharCount();
@@ -1083 +1095 @@
     const sel = window.getSelection();
     if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
-    const range = sel.getRangeAt(0);
-    const code = document.createElement('code');
-    code.textContent = sel.toString();
-    range.deleteContents();
-    range.insertNode(code);
-    // Move caret after the new node
-    range.setStartAfter(code);
-    range.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(range);
-    editor.focus({ preventScroll: true });
+    keepScroll(function () {
+      const range = sel.getRangeAt(0);
+      const code = document.createElement('code');
+      code.textContent = sel.toString();
+      range.deleteContents();
+      range.insertNode(code);
+      // Move caret after the new node
+      range.setStartAfter(code);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+      editor.focus({ preventScroll: true });
+    });
   }
   function linkPrompt() {
@@ -1115 +1129 @@
   // pak de wrapper uit; anders pas blockquote toe.
   function toggleBlockquote() {
-    editor.focus({ preventScroll: true });
-    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);
+    keepScroll(function () {
+      editor.focus({ preventScroll: true });
+      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');
       }
-      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();