From 158b5f19616428418f943657dc289388fc5025c1 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Mon, 24 Aug 2026 21:41:33 +0000
Subject: [PATCH] Editor panel layout fixes, use body scroll and bidirectional
 sync with editor.

---
 docs/design-principles.md        |  2 +-
 docs/editing.md                  |  2 +-
 frontend/src/PageEditor.vue      | 48 ++++++++++++++++++++++--------
 frontend/src/assets/pagerite.css | 51 +++++++++++---------------------
 frontend/src/main.js             | 26 +++++++++++++++-
 5 files changed, 80 insertions(+), 49 deletions(-)

diff --git a/docs/design-principles.md b/docs/design-principles.md
index a60bf17..2bf7f01 100644
--- a/docs/design-principles.md
+++ b/docs/design-principles.md
@@ -45,7 +45,7 @@ Pagerite is a single-user CMS/blog. This document records the initial high-level
 ## Editing
 
 - Editing happens **in place**, in two modes opened by two pens:
-  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which is how new pages start) opens a CodeMirror Markdown editor docked to the left of the article: the host sits inside `#content` (below the banner, never over the footer), the content shifts right and the sidebar hides while editing. Preview renders server-side per keystroke (no debouncing) straight into the visible article's heading and body.
+  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which is how new pages start) opens a CodeMirror Markdown editor docked to the left of the article: the panel is fixed to the viewport's left edge (its top tracks the banner's bottom until the banner scrolls away), the content shifts right and the sidebar hides while editing. Preview renders server-side per keystroke (no debouncing) straight into the visible article's heading and body.
   - **Site mode** — the 🖊️ on the banner opens a panel with the site **brand** (applied to the header live), a **theme** selector (swapping the theme stylesheet in place), **font** picks (heading/body/brand — stored as plain `:root` rows inside the custom CSS, referencing the base stylesheet's per-family font variables), a **site-wide custom CSS** field (injected into `<style id="pagerite-user">` in the live page head and swapped during fetch-navigation), the page's **banner design** selector (inherit / none / any design found on disk, inherited by children), the page's **banner HTML** field (supplementing the design, previewed into the real banner region, so you see exactly which banner you're editing) and the **structure tree**. Everything saves immediately as you edit — no save button, no edit mode.
 - Clicking a pen again closes the editor (without saving; a dirty preview reloads the page). The pens are `<button>`s wired up by `pagerite.js` — editing is an action, not a navigation. The editor's WebSocket **reconnects automatically** with local text and pending saves preserved. (All users are trusted authors for now; access control later with SSO.)
 - **CodeMirror 6** for Markdown editing (no WYSIWYG), title/published controls. Images can be pasted straight into the editor or chosen via a file input: they upload to the content store (`PUT /_api/files/...`) and insert `![alt](/_f/hash.ext)` at the cursor.
diff --git a/docs/editing.md b/docs/editing.md
index 21b5105..8d9fa44 100644
--- a/docs/editing.md
+++ b/docs/editing.md
@@ -6,7 +6,7 @@ The Vue editor is a single tabbed `EditorShell.vue` mounted in a host div create
 
 The shell hosts four kept-alive tabs (ordered site-wide first — site, structure — then, after a visual break, the per-page tabs — article, banner):
 
-- `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor scroll drives the article scroll — while any editor is open the window scroll is locked (`body.editing`), the panel exactly fills the available window height, and only `#main` scrolls; a format bar offers Markdown helpers — bold/italic/code/link/table/image upload, with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
+- `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor and article scrolls are linked proportionally both ways, applied instantly (the window keeps scrolling normally while any editor is open — the panel is fixed to the viewport's left edge, its top tracking the banner's bottom edge until the banner scrolls away — and the panel scrolls internally); a format bar offers Markdown helpers — bold/italic/code/link/table/image upload, with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
 - `BannerEditor.vue` — per-page banner HTML + banner design selector, previewed into `#page-banner`.
 - `SiteEditor.vue` — site brand + optional custom brand HTML with image/video upload + theme selector + font picker + favicon upload — clicking the preview tile picks a new one — + site-wide custom CSS, CSS injected into `<head id="pagerite-user">`.
 - `StructureEditor.vue` — the vue-draggable structure tree with always-editable title/slug inputs per row.
diff --git a/frontend/src/PageEditor.vue b/frontend/src/PageEditor.vue
index 991bac3..a8dfba1 100644
--- a/frontend/src/PageEditor.vue
+++ b/frontend/src/PageEditor.vue
@@ -4,9 +4,9 @@
 // (/_api/ws/editor). Docked left of the article on the page itself.
 // The socket connects when the editor is opened and reconnects with
 // exponential backoff after a failure; unsaved text and pending saves
