New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

monaco-editor-wrapper

Package Overview
Dependencies
Maintainers
1
Versions
123
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

monaco-editor-wrapper - npm Package Compare versions

Comparing version 2.0.0-next.0 to 2.0.0-next.1

dist/helpers/css.d.ts
dist/helpers/css.d.ts.map
dist/helpers/css.js
dist/helpers/css.js.map
dist/monacoEditorWrapper.d.ts
dist/monacoEditorWrapper.d.ts.map
dist/monacoEditorWrapper.js
dist/monacoEditorWrapper.js.map
dist/monacoVscodeApiWrapper.d.ts
dist/monacoVscodeApiWrapper.d.ts.map
dist/monacoVscodeApiWrapper.js
dist/monacoVscodeApiWrapper.js.map
dist/wrapper.d.ts
dist/wrapper.d.ts.map
dist/wrapper.js
dist/wrapper.js.map
src/helpers/css.ts
src/monacoEditorWrapper.ts
src/monacoVscodeApiWrapper.ts
src/wrapper.ts

135

dist/index.d.ts

@@ -1,128 +0,9 @@

import 'monaco-editor/esm/vs/editor/editor.all.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import * as vscode from 'vscode';
import { MonacoLanguageClient } from 'monaco-languageclient';
import { MessageTransports } from 'vscode-languageclient/lib/common/client.js';
export type WebSocketConfigOptions = {
wsSecured: boolean;
wsHost: string;
wsPort: number;
wsPath: string;
};
export type WorkerConfigOptions = {
workerURL: string;
workerType: 'classic' | 'module';
workerName?: string;
};
export type LanguageDescription = {
code: string;
languageId: string;
};
/**
* This is derived from:
* https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.ILanguageExtensionPoint.html
*/
export type LanguageExtensionConfig = {
id: string;
extensions?: string[];
filenames?: string[];
filenamePatterns?: string[];
firstLine?: string;
aliases?: string[];
mimetypes?: string[];
};
export declare class CodeEditorConfig {
private useDiffEditor;
private codeOriginal;
private codeModified;
private languageExtensionConfig;
private theme;
private automaticLayout;
private monacoEditorOptions;
private monacoDiffEditorOptions;
private useLanguageClient;
private useWebSocket;
private lcConfigOptions;
private languageDef;
private themeData;
isUseDiffEditor(): boolean;
setUseDiffEditor(useDiffEditor: boolean): void;
isUseLanguageClient(): boolean;
setUseLanguageClient(useLanguageClient: boolean): void;
isUseWebSocket(): boolean;
setUseWebSocket(useWebSocket: boolean): void;
getTheme(): string;
setTheme(theme: string): void;
getMainLanguageId(): string;
setMainLanguageId(languageId: string): void;
getMainCode(): string;
setMainCode(code: string): void;
getDiffLanguageId(): string;
setDiffLanguageId(languageId: string): void;
getDiffCode(): string;
setDiffCode(code: string): void;
setLanguageExtensionConfig(languageExtensionConfig: LanguageExtensionConfig): void;
getLanguageExtensionConfig(): LanguageExtensionConfig | undefined;
isAutomaticLayout(): boolean;
setAutomaticLayout(automaticLayout: boolean): void;
getMonacoEditorOptions(): monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions;
setMonacoEditorOptions(monacoEditorOptions: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions): void;
getMonacoDiffEditorOptions(): monaco.editor.IDiffEditorOptions & monaco.editor.IGlobalEditorOptions;
setMonacoDiffEditorOptions(monacoDiffEditorOptions: monaco.editor.IDiffEditorOptions & monaco.editor.IGlobalEditorOptions): void;
getMonarchTokensProvider(): monaco.languages.IMonarchLanguage | undefined;
setMonarchTokensProvider(languageDef: unknown): void;
setEditorThemeData(themeData: unknown): void;
getEditorThemeData(): monaco.editor.IStandaloneThemeData | undefined;
getLanguageClientConfigOptions(): WebSocketConfigOptions | WorkerConfigOptions;
setLanguageClientConfigOptions(lcConfigOptions: WebSocketConfigOptions | WorkerConfigOptions): void;
getDefaultWebSocketConfig(): WebSocketConfigOptions;
getDefaultWorkerConfig(): WorkerConfigOptions;
}
export declare class MonacoEditorLanguageClientWrapper {
private editor;
private diffEditor;
private editorConfig;
private languageClient;
private worker;
private messageTransports;
private dispatchEvent;
private id;
constructor(id?: string);
getEditorConfig(): CodeEditorConfig;
getEditor(): monaco.editor.IStandaloneCodeEditor | undefined;
getDiffEditor(): monaco.editor.IStandaloneDiffEditor | undefined;
getLanguageClient(): MonacoLanguageClient | undefined;
getMainCode(): string | undefined;
getDiffCode(): string | undefined;
updateTheme(): void;
setWorker(worker: Worker, messageTransports?: MessageTransports): void;
getMessageTransports(): MessageTransports | undefined;
isStarted(): boolean;
startEditor(container?: HTMLElement, dispatchEvent?: (event: Event) => boolean): Promise<string>;
dispose(): Promise<string>;
private disposeEditor;
private disposeDiffEditor;
reportStatus(): string[];
private disposeLanguageClient;
private updateMainModel;
private updateMonacoConfig;
private updateDiffModels;
updateLayout(): void;
private installMonaco;
private startLanguageClientConnection;
private handleLanguageClientStart;
private createLanguageClient;
private createUrl;
static addMonacoStyles(idOfStyleElement: string): void;
}
export { monaco, vscode };
import type { DirectMonacoEditorWrapperConfig } from './monacoEditorWrapper.js';
import { DirectMonacoEditorWrapper } from './monacoEditorWrapper.js';
import type { MonacoVscodeApiWrapperConfig, VscodeUserConfiguration } from './monacoVscodeApiWrapper.js';
import { MonacoVscodeApiWrapper } from './monacoVscodeApiWrapper.js';
import type { EditorConfig, WebSocketConfigOptions, WorkerConfigOptions, LanguageClientConfig, UserConfig, MonacoEditorWrapper } from './wrapper.js';
import { MonacoEditorLanguageClientWrapper } from './wrapper.js';
export type { EditorConfig, MonacoEditorWrapper, DirectMonacoEditorWrapperConfig, MonacoVscodeApiWrapperConfig, VscodeUserConfiguration, WebSocketConfigOptions, WorkerConfigOptions, LanguageClientConfig, UserConfig };
export { MonacoEditorLanguageClientWrapper, DirectMonacoEditorWrapper, MonacoVscodeApiWrapper };
//# sourceMappingURL=index.d.ts.map

