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:
- On scroll, walk backwards from the topmost visible line collecting
each line whose indent is strictly less than the previously collected
indent.
- Render those lines in an absolutely-positioned overlay pinned to the
top of the editor viewport.
- Clicking a sticky line scrolls to it.
src/util/yaml-sections.ts already handles top-level sections and
could be extended for nested scopes.
The legacy
esphome dashboardYAML editor had sticky scroll — as youscrolled through a long config, the enclosing scope headers (e.g.
sensor:→- platform: foo) stayed pinned to the top so you couldalways 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 ispurely indentation, a custom implementation is straightforward:
each line whose indent is strictly less than the previously collected
indent.
top of the editor viewport.
src/util/yaml-sections.tsalready handles top-level sections andcould be extended for nested scopes.