import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CKEditor5 } from '@ckeditor/ckeditor5-angular/ckeditor';
import { ChangeEvent, BlurEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'na-ck-editor',
  templateUrl: './ck-editor.component.html',
  styleUrls: ['./ck-editor.component.scss'],
})
export class CKEditorComponent {
  @Input() editor?: CKEditor5.EditorConstructor = ClassicEditor;
  @Input() config?: CKEditor5.Config = {
    language: 'zh-cn'
  };
  @Input() data = '';
  @Input() tagName = 'div';
  @Input() disabled: boolean;
  @Output() change: EventEmitter<ChangeEvent> = new EventEmitter<ChangeEvent>();
  @Output() blur: EventEmitter<BlurEvent> = new EventEmitter<BlurEvent>();
  @Output() focus: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();

  constructor() {}

  onChange(event: any) {
    this.change.emit(event);
  }
  onBlur(event: any) {
    this.blur.emit(event);
  }
  onFocus(event: any) {
    this.focus.emit(event);
  }
}