Skip to content

Commit 1c3202f

Browse files
kaisalmenkaisalmen
committed
json examples: Separate monaco-vscode-api init from editor creation to allow callback handler init (browser example)
1 parent 46a4d93 commit 1c3202f

7 files changed

Lines changed: 41 additions & 41 deletions

File tree

‎packages/examples/main/src/browser/main.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { languages, workspace, TextDocument as VsCodeTextDocument } from 'vscode
66
import { getLanguageService, TextDocument } from 'vscode-json-languageservice';
77
import { createConverter as createCodeConverter } from 'vscode-languageclient/lib/common/codeConverter.js';
88
import { createConverter as createProtocolConverter } from 'vscode-languageclient/lib/common/protocolConverter.js';
9-
import { createDefaultJsonContent, createJsonEditor } from '../common.js';
9+
import { createDefaultJsonContent, createJsonEditor, performInit } from '../common.js';
1010

1111
import { buildWorkerDefinition } from 'monaco-editor-workers';
1212
buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers/', new URL('', window.location.href).href, false);
@@ -17,10 +17,16 @@ const protocolConverter = createProtocolConverter(undefined, true, true);
1717
const createEditor = async () => {
1818
let mainVscodeDocument: VsCodeTextDocument | undefined;
1919
const languageId = 'json';
20+
21+
await performInit(true);
22+
23+
workspace.onDidOpenTextDocument((_event) => {
24+
mainVscodeDocument = workspace.textDocuments[0];
25+
});
26+
2027
const jsonEditor = await createJsonEditor({
2128
htmlElement: document.getElementById('container')!,
22-
content: createDefaultJsonContent(),
23-
init: true
29+
content: createDefaultJsonContent()
2430
});
2531

2632
const createDocument = (vscodeDocument: VsCodeTextDocument) => {
@@ -83,6 +89,7 @@ const createEditor = async () => {
8389
});
8490

8591
const validate = () => {
92+
console.log('validate');
8693
const document = createDocument(mainVscodeDocument!);
8794
cleanPendingValidation(document);
8895
pendingValidationRequests.set(document.uri, window.setTimeout(() => {
@@ -120,11 +127,6 @@ const createEditor = async () => {
120127
jsonEditor.modelRef.object.textEditorModel!.onDidChangeContent(() => {
121128
validate();
122129
});
123-
124-
workspace.onDidChangeTextDocument((_event) => {
125-
mainVscodeDocument = workspace.textDocuments[0];
126-
validate();
127-
});
128130
};
129131

130132
createEditor();

‎packages/examples/main/src/client/main.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
* ------------------------------------------------------------------------------------------ */
55

6-
import { createDefaultJsonContent, createJsonEditor, createUrl, createWebSocket } from '../common.js';
6+
import { createDefaultJsonContent, createJsonEditor, createUrl, createWebSocket, performInit } from '../common.js';
77
import { buildWorkerDefinition } from 'monaco-editor-workers';
88
buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers/', new URL('', window.location.href).href, false);
99

1010
const start = async () => {
1111
// use the same common method to create a monaco editor for json
12+
await performInit(true);
1213
await createJsonEditor({
1314
htmlElement: document.getElementById('container')!,
14-
content: createDefaultJsonContent(),
15-
init: true
15+
content: createDefaultJsonContent()
1616
});
1717

1818
// create the web socket

‎packages/examples/main/src/common.ts‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,8 @@ export type ExampleJsonEditor = {
7070
modelRef: IReference<ITextFileEditorModel>;
7171
}
7272

73-
export const createJsonEditor = async (config: {
74-
htmlElement: HTMLElement,
75-
content: string,
76-
init: boolean
77-
}) => {
78-
const languageId = 'json';
79-
80-
if (config.init === true) {
73+
export const performInit = async (vscodeApiInit: boolean) => {
74+
if (vscodeApiInit === true) {
8175
await initServices({
8276
enableThemeService: true,
8377
enableTextmateService: true,
@@ -89,22 +83,27 @@ export const createJsonEditor = async (config: {
8983
enableQuickaccessService: true,
9084
enableOutputService: true,
9185
enableAccessibilityService: true,
92-
debugLogging: true
86+
debugLogging: false
9387
});
94-
}
9588

96-
// register the JSON language with Monaco
97-
languages.register({
98-
id: languageId,
99-
extensions: ['.json', '.jsonc'],
100-
aliases: ['JSON', 'json'],
101-
mimetypes: ['application/json']
102-
});
89+
// register the JSON language with Monaco
90+
languages.register({
91+
id: 'json',
92+
extensions: ['.json', '.jsonc'],
93+
aliases: ['JSON', 'json'],
94+
mimetypes: ['application/json']
95+
});
96+
}
97+
};
10398

99+
export const createJsonEditor = async (config: {
100+
htmlElement: HTMLElement,
101+
content: string
102+
}) => {
104103
// create the model
105104
const uri = Uri.parse('/tmp/model.json');
106105
const modelRef = await createModelReference(uri, config.content);
107-
modelRef.object.setLanguageId(languageId);
106+
modelRef.object.setLanguageId('json');
108107

109108
// create monaco editor
110109
const editor = createConfiguredEditor(config.htmlElement, {
@@ -117,7 +116,6 @@ export const createJsonEditor = async (config: {
117116
});
118117

119118
const result = {
120-
languageId,
121119
editor,
122120
uri,
123121
modelRef

‎packages/examples/main/src/react/app.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Copyright (c) 2018-2022 TypeFox GmbH (http://www.typefox.io). All rights reserved.
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
* ------------------------------------------------------------------------------------------ */
5-
import { createJsonEditor, createUrl, createWebSocket } from '../common.js';
5+
import { createJsonEditor, createUrl, createWebSocket, performInit } from '../common.js';
66
import { editor } from 'monaco-editor/esm/vs/editor/editor.api.js';
77
import React, { createRef, useEffect, useMemo, useRef } from 'react';
88

@@ -36,10 +36,10 @@ export const ReactMonacoEditor: React.FC<EditorProps> = ({
3636

3737
if (ref.current != null) {
3838
const start = async () => {
39+
await performInit(true);
3940
await createJsonEditor({
4041
htmlElement: ref.current!,
41-
content: defaultCode,
42-
init
42+
content: defaultCode
4343
});
4444
if (init) {
4545
init = false;

‎packages/verify/pnpm/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.0.0",
44
"private": "true",
55
"dependencies": {
6-
"monaco-languageclient": "6.4.0",
6+
"monaco-languageclient": "~6.4.0",
77
"monaco-editor": "~0.41.0",
88
"vscode": "npm:@codingame/monaco-vscode-api@1.81.0"
99
},
@@ -18,4 +18,4 @@
1818
"node": "18.17.0",
1919
"npm": "9.6.7"
2020
}
21-
}
21+
}

‎packages/verify/vite/src/client/main.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
* ------------------------------------------------------------------------------------------ */
55

6-
import { createDefaultJsonContent, createJsonEditor, createUrl, createWebSocket } from 'examples-main';
6+
import { createDefaultJsonContent, createJsonEditor, createUrl, createWebSocket, performInit } from 'examples-main';
77
import { buildWorkerDefinition } from 'monaco-editor-workers';
88
buildWorkerDefinition('./workers', new URL('', window.location.href).href, false);
99

1010
const start = async () => {
1111
// use the same common method to create a monaco editor for json
12+
await performInit(true);
1213
await createJsonEditor({
1314
htmlElement: document.getElementById('container')!,
14-
content: createDefaultJsonContent(),
15-
init: true
15+
content: createDefaultJsonContent()
1616
});
1717

1818
// create the web socket

‎packages/verify/webpack/src/client/main.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
* ------------------------------------------------------------------------------------------ */
55

6-
import { createDefaultJsonContent, createJsonEditor, createUrl, createWebSocket } from 'examples-main';
6+
import { createDefaultJsonContent, createJsonEditor, createUrl, createWebSocket, performInit } from 'examples-main';
77
import { buildWorkerDefinition } from 'monaco-editor-workers';
88
buildWorkerDefinition('dist/client/workers', new URL('', window.location.href).href, false);
99

1010
const start = async () => {
1111
// use the same common method to create a monaco editor for json
12+
await performInit(true);
1213
await createJsonEditor({
1314
htmlElement: document.getElementById('container')!,
14-
content: createDefaultJsonContent(),
15-
init: true
15+
content: createDefaultJsonContent()
1616
});
1717

1818
// create the web socket

0 commit comments

Comments
 (0)