web: fix saving for CodeMirror not returning an object

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

web/src/elements/CodeMirror.ts

@@ -10,6 +10,7 @@ import "codemirror/mode/python/python.js";
 import CodeMirrorStyle from "codemirror/lib/codemirror.css";
 import CodeMirrorTheme from "codemirror/theme/monokai.css";
 import { ifDefined } from "lit-html/directives/if-defined";
+import YAML from "yaml";
 
 @customElement("ak-codemirror")
 export class CodeMirrorTextarea extends LitElement {
@@ -22,11 +23,37 @@ export class CodeMirrorTextarea extends LitElement {
     @property()
     name?: string;
 
-    @property()
-    value?: string;
-
     editor?: CodeMirror.EditorFromTextArea;
 
+    private _value?: string;
+
+    @property()
+    set value(v: string) {
+        this._value = v.toString();
+    }
+
+    get value(): string {
+        switch (this.mode.toLowerCase()) {
+            case "yaml":
+                return YAML.parse(this.getInnerValue());
+            case "javascript":
+                return JSON.parse(this.getInnerValue());
+            default:
+                return this.getInnerValue();
+        }
+    }
+
+    private getInnerValue(): string {
+        if (!this.shadowRoot) {
+            return "";
+        }
+        const ta = this.shadowRoot?.querySelector("textarea");
+        if (!ta) {
+            return "";
+        }
+        return ta.value;
+    }
+
     static get styles(): CSSResult[] {
         return [PFForm, CodeMirrorStyle, CodeMirrorTheme];
     }
@@ -49,6 +76,6 @@ export class CodeMirrorTextarea extends LitElement {
     }
 
     render(): TemplateResult {
-        return html`<textarea class="pf-c-form-control" name=${ifDefined(this.name)}>${this.value || ""}</textarea>`;
+        return html`<textarea class="pf-c-form-control" name=${ifDefined(this.name)}>${this._value || ""}</textarea>`;
     }
 }