3.2.)
geänderte main.js
mit ¶ Zusatzfunktion um z. B. Leerzeichen (whitespace) im Editor als Punkt "•" zu kennzeichnen.


-- -- -- -- -- -- -- -- -- --
import { EditorView, basicSetup } from "codemirror"
import { html } from "@codemirror/lang-html"
import { oneDark } from "@codemirror/theme-one-dark"
import { indentUnit } from "@codemirror/language"
import { linter, lintGutter } from "@codemirror/lint"
import { syntaxTree } from "@codemirror/language"
import { highlightWhitespace } from "@codemirror/view" // WICHTIG
import { Compartment } from "@codemirror/state" // WICHTIG

// Ein Compartment erlaubt es, Extensions im laufenden Betrieb zu ändern
const whitespaceComp = new Compartment();

window.createMyEditor = (element, initialContent) => {
const view = new EditorView({
doc: initialContent,
extensions: [
basicSetup,
html({ selfClosingTags: true, matchClosingTags: true }),
oneDark,
indentUnit.of(" "), // Auf 2 Leerzeichen gestellt
EditorView.lineWrapping,
lintGutter(),
// Das Whitespace-Compartment startet standardmäßig leer (aus)
whitespaceComp.of([]),
linter((view) => {
let diagnostics = [];
syntaxTree(view.state).iterate({
enter: (node) => {
if (node.type.isError) {
diagnostics.push({
from: node.from, to: node.to,
severity: "error", message: "Ungültige HTML-Struktur"
});
}
}
});
return diagnostics;
})
],
parent: element
});

// Wir hängen eine eigene Funktion an das View-Objekt,
// um die Whitespaces von außen umschalten zu können
view.toggleWS = (show) => {
view.dispatch({
effects: whitespaceComp.reconfigure(show ? highlightWhitespace() : [])
});
};

return view;
};
-- -- -- -- -- -- -- -- -- --