WIP

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

@@ -5,93 +5,35 @@ 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';
-
+import { MD2StateService } from '../../../services/MD2/md2-state.service';
 @Component({
   selector: 'md2-html-editor',
   templateUrl: './md2-html-editor.component.html',
   styleUrl: './md2-html-editor.component.scss'
 })
-export class MD2HtmlEditorComponent extends EditorComponent implements ControlValueAccessor {
-  htmlEditorSetting: HtmlEditorSettings = {};
-
+export class MD2HtmlEditorComponent implements ControlValueAccessor {
+  customCssClass = '.MD2Icon{font-family: "Massive Darkness 2", sans-serif !important; font-size: 40px; margin-left:5px}  body{font-size: 30px;  }';
   constructor(
     private msgBoxService: MsgBoxService,
+    private md2StateService: MD2StateService,
     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 = [
-      '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)
+
   }
 
 
-  htmlEditorSetup(editor: Editor) {
+  showInsertMD2Icon() {
 
-    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)
-      });
+
+    //Insert
+
+    //Get all icon html 
+    let iconHtml = [];
+    for (let icon of Object.values(MD2Icon) as MD2Icon[]) {
+      iconHtml.push(this.md2StateService.iconHtml(icon));
     }
 
-  }
-  showInsertMD2Icon(editor: Editor) {
+    //Show dialog with all icon html
+    //then user can select one icon and insert it to the html editor current cursor position
 
-    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 => {
-
-          editor.insertContent(`<span class="MD2Icon mceNonEditable">${String.fromCharCode(65 + result)}</span>`);
-          this.writeValue(editor.getContent());
-        });
-    });
-
-  }
-
-  private _elementRef2: ElementRef;
-
-  writeValue(value: string | null): void {
-
-    super.writeValue(value);
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    super.registerOnChange(fn);
-  }
-  registerOnTouched(fn: any): void {
-    super.registerOnTouched(fn);
-  }
-  setDisabledState(isDisabled: boolean): void {
-    super.setDisabledState(isDisabled);
-  }
-  checkDomAttachment(): boolean {
-    // check if component has been attached to DOM yet
-    return document.body.contains(this._elementRef2.nativeElement);
-  }
-  ngAfterViewInit() {
-    this.init = this.htmlEditorSetting;
-    //this.htmlEditorSetup();
-    super.ngAfterViewInit();
-  }
-
-
-  private InitializeEditor() {
-    this.init = new HtmlEditorSettings({});
-    //super.initialise();
   }
 }