Merge pull request #278 from Stvad/claude/infallible-chatterjee-e51521

fix(editor): stop block editor text shifting up on multi-line selection (iOS) + WebKit/iPad QA harness

Author: Stvad

scripts/vite-qa.config.mjs

@@ -0,0 +1,61 @@
+import { defineConfig, mergeConfig } from 'vite'
+import { fileURLToPath } from 'node:url'
+import { existsSync } from 'node:fs'
+import path from 'node:path'
+import base from '../vite.config.ts'
+
+// QA-only vite config for running a dev server INSIDE a git worktree.
+//
+// A worktree has no node_modules of its own — deps resolve up to the main
+// checkout — so vite's default `server.fs.allow` (rooted at the worktree)
+// rejects every parent-dependency request with 403 and the app hangs on
+// "Loading…".
+//
+// Do NOT fix this by disabling `fs.strict`: that makes Vite serve ANY local
+// file over `/@fs/...` (e.g. /etc/hosts, ~/.ssh, .env), which is a real hazard
+// because this server is reached over the Tailscale tunnel during iPad testing
+// (VITE_TUNNEL in vite.config.ts), not just localhost. Instead keep strict on
+// and explicitly allow the worktree plus the checkout that actually holds
+// node_modules — Vite's default deny list still blocks everything outside.
+//
+// Kept as plain .mjs (like webkit-qa.mjs) so `tsc -b` doesn't typecheck it
+// against the app's vite config types.
+//
+// Run from the worktree root, pointing node DIRECTLY at the installed Vite
+// binary. The worktree has no node_modules/vite of its own (so the bare
+// `node node_modules/vite/bin/vite.js` exits with MODULE_NOT_FOUND), and Vite's
+// package `exports` don't expose the bin to require.resolve — so derive the
+// checkout that holds it from git. This form works from a worktree or a normal
+// checkout regardless of nesting depth:
+//
+//   node "$(dirname "$(git rev-parse --path-format=absolute --git-common-dir)")/node_modules/vite/bin/vite.js" \
+//     --config scripts/vite-qa.config.mjs --port 5199 --strictPort
+const worktreeRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+// Walk up to the nearest ancestor whose node_modules holds REAL packages (the
+// main checkout, when run from a worktree; the worktree itself for a normal
+// checkout). A worktree's own node_modules is cache-only (.vite/.cache) — node
+// resolves actual deps up the tree — so probe for `node_modules/vite` (the dev
+// server we're running) rather than a bare node_modules dir. depsRoot contains
+// the worktree, so allowing it covers both source and the resolved deps.
+let depsRoot = worktreeRoot
+while (
+  !existsSync(path.join(depsRoot, 'node_modules', 'vite')) &&
+  path.dirname(depsRoot) !== depsRoot
+) {
+  depsRoot = path.dirname(depsRoot)
+}
+// Fail CLOSED. If no ancestor has node_modules/vite, the loop above exits with
+// depsRoot at the filesystem root — allow-listing `/` would re-open the very
+// arbitrary-file-read hole this config exists to prevent. Refuse to start.
+if (!existsSync(path.join(depsRoot, 'node_modules', 'vite'))) {
+  throw new Error(
+    `vite-qa.config: no ancestor of ${worktreeRoot} has node_modules/vite — ` +
+      `refusing to start rather than allow-list the filesystem root. ` +
+      `Run from a worktree nested under an installed checkout.`,
+  )
+}
+
+export default defineConfig(async (env) => {
+  const resolved = typeof base === 'function' ? await base(env) : base
+  return mergeConfig(resolved, { server: { fs: { allow: [worktreeRoot, depsRoot] } } })
+})

src/utils/codemirror.ts

@@ -153,6 +153,18 @@ export const createMinimalMarkdownConfig = (
         fontSize: "inherit",
         color: "inherit",
         lineHeight: "inherit",
+        // Each block is its own auto-height editor that must never scroll
+        // internally — the surrounding page is the only scroll container.
+        // CodeMirror's base theme makes `.cm-scroller` `overflow: auto`, and
+        // the selection layer reports a few px of phantom scrollHeight beyond
+        // the content (the touch selection handles past the last line). On iOS
+        // WebKit, dragging a multi-line selection through the last line fires a
+        // native scroll-to-selection that scrolls the editor into that phantom
+        // gap and leaves `scrollTop` stuck > 0 — the whole block's text appears
+        // to shift up by those few px. `clip` makes the scroller a non-scroll
+        // container (so scroll-to-selection can't move it) and clips the
+        // overhang. Verified on-device (iPad, iOS 26): the shift is gone.
+        overflow: "clip",
       },
       '.cm-editor': {outline: 'none'},
       '.cm-focused': {outline: 'none'},
@@ -188,7 +200,15 @@ export const createTypeScriptConfig = (): Extension[] => [
     '&': {background: 'transparent', color: 'inherit'},
     '.cm-editor': {border: '1px solid hsl(var(--border))', borderRadius: '4px'},
     '.cm-content': {padding: '8px'},
+    // Wrapping (below) means no horizontal scroll, so the scroller can be a
+    // non-scroll container — same as the markdown block editor. This also
+    // avoids the iOS multi-line-selection scroll-shift (see the `.cm-scroller`
+    // note in createMinimalMarkdownConfig).
+    '.cm-scroller': {overflow: 'clip'},
   }),
+  // Wrap long code lines instead of scrolling horizontally — in a narrow
+  // outliner column, off-screen horizontal scroll hides content.
+  EditorView.lineWrapping,
 ]
 
 /**