From e4e6aa5346d77fd073d799ed32ac4dbbd02ac54d Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Mon, 21 Oct 2019 13:08:26 +0200
Subject: [PATCH] Fix tiny MCE Problem in arrays.

---
 .../content/shared/array-editor.component.html |  2 +-
 .../content/shared/array-editor.component.ts   | 10 +++++++---
 .../content/shared/array-item.component.ts     | 13 ++++++++++++-
 .../content/shared/field-editor.component.html |  2 +-
 .../content/shared/field-editor.component.ts   | 18 ++++++++++++++++--
 .../components/rich-editor.component.html      |  2 +-
 .../components/rich-editor.component.scss      |  8 +++++---
 .../shared/components/rich-editor.component.ts | 13 ++++++++++++-
 8 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/Squidex/app/features/content/shared/array-editor.component.html b/src/Squidex/app/features/content/shared/array-editor.component.html
index e116e1f6e..a4e88db22 100644
--- a/src/Squidex/app/features/content/shared/array-editor.component.html
+++ b/src/Squidex/app/features/content/shared/array-editor.component.html
@@ -3,7 +3,7 @@
     [cdkDropListDisabled]="false"
     [cdkDropListData]="arrayControl.controls"
     (cdkDropListDropped)="sort($event)">
-    <div *ngFor="let itemForm of arrayControl.controls; let i = index; trackBy:trackByControl"
+    <div *ngFor="let itemForm of arrayControl.controls; let i = index;"
         class="table-drag item"
         cdkDrag
         cdkDragLockAxis="y">
diff --git a/src/Squidex/app/features/content/shared/array-editor.component.ts b/src/Squidex/app/features/content/shared/array-editor.component.ts
index fd3b81fc3..50df5e855 100644
--- a/src/Squidex/app/features/content/shared/array-editor.component.ts
+++ b/src/Squidex/app/features/content/shared/array-editor.component.ts
@@ -70,6 +70,12 @@ export class ArrayEditorComponent {
         });
     }
 
+    private reset() {
+        this.children.forEach(component => {
+            component.reset();
+        });
+    }
+
     public move(control: AbstractControl, index: number) {
         let controls = [...this.arrayControl.controls];
 
@@ -83,9 +89,7 @@ export class ArrayEditorComponent {
         for (let i = 0; i < controls.length; i++) {
             this.arrayControl.setControl(i, controls[i]);
         }
-    }
 
-    public trackByControl(index: number, control: AbstractControl) {
-        return control;
+        this.reset();
     }
 }
\ No newline at end of file
diff --git a/src/Squidex/app/features/content/shared/array-item.component.ts b/src/Squidex/app/features/content/shared/array-item.component.ts
index 7d9a5d17f..f27c39332 100644
--- a/src/Squidex/app/features/content/shared/array-item.component.ts
+++ b/src/Squidex/app/features/content/shared/array-item.component.ts
@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, Output, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
 import { Observable, Subscription } from 'rxjs';
 import { startWith } from 'rxjs/operators';
@@ -19,6 +19,8 @@ import {
     RootFieldDto
 } from '@app/shared';
 
