Can't figure out YAML V6

v6
1

Hi there, im new to node js at all, i need simple YAML web editor with custom completions.

I trying for a las 6+ hours, but still no success.

I use Vite to compile my vanila js code, and currently it looks like this:

import {basicSetup, EditorView} from "codemirror"
import {keymap} from "@codemirror/view"
import {autocompletion} from "@codemirror/autocomplete"
import {indentWithTab} from "@codemirror/commands"
import {EditorState} from "@codemirror/state";

// Our list of completions (can be static, since the editor
/// will do filtering based on context).
const completions = [
    {label: "panic", type: "keyword"},
    {label: "park", type: "constant", info: "Test completion"},
    {label: "password", type: "variable"},
    {label: "pasta", type: "property"},
    {label: "pastel", type: "text"},
]

function myCompletions(context) {
    let before = context.matchBefore(/\w+/)
    // If completion wasn't explicitly started and there
    // is no word before the cursor, don't open completions.
    if (!context.explicit && !before) return null
    return {
        from: before ? before.from : context.pos,
        options: completions,
        validFor: /^\w*$/
    }
}

// Hide the textarea used as the editor's source
const editorSource = document.getElementById("editorSource");
editorSource.setAttribute("hidden", "true");

let view = new EditorView({
    state: EditorState.create({
        doc: editorSource.value,
        extensions: [
            basicSetup,
            autocompletion({override: [myCompletions]}),
            keymap.of([indentWithTab]),
        ]
    }),
    parent: document.getElementById("app"),
})

Just reading half questions about yaml here, but no answer on my question (or something at 5 version)

I can’t figure out how to do this:

  1. dark theme
  2. YAML syntax highlighting

Can you show me example? Thanks!