-// survive a disconnect. Editor scroll drives the article scroll (while
-// editing the window scroll is locked and only #main scrolls), keeping the
-// rendered article at the cursor's position. Saving (💾 / Ctrl+S) is explicit
+// survive a disconnect. Editor and article (window) scrolls are linked
+// proportionally both ways (syncWindowToEditor / syncEditorToWindow).
+// Saving (💾 / Ctrl+S) is explicit
 // and refreshes the page regions in place — never a reload — so the editor
 // state (unsaved text included) also survives closing the shell; it is lost
 // only on a real page reload.
@@ -307,19 +307,37 @@ function onEditorShown() {
   if (dirty.value) requestRender()
 }
 
-function syncScroll() {
-  // Editor scroll drives the article: keep the rendered page at the same
-  // proportional position as the cursor area in the editor. While editing
-  // the window scroll is locked and #main is the scrolling element.
+// Bidirectional proportional scroll sync between the CodeMirror scroller
+// and the window (the article's scroller, also while editing). Both
+// directions apply instantly (never smooth — a smooth window scroll feeds
+// its intermediate positions back into the editor and fights the user's
+// scrolling) and coalesce to one update per frame. Loops are broken two
+// ways: a one-frame driver flag, and a 1px tolerance so the scroll events
+// caused by our own writes are no-ops. When the panel's height changes
+// mid-scroll (its top tracks the banner), the page is the driver: the
+// editor is re-matched to the page's position, never vice versa.
+function syncWindowToEditor() {
   if (syncingScroll || !view) return
-  const main = document.getElementById('main')
-  if (!main) return
   syncingScroll = true
   requestAnimationFrame(() => {
     const scroller = view.scrollDOM
     const max = scroller.scrollHeight - scroller.clientHeight
     const pct = max > 0 ? scroller.scrollTop / max : 0
-    main.scrollTop = pct * (main.scrollHeight - main.clientHeight)
+    const y = pct * Math.max(0, document.documentElement.scrollHeight - innerHeight)
+    if (Math.abs(scrollY - y) > 1) scrollTo({ top: y, behavior: 'instant' })
+    syncingScroll = false
+  })
+}
+
+function syncEditorToWindow() {
+  if (syncingScroll || !view) return
+  syncingScroll = true
+  requestAnimationFrame(() => {
+    const scroller = view.scrollDOM
+    const pageMax = Math.max(0, document.documentElement.scrollHeight - innerHeight)
+    const pct = pageMax > 0 ? scrollY / pageMax : 0
+    const top = pct * Math.max(0, scroller.scrollHeight - scroller.clientHeight)
+    if (Math.abs(scroller.scrollTop - top) > 1) scroller.scrollTop = top
     syncingScroll = false
   })
 }
@@ -379,7 +397,11 @@ onMounted(() => {
     }),
     parent: editorEl.value,
   })
-  view.scrollDOM.addEventListener('scroll', syncScroll)
+  view.scrollDOM.addEventListener('scroll', syncWindowToEditor)
+  // Page → editor: window scroll (and resizes, e.g. the panel growing when
+  // the banner scrolls away) re-match the editor to the page's position.
+  addEventListener('scroll', syncEditorToWindow, { passive: true })
+  addEventListener('resize', syncEditorToWindow)
   // Opening the editor means you want to write: start focused.
   view.focus()
   window.__pageritePageEditor = {
@@ -399,6 +421,8 @@ onUnmounted(() => {
   }
   view?.destroy()
   delete window.__pageritePageEditor
+  removeEventListener('scroll', syncEditorToWindow)
+  removeEventListener('resize', syncEditorToWindow)
   removeEventListener('keydown', onKeydown)
   removeEventListener('pagerite:editor-shown', onEditorShown)
 })
