import { AfterViewInit , Component , ElementRef , EventEmitter , forwardRef , Input , NgZone , OnDestroy , Provider , ViewEncapsulation } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; import { Events , validEvents } from './Events' ; declare const require ; const EditorModule = require ( 'jodit' ) ; const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => JoditAngularComponent ) , multi : true } ; @ Component ( { selector : 'jodit-editor' , template : `
        <ng-template></ng-template>` , encapsulation : ViewEncapsulation . None , styleUrls : [ '../../../../node_modules/jodit/build/jodit.min.css' ] , providers : [ CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR ] } ) export class JoditAngularComponent extends Events implements AfterViewInit , OnDestroy , ControlValueAccessor { @ Input ( ) set config ( v ) { this . _config = v ; if ( this . element ) { this . resetEditor ( ) ; } } get config ( ) { return this . _config ; } private _config = { } ; @ Input ( ) tagName = 'textarea' ; @ Input ( ) id : string | undefined ; @ Input ( ) defaultValue : string | undefined ; element : HTMLElement ; editor : any ; private onChangeCallback : ( _ : any ) => { } ; private onTouchedCallback : ( ) => { } ; constructor ( private elementRef , private ngZone ) { super ( ) ; this . elementRef = elementRef ; this . ngZone = ngZone ; } createElement ( ) { const tagName = typeof this . tagName === 'string' ? this . tagName : 'textarea' ; this . element = document . createElement ( tagName ) ; if ( this . element ) { this . element . id = this . id ; this . elementRef . nativeElement . appendChild ( this . element ) ; } } get value ( ) : string { if ( this . editor ) { return this . editor . getEditorValue ( ) ; } else { return '' ; } } set value ( v ) { if ( this . editor ) { this . editor . setEditorValue ( v || '' ) ; } else { this . defaultValue = v ; } } resetEditor ( ) { this . editor . destruct ( ) ; this . createEditor ( ) ; } ngAfterViewInit ( ) { if ( ! this . element ) { this . createElement ( ) ; this . createEditor ( ) ; } } createEditor ( ) { this . ngZone . runOutsideAngular ( ( ) => { this . editor = new EditorModule . Jodit ( this . element , this . config ) ; } ) ; if ( this . defaultValue ) { this . editor . value = this . defaultValue ; } this . editor . events . on ( 'change' , ( value ) => { if ( typeof this . onChangeCallback === 'function' ) { this . ngZone . run ( ( ) => this . onChangeCallback ( value ) ) ; } } ) . on ( 'blur' , ( ) => { if ( typeof this . onTouchedCallback === 'function' ) { this . ngZone . run ( ( ) => this . onTouchedCallback ( ) ) ; } } ) ; validEvents . forEach ( ( eventName ) => { const eventEmitter = this [ eventName ] ; if ( eventEmitter . observers . length > 0 ) { let eventNameInJodit = eventName . substring ( 2 ) ; eventNameInJodit = eventNameInJodit . substr ( 0 , 1 ) . toLowerCase ( ) + eventNameInJodit . substring ( 1 ) ; this . editor . events . on ( eventNameInJodit , this . ngZone . run ( ( ) => ( ... args ) => eventEmitter . emit ( { args , editor : this . editor } ) ) ) ; } } ) ; } ngOnDestroy ( ) { if ( this . editor ) { this . editor . destruct ( ) ; } } writeValue ( v ) { this . value = v ; } registerOnChange ( fn ) { this . onChangeCallback = fn ; } registerOnTouched ( fn ) { this . onTouchedCallback = fn ; } setDisabledState ( isDisabled ) { this . editor . setReadOnly ( isDisabled ) ; } }