import { Component , forwardRef , Inject , Input , NgZone } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; import { fromEvent } from 'rxjs' ; import { BaseEditor } from './base-editor' ; import { NGX_MONACO_EDITOR_CONFIG , NgxMonacoEditorConfig } from './config' ; import { NgxEditorModel } from './types' ; declare var monaco ; @ Component ( { selector : 'ngx-monaco-editor' , template : '<div class="editor-container" #editorContainer></div>' , styles : [ `
      :host {
          display: block;
          height: 200px;
      }

      .editor-container {
          width: 100%;
          height: 98%;
      }
  ` ] , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => EditorComponent ) , multi : true } ] } ) export class EditorComponent extends BaseEditor implements ControlValueAccessor { private _value : string = '' ; propagateChange = ( _ ) => { } ; onTouched = ( ) => { } ; @ Input ( 'options' ) set options ( options ) { this . _options = Object . assign ( { } , this . config . defaultOptions , options ) ; if ( this . _editor ) { this . _editor . dispose ( ) ; this . initMonaco ( options ) ; } } get options ( ) : any { return this . _options ; } @ Input ( 'model' ) set model ( model ) { this . options . model = model ; if ( this . _editor ) { this . _editor . dispose ( ) ; this . initMonaco ( this . options ) ; } } constructor ( private zone , @ Inject ( NGX_MONACO_EDITOR_CONFIG ) private editorConfig ) { super ( editorConfig ) ; } writeValue ( value ) { this . _value = value || '' ; setTimeout ( ( ) => { if ( this . _editor && ! this . options . model ) { this . _editor . setValue ( this . _value ) ; } } ) ; } registerOnChange ( fn ) { this . propagateChange = fn ; } registerOnTouched ( fn ) { this . onTouched = fn ; } protected initMonaco ( options ) { const hasModel = ! ! options . model ; if ( hasModel ) { const model = monaco . editor . getModel ( options . model . uri || '' ) ; if ( model ) { options . model = model ; options . model . setValue ( this . _value ) ; } else { options . model = monaco . editor . createModel ( options . model . value , options . model . language , options . model . uri ) ; } } this . _editor = monaco . editor . create ( this . _editorContainer . nativeElement , options ) ; if ( ! hasModel ) { this . _editor . setValue ( this . _value ) ; } this . _editor . onDidChangeModelContent ( ( e ) => { const value = this . _editor . getValue ( ) ; this . zone . run ( ( ) => { this . propagateChange ( value ) ; this . _value = value ; } ) ; } ) ; this . _editor . onDidBlurEditorWidget ( ( ) => { this . onTouched ( ) ; } ) ; if ( this . _windowResizeSubscription ) { this . _windowResizeSubscription . unsubscribe ( ) ; } this . _windowResizeSubscription = fromEvent ( window , 'resize' ) . subscribe ( ( ) => this . _editor . layout ( ) ) ; this . onInit . emit ( this . _editor ) ; } }