Changeset a7e8e19 in Klonkt

Timestamp:

06/19/2026 10:34:24 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

16ce669

Parents:

f83ccf3

Message:

fix(editor): mobile — formatting buttons no longer steal focus (toggle + no jump)

Toolbar buttons called editor.focus() on click after the tap had already
moved focus/selection out of the contenteditable field → bold/italic
could not be toggled off and the page jumped to the caret. Now
mousedown-preventDefault on the toolbar (focus stays in the editor) +
editor.focus({preventScroll:true}) + touch-action:manipulation for snappy
taps.

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

Files:

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

CHANGELOG.md

@@ -13 +13 @@
 
 ## [Unreleased]
+
+### Opgelost
+- Posts schrijven op mobiel: een opmaakknop (vet/cursief/…) stal de focus uit het
+  tekstveld → de selectie ging verloren (vet kon niet meer uitgezet worden) en de
+  pagina sprong naar beneden. De toolbar houdt de focus nu in de editor
+  (mousedown-preventDefault + focus zonder scroll), dus toggelen werkt en er is geen
+  sprong meer. Toolbar-taps zijn ook sneller (touch-action: manipulation).
 
 ### Toegevoegd

src/views/pages/post-edit.ejs

@@ -393 +393 @@
   width: 32px; height: 32px;
   padding: 0;
+  touch-action: manipulation; /* snappy taps op mobiel, geen dubbeltik-zoom */
+  -webkit-user-select: none; user-select: none;
   background: transparent;
   border: 1px solid transparent;
@@ -1037 +1039 @@
   // ── Toolbar wiring
   function execCmd(cmd, arg) {
-    editor.focus();
+    editor.focus({ preventScroll: true });
     document.execCommand(cmd, false, arg);
     updateToolbarState();
@@ -1055 +1057 @@
     sel.removeAllRanges();
     sel.addRange(range);
-    editor.focus();
+    editor.focus({ preventScroll: true });
   }
   function linkPrompt() {
@@ -1077 +1079 @@
   // pak de wrapper uit; anders pas blockquote toe.
   function toggleBlockquote() {
-    editor.focus();
+    editor.focus({ preventScroll: true });
     const bq = blockquoteAncestor();
     if (bq) {
@@ -1107 +1109 @@
 
   if (toolbar) {
+    // CRUCIAAL (mobiel + desktop): voorkom dat een toolbar-knop de focus/selectie
+    // uit het editor-veld steelt. Zonder dit raakt de selectie kwijt bij het tikken
+    // → execCommand werkt op een lege selectie (vet kan niet meer UIT) én de browser
+    // scrollt de caret opnieuw in beeld (de "sprong naar beneden"). preventDefault op
+    // mousedown houdt de focus in de editor; de click blijft gewoon vuren.
+    toolbar.addEventListener('mousedown', (e) => {
+      if (e.target.closest('button')) e.preventDefault();
+    });
     toolbar.addEventListener('click', (e) => {
       const btn = e.target.closest('button[data-cmd]');
@@ -1166 +1176 @@
       const j = await uploadImage(file);
       const img = '<img src="' + j.url + '" alt="">';
-      editor.focus();
+      editor.focus({ preventScroll: true });
       document.execCommand('insertHTML', false, img);
       contentStatus.textContent = 'Ingevoegd ✓';
@@ -1204 +1214 @@
   // ── Insert chip helpers (track / playlist)
   function insertChip(kind, value) {
-    editor.focus();
+    editor.focus({ preventScroll: true });
     const chip = makeChip(kind, value);
     // Insert at caret using the Selection API (execCommand insertNode)