WIP

src/app/games/massive-darkness2/md2-html-editor/md2-html-editor.component.html

@@ -1 +1 @@
-<editor [init]="htmlEditorSetting"></editor>
+<!-- <editor [init]="htmlEditorSetting"></editor> -->

src/app/games/massive-darkness2/md2-html-editor/md2-html-editor.component.ts

@@ -1,109 +1,97 @@
-import { Component, ElementRef, EventEmitter, Input, Output, Renderer2 } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Inject, Input, NgZone, Output, PLATFORM_ID, Renderer2 } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
-import { Editor, RawEditorOptions } from 'tinymce';
+
 import { MsgBoxService } from '../../../services/msg-box.service';
 import { DropDownOption } from '../../../entity/dropDownOption';
 import { MD2Icon } from '../massive-darkness2.model';
 import { first } from 'rxjs/operators';
+import { HtmlEditorSettings } from '../../../ui/html-editor/html-editor.model';
+import { EditorComponent } from '@tinymce/tinymce-angular';
+import { Editor } from 'tinymce';
 
 @Component({
   selector: 'md2-html-editor',
   templateUrl: './md2-html-editor.component.html',
   styleUrl: './md2-html-editor.component.scss'
 })
-export class MD2HtmlEditorComponent implements ControlValueAccessor, Validator {
-
-  private _lastBlurValue: string;
-
-  readonly: boolean = false;
-  isRequired: boolean = false;
-
-  @Input() id? = '';
-  @Input() name = '';
-  @Input() data: string;
-
-  @Output() focus = new EventEmitter();
-  @Output() blur = new EventEmitter<string>();
-
-  @Input('readonly')
-  public set input_readonly(value) {
-    this.readonly = typeof value !== 'undefined' && value !== false;
-  }
-  @Input('isRequired')
-  public set input_isRequired(value) {
-    this.isRequired = typeof value !== 'undefined' && value !== false;
-  }
+export class MD2HtmlEditorComponent extends EditorComponent implements ControlValueAccessor {
+  htmlEditorSetting: HtmlEditorSettings = {};
 
   constructor(
     private msgBoxService: MsgBoxService,
-    private elementRef: ElementRef,
-    private renderer: Renderer2) {
+    elementRef: ElementRef, ngZone: NgZone, @Inject(PLATFORM_ID) platformId: Object) {
+    super(elementRef, ngZone, platformId);
+    // this.elementRef is private. Need a duplicate
+    this._elementRef2 = elementRef;
     this.htmlEditorSetting.base_url = '/tinymce';
     this.htmlEditorSetting.suffix = '.min';
     this.htmlEditorSetting['parentComponent'] = this;
-    this.htmlEditorSetting.plugins = 'lists link image table code';
-    this.htmlEditorSetting.toolbar2 = 'customInsertButton'
-    this.htmlEditorSetting.setup = this.htmlEditorSetup;
+    this.htmlEditorSetting.plugins = [
+      'noneditable', 'lists', 'link', 'image', 'table', 'code'];
+    this.htmlEditorSetting.toolbar = ['undo redo | blocks | bold italic | alignleft aligncentre alignright alignjustify | indent outdent | bullist numlist | code customInsertButton'];
+    this.htmlEditorSetting.content_style = '.MD2Icon{font-family: "Massive Darkness 2", sans-serif !important; font-size: 40px; margin-left:5px}  body{font-size: 30px;  }';
+    this.htmlEditorSetting.noneditable_noneditable_class = 'MD2Icon';
+    //this.htmlEditorSetting.o = this.htmlEditorSetup;
+    this.htmlEditorSetting.setup = (editor) => this.htmlEditorSetup(editor)
   }
 
-  htmlEditorSetting: RawEditorOptions = {};
 
   htmlEditorSetup(editor: Editor) {
-    let component = this.htmlEditorSetting['parentComponent'] as MD2HtmlEditorComponent;
 
+    if (editor) {
+      let component = this.htmlEditorSetting['parentComponent'] as MD2HtmlEditorComponent;
+      editor.ui.registry.addButton('customInsertButton', {
+        icon: 'code-sample',
+        text: 'MD2 Icon',
+        onAction: (_) => component.showInsertMD2Icon(this.editor as any)
+      });
+    }
 
-    editor.ui.registry.addButton('customInsertButton', {
-      icon: 'code-sample',
-      text: 'MD2 Icon',
-      onAction: (_) => component.showInsertMD2Icon(editor)
-    });
   }
   showInsertMD2Icon(editor: Editor) {
 
     var iconKeys = Object.keys(MD2Icon);
     iconKeys = iconKeys.slice(iconKeys.length / 2, iconKeys.length - 1);
+    this.ngZone.run(_ => {
+      this.msgBoxService.showInputbox('Insert MD2 Icon', '', { inputType: 'dropdown', dropDownOptions: iconKeys.map((k, i) => new DropDownOption(i, k)) })
+        .pipe(first()).subscribe(result => {
 
-    this.msgBoxService.showInputbox('Insert MD2 Icon', '', { inputType: 'dropdown', dropDownOptions: iconKeys.map(k => new DropDownOption(k, k)) })
-      .pipe(first()).subscribe(result => {
+          editor.insertContent(`<span class="MD2Icon mceNonEditable">${String.fromCharCode(65 + result)}</span>`);
+          this.writeValue(editor.getContent());
+        });
+    });
 
-        editor.insertContent(`&nbsp;<strong>${result}</strong>&nbsp;`);
-        this.writeValue(editor.getContent());
-      });
   }
 
-  validate(control: AbstractControl): ValidationErrors {
-    // if (this.required && (this.value == null || this.value == 0)) {
-    //   return { 'currency': '' };
-    // }
-    return null;
+  private _elementRef2: ElementRef;
+
+  writeValue(value: string | null): void {
+
+    super.writeValue(value);
   }
-  registerOnValidatorChange?(fn: () => void): void {
-  }
-  onChange = (value: number) => { };
-  onTouched = () => { };
-  writeValue(obj: string): void {
-    this.data = obj;
-  }
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
+
+  registerOnChange(fn: (value: string) => void): void {
+    super.registerOnChange(fn);
   }
   registerOnTouched(fn: any): void {
-    this.onTouched = fn;
+    super.registerOnTouched(fn);
   }
-  setDisabledState?(isDisabled: boolean): void {
-    this.readonly = isDisabled;
+  setDisabledState(isDisabled: boolean): void {
+    super.setDisabledState(isDisabled);
   }
-
-  ngOnInit() {
+  checkDomAttachment(): boolean {
+    // check if component has been attached to DOM yet
+    return document.body.contains(this._elementRef2.nativeElement);
   }
-
   ngAfterViewInit() {
-    this.renderer.removeAttribute(this.elementRef.nativeElement, 'id')
+    this.init = this.htmlEditorSetting;
+    //this.htmlEditorSetup();
+    super.ngAfterViewInit();
   }
-  onBlur() {
-    if (this._lastBlurValue != this.data) {
-      this._lastBlurValue = this.data;
-      this.blur.emit(this.data);
-    }
+
+
+  private InitializeEditor() {
+    this.init = new HtmlEditorSettings({});
+    //super.initialise();
   }
-}
+}