@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 CHANGED
@@ -1,6 +1,6 @@
1
1
  # @codingame/monaco-vscode-api · [![monthly downloads](https://img.shields.io/npm/dm/@codingame/monaco-vscode-api)](https://www.npmjs.com/package/@codingame/monaco-vscode-api) [![npm version](https://img.shields.io/npm/v/@codingame/monaco-vscode-api.svg?style=flat)](https://www.npmjs.com/package/@codingame/monaco-vscode-api) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](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
- 1) override them with fully-functional alternatives from VSCode
31
- 2) add new services that were not included in Monaco
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, { updateUserConfiguration } from '@codingame/monaco-vscode-configuration-service-override'
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
- ...getConfigurationServiceOverride(),
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
- value: "Editor with VSCode config and large bold fonts",
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 "@codingame/monaco-vscode-theme-defaults-default-extension";
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 "@codingame/monaco-vscode-theme-service-override";
126
+ import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override'
116
127
 
117
128
  window.MonacoEnvironment = {
118
129
  getWorker: function (_moduleId, _label) {
119
- return new editorWorker();
130
+ return new editorWorker()
120
131
  }
121
132
  }
122
133
 
123
134
  // overriding Monaco service with VSCode
124
135
  await initialize({
125
- ...getThemeServiceOverride(),
126
- });
136
+ ...getThemeServiceOverride()
137
+ })
127
138
 
128
139
  // creating an editor with VSCode theme
129
140
  monaco.editor.create(document.getElementById('editor')!, {
130
- value: "Editor with VSCode Theme Support",
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.2",
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.3.2",
19
- "@codingame/monaco-vscode-environment-service-override": "20.3.2",
20
- "@codingame/monaco-vscode-extensions-service-override": "20.3.2",
21
- "@codingame/monaco-vscode-files-service-override": "20.3.2",
22
- "@codingame/monaco-vscode-host-service-override": "20.3.2",
23
- "@codingame/monaco-vscode-layout-service-override": "20.3.2",
24
- "@codingame/monaco-vscode-quickaccess-service-override": "20.3.2",
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-89bc2852-5530-4d31-a120-a0d6f5c7af8b") {
396
- throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.103.2-89bc2852-5530-4d31-a120-a0d6f5c7af8b"}, ${window.monacoVscodeApiBuildId} is already loaded`);
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-89bc2852-5530-4d31-a120-a0d6f5c7af8b";
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);
@@ -6,7 +6,7 @@ var product = {
6
6
  quality: 'stable',
7
7
  version: '1.103.2',
8
8
  commit: '6f17636121051a53c88d3e605c491d22af2ba755',
9
- date: '2025-08-25T16:16:48.934Z',
9
+ date: '2025-09-05T15:46:25.070Z',
10
10
  ...(globalThis._VSCODE_PRODUCT_JSON ?? {})
11
11
  };
12
12