Create a Yaml Editor that can highlight certain areas
This is to track a sub-task related to #7 (moved).
I need to be able to programatically create Yaml from JSON (see #9 (moved)), and dynamically highlight a certain section inside the editor on a focus event.
I've been working on a Vue component with this characteristic:
<yaml-editor
highlight="pages.artifacts"
:value="{ pages: { artifacts: ['some value'] } }"
/>
Where value
is a JS Object that can be converted to yaml. It supports comments as defined in #9 (moved).
highlight
is a Path to anywhere inside the value
Object. The <yaml-editor/>
component is able to pinpoint the location of that sub-section inside the output yaml, and add a css class to those lines that results in these lines being highlighted. This property is reactive.
Demo
Edited by Janis Altherr