Changeset 61bb585 in Klonkt

Timestamp:

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

Author:

roboburr <roboburr@…>

Branches:

main

Children:

a4f6827

Parents:

5d68686

Message:

feat(editor): content not typeable inline on touch — editing = fullscreen

On pointer:coarse the content field is inline contenteditable=false (not
a text field); a tap opens fullscreen where contenteditable=true is set +
focus is given. Exit fullscreen → non-editable again + blur. "Tap to
edit" pill as affordance; placeholder → "Tap to write…". Desktop
unchanged.

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

Files:

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

CHANGELOG.md

@@ -49 +49 @@
   te scrollen (scroll-binnen-scroll was verwarrend). Het inline schrijfveld groeit
   ook gewoon mee; typen op mobiel/tablet gaat sowieso fullscreen.
-- Op **mobiel & tablet** (touch) gebeurt typen voortaan **altijd in volledig scherm**:
-  zodra je in het schrijfveld tikt, gaat de editor automatisch fullscreen. Eruit met
-  de knop (⤡) of Escape.
+- Op **mobiel & tablet** (touch) is het content-veld inline **niet meer typbaar** —
+  het is geen tekstveld maar een tap-vlak met een "✎ Tik om te bewerken"-pill. Eén
+  tik opent **volledig scherm**, waar het wél bewerkbaar is. Eruit met de knop (⤡)
+  of Escape. Zo kun je nooit per ongeluk inline typen.
 - Schrijfvenster kan op **volledig scherm** (knop in de editor-toolbar, of Escape om
   terug te gaan) — fijn voor afleidingsvrij schrijven op mobiel. De opmaak-toolbar

src/views/pages/post-edit.ejs

@@ -477 +477 @@
    scrollt. */
 .pe-editor-frame:not(.pe-fs) .pe-editor { overflow: visible; }
+
+/* Touch: het inline content-veld is geen tekstveld maar een tap-vlak → fullscreen
+   bewerken. Een duidelijke "tik om te bewerken"-pill maakt dat zichtbaar. */
+.pe-editor.pe-tap-to-edit { cursor: pointer; }
+@media (pointer: coarse) {
+  .pe-editor-frame:not(.pe-fs) { position: relative; }
+  .pe-editor-frame:not(.pe-fs)::after {
+    content: "✎ Tik om te bewerken";
+    position: absolute; right: .6rem; bottom: .6rem;
+    background: var(--accent); color: #fff;
+    font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px;
+    pointer-events: none; opacity: .92; box-shadow: 0 2px 8px rgba(0,0,0,.25);
+  }
+}
 .pe-editor.is-dragover {
   outline: 2px dashed var(--accent);
@@ -1214 +1228 @@
   const fsBtn = document.getElementById('pe-fullscreen-btn');
   const editorFrame = document.querySelector('.pe-editor-frame');
+  const isTouch = !!(window.matchMedia && window.matchMedia('(pointer: coarse)').matches);
 
   // Op mobiel duwt het toetsenbord de zichtbare (visual) viewport omhoog terwijl
@@ -1251 +1266 @@
       }
     }
+    // Op touch is het veld inline NIET bewerkbaar; alleen in fullscreen wel.
+    if (isTouch) editor.setAttribute('contenteditable', on ? 'true' : 'false');
     if (on) editor.focus({ preventScroll: true });
+    else if (isTouch) editor.blur();
   }
   if (fsBtn) fsBtn.addEventListener('click', toggleFullscreen);
@@ -1261 +1279 @@
   });
 
-  // Op mobiel/tablet (touch-apparaat = pointer:coarse) gebeurt typen ALTIJD
-  // fullscreen. We gaan fullscreen zowel bij focus ALS bij de eerste invoer
-  // (beforeinput) — zo kun je ook na het verlaten van fullscreen niet per ongeluk
-  // zonder fullscreen doortypen. Eruit kan met de knop (⤡) of Escape.
-  var isTouch = window.matchMedia && window.matchMedia('(pointer: coarse)').matches;
+  // Op mobiel/tablet (touch): het content-veld is INLINE NIET bewerkbaar — het is
+  // dan geen tekstveld. Eén tik → fullscreen, waar het wél bewerkbaar wordt
+  // (toggleFullscreen zet contenteditable aan/uit). Zo kun je nooit inline typen.
   if (isTouch) {
-    var enterFs = function () {
+    editor.setAttribute('contenteditable', 'false');
+    editor.classList.add('pe-tap-to-edit');
+    editor.setAttribute('data-placeholder', 'Tik om te schrijven…');
+    editor.addEventListener('click', function () {
       if (editorFrame && !editorFrame.classList.contains('pe-fs')) toggleFullscreen();
-    };
-    editor.addEventListener('focus', enterFs);
-    editor.addEventListener('beforeinput', enterFs);
-    editor.addEventListener('pointerup', enterFs);
+    });
   }