Sometimes caret jumps while typing in the document until the title/header is refreshed

[jsgrrchg]

Description

Sometimes the caret jumps or appears visually mispositioned while typing in the document body. The issue is not caused by typing in the title field itself.

A reliable workaround is to edit the note title once. After the title/header refreshes, caret behavior returns to normal temporarily.

Expected behavior

Typing in the document body should keep the caret visually stable and aligned with the text. Refreshing or editing the note title should not be required.

Actual behavior

The caret can jump or appear offset while typing in the document body. Editing the title appears to refresh the editor/header geometry and fixes the issue temporarily.

Code pointers

• apps/desktop/src/features/editor/Editor.tsx

  • attachScrollHeader() inserts .cm-lp-scroll-header into view.scrollDOM.
  • It calls view.requestMeasure() only when the header is attached.
  • The actual header content is rendered later through a React portal.

• apps/desktop/src/features/editor/MarkdownNoteHeader.tsx

  • The header has variable height: title, breadcrumb, toolbar, properties panel, wrapping title, etc.
  • There does not appear to be a CodeMirror measure refresh when this header height changes.

• apps/desktop/src/features/editor/extensions/editorGeometryRefresh.ts

  • There is already geometry-refresh infrastructure, but it is currently used by overlays such as review controls/change rail, not by the main editor header/caret geometry.

• apps/desktop/src/features/editor/extensions/livePreviewInline.ts

  • Leading frontmatter and leading H1 are collapsed in live preview, so stale geometry around the title/header area can affect body caret positioning.

Suspected cause

The note header is inserted into CodeMirror’s scroll container, but CodeMirror is only asked to measure when the empty header node is attached.

React later renders or updates variable-height header content inside that node. If the header height changes without view.requestMeasure(), CodeMirror can keep stale layout information. This can make the caret appear to jump or become visually misaligned while typing in the document.

Editing the title likely forces a rerender/layout refresh that indirectly fixes the stale geometry.

Suggested fix direction

Notify CodeMirror whenever the scroll header’s size/content changes.

Possible approaches:

• Observe .cm-lp-scroll-header with ResizeObserver and call view.requestMeasure().
• Or trigger view.requestMeasure() from a layout effect when header-affecting values change:
  • editableTitle
  • activeFrontmatter
  • propertiesExpanded
  • lineWrapping
  • title wrapping / header width changes
• Prefer a bounded helper around header geometry refresh rather than spreading ad hoc requestMeasure() calls.

Existing coverage

There are related tests for:

• title derivation from frontmatter / leading H1
• leading frontmatter and H1 collapse in live preview
• scroll restoration
• scroll header placement

But there does not appear to be a regression test for header height changing after CodeMirror has measured, followed by body typing/caret positioning.

Acceptance criteria

• Typing in the document body keeps the caret visually stable.
• Editing the title is no longer needed as a workaround.
• CodeMirror is remeasured when the note header changes size.
• Add regression coverage for header resize / title refresh affecting editor geometry.