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

https://youtu.be/iouVys2_kps?t=182