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:
- dark theme
- YAML syntax highlighting
Can you show me example? Thanks!