@codingame/monaco-vscode-api 20.3.2 → 20.4.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.
- package/README.md +40 -26
- package/package.json +8 -8
- package/services.js +3 -3
- package/vscode/src/vs/platform/product/common/product.js +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @codingame/monaco-vscode-api · [](https://www.npmjs.com/package/@codingame/monaco-vscode-api) [](https://www.npmjs.com/package/@codingame/monaco-vscode-api) [](https://github.com/codingame/monaco-vscode-api/pulls)
|
|
2
2
|
|
|
3
|
-
This [NPM module](https://www.npmjs.com/) allows to integrate full VSCode functionality into your `monaco-editor`.
|
|
3
|
+
This [NPM module](https://www.npmjs.com/) allows to integrate full VSCode functionality into your `monaco-editor`.
|
|
4
4
|
|
|
5
5
|
For more information, please checkout the project's [wiki](https://github.com/CodinGame/monaco-vscode-api/wiki).
|
|
6
6
|
|
|
@@ -18,27 +18,34 @@ npm install monaco-editor@npm:@codingame/monaco-vscode-editor-api
|
|
|
18
18
|
`@codingame/monaco-vscode-editor-api` is installed as an alias to `monaco-editor` because it provides the same api as the official `monaco-editor`
|
|
19
19
|
|
|
20
20
|
# Usage
|
|
21
|
+
|
|
21
22
|
If you are just starting with `monaco-editor` and `monaco-vscode-api` you may find helpful the [Getting Started Guide](https://github.com/CodinGame/monaco-vscode-api/wiki/Getting-started-guide) in the wiki.
|
|
23
|
+
|
|
22
24
|
## Monaco service override
|
|
23
25
|
|
|
24
|
-
Most of VSCode functionality implemented as "services", e.g.
|
|
26
|
+
Most of VSCode functionality implemented as "services", e.g.
|
|
27
|
+
|
|
25
28
|
- theme service, providing support for VSCode themes
|
|
26
29
|
- languages service, providing support for different language features.
|
|
27
30
|
|
|
28
|
-
By default, Monaco uses a simplified versions of the VSCode services, called `standalone` services.
|
|
29
|
-
This package allows to
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
By default, Monaco uses a simplified versions of the VSCode services, called `standalone` services.
|
|
32
|
+
This package allows to
|
|
33
|
+
|
|
34
|
+
1. override them with fully-functional alternatives from VSCode
|
|
35
|
+
2. add new services that were not included in Monaco
|
|
32
36
|
|
|
33
37
|
Here is an example usage that overrides Monaco default configuration with VSCode json-based settings:
|
|
38
|
+
|
|
34
39
|
```typescript
|
|
35
40
|
// default monaco-editor imports
|
|
36
|
-
import * as monaco from 'monaco-editor'
|
|
37
|
-
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
|
41
|
+
import * as monaco from 'monaco-editor'
|
|
42
|
+
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
|
38
43
|
|
|
39
44
|
// utilities to override Monaco services
|
|
40
45
|
import { initialize } from '@codingame/monaco-vscode-api'
|
|
41
|
-
import getConfigurationServiceOverride, {
|
|
46
|
+
import getConfigurationServiceOverride, {
|
|
47
|
+
updateUserConfiguration
|
|
48
|
+
} from '@codingame/monaco-vscode-configuration-service-override'
|
|
42
49
|
|
|
43
50
|
window.MonacoEnvironment = {
|
|
44
51
|
getWorker: (_moduleId, _label) => new editorWorker()
|
|
@@ -46,8 +53,8 @@ window.MonacoEnvironment = {
|
|
|
46
53
|
|
|
47
54
|
// overriding Monaco service with VSCode
|
|
48
55
|
await initialize({
|
|
49
|
-
|
|
50
|
-
})
|
|
56
|
+
...getConfigurationServiceOverride()
|
|
57
|
+
})
|
|
51
58
|
|
|
52
59
|
// json config like in vscode settings.json
|
|
53
60
|
updateUserConfiguration(`{
|
|
@@ -60,17 +67,19 @@ updateUserConfiguration(`{
|
|
|
60
67
|
|
|
61
68
|
// creating an editor with VSCode configuration
|
|
62
69
|
monaco.editor.create(document.getElementById('editor')!, {
|
|
63
|
-
|
|
64
|
-
})
|
|
70
|
+
value: 'Editor with VSCode config and large bold fonts'
|
|
71
|
+
})
|
|
65
72
|
```
|
|
73
|
+
|
|
66
74
|
> [!NOTE]
|
|
67
75
|
> `initialize` can only be called once (and it should be called BEFORE creating your first editor).
|
|
68
76
|
|
|
69
|
-
|
|
70
77
|
Each `get<service-name>ServiceOverride` contains the service and some glue to make VSCode service work with Monaco.
|
|
71
78
|
|
|
72
79
|
### List of service overrides
|
|
80
|
+
|
|
73
81
|
Some basic service overrides are coming with this package as dependencies:
|
|
82
|
+
|
|
74
83
|
- **Base**: `@codingame/monaco-vscode-base-service-override`
|
|
75
84
|
- Contains some general-use services that are mandatory to most of the other features
|
|
76
85
|
- **Host**: `@codingame/monaco-vscode-host-service-override`
|
|
@@ -84,10 +93,12 @@ Some basic service overrides are coming with this package as dependencies:
|
|
|
84
93
|
- It supports adding overlay filesystems for `file://` files
|
|
85
94
|
- **QuickAccess**: `@codingame/monaco-vscode-quickaccess-service-override`
|
|
86
95
|
- Enables the quickaccess menu in the editor (press F1 or ctrl+shift+p)
|
|
96
|
+
- **Search**: `@codingame/monaco-vscode-search-service-override`
|
|
97
|
+
- Provides workspace search functionality for both Command Palette file search (Ctrl+P) and Search panel (Ctrl+Shift+F)
|
|
98
|
+
- Enables searching through files and text content within your workspace
|
|
87
99
|
|
|
88
100
|
However, most of the services are separated into different modules, so they can be imported as required. You can find a full list of services in the [corresponding wiki page](https://github.com/CodinGame/monaco-vscode-api/wiki/List-of-service-overrides).
|
|
89
101
|
|
|
90
|
-
|
|
91
102
|
### Default vscode extensions
|
|
92
103
|
|
|
93
104
|
VSCode uses a bunch of default extensions. Most of them are used to load the default languages and grammars (see <https://github.com/microsoft/vscode/tree/main/extensions>).
|
|
@@ -104,31 +115,31 @@ Here is an example of usage of default VSCode theme extension with theme service
|
|
|
104
115
|
|
|
105
116
|
```typescript
|
|
106
117
|
// importing default VSCode theme extension
|
|
107
|
-
import
|
|
118
|
+
import '@codingame/monaco-vscode-theme-defaults-default-extension'
|
|
108
119
|
|
|
109
120
|
// default monaco-editor imports
|
|
110
|
-
import * as monaco from 'monaco-editor'
|
|
111
|
-
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
|
121
|
+
import * as monaco from 'monaco-editor'
|
|
122
|
+
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
|
112
123
|
|
|
113
124
|
// utilities to override Monaco services
|
|
114
125
|
import { initialize } from '@codingame/monaco-vscode-api'
|
|
115
|
-
import getThemeServiceOverride from
|
|
126
|
+
import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override'
|
|
116
127
|
|
|
117
128
|
window.MonacoEnvironment = {
|
|
118
129
|
getWorker: function (_moduleId, _label) {
|
|
119
|
-
|
|
130
|
+
return new editorWorker()
|
|
120
131
|
}
|
|
121
132
|
}
|
|
122
133
|
|
|
123
134
|
// overriding Monaco service with VSCode
|
|
124
135
|
await initialize({
|
|
125
|
-
|
|
126
|
-
})
|
|
136
|
+
...getThemeServiceOverride()
|
|
137
|
+
})
|
|
127
138
|
|
|
128
139
|
// creating an editor with VSCode theme
|
|
129
140
|
monaco.editor.create(document.getElementById('editor')!, {
|
|
130
|
-
|
|
131
|
-
})
|
|
141
|
+
value: 'Editor with VSCode Theme Support'
|
|
142
|
+
})
|
|
132
143
|
```
|
|
133
144
|
|
|
134
145
|
See [the full list of ported default extensions](https://www.npmjs.com/search?q=%40codingame%2Fmonaco-vscode-*-default-extension)
|
|
@@ -176,7 +187,6 @@ This library also offers the possibility to localize vscode and the extensions i
|
|
|
176
187
|
|
|
177
188
|
⚠️ The language pack should be imported and loaded BEFORE anything else from this library is loaded. Otherwise, some translations would be missing and an error would be displayed in the console. ⚠️
|
|
178
189
|
|
|
179
|
-
|
|
180
190
|
## Model creation
|
|
181
191
|
|
|
182
192
|
The official `monaco-editor` package provides a function to create models: `monaco.editor.createModel`.
|
|
@@ -192,6 +202,7 @@ It has some pros:
|
|
|
192
202
|
- It is possible to call the method multiple times on the same file to get multiple references. The model is disposed when there is no reference left
|
|
193
203
|
|
|
194
204
|
To work, it needs the file to exist on the virtual filesystem. It can be achieved either by:
|
|
205
|
+
|
|
195
206
|
- using the `registerFileSystemOverlay` from the files service override, which can be cleaned when not needed anymore (recommended)
|
|
196
207
|
- by using the second argument of the `createModelReference` function, which writes the file content to the virtual filesystem before creating the model
|
|
197
208
|
|
|
@@ -286,6 +297,7 @@ Try it out on <https://monaco-vscode-api.netlify.app/>
|
|
|
286
297
|
|
|
287
298
|
There is a demo that showcases the service-override features.
|
|
288
299
|
It includes:
|
|
300
|
+
|
|
289
301
|
- Languages
|
|
290
302
|
- VSCode themes
|
|
291
303
|
- Textmate grammars (requires VSCode themes)
|
|
@@ -330,6 +342,7 @@ The library supports shadow-dom.
|
|
|
330
342
|
⚠️ VSCode itself doesn't support shadow dom, and there are multiple parts that needed to be patched in order for it to work.
|
|
331
343
|
|
|
332
344
|
There are multiple benefits of using it:
|
|
345
|
+
|
|
333
346
|
- Your custom global style won't impact the VSCode workbench style (for instance if you did override the default [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing))
|
|
334
347
|
- The VSCode styles won't impact other parts of your app
|
|
335
348
|
- You page head won't be polluted with dozen of css files from VSCode
|
|
@@ -406,19 +419,20 @@ To still be able to do it, a possibility is to run all VSCode code inside an ifr
|
|
|
406
419
|
To better integrate it, it's also possible to run the code in the iframe, but make the code interact with the main page dom.
|
|
407
420
|
|
|
408
421
|
This library supports that mode. To enable that, you should
|
|
422
|
+
|
|
409
423
|
- have a secondary html entrypoint, that initialize the services
|
|
410
424
|
- load that secondary html in an iframe
|
|
411
425
|
- in the iframe, set `window.vscodeWindow` to the parent window, also initialize the service with a container mounted in that window
|
|
412
426
|
- do not import any monaco-vscode-library from the top window, but you can declare functions on the iframe window to get objects to the top window
|
|
413
427
|
|
|
414
428
|
To "unload" the workbench, you should:
|
|
429
|
+
|
|
415
430
|
- remove the iframe element from the top frame
|
|
416
431
|
- remove or empty the workbench container
|
|
417
432
|
- cleanup the elements that VSCode has injected in the page head: `document.querySelectorAll('[data-vscode]').forEach((el) => el.remove())`
|
|
418
433
|
|
|
419
434
|
⚠️ `window.vscodeWindow` should be set BEFORE any VSCode code is loaded
|
|
420
435
|
|
|
421
|
-
|
|
422
436
|
Note: it can be used in combination with shadow dom
|
|
423
437
|
|
|
424
438
|
It's demonstrated in the demo, by adding `?sandbox` query parameter to the demo url
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codingame/monaco-vscode-api",
|
|
3
|
-
"version": "20.
|
|
3
|
+
"version": "20.4.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "VSCode public API plugged on the monaco editor",
|
|
6
6
|
"keywords": [],
|
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
},
|
|
16
16
|
"type": "module",
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@codingame/monaco-vscode-base-service-override": "20.
|
|
19
|
-
"@codingame/monaco-vscode-environment-service-override": "20.
|
|
20
|
-
"@codingame/monaco-vscode-extensions-service-override": "20.
|
|
21
|
-
"@codingame/monaco-vscode-files-service-override": "20.
|
|
22
|
-
"@codingame/monaco-vscode-host-service-override": "20.
|
|
23
|
-
"@codingame/monaco-vscode-layout-service-override": "20.
|
|
24
|
-
"@codingame/monaco-vscode-quickaccess-service-override": "20.
|
|
18
|
+
"@codingame/monaco-vscode-base-service-override": "20.4.1",
|
|
19
|
+
"@codingame/monaco-vscode-environment-service-override": "20.4.1",
|
|
20
|
+
"@codingame/monaco-vscode-extensions-service-override": "20.4.1",
|
|
21
|
+
"@codingame/monaco-vscode-files-service-override": "20.4.1",
|
|
22
|
+
"@codingame/monaco-vscode-host-service-override": "20.4.1",
|
|
23
|
+
"@codingame/monaco-vscode-layout-service-override": "20.4.1",
|
|
24
|
+
"@codingame/monaco-vscode-quickaccess-service-override": "20.4.1",
|
|
25
25
|
"@vscode/iconv-lite-umd": "0.7.0",
|
|
26
26
|
"dompurify": "3.2.6",
|
|
27
27
|
"jschardet": "3.1.4",
|
package/services.js
CHANGED
|
@@ -392,10 +392,10 @@ export { IAuthenticationQueryService } from './vscode/src/vs/workbench/services/
|
|
|
392
392
|
export { ICoreExperimentationService } from './vscode/src/vs/workbench/services/coreExperimentation/common/coreExperimentationService.service.js';
|
|
393
393
|
export { IWorkbenchMcpManagementService } from './vscode/src/vs/workbench/services/mcp/common/mcpWorkbenchManagementService.service.js';
|
|
394
394
|
|
|
395
|
-
if (window.monacoVscodeApiBuildId != null && window.monacoVscodeApiBuildId !== "1.103.2-
|
|
396
|
-
throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.103.2-
|
|
395
|
+
if (window.monacoVscodeApiBuildId != null && window.monacoVscodeApiBuildId !== "1.103.2-bfb85f23-786b-4551-84f7-c6ef19e47aad") {
|
|
396
|
+
throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.103.2-bfb85f23-786b-4551-84f7-c6ef19e47aad"}, ${window.monacoVscodeApiBuildId} is already loaded`);
|
|
397
397
|
}
|
|
398
|
-
window.monacoVscodeApiBuildId = "1.103.2-
|
|
398
|
+
window.monacoVscodeApiBuildId = "1.103.2-bfb85f23-786b-4551-84f7-c6ef19e47aad";
|
|
399
399
|
async function initialize(overrides, container = document.body, configuration = {}, env) {
|
|
400
400
|
checkServicesNotInitialized();
|
|
401
401
|
injectCss(container);
|