Merge pull request #55 from atularen/dev

Dev
atularen · May 16, 2018 · 3319633 · 3319633
2 parents 9627dda + 86fafe4
commit 3319633
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 15 deletions.
diff --git 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((<any>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((<any>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
@@ -45,6 +45,7 @@
     "Atul Kumar <atulaggarwal4288@gmail.com>"
   ],
   "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
@@ -17,6 +17,7 @@ import { DiffEditorModel, NgxEditorModel } from '../platform/editor';
     <pre>{{code | json}}</pre>
 
     <h1>Diff Editor</h1>
+    <button (click)="updateDiffModel()">Update Models</button>
     <ngx-monaco-diff-editor [options]="options" [originalModel]="originalModel" [modifiedModel]="modifiedModel"
                             (onInit)="onInit($event)"></ngx-monaco-diff-editor>
 
@@ -70,14 +71,19 @@ 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' });
     }
 
   }
 
+  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
@@ -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<void>;

diff --git a/src/platform/editor/diff-editor.component.ts b/src/platform/editor/diff-editor.component.ts
@@ -22,24 +22,42 @@ 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);
   }
 
   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
@@ -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);
     }