@appscode/design-system 2.0.22-alpha.6 → 2.0.23-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.22-alpha.6",
+  "version": "2.0.23-alpha.1",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/editor/Editor.vue

@@ -10,6 +10,10 @@ interface Props {
   editorHeight?: number | string;
   editorTheme?: string;
   wordWrap?: string;
+  validation?: {
+    schema?: Record<string, unknown>;
+    uri: string;
+  };
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -21,6 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
   editorHeight: 40,
   editorTheme: "",
   wordWrap: "on",
+  validation: () => ({ uri: "" }),
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -111,22 +116,10 @@ watch(
 
 <template>
   <div>
-    <editor-tabs
-      v-if="!readOnly"
-      @tabchange="activeTab = $event"
-      :active-tab="activeTab"
-    />
-    <monaco-editor
-      v-if="activeTab === 'edit'"
-      @editorDidMount="onEditorMount"
-      key="edit"
-      class="is-clipped"
-      :class="computeHightInClass"
-      :style="computeHightInStyle"
-      :value="editorContent"
-      @change="onChange"
-      :language="language"
-      :options="{
+    <editor-tabs v-if="!readOnly" @tabchange="activeTab = $event" :active-tab="activeTab" />
+    <monaco-editor v-if="activeTab === 'edit'" @editorDidMount="onEditorMount" key="edit" class="is-clipped"
+      :class="computeHightInClass" :style="computeHightInStyle" :value="editorContent" @change="onChange"
+      :language="language" :options="{
         minimap: {
           enabled: calcShowMinimap,
         },
@@ -134,18 +127,9 @@ watch(
         readOnly: readOnly,
         wordWrap: wordWrap,
         scrollBeyondLastLine: false,
-      }"
-      data-testid="monaco-editor-edit-section"
-    />
-    <monaco-editor
-      v-if="activeTab === 'preview'"
-      key="preview"
-      class="is-clipped"
-      :class="computeHightInClass"
-      :style="computeHightInStyle"
-      :value="editorContent"
-      :language="language"
-      :options="{
+      }" :validation="validation" data-testid="monaco-editor-edit-section" />
+    <monaco-editor v-if="activeTab === 'preview'" key="preview" class="is-clipped" :class="computeHightInClass"
+      :style="computeHightInStyle" :value="editorContent" :language="language" :options="{
         minimap: {
           enabled: calcShowMinimap,
         },
@@ -153,10 +137,7 @@ watch(
         readOnly: true,
         wordWrap: wordWrap,
         scrollBeyondLastLine: false,
-      }"
-      :original="originalEditorContent"
-      :diff-editor="true"
-      data-testid="monaco-editor-preview-section"
-    />
+      }" :original="originalEditorContent" :diff-editor="true" :validation="validation"
+      data-testid="monaco-editor-preview-section" />
   </div>
 </template>

package/vue-components/v3/editor/MonacoEditor.vue

@@ -22,6 +22,10 @@ export default defineComponent({
         return {};
       },
     },
+    validation: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   emits: ["editorWillMount", "editorDidMount", "change"],
   setup(props) {
@@ -47,21 +51,73 @@ export default defineComponent({
     this.initMonaco();
   },
   beforeUnmount() {
+    monaco.editor.getModels().forEach((model) => model.dispose());
     this.editor && this.editor.dispose();
   },
   methods: {
     initMonaco() {
       this.$emit("editorWillMount", this.monaco);
-      const { value, language, theme, options } = this;
-      this.editor = monaco.editor[
-        this.diffEditor ? "createDiffEditor" : "create"
-      ](this.$el, {
-        value: value,
-        language: language,
-        theme: theme,
-        ...options,
-      });
-      this.diffEditor && this._setModel(this.value, this.original);
+      const { value, language, theme, options, original, validation } = this;
+
+      if (!this.diffEditor) {
+        const modifiedModel = monaco.editor.createModel(
+          value,
+          language,
+          monaco.Uri.parse("file:///file.yaml")
+        );
+
+        if (validation.uri) {
+          const schemas = [
+            {
+              fileMatch: ["file:///file.yaml"],
+              schema: validation.schema
+                ? JSON.parse(
+                  JSON.stringify({
+                    ...validation.schema,
+                    $schema: "http://json-schema.org/schema#",
+                  })
+                )
+                : undefined,
+              uri: validation.uri,
+            },
+          ];
+          // yaml validation
+          if (this.$monacoYaml) {
+            this.$monacoYaml.update({
+              schemas,
+            });
+          }
+
+          // json validation
+          monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            enableSchemaRequest: true,
+            schemas,
+            allowComments: true,
+          });
+        }
+
+        this.editor = monaco.editor.create(this.$el, {
+          automaticLayout: true,
+          model: modifiedModel,
+          theme: theme,
+          fixedOverflowWidgets: true,
+          ...options,
+        });
+      } else {
+        const originalModel = monaco.editor.createModel(original, language);
+        const modifiedModel = monaco.editor.createModel(value, language);
+        this.editor = monaco.editor.createDiffEditor(this.$el, {
+          automaticLayout: true,
+          theme: theme,
+          fixedOverflowWidgets: true,
+          ...options,
+        });
+        this.editor.setModel({
+          original: originalModel,
+          modified: modifiedModel,
+        });
+      }
 
       // @event `change`
       const editor = this._getEditor();
@@ -74,15 +130,6 @@ export default defineComponent({
 
       this.$emit("editorDidMount", this.editor);
     },
-    _setModel(value, original) {
-      const { language } = this;
-      const originalModel = monaco.editor.createModel(original, language);
-      const modifiedModel = monaco.editor.createModel(value, language);
-      this.editor.setModel({
-        original: originalModel,
-        modified: modifiedModel,
-      });
-    },
     _setValue(value) {
       let editor = this._getEditor();
       if (editor) return editor.setValue(value);
@@ -128,4 +175,4 @@ export default defineComponent({
     },
   },
 });
-</script>
+</script>