diff --git a/README.md b/README.md index 586eee6f..2846506a 100644 --- a/README.md +++ b/README.md @@ -22,12 +22,22 @@ Import `CodeEditorModule` into your main application module: ```ts import { CodeEditorModule } from '@ngstack/code-editor'; +@NgModule({ + imports: [CodeEditorModule.forRoot()] +}) +export class AppModule {} +``` + +If you want to use a specific version of the Monaco editor, use `editorVersion` parameter. +If not provided, the component is always going to use the `latest` version. + +```ts @NgModule({ imports: [ - ..., - CodeEditorModule.forRoot() - ], - ... + CodeEditorModule.forRoot({ + editorVersion: '0.44.0' + }) + ] }) export class AppModule {} ``` @@ -47,14 +57,14 @@ export class AppComponent { model: CodeModel = { language: 'json', uri: 'main.json', - value: '{}', + value: '{}' }; options = { contextmenu: true, minimap: { - enabled: true, - }, + enabled: true + } }; onCodeChanged(value) { @@ -129,7 +139,7 @@ export class MyEditorComponent { language: 'typescript', uri: 'main.ts', value: '', - dependencies: ['@types/node', '@ngstack/translate', '@ngstack/code-editor'], + dependencies: ['@types/node', '@ngstack/translate', '@ngstack/code-editor'] }; } ``` @@ -174,12 +184,12 @@ export class MyEditorComponent { type: 'object', properties: { type: { - enum: ['button', 'textbox'], - }, - }, - }, - }, - ], + enum: ['button', 'textbox'] + } + } + } + } + ] }; } ``` diff --git a/package-lock.json b/package-lock.json index 903f0ce5..a4419919 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ngstack/code-editor", - "version": "7.0.1", + "version": "7.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ngstack/code-editor", - "version": "7.0.1", + "version": "7.1.0", "license": "MIT", "dependencies": { "@angular/animations": "^17.1.1", diff --git a/package.json b/package.json index 2aea0437..cff77d5a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@ngstack/code-editor", "description": "Code editor component for Angular applications. ", - "version": "7.0.1", + "version": "7.1.0", "license": "MIT", "author": "Denys Vuika ", "scripts": { diff --git a/projects/code-editor/README.md b/projects/code-editor/README.md index 613a8a2f..2846506a 100644 --- a/projects/code-editor/README.md +++ b/projects/code-editor/README.md @@ -5,9 +5,9 @@ Code editor component for Angular applications. Based on the [Monaco](https://www.npmjs.com/package/monaco-editor) editor that powers [VS Code](https://github.com/Microsoft/vscode). -## Live demos - -- [Angular 6](https://stackblitz.com/edit/ngstack-code-editor-ng6) + + Buy Me A Coffee + ## Installing @@ -22,12 +22,22 @@ Import `CodeEditorModule` into your main application module: ```ts import { CodeEditorModule } from '@ngstack/code-editor'; +@NgModule({ + imports: [CodeEditorModule.forRoot()] +}) +export class AppModule {} +``` + +If you want to use a specific version of the Monaco editor, use `editorVersion` parameter. +If not provided, the component is always going to use the `latest` version. + +```ts @NgModule({ imports: [ - ..., - CodeEditorModule.forRoot() - ], - ... + CodeEditorModule.forRoot({ + editorVersion: '0.44.0' + }) + ] }) export class AppModule {} ``` @@ -35,12 +45,7 @@ export class AppModule {} Update template to use the `ngs-code-editor`: ```html - - + ``` Update component controller class and provide corresponding properties and events: @@ -49,7 +54,7 @@ Update component controller class and provide corresponding properties and event export class AppComponent { theme = 'vs-dark'; - codeModel: CodeModel = { + model: CodeModel = { language: 'json', uri: 'main.json', value: '{}' @@ -95,7 +100,7 @@ export interface CodeModel { ### Editor Options -For available options see [IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) docs. +For available options see [IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorConstructionOptions.html) docs. The following options are used by default when Editor Component gets created: @@ -123,8 +128,7 @@ The editor is able to resolve typing libraries when set to the `Typescript` or ` Use `dependencies` property to provide a list of libraries to resolve ```html - - + ``` And in the controller class: @@ -162,8 +166,7 @@ You should have all the types resolved and auto-completion working. You can associate multiple schemas when working with JSON files. ```html - - + ``` Provide the required schemas like in the example below. @@ -205,7 +208,7 @@ Install the `monaco-editor`: npm install monaco-editor ``` -Update the `.angular-cli.json` file and append the following asset rule: +Update the `angular.json` file and append the following asset rule: ```json { @@ -235,7 +238,7 @@ export class AppModule {} ### Typings Worker -Update the `.angular-cli.json` file and append the following asset rule: +Update the `angular.json` file and append the following asset rule: ```ts { @@ -268,44 +271,3 @@ use `CodeEditorModule.forRoot()` in the main application, and `CodeEditorModule.forChild()` in all lazy-loaded feature modules. For more details please refer to [Lazy Loading Feature Modules](https://angular.io/guide/lazy-loading-ngmodules) - -## Enabling error details - -Append the following code to the `polyfills.ts` to enable error details in the tooltips: - -```ts -// workaround for https://github.com/Microsoft/monaco-editor/issues/790 - -Promise.all = function(values: any): Promise { - let resolve: (v: any) => void; - let reject: (v: any) => void; - const promise = new this((res, rej) => { - resolve = res; - reject = rej; - }); - let count = 0; - let index = 0; - const resolvedValues: any[] = []; - for (let value of values) { - if (!(value && value.then)) { - value = this.resolve(value); - } - value.then( - (idx => (val: any) => { - resolvedValues[idx] = val; - count--; - if (!count) { - resolve(resolvedValues); - } - })(index), - reject - ); - count++; - index++; - } - if (!count) { - resolve(resolvedValues); - } - return promise; -}; -``` diff --git a/projects/code-editor/package.json b/projects/code-editor/package.json index 7b95c922..2e755f8a 100644 --- a/projects/code-editor/package.json +++ b/projects/code-editor/package.json @@ -1,7 +1,7 @@ { "name": "@ngstack/code-editor", "description": "Code editor component for Angular applications.", - "version": "7.0.1", + "version": "7.1.0", "license": "MIT", "author": { "name": "Denys Vuika", diff --git a/projects/code-editor/src/lib/editor-settings.ts b/projects/code-editor/src/lib/editor-settings.ts index 3791c117..955b1b97 100644 --- a/projects/code-editor/src/lib/editor-settings.ts +++ b/projects/code-editor/src/lib/editor-settings.ts @@ -1,4 +1,5 @@ export interface CodeEditorSettings { + editorVersion?: string; baseUrl?: string; typingsWorkerUrl?: string; } diff --git a/projects/code-editor/src/lib/services/code-editor.service.ts b/projects/code-editor/src/lib/services/code-editor.service.ts index 6329634e..c1a4e904 100644 --- a/projects/code-editor/src/lib/services/code-editor.service.ts +++ b/projects/code-editor/src/lib/services/code-editor.service.ts @@ -19,13 +19,11 @@ export interface TypingsInfo { } @Injectable({ - providedIn: 'root', + providedIn: 'root' }) export class CodeEditorService { - baseUrl = 'https://cdn.jsdelivr.net/npm/monaco-editor/min'; - - typingsWorkerUrl = - 'https://cdn.jsdelivr.net/npm/@ngstack/code-editor/workers/typings-worker.js'; + readonly baseUrl: string; // = 'https://cdn.jsdelivr.net/npm/monaco-editor/min'; + readonly typingsWorkerUrl: string; // = 'https://cdn.jsdelivr.net/npm/@ngstack/code-editor/workers/typings-worker.js'; typingsLoaded = new Subject(); loaded = new BehaviorSubject<{ monaco: any } | null>(null); @@ -39,14 +37,12 @@ export class CodeEditorService { @Inject(EDITOR_SETTINGS) settings: CodeEditorSettings ) { - const defaults = { - baseUrl: this.baseUrl, - typingsWorkerUrl: this.typingsWorkerUrl, - ...settings, - }; + const editorVersion = settings?.editorVersion || 'latest'; - this.baseUrl = defaults.baseUrl; - this.typingsWorkerUrl = defaults.typingsWorkerUrl; + this.baseUrl = + settings?.baseUrl || + `https://cdn.jsdelivr.net/npm/monaco-editor@${editorVersion}/min`; + this.typingsWorkerUrl = settings?.typingsWorkerUrl || ``; } private loadTypingsWorker(): Worker { @@ -74,7 +70,7 @@ export class CodeEditorService { if (worker) { this.loadingTypings.next(true); worker.postMessage({ - dependencies, + dependencies }); } } @@ -84,7 +80,7 @@ export class CodeEditorService { return new Promise((resolve) => { const onGotAmdLoader = () => { (window).require.config({ - paths: { vs: `${this.baseUrl}/vs` }, + paths: { vs: `${this.baseUrl}/vs` } }); if (this.baseUrl.startsWith('http')) { @@ -100,7 +96,7 @@ export class CodeEditorService { window['MonacoEnvironment'] = { getWorkerUrl: function () { return proxy; - }, + } }; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 46c11e2b..cbc2f412 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,8 +9,8 @@ import { CodeEditorDemoComponent } from './code-editor-demo/code-editor-demo.com const routes: Route[] = [ { path: '', - component: CodeEditorDemoComponent, - }, + component: CodeEditorDemoComponent + } ]; @NgModule({ @@ -18,19 +18,18 @@ const routes: Route[] = [ BrowserModule, BrowserAnimationsModule, RouterModule.forRoot(routes, { - initialNavigation: 'enabledBlocking', + initialNavigation: 'enabledBlocking' }), - // MaterialModule, - CodeEditorModule.forRoot({ + editorVersion: '0.44.0' // use local Monaco installation - baseUrl: 'assets/monaco', + // baseUrl: 'assets/monaco', // use local Typings Worker - typingsWorkerUrl: 'assets/workers/typings-worker.js', + // typingsWorkerUrl: 'assets/workers/typings-worker.js' }), - CodeEditorDemoComponent, + CodeEditorDemoComponent ], declarations: [AppComponent], - bootstrap: [AppComponent], + bootstrap: [AppComponent] }) export class AppModule {}