@@ -606,7 +630,7 @@ onUnmounted(() => {
 
 /* CodeMirror sits inside a bordered box, like a dialog's input area, with
    a slight margin to the panel edges. Wheel scroll stays in the editor and
-   drives the article (syncScroll) instead of double-scrolling. */
+   drives the article (syncWindowToEditor) instead of double-scrolling. */
 .editor {
   flex: 1;
   min-width: 0;
diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index 1f48e86..3e0f5d3 100644
--- a/frontend/src/assets/pagerite.css
+++ b/frontend/src/assets/pagerite.css
@@ -269,10 +269,9 @@ body:has(.multicol) #content {
 
 body.editing #content {
   margin-left: var(--editor-w);
-  padding-left: 1rem;
-  /* gap between the docked editor and the content */
-  /* No overflow clipping here: .editor-host lives outside this box
-     (negative left), and .wide shrink-wraps to the remaining space. */
+  /* No padding/gap here: the article area starts flush at the panel's right
+     edge so that full-bleed .wide images (anchored to that edge below) line
+     up with it exactly. */
 }
 
 /* The sidebar's gutter space is needed by the editor instead. */
@@ -280,33 +279,17 @@ body.editing #sidebar {
   display: none;
 }
 
-/* While editing, the window itself does not scroll: the editor panel is
-   exactly the remaining window height, and only the article area (#main)
-   scrolls. Without the editor, normal full-page scroll applies. */
-body.editing {
-  height: 100vh;
-  overflow: hidden;
-}
-
-body.editing #content {
-  min-height: 0;
-  grid-template-rows: 100%;
-}
-
-body.editing #main {
-  height: 100%;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-/* The editor host lives inside #content: it starts below the banner and
-   ends above the footer. With the page scroll locked while editing, the
-   panel exactly fills that space — the full available window height. */
+/* While editing, the window keeps scrolling normally (the overlay
+   scrollbars take no layout space, so the vw-based .wide bleed stays exact
+   and no horizontal scrollbar appears). The editor panel is fixed to the
+   viewport's left edge; main.js sets its top each scroll frame — the
+   banner's bottom edge while the banner is visible, else the viewport top.
+   The panel scrolls internally. */
 .editor-host {
-  position: absolute;
-  top: 0;
+  position: fixed;
+  top: 0; /* main.js: banner bottom while visible, else 0 */
   bottom: 0;
-  left: calc(0px - var(--editor-w));
+  left: 0;
   width: var(--editor-w);
 }
 
@@ -826,18 +809,18 @@ body:has(.multicol) figure:has(.wide) {
   margin-inline: calc(-20vw - 1.25rem) 0;
 }
 
-/* Editing: shrink the bleed to the space right of the docked editor. */
+/* Editing: shrink the bleed to the space right of the docked editor. The
+   window keeps its overlay scrollbars while editing, so — unlike a classic
+   scrollbar — they take no layout space and the vw math stays exact. */
 body.editing figure:has(.wide) {
   width: calc(100vw - var(--editor-w));
   margin-inline: calc(50% - (100vw - var(--editor-w)) / 2);
 }
 
 /* Editing + multicol: the left gutter is 1/5 of the space right of the
-   editor, and the bleed also crosses #content's 1rem editing gap plus
-   main's 1.25rem left padding (the gutter shrink from the padding roughly
-   cancels the rounding): −2rem in total. */
+   editor, and the bleed also crosses main's 1.25rem left padding. */
 body.editing:has(.multicol) figure:has(.wide) {
-  margin-inline: calc((100vw - var(--editor-w)) / -5 - 2rem) 0;
+  margin-inline: calc((100vw - var(--editor-w)) / -5 - 1.25rem) 0;
 }
 
 /* Narrow windows with a sidebar: below 102rem the symmetric gutters can no
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 22a9173..0b5e2f4 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -23,6 +23,28 @@ let app = null
 let savedTitle = null
 let visible = false
 
+// The panel is fixed to the viewport's left edge (pagerite.css) but tracks
+// the page: its top is the banner's bottom edge while the banner is visible
+// (= #content's top edge), and the viewport top once the banner has
+// scrolled away. The window keeps scrolling normally while editing.
+function trackPanelTop() {
+  const content = document.getElementById('content')
+  if (host && content) {
+    host.style.top = `${Math.max(0, content.getBoundingClientRect().top)}px`
+  }
+}
+
+function startTrackingPanel() {
+  trackPanelTop()
+  addEventListener('scroll', trackPanelTop, { passive: true })
+  addEventListener('resize', trackPanelTop)
+}
+
+function stopTrackingPanel() {
+  removeEventListener('scroll', trackPanelTop)
+  removeEventListener('resize', trackPanelTop)
+}
+
 export function openEditor(path, { mode = 'page' } = {}) {
   if (app) {
     // Shell already mounted: re-show it if hidden, switch to the requested
@@ -36,9 +58,9 @@ export function openEditor(path, { mode = 'page' } = {}) {
   savedTitle = document.title
   host = document.createElement('div')
   host.className = 'editor-host'
-  // Docked inside #content: below the banner, next to the article only.
   document.getElementById('content').prepend(host)
   document.body.classList.add('editing')
+  startTrackingPanel()
   // Which tab is active; pagerite.js uses this to decide whether a pen click
   // closes the panel or switches tabs.
   document.body.dataset.editorMode = mode
@@ -65,6 +87,7 @@ function showEditor() {
   host.style.display = ''
   host.firstElementChild?.classList.remove('closing')
   document.body.classList.add('editing')
+  startTrackingPanel()
   visible = true
   dispatchEvent(new CustomEvent('pagerite:editor-shown'))
 }
@@ -72,6 +95,7 @@ function showEditor() {
 export function closeEditor() {
   if (!visible) return
   visible = false
+  stopTrackingPanel()
   document.body.classList.remove('editing')
   // dataset.editorMode is kept while hidden: the tabs use it to tell whether
   // a pagerite:editor-shown event targets them.