build(deps): bump codemirror from 5.65.6 to 6.0.1 in /web (#3188)

* build(deps): bump codemirror from 5.65.6 to 6.0.1 in /web

Bumps [codemirror](https://github.com/codemirror/basic-setup) from 5.65.6 to 6.0.1.
- [Release notes](https://github.com/codemirror/basic-setup/releases)
- [Changelog](https://github.com/codemirror/basic-setup/blob/main/CHANGELOG.md)
- [Commits](https://github.com/codemirror/basic-setup/commits/6.0.1)

---
updated-dependencies:
- dependency-name: codemirror
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* upgrade

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/CodeMirror.ts

@@ -1,24 +1,21 @@
-import CodeMirror from "codemirror";
-import "codemirror/addon/dialog/dialog";
-import "codemirror/addon/display/autorefresh";
-import "codemirror/addon/hint/show-hint";
-import "codemirror/addon/search/search";
-import "codemirror/addon/search/searchcursor";
-import "codemirror/mode/htmlmixed/htmlmixed.js";
-import "codemirror/mode/javascript/javascript.js";
-import "codemirror/mode/python/python.js";
-import "codemirror/mode/xml/xml.js";
-import "codemirror/mode/yaml/yaml.js";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { html as htmlLang } from "@codemirror/lang-html";
+import { javascript } from "@codemirror/lang-javascript";
+import { python } from "@codemirror/lang-python";
+import { xml } from "@codemirror/lang-xml";
+import {
+    LanguageSupport,
+    StreamLanguage,
+    defaultHighlightStyle,
+    syntaxHighlighting,
+} from "@codemirror/language";
+import * as yamlMode from "@codemirror/legacy-modes/mode/yaml";
+import { EditorState, Extension } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers } from "@codemirror/view";
 import YAML from "yaml";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-
-import CodeMirrorDialogStyle from "codemirror/addon/dialog/dialog.css";
-import CodeMirrorShowHintStyle from "codemirror/addon/hint/show-hint.css";
-import CodeMirrorStyle from "codemirror/lib/codemirror.css";
-import CodeMirrorTheme from "codemirror/theme/monokai.css";
 
 @customElement("ak-codemirror")
 export class CodeMirrorTextarea extends LitElement {
@@ -31,7 +28,7 @@ export class CodeMirrorTextarea extends LitElement {
     @property()
     name?: string;
 
-    editor?: CodeMirror.EditorFromTextArea;
+    editor?: EditorView;
 
     _value?: string;
 
@@ -56,7 +53,9 @@ export class CodeMirrorTextarea extends LitElement {
             }
         }
         if (this.editor) {
-            this.editor.setValue(textValue);
+            this.editor.dispatch({
+                changes: { from: 0, to: this.editor.state.doc.length, insert: textValue },
+            });
         } else {
             this._value = textValue;
         }
@@ -82,49 +81,42 @@ export class CodeMirrorTextarea extends LitElement {
         if (!this.editor) {
             return "";
         }
-        return this.editor.getValue();
+        return this.editor.state.doc.toString();
     }
 
-    static get styles(): CSSResult[] {
-        return [
-            CodeMirrorStyle,
-            CodeMirrorTheme,
-            CodeMirrorDialogStyle,
-            CodeMirrorShowHintStyle,
-            css`
-                .CodeMirror-wrap pre {
-                    word-break: break-word !important;
-                }
-            `,
-        ];
+    getLanguageExtension(): LanguageSupport | undefined {
+        switch (this.mode.toLowerCase()) {
+            case "xml":
+                return xml();
+            case "javascript":
+                return javascript();
+            case "html":
+                return htmlLang();
+            case "python":
+                return python();
+            case "yaml":
+                return new LanguageSupport(StreamLanguage.define(yamlMode.yaml));
+        }
+        return undefined;
     }
 
     firstUpdated(): void {
-        const textarea = this.shadowRoot?.querySelector("textarea");
-        if (!textarea) {
-            return;
-        }
-        this.editor = CodeMirror.fromTextArea(textarea, {
-            mode: this.mode,
-            theme: "monokai",
-            lineNumbers: false, // Line Numbers seem to be broken on firefox?
-            readOnly: this.readOnly,
-            autoRefresh: true,
-            lineWrapping: true,
-            value: this._value,
-            extraKeys: {
-                Tab: (cm) => {
-                    cm.execCommand("insertSoftTab");
-                },
-            },
-            indentUnit: 4,
+        const extensions = [
+            history(),
+            keymap.of([...defaultKeymap, ...historyKeymap]),
+            syntaxHighlighting(defaultHighlightStyle),
+            this.getLanguageExtension(),
+            lineNumbers(),
+            EditorView.lineWrapping,
+            EditorState.readOnly.of(this.readOnly),
+            EditorState.tabSize.of(2),
+            // scrollPastEnd(),
+        ];
+        this.editor = new EditorView({
+            extensions: extensions.filter((p) => p) as Extension[],
+            root: this.shadowRoot || document,
+            doc: this._value,
         });
-        this.editor.on("blur", () => {
-            this.editor?.save();
-        });
-    }
-
-    render(): TemplateResult {
-        return html`<textarea name=${ifDefined(this.name)}>${ifDefined(this._value)}</textarea>`;
+        this.shadowRoot?.appendChild(this.editor.dom);
     }
 }