+import { FieldEditorComponent } from './field-editor.component';
+
 type FieldControl = { field: FieldDto, control: AbstractControl };
 
 @Component({
@@ -69,6 +71,9 @@ export class ArrayItemComponent implements OnChanges, OnDestroy {
     @Input()
     public languages: ReadonlyArray<AppLanguageDto>;
 
+    @ViewChildren(FieldEditorComponent)
+    public editors: QueryList<FieldEditorComponent>;
+
     public isHidden = false;
     public isInvalid: Observable<boolean>;
 
@@ -174,6 +179,12 @@ export class ArrayItemComponent implements OnChanges, OnDestroy {
         this.move.emit(99999);
     }
 
+    public reset() {
+        this.editors.forEach(editor => {
+            editor.reset();
+        });
+    }
+
     public trackByField(index: number, control: FieldControl) {
         return control.field.name;
     }
diff --git a/src/Squidex/app/features/content/shared/field-editor.component.html b/src/Squidex/app/features/content/shared/field-editor.component.html
index 31b76ca1d..071e2566c 100644
--- a/src/Squidex/app/features/content/shared/field-editor.component.html
+++ b/src/Squidex/app/features/content/shared/field-editor.component.html
@@ -109,7 +109,7 @@
 							<textarea class="form-control" [formControl]="editorControl" rows="5" [placeholder]="field.displayPlaceholder"></textarea>
 						</ng-container>
 						<ng-container *ngSwitchCase="'RichText'">
-							<sqx-rich-editor [formControl]="editorControl"></sqx-rich-editor>
+							<sqx-rich-editor [formControl]="editorControl" #editor></sqx-rich-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Html'">
 							<sqx-code-editor height="350"  [formControl]="editorControl" mode="ace/mode/html"></sqx-code-editor>
diff --git a/src/Squidex/app/features/content/shared/field-editor.component.ts b/src/Squidex/app/features/content/shared/field-editor.component.ts
index 3cb9441e8..8fc863eba 100644
--- a/src/Squidex/app/features/content/shared/field-editor.component.ts
+++ b/src/Squidex/app/features/content/shared/field-editor.component.ts
@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { AbstractControl, FormArray, FormControl } from '@angular/forms';
 
 import {
@@ -13,7 +13,8 @@ import {
     EditContentForm,
     FieldDto,
     MathHelper,
-    RootFieldDto
+    RootFieldDto,
+    Types
 } from '@app/shared';
 
 @Component({
@@ -46,6 +47,9 @@ export class FieldEditorComponent {
     @Input()
     public displaySuffix: string;
 
+    @ViewChild('editor', { static: false })
+    public editor: ElementRef;
+
     public get arrayControl() {
         return this.control as FormArray;
     }
@@ -59,4 +63,14 @@ export class FieldEditorComponent {
     }
 
     public uniqueId = MathHelper.guid();
+
+    public reset() {
+        if (this.editor.nativeElement && Types.isFunction(this.editor.nativeElement['reset'])) {
+            this.editor.nativeElement['reset']();
+        }
+
+        if (this.editor && Types.isFunction(this.editor['reset'])) {
+            this.editor['reset']();
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/rich-editor.component.html b/src/Squidex/app/shared/components/rich-editor.component.html
index dadad2095..1453140d1 100644
--- a/src/Squidex/app/shared/components/rich-editor.component.html
+++ b/src/Squidex/app/shared/components/rich-editor.component.html
@@ -1,4 +1,4 @@
-<div class="drop-container" (sqxDropFile)="insertFiles($event)" [onlyImages]="true">
+<div class="drop-container" (sqxDropFile)="insertFiles($event)" [onlyImages]="true" #container>
     <div class="editor" #editor></div>
 </div>
 
diff --git a/src/Squidex/app/shared/components/rich-editor.component.scss b/src/Squidex/app/shared/components/rich-editor.component.scss
index 07b2c640b..401bc5174 100644
--- a/src/Squidex/app/shared/components/rich-editor.component.scss
+++ b/src/Squidex/app/shared/components/rich-editor.component.scss
@@ -1,8 +1,10 @@
 @import '_mixins';
 @import '_vars';
 
+.drop-container {
+    min-height: 401px;
+}
+
 .editor {
-    background: $color-dark-foreground;
-    border: 1px solid $color-input;
-    height: 30rem;
+    height: 300px;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/rich-editor.component.ts b/src/Squidex/app/shared/components/rich-editor.component.ts
index a58085040..3b3999ed7 100644
--- a/src/Squidex/app/shared/components/rich-editor.component.ts
+++ b/src/Squidex/app/shared/components/rich-editor.component.ts
@@ -64,7 +64,8 @@ export class RichEditorComponent extends StatefulControlComponent<undefined, str
 
     public ngOnDestroy() {
         if (this.tinyEditor) {
-            tinymce.remove(this.editor);
+            this.tinyEditor.destroy();
+            this.tinyEditor = null;
         }
     }
 
@@ -76,6 +77,14 @@ export class RichEditorComponent extends StatefulControlComponent<undefined, str
         });
     }
 
+    public reset() {
+        this.ngOnDestroy();
+
+        setTimeout(() => {
+            this.ngAfterViewInit();
+        });
+    }
+
     private showSelector = () => {
         if (this.isDisabled) {
             return;
@@ -91,6 +100,8 @@ export class RichEditorComponent extends StatefulControlComponent<undefined, str
             convert_fonts_to_spans: true,
             convert_urls: false,
             plugins: 'code image media link lists advlist paste',
+            min_height: 300,
+            max_height: 800,
             removed_menuitems: 'newdocument',
             resize: true,
             toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter | bullist numlist outdent indent | link image media | assets',