441

dist/index.js

@@ -1,438 +0,5 @@

import 'monaco-editor/esm/vs/editor/editor.all.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import * as vscode from 'vscode';
import { getMonacoCss } from './generated/css.js';
import { MonacoLanguageClient, MonacoServices } from 'monaco-languageclient';
import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageserver-protocol/browser.js';
import { CloseAction, ErrorAction } from 'vscode-languageclient/lib/common/client.js';
import normalizeUrl from 'normalize-url';
export class CodeEditorConfig {
constructor() {
this.useDiffEditor = false;
this.codeOriginal = { code: '', languageId: 'javascript' };
this.codeModified = { code: '', languageId: 'javascript' };
this.theme = 'vs-light';
this.automaticLayout = true;
this.monacoEditorOptions = {};
this.monacoDiffEditorOptions = {};
// languageclient related configuration
this.useLanguageClient = false;
// create config type web socket / web worker
this.useWebSocket = true;
this.lcConfigOptions = this.useWebSocket ? this.getDefaultWebSocketConfig() : this.getDefaultWorkerConfig();
this.languageDef = undefined;
this.themeData = undefined;
}
isUseDiffEditor() {
return this.useDiffEditor;
}
setUseDiffEditor(useDiffEditor) {
this.useDiffEditor = useDiffEditor;
}
isUseLanguageClient() {
return this.useLanguageClient;
}
setUseLanguageClient(useLanguageClient) {
this.useLanguageClient = useLanguageClient;
}
isUseWebSocket() {
return this.useWebSocket;
}
setUseWebSocket(useWebSocket) {
this.useWebSocket = useWebSocket;
}
getTheme() {
return this.theme;
}
setTheme(theme) {
this.theme = theme;
}
getMainLanguageId() {
return this.codeOriginal.languageId;
}
setMainLanguageId(languageId) {
this.codeOriginal.languageId = languageId;
}
getMainCode() {
return this.codeOriginal.code;
}
setMainCode(code) {
this.codeOriginal.code = code;
}
getDiffLanguageId() {
return this.codeModified.languageId;
}
setDiffLanguageId(languageId) {
this.codeModified.languageId = languageId;
}
getDiffCode() {
return this.codeModified.code;
}
setDiffCode(code) {
this.codeModified.code = code;
}
setLanguageExtensionConfig(languageExtensionConfig) {
this.languageExtensionConfig = languageExtensionConfig;
}
getLanguageExtensionConfig() {
return this.languageExtensionConfig;
}
isAutomaticLayout() {
return this.automaticLayout;
}
setAutomaticLayout(automaticLayout) {
this.automaticLayout = automaticLayout;
}
getMonacoEditorOptions() {
return this.monacoEditorOptions;
}
setMonacoEditorOptions(monacoEditorOptions) {
this.monacoEditorOptions = monacoEditorOptions;
}
getMonacoDiffEditorOptions() {
return this.monacoDiffEditorOptions;
}
setMonacoDiffEditorOptions(monacoDiffEditorOptions) {
this.monacoDiffEditorOptions = monacoDiffEditorOptions;
}
getMonarchTokensProvider() {
return this.languageDef;
}
setMonarchTokensProvider(languageDef) {
this.languageDef = languageDef;
}
setEditorThemeData(themeData) {
this.themeData = themeData;
}
getEditorThemeData() {
return this.themeData;
}
getLanguageClientConfigOptions() {
return this.lcConfigOptions;
}
setLanguageClientConfigOptions(lcConfigOptions) {
this.lcConfigOptions = lcConfigOptions;
}
getDefaultWebSocketConfig() {
return {
wsSecured: false,
wsHost: 'localhost',
wsPort: 8080,
wsPath: ''
};
}
getDefaultWorkerConfig() {
return {
workerURL: '',
workerType: 'classic',
workerName: 'WrapperWorker'
};
}
}
export class MonacoEditorLanguageClientWrapper {
constructor(id) {
this.editorConfig = new CodeEditorConfig();
this.id = id ?? Math.floor(Math.random() * 101).toString();
}
getEditorConfig() {
return this.editorConfig;
}
getEditor() {
return this.editor;
}
getDiffEditor() {
return this.diffEditor;
}
getLanguageClient() {
return this.languageClient;
}
getMainCode() {
if (this.editor) {
return this.editor?.getValue();
}
else {
return this.diffEditor?.getOriginalEditor().getValue();
}
}
getDiffCode() {
return this.diffEditor?.getModifiedEditor().getValue();
}
updateTheme() {
monaco.editor.setTheme(this.editorConfig.getTheme());
}
setWorker(worker, messageTransports) {
this.worker = worker;
if (messageTransports) {
this.messageTransports = messageTransports;
}
}
getMessageTransports() {
return this.messageTransports;
}
isStarted() {
const haveEditor = this.editor !== undefined || this.diffEditor !== undefined;
if (this.editorConfig.isUseLanguageClient()) {
return haveEditor && this.languageClient !== undefined && this.languageClient.isRunning();
}
else {
return haveEditor;
}
}
startEditor(container, dispatchEvent) {
console.log(`Starting monaco-editor (${this.id})`);
this.dispatchEvent = dispatchEvent;
this.updateMonacoConfig();
// dispose old instances (try both, no need for swap)
this.disposeEditor();
this.disposeDiffEditor();
if (this.editorConfig.isUseDiffEditor()) {
const options = this.editorConfig.getMonacoDiffEditorOptions();
if (options.automaticLayout === undefined) {
options.automaticLayout = this.editorConfig.isAutomaticLayout();
}
this.diffEditor = monaco.editor.createDiffEditor(container, options);
this.updateDiffModels();
}
else {
const options = this.editorConfig.getMonacoEditorOptions();
if (options.automaticLayout === undefined) {
options.automaticLayout = this.editorConfig.isAutomaticLayout();
}
this.editor = monaco.editor.create(container, options);
this.updateMainModel();
}
if (this.editorConfig.isUseLanguageClient()) {
console.log('Enabling monaco-languageclient');
this.installMonaco();
return this.startLanguageClientConnection(this.editorConfig.getLanguageClientConfigOptions());
}
else {
return Promise.resolve('All fine. monaco-languageclient is not used.');
}
}
dispose() {
this.disposeEditor();
this.disposeDiffEditor();
if (this.editorConfig.isUseLanguageClient()) {
return this.disposeLanguageClient();
}
else {
return Promise.resolve('Monaco editor has been disposed');
}
}
disposeEditor() {
if (this.editor) {
const model = this.editor.getModel();
model?.dispose();
this.editor.dispose();
this.editor = undefined;
}
}
disposeDiffEditor() {
if (this.diffEditor) {
const model = this.diffEditor.getModel();
model?.modified?.dispose();
model?.original?.dispose();
this.diffEditor.dispose();
this.diffEditor = undefined;
}
}
reportStatus() {
const status = [];
status.push('Wrapper status:');
status.push(`Editor: ${this.editor}`);
status.push(`DiffEditor: ${this.diffEditor}`);
status.push(`LanguageClient: ${this.languageClient}`);
status.push(`Worker: ${this.worker}`);
return status;
}
async disposeLanguageClient() {
if (this.languageClient && this.languageClient.isRunning()) {
return await this.languageClient.dispose()
.then(() => {
this.worker?.terminate();
this.worker = undefined;
this.languageClient = undefined;
return 'monaco-languageclient and monaco-editor were successfully disposed';
})
.catch((e) => {
return `Disposing the monaco-languageclient resulted in error: ${e}`;
});
}
else {
return Promise.reject('Unable to dispose monaco-languageclient: It is not yet started.');
}
}
updateMainModel() {
if (this.editor) {
const languageId = this.editorConfig.getMainLanguageId();
const mainUri = monaco.Uri.parse(`inmemory:///model${this.id}.${languageId}`);
let model = monaco.editor.getModel(mainUri);
if (model === null) {
model = monaco.editor.createModel(this.editorConfig.getMainCode(), languageId, mainUri);
}
const orgModel = this.editor.getModel();
if (orgModel !== model) {
this.editor.setModel(model);
}
this.editor.getModel().onDidChangeContent(() => {
if (this.dispatchEvent) {
this.dispatchEvent(new CustomEvent('ChangeContent', { detail: {} }));
}
});
}
}
updateMonacoConfig() {
const languageId = this.editorConfig.getMainLanguageId();
// register own language first
const extLang = this.editorConfig.getLanguageExtensionConfig();
if (extLang) {
monaco.languages.register(this.editorConfig.getLanguageExtensionConfig());
}
const languageRegistered = monaco.languages.getLanguages().filter(x => x.id === languageId);
if (languageRegistered.length === 0) {
// this is only meaningful for languages supported by monaco out of the box
monaco.languages.register({ id: languageId });
}
// apply monarch definitions
const tokenProvider = this.editorConfig.getMonarchTokensProvider();
if (tokenProvider) {
monaco.languages.setMonarchTokensProvider(languageId, tokenProvider);
}
const themeData = this.editorConfig.getEditorThemeData();
if (themeData) {
monaco.editor.defineTheme(this.editorConfig.getTheme(), themeData);
}
this.updateTheme();
}
updateDiffModels() {
if (this.diffEditor) {
const mainUri = monaco.Uri.parse(`inmemory:///model${this.id}.${this.editorConfig.getMainLanguageId()}`);
const diffUri = monaco.Uri.parse(`inmemory:///modelDiff${this.id}.${this.editorConfig.getMainLanguageId()}`);
let originalModel = monaco.editor.getModel(mainUri);
if (originalModel === null) {
originalModel = monaco.editor.createModel(this.editorConfig.getMainCode(), this.editorConfig.getMainLanguageId(), mainUri);
}
let modifiedModel = monaco.editor.getModel(diffUri);
if (modifiedModel === null) {
modifiedModel = monaco.editor.createModel(this.editorConfig.getDiffCode(), this.editorConfig.getDiffLanguageId(), diffUri);
}
this.diffEditor.setModel({
original: originalModel,
modified: modifiedModel
});
}
}
updateLayout() {
if (this.editorConfig.isUseDiffEditor()) {
this.diffEditor?.layout();
}
else {
this.editor?.layout();
}
}
installMonaco() {
// install Monaco language client services
if (monaco) {
try {
MonacoServices.get();
}
catch (e) {
// install only if services are not yet available (exception will happen only then)
MonacoServices.install();
console.log(`Component (${this.id}): Installed MonacoServices`);
}
}
}
startLanguageClientConnection(lcConfigOptions) {
if (this.languageClient && this.languageClient.isRunning()) {
return Promise.resolve('monaco-languageclient already running!');
}
return new Promise((resolve, reject) => {
if (this.editorConfig.isUseWebSocket()) {
const webSocketConfigOptions = lcConfigOptions;
const url = this.createUrl(webSocketConfigOptions);
const webSocket = new WebSocket(url);
webSocket.onopen = () => {
const socket = toSocket(webSocket);
this.messageTransports = {
reader: new WebSocketMessageReader(socket),
writer: new WebSocketMessageWriter(socket)
};
this.handleLanguageClientStart(this.messageTransports, resolve, reject);
};
}
else {
const workerConfigOptions = lcConfigOptions;
if (!this.worker) {
this.worker = new Worker(new URL(workerConfigOptions.workerURL, window.location.href).href, {
type: workerConfigOptions.workerType,
name: workerConfigOptions.workerName,
});
}
if (!this.messageTransports) {
this.messageTransports = {
reader: new BrowserMessageReader(this.worker),
writer: new BrowserMessageWriter(this.worker)
};
}
this.handleLanguageClientStart(this.messageTransports, resolve, reject);
}
});
}
async handleLanguageClientStart(messageTransports, resolve, reject) {
this.languageClient = this.createLanguageClient(messageTransports);
messageTransports.reader.onClose(() => this.languageClient?.stop());
await this.languageClient.start()
.then(() => {
const msg = 'monaco-languageclient was successfully started.';
resolve(msg);
})
.catch((e) => {
const errorMsg = `monaco-languageclient start was unsuccessful: ${e.message}`;
reject(errorMsg);
});
}
createLanguageClient(transports) {
return new MonacoLanguageClient({
name: 'Monaco Wrapper Language Client',
clientOptions: {
// use a language id as a document selector
documentSelector: [this.editorConfig.getMainLanguageId()],
// disable the default error handler
errorHandler: {
error: () => ({ action: ErrorAction.Continue }),
closed: () => ({ action: CloseAction.DoNotRestart })
}
},
// create a language client connection from the JSON RPC connection on demand
connectionProvider: {
get: () => {
return Promise.resolve(transports);
}
}
});
}
createUrl(config) {
const protocol = config.wsSecured ? 'wss' : 'ws';
return normalizeUrl(`${protocol}://${config.wsHost}:${config.wsPort}/${config.wsPath}`);
}
static addMonacoStyles(idOfStyleElement) {
const style = document.createElement('style');
style.id = idOfStyleElement;
style.innerHTML = getMonacoCss();
document.head.appendChild(style);
}
}
export { monaco, vscode };
import { DirectMonacoEditorWrapper } from './monacoEditorWrapper.js';
import { MonacoVscodeApiWrapper } from './monacoVscodeApiWrapper.js';
import { MonacoEditorLanguageClientWrapper, } from './wrapper.js';
export { MonacoEditorLanguageClientWrapper, DirectMonacoEditorWrapper, MonacoVscodeApiWrapper };
//# sourceMappingURL=index.js.map

