@appscode/design-system 2.0.32-alpha.6 → 2.0.33-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/vue-components/v3/editor/MonacoEditor.vue +80 -29
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "2.0.32-alpha.6",
3
+ "version": "2.0.33-alpha.1",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/v3/editor/MonacoEditor.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  </template>
4
4
 
5
5
  <script>
6
- import { defineComponent, computed, toRefs } from "vue";
6
+ import { defineComponent, computed, toRefs, ref } from "vue";
7
7
  import * as monaco from "monaco-editor";
8
8
 
9
9
  export default defineComponent({
@@ -43,19 +43,29 @@ export default defineComponent({
43
43
  "text-align": "left",
44
44
  };
45
45
  });
46
+
47
+ const modelId = ref(`file:///file-${new Date().getTime()}.yaml`);
46
48
  return {
47
49
  style,
50
+ modelId,
48
51
  };
49
52
  },
50
53
  mounted() {
51
54
  this.initMonaco();
52
55
  },
53
56
  beforeUnmount() {
54
- monaco.editor.getModels().forEach((model) => model.dispose());
57
+ // dispose model
58
+ monaco.editor.getModel(this.modelId).dispose();
59
+ // remove the schema
60
+ this.$monacoValidationOptions.schemas =
61
+ this.$monacoValidationOptions.schemas.filter(
62
+ (schema) => !schema.fileMatch.includes(this.modelId)
63
+ );
64
+ // dispose editor
55
65
  this.editor && this.editor.dispose();
56
66
  },
57
67
  methods: {
58
- initMonaco() {
68
+ async initMonaco() {
59
69
  this.$emit("editorWillMount", this.monaco);
60
70
  const { value, language, theme, options, original, validation } = this;
61
71
 
@@ -63,38 +73,79 @@ export default defineComponent({
63
73
  const modifiedModel = monaco.editor.createModel(
64
74
  value,
65
75
  language,
66
- monaco.Uri.parse("file:///file.yaml")
76
+ monaco.Uri.parse(this.modelId)
67
77
  );
68
78
 
69
79
  if (validation.uri) {
70
- const schemas = [
71
- {
72
- fileMatch: ["file:///file.yaml"],
73
- schema: validation.schema
74
- ? JSON.parse(
75
- JSON.stringify({
76
- ...validation.schema,
77
- $schema: "http://json-schema.org/schema#",
78
- })
79
- )
80
- : undefined,
81
- uri: validation.uri,
82
- },
83
- ];
84
- // yaml validation
85
- if (this.$monacoYaml) {
86
- this.$monacoYaml.update({
80
+ if (validation.schema?.type) {
81
+ // schema is provided
82
+ const schemas = [
83
+ ...this.$monacoValidationOptions.schemas,
84
+ {
85
+ fileMatch: [this.modelId],
86
+ schema: validation.schema,
87
+ uri: validation.uri,
88
+ },
89
+ ];
90
+ this.$monacoValidationOptions.schemas = schemas;
91
+ // yaml validation
92
+ if (this.$monacoYaml) {
93
+ this.$monacoYaml.update({
94
+ schemas,
95
+ });
96
+ }
97
+ // json validation
98
+ monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
99
+ validate: true,
100
+ enableSchemaRequest: false,
87
101
  schemas,
102
+ allowComments: true,
88
103
  });
89
- }
104
+ } else {
105
+ // schema is not provided
106
+ // fetch from validation uri
107
+ const validationSchema = await fetch(validation.uri);
108
+ if (validationSchema.ok) {
109
+ const schema = await validationSchema.json();
110
+ const schemas = [
111
+ ...this.$monacoValidationOptions.schemas,
112
+ {
113
+ fileMatch: [this.modelId],
114
+ schema,
115
+ uri: validation.uri,
116
+ },
117
+ ];
118
+ this.$monacoValidationOptions.schemas = schemas;
119
+ // yaml validation
120
+ if (this.$monacoYaml) {
121
+ this.$monacoYaml.update({
122
+ schemas,
123
+ enableSchemaRequest: true,
124
+ });
125
+ }
126
+ // json validation
127
+ monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
128
+ validate: true,
129
+ enableSchemaRequest: true,
130
+ schemas,
131
+ allowComments: true,
132
+ });
133
+ } else {
134
+ // schema fetching failed
135
+ // don't validate
90
136
 
91
- // json validation
92
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
93
- validate: true,
94
- enableSchemaRequest: true,
95
- schemas,
96
- allowComments: true,
97
- });
137
+ // yaml validation
138
+ if (this.$monacoYaml) {
139
+ this.$monacoYaml.update({
140
+ validate: false,
141
+ });
142
+ }
143
+ // json validation
144
+ monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
145
+ validate: false,
146
+ });
147
+ }
148
+ }
98
149
  }
99
150
 
100
151
  this.editor = monaco.editor.create(this.$el, {