Merge pull request #4340 from jeclrsg/feat-codemirror-yaml

feat: add YAML support to codemirror

Author: GordonSmith

packages/codemirror/src/YAMLEditor.ts

@@ -0,0 +1,22 @@
+import { Editor } from "./Editor.ts";
+
+export class YAMLEditor extends Editor {
+    options(): any {
+        return {
+            ...super.options(),
+            mode: "text/x-yaml",
+            foldGutter: true,
+            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
+        };
+    }
+
+    yaml(): string;
+    yaml(_: string): this;
+    yaml(_?: string): string | this {
+        if (!arguments.length) return this.text();
+        this.text(_);
+        return this;
+    }
+
+}
+YAMLEditor.prototype._class += " codemirror_YAMLEditor";

packages/codemirror/src/codemirror-shim.ts

@@ -5,6 +5,7 @@ import "codemirror/mode/htmlmixed/htmlmixed.js";
 import "codemirror/mode/javascript/javascript.js";
 import "codemirror/mode/xml/xml.js";
 import "codemirror/mode/sql/sql.js";
+import "codemirror/mode/yaml/yaml.js";
 import "./mode/dot/dot.ts";
 import "./mode/markdown/markdown.ts";
 

packages/codemirror/src/index.ts

@@ -11,3 +11,4 @@ export * from "./MarkdownEditor.ts";
 export * from "./ObservableMarkdownEditor.ts";
 export * from "./XMLEditor.ts";
 export * from "./SQLEditor.ts";
+export * from "./YAMLEditor.ts";

packages/codemirror/tests/codemirror.browser.spec.ts

@@ -1,5 +1,5 @@
 import * as codemirror from "@hpcc-js/codemirror";
-import { CSSEditor, DOTEditor, Editor, ECLEditor, HTMLEditor, JSEditor, JSONEditor, MarkdownEditor, ObservableMarkdownEditor, SQLEditor, XMLEditor } from "@hpcc-js/codemirror";
+import { CSSEditor, DOTEditor, Editor, ECLEditor, HTMLEditor, JSEditor, JSONEditor, MarkdownEditor, ObservableMarkdownEditor, SQLEditor, XMLEditor, YAMLEditor } from "@hpcc-js/codemirror";
 import { Class, HTMLWidget, SVGWidget } from "@hpcc-js/common";
 import { describe, it, expect } from "vitest";
 import { classDef, renderMedium } from "../../common/tests/index.ts";
@@ -30,6 +30,7 @@ describe("@hpcc-js/codemirror", () => {
                             case ObservableMarkdownEditor:
                             case SQLEditor:
                             case XMLEditor:
+                            case YAMLEditor:
                             case ECLEditor:
                                 renderMedium(new item.prototype.constructor());
                                 break;