4

dist/indexAllLanguages.d.ts

@@ -1,4 +0,4 @@

export type { WebSocketConfigOptions, WorkerConfigOptions, LanguageExtensionConfig } from './index.js';
export { CodeEditorConfig, MonacoEditorLanguageClientWrapper, monaco, vscode } from './index.js';
export type { EditorConfig, MonacoEditorWrapper, DirectMonacoEditorWrapperConfig, MonacoVscodeApiWrapperConfig, VscodeUserConfiguration, WebSocketConfigOptions, WorkerConfigOptions, LanguageClientConfig, UserConfig } from './index.js';
export { MonacoEditorLanguageClientWrapper, DirectMonacoEditorWrapper, MonacoVscodeApiWrapper } from './index.js';
import './indexLanguagesOnly.js';
//# sourceMappingURL=indexAllLanguages.d.ts.map

2

dist/indexAllLanguages.js

@@ -1,3 +0,3 @@

export { CodeEditorConfig, MonacoEditorLanguageClientWrapper, monaco, vscode } from './index.js';
export { MonacoEditorLanguageClientWrapper, DirectMonacoEditorWrapper, MonacoVscodeApiWrapper } from './index.js';
import './indexLanguagesOnly.js';
//# sourceMappingURL=indexAllLanguages.js.map

0

dist/indexLanguagesOnly.d.ts

@@ -0,0 +0,0 @@ import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js';

0

dist/indexLanguagesOnly.js

@@ -0,0 +0,0 @@ // add workers

36

package.json
{
"name": "monaco-editor-wrapper",
"version": "2.0.0-next.0",
"version": "2.0.0-next.1",
"license": "MIT",

@@ -58,3 +58,3 @@ "description": "Monaco-Editor and Monaco Languageclient Wrapper",

"monaco-css": [
"dist/generated/css"
"dist/helpers/css"
]

@@ -71,26 +71,26 @@ }

"scripts": {
"clean": "npx shx rm -rf ./dist ./bundle ./src/generated *.tsbuildinfo",
"create:assets": "node ./build/src/buildAssets.mjs",
"compile": "npm run create:assets && tsc --build tsconfig.src.json",
"build:bundle:main": "npx shx rm -rf bundle/generated && vite --config vite.bundle.config.ts build",
"build:bundle:languages": "vite --config vite.languages.config.ts build",
"build:bundle": "npm run build:bundle:main && npm run build:bundle:languages",
"build": "npm run clean && npm run compile && npm run build:bundle"
"clean": "npx shx rm -rf ./dist ./bundle ./src/generated ./resources *.tsbuildinfo",
"handle:assets": "vite-node ./build/src/buildAssets.mts",
"compile": "npm run handle:assets && tsc --build tsconfig.src.json",
"bundle:main": "npx shx rm -rf bundle/generated && vite --config vite.bundle.config.ts build",
"bundle:languages": "vite --config vite.languages.config.ts build",
"bundle": "npm run bundle:main && npm run bundle:languages",
"build": "npm run clean && npm run compile && npm run bundle"
},
"volta": {
"node": "18.14.0",
"npm": "9.4.1"
"node": "18.15.0",
"npm": "9.6.3"
},
"dependencies": {
"@types/css-font-loading-module": "~0.0.8",
"monaco-languageclient": "5.0.0-next.0",
"vscode-ws-jsonrpc": "3.0.0-next.0",
"vscode-languageclient": "~8.0.2",
"vscode-languageserver-protocol": "~3.17.2",
"normalize-url": "~8.0.0"
},
"peerDependencies": {
"monaco-editor": "~0.37.1",
"monaco-languageclient": "5.1.0-next.2",
"vscode": "npm:@codingame/monaco-vscode-api@~1.78.0",
"vscode-ws-jsonrpc": "3.0.0"
},
"devDependencies": {
"@types/glob-to-regexp": "~0.4.1",
"@types/vscode": "~1.69.1",
"monaco-editor-workers": "0.34.2"
"@types/glob-to-regexp": "~0.4.1"
},

@@ -97,0 +97,0 @@ "repository": {

594

src/index.ts

@@ -1,561 +0,47 @@

import 'monaco-editor/esm/vs/editor/editor.all.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import * as vscode from 'vscode';
import type {
DirectMonacoEditorWrapperConfig,
} from './monacoEditorWrapper.js';
import { getMonacoCss } from './generated/css.js';
import {
DirectMonacoEditorWrapper
} from './monacoEditorWrapper.js';
import { MonacoLanguageClient, MonacoServices } from 'monaco-languageclient';
import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageserver-protocol/browser.js';
import { CloseAction, ErrorAction, MessageTransports } from 'vscode-languageclient/lib/common/client.js';
import normalizeUrl from 'normalize-url';
import type {
MonacoVscodeApiWrapperConfig,
VscodeUserConfiguration
} from './monacoVscodeApiWrapper.js';
import type { } from 'css-font-loading-module';
import {
MonacoVscodeApiWrapper
} from './monacoVscodeApiWrapper.js';
export type WebSocketConfigOptions = {
wsSecured: boolean;
wsHost: string;
wsPort: number;
wsPath: string;
}
import type {
EditorConfig,
WebSocketConfigOptions,
WorkerConfigOptions,
LanguageClientConfig,
UserConfig,
MonacoEditorWrapper
} from './wrapper.js';
export type WorkerConfigOptions = {
workerURL: string;
workerType: 'classic' | 'module';
workerName?: string;
}
import {
MonacoEditorLanguageClientWrapper,
} from './wrapper.js';
export type LanguageDescription = {
code: string;
languageId: string;
}
export type {
EditorConfig,
MonacoEditorWrapper,
DirectMonacoEditorWrapperConfig,
MonacoVscodeApiWrapperConfig,
VscodeUserConfiguration,
WebSocketConfigOptions,
WorkerConfigOptions,
LanguageClientConfig,
UserConfig
};
/**
* This is derived from:
* https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.ILanguageExtensionPoint.html
*/
export type LanguageExtensionConfig = {
id: string;
extensions?: string[];
filenames?: string[];
filenamePatterns?: string[];
firstLine?: string;
aliases?: string[];
mimetypes?: string[];
}
export class CodeEditorConfig {
private useDiffEditor = false;
private codeOriginal: LanguageDescription = { code: '', languageId: 'javascript' };
private codeModified: LanguageDescription = { code: '', languageId: 'javascript' };
private languageExtensionConfig: LanguageExtensionConfig | undefined;
private theme = 'vs-light';
private automaticLayout = true;
private monacoEditorOptions: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions = {};
private monacoDiffEditorOptions: monaco.editor.IDiffEditorOptions & monaco.editor.IGlobalEditorOptions = {};
// languageclient related configuration
private useLanguageClient = false;
// create config type web socket / web worker
private useWebSocket = true;
private lcConfigOptions = this.useWebSocket ? this.getDefaultWebSocketConfig() : this.getDefaultWorkerConfig();
private languageDef: monaco.languages.IMonarchLanguage | undefined = undefined;
private themeData: monaco.editor.IStandaloneThemeData | undefined = undefined;
isUseDiffEditor(): boolean {
return this.useDiffEditor;
}
setUseDiffEditor(useDiffEditor: boolean): void {
this.useDiffEditor = useDiffEditor;
}
isUseLanguageClient(): boolean {
return this.useLanguageClient;
}
setUseLanguageClient(useLanguageClient: boolean): void {
this.useLanguageClient = useLanguageClient;
}
isUseWebSocket(): boolean {
return this.useWebSocket;
}
setUseWebSocket(useWebSocket: boolean): void {
this.useWebSocket = useWebSocket;
}
getTheme(): string {
return this.theme;
}
setTheme(theme: string): void {
this.theme = theme;
}
getMainLanguageId(): string {
return this.codeOriginal.languageId;
}
setMainLanguageId(languageId: string): void {
this.codeOriginal.languageId = languageId;
}
getMainCode(): string {
return this.codeOriginal.code;
}
setMainCode(code: string): void {
this.codeOriginal.code = code;
}
getDiffLanguageId(): string {
return this.codeModified.languageId;
}
setDiffLanguageId(languageId: string): void {
this.codeModified.languageId = languageId;
}
getDiffCode(): string {
return this.codeModified.code;
}
setDiffCode(code: string): void {
this.codeModified.code = code;
}
setLanguageExtensionConfig(languageExtensionConfig: LanguageExtensionConfig): void {
this.languageExtensionConfig = languageExtensionConfig;
}
getLanguageExtensionConfig(): LanguageExtensionConfig | undefined {
return this.languageExtensionConfig;
}
isAutomaticLayout() {
return this.automaticLayout;
}
setAutomaticLayout(automaticLayout: boolean) {
this.automaticLayout = automaticLayout;
}
getMonacoEditorOptions() {
return this.monacoEditorOptions;
}
setMonacoEditorOptions(monacoEditorOptions: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions): void {
this.monacoEditorOptions = monacoEditorOptions;
}
getMonacoDiffEditorOptions() {
return this.monacoDiffEditorOptions;
}
setMonacoDiffEditorOptions(monacoDiffEditorOptions: monaco.editor.IDiffEditorOptions & monaco.editor.IGlobalEditorOptions): void {
this.monacoDiffEditorOptions = monacoDiffEditorOptions;
}
getMonarchTokensProvider(): monaco.languages.IMonarchLanguage | undefined {
return this.languageDef;
}
setMonarchTokensProvider(languageDef: unknown): void {
this.languageDef = languageDef as monaco.languages.IMonarchLanguage;
}
setEditorThemeData(themeData: unknown): void {
this.themeData = themeData as monaco.editor.IStandaloneThemeData;
}
getEditorThemeData(): monaco.editor.IStandaloneThemeData | undefined {
return this.themeData;
}
getLanguageClientConfigOptions(): WebSocketConfigOptions | WorkerConfigOptions {
return this.lcConfigOptions;
}
setLanguageClientConfigOptions(lcConfigOptions: WebSocketConfigOptions | WorkerConfigOptions): void {
this.lcConfigOptions = lcConfigOptions;
}
getDefaultWebSocketConfig(): WebSocketConfigOptions {
return {
wsSecured: false,
wsHost: 'localhost',
wsPort: 8080,
wsPath: ''
};
}
getDefaultWorkerConfig(): WorkerConfigOptions {
return {
workerURL: '',
workerType: 'classic',
workerName: 'WrapperWorker'
};
}
}
export class MonacoEditorLanguageClientWrapper {
private editor: monaco.editor.IStandaloneCodeEditor | undefined;
private diffEditor: monaco.editor.IStandaloneDiffEditor | undefined;
private editorConfig: CodeEditorConfig = new CodeEditorConfig();
private languageClient: MonacoLanguageClient | undefined;
private worker: Worker | undefined;
private messageTransports: MessageTransports | undefined;
private dispatchEvent: ((event: Event) => boolean) | undefined;
private id: string;
constructor(id?: string) {
this.id = id ?? Math.floor(Math.random() * 101).toString();
}
getEditorConfig() {
return this.editorConfig;
}
getEditor(): monaco.editor.IStandaloneCodeEditor | undefined {
return this.editor;
}
getDiffEditor(): monaco.editor.IStandaloneDiffEditor | undefined {
return this.diffEditor;
}
getLanguageClient(): MonacoLanguageClient | undefined {
return this.languageClient;
}
getMainCode(): string | undefined {
if (this.editor) {
return this.editor?.getValue();
} else {
return this.diffEditor?.getOriginalEditor().getValue();
}
}
getDiffCode(): string | undefined {
return this.diffEditor?.getModifiedEditor().getValue();
}
updateTheme() {
monaco.editor.setTheme(this.editorConfig.getTheme());
}
setWorker(worker: Worker, messageTransports?: MessageTransports) {
this.worker = worker;
if (messageTransports) {
this.messageTransports = messageTransports;
}
}
getMessageTransports(): MessageTransports | undefined {
return this.messageTransports;
}
isStarted(): boolean {
const haveEditor = this.editor !== undefined || this.diffEditor !== undefined;
if (this.editorConfig.isUseLanguageClient()) {
return haveEditor && this.languageClient !== undefined && this.languageClient.isRunning();
}
else {
return haveEditor;
}
}
startEditor(container?: HTMLElement, dispatchEvent?: (event: Event) => boolean): Promise<string> {
console.log(`Starting monaco-editor (${this.id})`);
this.dispatchEvent = dispatchEvent;
this.updateMonacoConfig();
// dispose old instances (try both, no need for swap)
this.disposeEditor();
this.disposeDiffEditor();
if (this.editorConfig.isUseDiffEditor()) {
const options = this.editorConfig.getMonacoDiffEditorOptions();
if (options.automaticLayout === undefined) {
options.automaticLayout = this.editorConfig.isAutomaticLayout();
}
this.diffEditor = monaco.editor.createDiffEditor(container!, options);
this.updateDiffModels();
} else {
const options = this.editorConfig.getMonacoEditorOptions();
if (options.automaticLayout === undefined) {
options.automaticLayout = this.editorConfig.isAutomaticLayout();
}
this.editor = monaco.editor.create(container!, options);
this.updateMainModel();
}
if (this.editorConfig.isUseLanguageClient()) {
console.log('Enabling monaco-languageclient');
this.installMonaco();
return this.startLanguageClientConnection(this.editorConfig.getLanguageClientConfigOptions());
} else {
return Promise.resolve('All fine. monaco-languageclient is not used.');
}
}
dispose(): Promise<string> {
this.disposeEditor();
this.disposeDiffEditor();
if (this.editorConfig.isUseLanguageClient()) {
return this.disposeLanguageClient();
}
else {
return Promise.resolve('Monaco editor has been disposed');
}
}
private disposeEditor() {
if (this.editor) {
const model = this.editor.getModel();
model?.dispose();
this.editor.dispose();
this.editor = undefined;
}
}
private disposeDiffEditor() {
if (this.diffEditor) {
const model = this.diffEditor.getModel();
model?.modified?.dispose();
model?.original?.dispose();
this.diffEditor.dispose();
this.diffEditor = undefined;
}
}
public reportStatus() {
const status: string[] = [];
status.push('Wrapper status:');
status.push(`Editor: ${this.editor}`);
status.push(`DiffEditor: ${this.diffEditor}`);
status.push(`LanguageClient: ${this.languageClient}`);
status.push(`Worker: ${this.worker}`);
return status;
}
private async disposeLanguageClient(): Promise<string> {
if (this.languageClient && this.languageClient.isRunning()) {
return await this.languageClient.dispose()
.then(() => {
this.worker?.terminate();
this.worker = undefined;
this.languageClient = undefined;
return 'monaco-languageclient and monaco-editor were successfully disposed';
})
.catch((e: Error) => {
return `Disposing the monaco-languageclient resulted in error: ${e}`;
});
}
else {
return Promise.reject('Unable to dispose monaco-languageclient: It is not yet started.');
}
}
private updateMainModel(): void {
if (this.editor) {
const languageId = this.editorConfig.getMainLanguageId();
const mainUri = monaco.Uri.parse(`inmemory:///model${this.id}.${languageId}`);
let model = monaco.editor.getModel(mainUri);
if (model === null) {
model = monaco.editor.createModel(this.editorConfig.getMainCode(), languageId, mainUri);
}
const orgModel = this.editor.getModel();
if (orgModel !== model) {
this.editor.setModel(model);
}
this.editor.getModel()!.onDidChangeContent(() => {
if (this.dispatchEvent) {
this.dispatchEvent(new CustomEvent('ChangeContent', { detail: {} }));
}
});
}
}
private updateMonacoConfig() {
const languageId = this.editorConfig.getMainLanguageId();
// register own language first
const extLang = this.editorConfig.getLanguageExtensionConfig();
if (extLang) {
monaco.languages.register(this.editorConfig.getLanguageExtensionConfig() as monaco.languages.ILanguageExtensionPoint);
}
const languageRegistered = monaco.languages.getLanguages().filter(x => x.id === languageId);
if (languageRegistered.length === 0) {
// this is only meaningful for languages supported by monaco out of the box
monaco.languages.register({ id: languageId });
}
// apply monarch definitions
const tokenProvider = this.editorConfig.getMonarchTokensProvider();
if (tokenProvider) {
monaco.languages.setMonarchTokensProvider(languageId, tokenProvider);
}
const themeData = this.editorConfig.getEditorThemeData();
if (themeData) {
monaco.editor.defineTheme(this.editorConfig.getTheme(), themeData);
}
this.updateTheme();
}
private updateDiffModels() {
if (this.diffEditor) {
const mainUri = monaco.Uri.parse(`inmemory:///model${this.id}.${this.editorConfig.getMainLanguageId()}`);
const diffUri = monaco.Uri.parse(`inmemory:///modelDiff${this.id}.${this.editorConfig.getMainLanguageId()}`);
let originalModel = monaco.editor.getModel(mainUri);
if (originalModel === null) {
originalModel = monaco.editor.createModel(this.editorConfig.getMainCode(), this.editorConfig.getMainLanguageId(), mainUri);
}
let modifiedModel = monaco.editor.getModel(diffUri);
if (modifiedModel === null) {
modifiedModel = monaco.editor.createModel(this.editorConfig.getDiffCode(), this.editorConfig.getDiffLanguageId(), diffUri);
}
this.diffEditor.setModel({
original: originalModel,
modified: modifiedModel
});
}
}
updateLayout() {
if (this.editorConfig.isUseDiffEditor()) {
this.diffEditor?.layout();
}
else {
this.editor?.layout();
}
}
private installMonaco() {
// install Monaco language client services
if (monaco) {
try {
MonacoServices.get();
}
catch (e: unknown) {
// install only if services are not yet available (exception will happen only then)
MonacoServices.install();
console.log(`Component (${this.id}): Installed MonacoServices`);
}
}
}
private startLanguageClientConnection(lcConfigOptions: WebSocketConfigOptions | WorkerConfigOptions): Promise<string> {
if (this.languageClient && this.languageClient.isRunning()) {
return Promise.resolve('monaco-languageclient already running!');
}
return new Promise((resolve, reject) => {
if (this.editorConfig.isUseWebSocket()) {
const webSocketConfigOptions = lcConfigOptions as WebSocketConfigOptions;
const url = this.createUrl(webSocketConfigOptions);
const webSocket = new WebSocket(url);
webSocket.onopen = () => {
const socket = toSocket(webSocket);
this.messageTransports = {
reader: new WebSocketMessageReader(socket),
writer: new WebSocketMessageWriter(socket)
};
this.handleLanguageClientStart(this.messageTransports, resolve, reject);
};
} else {
const workerConfigOptions = lcConfigOptions as WorkerConfigOptions;
if (!this.worker) {
this.worker = new Worker(new URL(workerConfigOptions.workerURL, window.location.href).href, {
type: workerConfigOptions.workerType,
name: workerConfigOptions.workerName,
});
}
if (!this.messageTransports) {
this.messageTransports = {
reader: new BrowserMessageReader(this.worker),
writer: new BrowserMessageWriter(this.worker)
};
}
this.handleLanguageClientStart(this.messageTransports, resolve, reject);
}
});
}
private async handleLanguageClientStart(messageTransports: MessageTransports,
resolve: (value: string) => void,
reject: (reason?: unknown) => void) {
this.languageClient = this.createLanguageClient(messageTransports);
messageTransports.reader.onClose(() => this.languageClient?.stop());
await this.languageClient.start()
.then(() => {
const msg = 'monaco-languageclient was successfully started.';
resolve(msg);
})
.catch((e: Error) => {
const errorMsg = `monaco-languageclient start was unsuccessful: ${e.message}`;
reject(errorMsg);
});
}
private createLanguageClient(transports: MessageTransports): MonacoLanguageClient {
return new MonacoLanguageClient({
name: 'Monaco Wrapper Language Client',
clientOptions: {
// use a language id as a document selector
documentSelector: [this.editorConfig.getMainLanguageId()],
// disable the default error handler
errorHandler: {
error: () => ({ action: ErrorAction.Continue }),
closed: () => ({ action: CloseAction.DoNotRestart })
}
},
// create a language client connection from the JSON RPC connection on demand
connectionProvider: {
get: () => {
return Promise.resolve(transports);
}
}
});
}
private createUrl(config: WebSocketConfigOptions) {
const protocol = config.wsSecured ? 'wss' : 'ws';
return normalizeUrl(`${protocol}://${config.wsHost}:${config.wsPort}/${config.wsPath}`);
}
static addMonacoStyles(idOfStyleElement: string) {
const style = document.createElement('style');
style.id = idOfStyleElement;
style.innerHTML = getMonacoCss();
document.head.appendChild(style);
}
}
export { monaco, vscode };
export {
MonacoEditorLanguageClientWrapper,
DirectMonacoEditorWrapper,
MonacoVscodeApiWrapper
};

13

src/indexAllLanguages.ts
export type {
EditorConfig,
MonacoEditorWrapper,
DirectMonacoEditorWrapperConfig,
MonacoVscodeApiWrapperConfig,
VscodeUserConfiguration,
WebSocketConfigOptions,
WorkerConfigOptions,
LanguageExtensionConfig
LanguageClientConfig,
UserConfig
} from './index.js';
export {
CodeEditorConfig,
MonacoEditorLanguageClientWrapper,
monaco,
vscode
DirectMonacoEditorWrapper,
MonacoVscodeApiWrapper
} from './index.js';
import './indexLanguagesOnly.js';
dist/generated/css.d.ts
dist/generated/css.d.ts.map
dist/generated/css.js
dist/generated/css.js.map
src/generated/css.ts
bundle/assets/style.css

Sorry, the diff of this file is not supported yet

bundle/index.js

Sorry, the diff of this file is too big to display

bundle/indexAllLanguages.js

Sorry, the diff of this file is too big to display

dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/indexAllLanguages.d.ts.map

Sorry, the diff of this file is not supported yet

dist/indexAllLanguages.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc