Skip to content

YAML editor: sticky scroll missing (regression from legacy dashboard) #150

@swoboda1337

Description

@swoboda1337

The legacy esphome dashboard YAML editor had sticky scroll — as you
scrolled through a long config, the enclosing scope headers (e.g.
sensor:- platform: foo) stayed pinned to the top so you could
always see which component you were editing. The new builder's editor
doesn't, which is a regression.

The new editor is CodeMirror 6 (see src/components/yaml-editor.ts).
CodeMirror 6 has no first-party sticky scroll, so this needs either a
community extension or a small custom ViewPlugin. Since YAML scope is
purely indentation, a custom implementation is straightforward:

  1. On scroll, walk backwards from the topmost visible line collecting
    each line whose indent is strictly less than the previously collected
    indent.
  2. Render those lines in an absolutely-positioned overlay pinned to the
    top of the editor viewport.
  3. Clicking a sticky line scrolls to it.

src/util/yaml-sections.ts already handles top-level sections and
could be extended for nested scopes.

Metadata

Metadata

Assignees

Labels

enhancementImprovement to an existing feature

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions