diff --git a/README.md b/README.md index 52bc06b..193358b 100755 --- a/README.md +++ b/README.md @@ -153,8 +153,8 @@ import { AppComponent } from './app.component'; const monacoConfig: NgxMonacoEditorConfig = { baseUrl: 'app-name/assets', // configure base path for monaco editor - defaultOptions: { scrollBeyondLastLine: false }, // pass deafult options to be used - onMonacoLoad: () => { console.log((window).monaco); } // here monaco object will be avilable as window.monaco use this function to extend monaco editor functionalities. + defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used + onMonacoLoad: () => { console.log((window).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionality. }; @NgModule({ diff --git a/package.json b/package.json index 56a55e4..34f7104 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "Atul Kumar " ], "dependencies": { + "@angular-devkit/core": "^0.6.1", "@angular/common": "^5.1.2", "@angular/compiler": "^5.1.2", "@angular/core": "^5.1.2", @@ -53,7 +54,7 @@ "@angular/platform-browser-dynamic": "^5.1.2", "@angular/router": "^5.1.2", "core-js": "^2.5.3", - "monaco-editor": "^0.10.1", + "monaco-editor": "^0.13.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ac3baf1..ca9d3b8 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -17,6 +17,7 @@ import { DiffEditorModel, NgxEditorModel } from '../platform/editor';
{{code | json}}

Diff Editor

+ @@ -70,7 +71,7 @@ export class AppComponent { this.toggleLanguage = !this.toggleLanguage; if (this.toggleLanguage) { this.code = this.cssCode; - this.options = Object.assign({}, this.options, { language: 'css' }); + this.options = Object.assign({}, this.options, { language: 'java' }); } else { this.code = this.jsCode; this.options = Object.assign({}, this.options, { language: 'javascript' }); @@ -78,6 +79,11 @@ export class AppComponent { } + updateDiffModel(){ + this.originalModel = Object.assign({}, this.originalModel, { code: 'abcd' }); + this.modifiedModel = Object.assign({}, this.originalModel, { code: 'ABCD ef' }); + } + onInit(editor) { this.editor = editor; console.log(editor); diff --git a/src/platform/editor/base-editor.ts b/src/platform/editor/base-editor.ts index af36fd9..3ffdc95 100644 --- a/src/platform/editor/base-editor.ts +++ b/src/platform/editor/base-editor.ts @@ -1,6 +1,6 @@ -import { AfterViewInit, ElementRef, EventEmitter, Inject, Input, NgZone, OnDestroy, Output, ViewChild } from '@angular/core'; +import { AfterViewInit, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; -import { NGX_MONACO_EDITOR_CONFIG, NgxMonacoEditorConfig } from './config'; +import { NgxMonacoEditorConfig } from './config'; let loadedMonaco: boolean = false; let loadPromise: Promise; diff --git a/src/platform/editor/diff-editor.component.ts b/src/platform/editor/diff-editor.component.ts index f190a40..9429b9d 100755 --- a/src/platform/editor/diff-editor.component.ts +++ b/src/platform/editor/diff-editor.component.ts @@ -22,8 +22,26 @@ import { DiffEditorModel } from './types'; }) export class DiffEditorComponent extends BaseEditor { - @Input() originalModel: DiffEditorModel; - @Input() modifiedModel: DiffEditorModel; + _originalModel: DiffEditorModel; + _modifiedModel: DiffEditorModel; + + @Input('originalModel') + set originalModel(model: DiffEditorModel) { + this._originalModel = model; + if (this._editor) { + this._editor.dispose(); + this.initMonaco(this.options); + } + } + + @Input('modifiedModel') + set modifiedModel(model: DiffEditorModel) { + this._modifiedModel = model; + if (this._editor) { + this._editor.dispose(); + this.initMonaco(this.options); + } + } constructor(@Inject(NGX_MONACO_EDITOR_CONFIG) private editorConfig: NgxMonacoEditorConfig) { super(editorConfig); @@ -31,15 +49,15 @@ export class DiffEditorComponent extends BaseEditor { protected initMonaco(options: any): void { - if (!this.originalModel || !this.modifiedModel) { + if (!this._originalModel || !this._modifiedModel) { throw new Error('originalModel or modifiedModel not found for ngx-monaco-diff-editor'); } - this.originalModel.language = this.originalModel.language || options.language; - this.modifiedModel.language = this.modifiedModel.language || options.language; + this._originalModel.language = this._originalModel.language || options.language; + this._modifiedModel.language = this._modifiedModel.language || options.language; - let originalModel = monaco.editor.createModel(this.originalModel.code, this.originalModel.language); - let modifiedModel = monaco.editor.createModel(this.modifiedModel.code, this.modifiedModel.language); + let originalModel = monaco.editor.createModel(this._originalModel.code, this._originalModel.language); + let modifiedModel = monaco.editor.createModel(this._modifiedModel.code, this._modifiedModel.language); this._editorContainer.nativeElement.innerHTML = ''; this._editor = monaco.editor.createDiffEditor(this._editorContainer.nativeElement, options); diff --git a/src/platform/editor/editor.component.ts b/src/platform/editor/editor.component.ts index 785c6ca..cb23363 100755 --- a/src/platform/editor/editor.component.ts +++ b/src/platform/editor/editor.component.ts @@ -65,13 +65,15 @@ export class EditorComponent extends BaseEditor implements ControlValueAccessor protected initMonaco(options: any): void { - if(options.model) { + const hasModel = !!options.model; + + if (hasModel) { options.model = monaco.editor.createModel(options.model.value, options.model.language, options.model.uri); } this._editor = monaco.editor.create(this._editorContainer.nativeElement, options); - if(!options.model) { + if (!hasModel) { this._editor.setValue(this._value); }