@vmz/plugin-monaco 0.2.2 → 0.2.4

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/components/Monaco.vmz +143 -140
  2. package/package.json +2 -2
package/components/Monaco.vmz CHANGED
@@ -1,184 +1,187 @@
1
1
  <template>
2
- <div class="monaco-host" data-vmz-monaco></div>
2
+ <div data-vmz-monaco class="monaco-host" />
3
3
  </template>
4
-
5
4
  <style>
6
5
  /*
7
- Isolate Monaco glyph metrics from page CSS.
8
- Inherited letter-spacing / proportional fonts desync caret + selection overlays.
9
- */
6
+ Isolate Monaco glyph metrics from page CSS.
7
+ Inherited letter-spacing / proportional fonts desync caret + selection overlays.
8
+ */
10
9
  .monaco-host {
11
- display: block;
12
- width: 100%;
13
- height: 100%;
14
- min-height: 0;
15
- overflow: hidden;
16
- position: relative;
17
- box-sizing: border-box;
18
- font: 14px/21px Consolas, "Courier New", Menlo, Monaco, monospace !important;
19
- letter-spacing: 0 !important;
20
- word-spacing: 0 !important;
21
- font-variant-ligatures: none !important;
22
- text-rendering: auto;
23
- -webkit-font-smoothing: antialiased;
10
+ display: block;
11
+ width: 100%;
12
+ height: 100%;
13
+ min-height: 0;
14
+ overflow: hidden;
15
+ position: relative;
16
+ box-sizing: border-box;
17
+ font:
18
+ 14px/21px Consolas,
19
+ "Courier New",
20
+ Menlo,
21
+ Monaco,
22
+ monospace !important;
23
+ letter-spacing: 0 !important;
24
+ word-spacing: 0 !important;
25
+ font-variant-ligatures: none !important;
26
+ text-rendering: auto;
27
+ -webkit-font-smoothing: antialiased;
24
28
  }
25
29
  .monaco-host .monaco-editor {
26
- width: 100% !important;
27
- height: 100% !important;
28
- outline: none;
29
- font-family: Consolas, "Courier New", Menlo, Monaco, monospace !important;
30
- font-size: 14px !important;
31
- line-height: 21px !important;
32
- letter-spacing: 0 !important;
30
+ width: 100% !important;
31
+ height: 100% !important;
32
+ outline: none;
33
+ font-family: Consolas, "Courier New", Menlo, Monaco, monospace !important;
34
+ font-size: 14px !important;
35
+ line-height: 21px !important;
36
+ letter-spacing: 0 !important;
33
37
  }
34
38
  .monaco-host .monaco-editor .view-lines,
35
39
  .monaco-host .monaco-editor .view-line,
36
40
  .monaco-host .monaco-editor .view-line span,
37
41
  .monaco-host .monaco-editor .margin-view-overlays,
38
42
  .monaco-host .monaco-editor .lines-content {
39
- font-family: Consolas, "Courier New", Menlo, Monaco, monospace !important;
40
- font-size: 14px !important;
41
- line-height: 21px !important;
42
- letter-spacing: 0 !important;
43
- word-spacing: 0 !important;
43
+ font-family: Consolas, "Courier New", Menlo, Monaco, monospace !important;
44
+ font-size: 14px !important;
45
+ line-height: 21px !important;
46
+ letter-spacing: 0 !important;
47
+ word-spacing: 0 !important;
44
48
  }
45
49
  /*
46
- Keep the hidden textarea from painting native OS selection
47
- (shows up as yellow boxes / black bands when metrics desync).
48
- */
50
+ Keep the hidden textarea from painting native OS selection
51
+ (shows up as yellow boxes / black bands when metrics desync).
52
+ */
49
53
  .monaco-host .monaco-editor .inputarea,
50
54
  .monaco-host .monaco-editor textarea.inputarea,
51
55
  .monaco-host .monaco-editor .native-edit-context {
52
- opacity: 0 !important;
53
- color: transparent !important;
54
- background: transparent !important;
55
- caret-color: transparent !important;
56
- outline: none !important;
57
- box-shadow: none !important;
58
- border: 0 !important;
59
- -webkit-user-select: text;
60
- user-select: text;
56
+ opacity: 0 !important;
57
+ color: transparent !important;
58
+ background: transparent !important;
59
+ caret-color: transparent !important;
60
+ outline: none !important;
61
+ box-shadow: none !important;
62
+ border: 0 !important;
63
+ -webkit-user-select: text;
64
+ user-select: text;
61
65
  }
62
66
  .monaco-host .monaco-editor .inputarea::selection,
63
67
  .monaco-host .monaco-editor textarea.inputarea::selection,
64
68
  .monaco-host .monaco-editor .native-edit-context::selection {
65
- background: transparent !important;
66
- color: transparent !important;
69
+ background: transparent !important;
70
+ color: transparent !important;
67
71
  }
68
72
  .monaco-host .monaco-editor .inputarea::-moz-selection,
69
73
  .monaco-host .monaco-editor textarea.inputarea::-moz-selection,
70
74
  .monaco-host .monaco-editor .native-edit-context::-moz-selection {
71
- background: transparent !important;
72
- color: transparent !important;
75
+ background: transparent !important;
76
+ color: transparent !important;
73
77
  }
74
78
  </style>
75
-
76
79
  <script client>
77
80
  export default class Monaco {
78
- public value: string = ""
79
- public language: string = "typescript"
80
- public theme: string = "vs"
81
- public readOnly: boolean = false
82
- /** Optional JSON Schema URL (IR — completion + diagnostics). */
83
- public jsonSchemaUrl: string = ""
84
- public onChange: ((v: string) => void) | null = null
81
+ public value: string = "";
82
+ public language: string = "typescript";
83
+ public theme: string = "vs";
84
+ public readOnly: boolean = false;
85
+ /** Optional JSON Schema URL (IR — completion + diagnostics). */
86
+ public jsonSchemaUrl: string = "";
87
+ public onChange: ((v: string) => void) | null = null;
85
88
 
86
- #api: {
87
- getValue: () => string
88
- setValue: (v: string) => void
89
- dispose: () => void
90
- monaco?: { editor?: { setTheme?: (t: string) => void } }
91
- } | null = null
92
- #applyingExternal = false
93
- #valueWatch: (() => void) | null = null
94
- #mountGen = 0
95
- #onScheme: ((e: Event) => void) | null = null
89
+ #api: {
90
+ getValue: () => string;
91
+ setValue: (v: string) => void;
92
+ dispose: () => void;
93
+ monaco?: { editor?: { setTheme?: (t: string) => void } };
94
+ } | null = null;
95
+ #applyingExternal = false;
96
+ #valueWatch: (() => void) | null = null;
97
+ #mountGen = 0;
98
+ #onScheme: ((e: Event) => void) | null = null;
96
99
 
97
- #resolveTheme() {
98
- if (typeof document === "undefined") return this.theme || "vs"
99
- const dark =
100
- document.documentElement.getAttribute("data-theme") === "dark" ||
101
- document.documentElement.dataset.theme === "dark"
102
- return dark ? "vs-dark" : "vs"
103
- }
100
+ #resolveTheme() {
101
+ if (typeof document === "undefined") return this.theme || "vs";
102
+ const dark =
103
+ document.documentElement.getAttribute("data-theme") === "dark" ||
104
+ document.documentElement.dataset.theme === "dark";
105
+ return dark ? "vs-dark" : "vs";
106
+ }
104
107
 
105
- async onMount() {
106
- if (typeof window === "undefined") return
107
- const gen = ++this.#mountGen
108
- const root = this.__vmzDomRoot
109
- const el =
110
- (root && root.nodeType === 1 && root.matches?.("[data-vmz-monaco]") && root) ||
111
- root?.querySelector?.("[data-vmz-monaco]") ||
112
- root
113
- if (!el || el.nodeType !== 1) return
108
+ async onMount() {
109
+ if (typeof window === "undefined") return;
110
+ const gen = ++this.#mountGen;
111
+ const root = this.__vmzDomRoot;
112
+ const el =
113
+ (root && root.nodeType === 1 && root.matches?.("[data-vmz-monaco]") && root) ||
114
+ root?.querySelector?.("[data-vmz-monaco]") ||
115
+ root;
116
+ if (!el || el.nodeType !== 1) return;
114
117
 
115
- this.#api?.dispose()
116
- this.#api = null
118
+ this.#api?.dispose();
119
+ this.#api = null;
117
120
 
118
- // Dynamic import — never evaluate monaco on the Node/SSR route path.
119
- const { mountMonaco } = await import("@vmz/plugin-monaco/runtime")
120
- if (gen !== this.#mountGen || this.__vmzDestroyed) return
121
+ // Dynamic import — never evaluate monaco on the Node/SSR route path.
122
+ const { mountMonaco } = await import("@vmz/plugin-monaco/runtime");
123
+ if (gen !== this.#mountGen || this.__vmzDestroyed) return;
121
124
 
122
- const theme = this.#resolveTheme()
123
- this.theme = theme
125
+ const theme = this.#resolveTheme();
126
+ this.theme = theme;
124
127
 
125
- const api = await mountMonaco(el, {
126
- value: this.value,
127
- language: this.language,
128
- theme,
129
- readOnly: this.readOnly,
130
- jsonSchemaUrl: this.jsonSchemaUrl || undefined,
131
- onChange: (v) => {
132
- this.#applyingExternal = true
133
- this.value = v
134
- this.#applyingExternal = false
135
- if (typeof this.onChange === "function") this.onChange(v)
136
- },
137
- })
138
- if (gen !== this.#mountGen || this.__vmzDestroyed) {
139
- api.dispose()
140
- return
141
- }
142
- this.#api = api
128
+ const api = await mountMonaco(el, {
129
+ value: this.value,
130
+ language: this.language,
131
+ theme,
132
+ readOnly: this.readOnly,
133
+ jsonSchemaUrl: this.jsonSchemaUrl || undefined,
134
+ onChange: (v) => {
135
+ this.#applyingExternal = true;
136
+ this.value = v;
137
+ this.#applyingExternal = false;
138
+ if (typeof this.onChange === "function") this.onChange(v);
139
+ },
140
+ });
141
+ if (gen !== this.#mountGen || this.__vmzDestroyed) {
142
+ api.dispose();
143
+ return;
144
+ }
145
+ this.#api = api;
143
146
 
144
- this.#onScheme = () => {
145
- const next = this.#resolveTheme()
146
- this.theme = next
147
- try {
148
- this.#api?.monaco?.editor?.setTheme?.(next)
149
- } catch {
150
- /* ignore */
151
- }
152
- }
153
- window.addEventListener("davinci-theme", this.#onScheme)
154
- window.addEventListener("storage", this.#onScheme)
147
+ this.#onScheme = () => {
148
+ const next = this.#resolveTheme();
149
+ this.theme = next;
150
+ try {
151
+ this.#api?.monaco?.editor?.setTheme?.(next);
152
+ } catch {
153
+ /* ignore */
154
+ }
155
+ };
156
+ window.addEventListener("davinci-theme", this.#onScheme);
157
+ window.addEventListener("storage", this.#onScheme);
155
158
 
156
- let last = this.value
157
- const tick = () => {
158
- if (!this.#api || this.__vmzDestroyed) return
159
- if (this.#applyingExternal) return
160
- if (this.value !== last) {
161
- last = this.value
162
- if (this.#api.getValue() !== this.value) {
163
- this.#api.setValue(this.value ?? "")
164
- }
165
- }
159
+ let last = this.value;
160
+ const tick = () => {
161
+ if (!this.#api || this.__vmzDestroyed) return;
162
+ if (this.#applyingExternal) return;
163
+ if (this.value !== last) {
164
+ last = this.value;
165
+ if (this.#api.getValue() !== this.value) {
166
+ this.#api.setValue(this.value ?? "");
167
+ }
168
+ }
169
+ };
170
+ const id = window.setInterval(tick, 50);
171
+ this.#valueWatch = () => window.clearInterval(id);
166
172
  }
167
- const id = window.setInterval(tick, 50)
168
- this.#valueWatch = () => window.clearInterval(id)
169
- }
170
173
 
171
- onDestroy() {
172
- this.#mountGen++
173
- if (this.#onScheme && typeof window !== "undefined") {
174
- window.removeEventListener("davinci-theme", this.#onScheme)
175
- window.removeEventListener("storage", this.#onScheme)
174
+ onDestroy() {
175
+ this.#mountGen++;
176
+ if (this.#onScheme && typeof window !== "undefined") {
177
+ window.removeEventListener("davinci-theme", this.#onScheme);
178
+ window.removeEventListener("storage", this.#onScheme);
179
+ }
180
+ this.#onScheme = null;
181
+ this.#valueWatch?.();
182
+ this.#valueWatch = null;
183
+ this.#api?.dispose();
184
+ this.#api = null;
176
185
  }
177
- this.#onScheme = null
178
- this.#valueWatch?.()
179
- this.#valueWatch = null
180
- this.#api?.dispose()
181
- this.#api = null
182
- }
183
186
  }
184
187
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vmz/plugin-monaco",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "type": "module",
5
5
  "description": "VMZ Monaco editor adapter - <Monaco>",
6
6
  "license": "MIT",
@@ -17,7 +17,7 @@
17
17
  }
18
18
  },
19
19
  "dependencies": {
20
- "@vmz/plugin": "0.2.2"
20
+ "@vmz/plugin": "0.2.4"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "monaco-editor": ">=0.52"