From cc5e38faaddc0f1b7dd575e91908273d91a969ec Mon Sep 17 00:00:00 2001
From: Maximilian Krambach <maximilian.krambach@intevation.de>
Date: Mon, 4 Mar 2019 11:49:36 +0100
Subject: [PATCH] change config update behavior for editors

tinyMCE editors will not update after a timeout, but when focus changes
or the editor is destroyed
---
 .../config-field/config-field.component.html  |  2 +-
 .../config-field/config-field.component.ts    | 28 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/client/src/app/site/config/components/config-field/config-field.component.html b/client/src/app/site/config/components/config-field/config-field.component.html
index a3511d8cc..3ac323265 100644
--- a/client/src/app/site/config/components/config-field/config-field.component.html
+++ b/client/src/app/site/config/components/config-field/config-field.component.html
@@ -91,7 +91,7 @@
                 <!-- The editor -->
                 <div *ngIf="configItem.inputType === 'markupText'">
                     <h4>{{ configItem.label | translate }}</h4>
-                    <editor formControlName="value" [init]="tinyMceSettings"></editor>
+                    <editor formControlName="value" [init]="getTinyMceSettings()"></editor>
                     <span matSuffix>
                         <mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon>
                     </span>
diff --git a/client/src/app/site/config/components/config-field/config-field.component.ts b/client/src/app/site/config/components/config-field/config-field.component.ts
index ad6fd6b44..bbed3b4c6 100644
--- a/client/src/app/site/config/components/config-field/config-field.component.ts
+++ b/client/src/app/site/config/components/config-field/config-field.component.ts
@@ -145,6 +145,10 @@ export class ConfigFieldComponent extends BaseComponent implements OnInit {
      * Trigger an update of the data
      */
     private onChange(value: any): void {
+        if (this.configItem.inputType === 'markupText') {
+            // tinyMCE markuptext does not autoupdate on change, only when entering or leaving
+            return;
+        }
         if (this.configItem.inputType === 'datetimepicker') {
             this.dateValue = new Date(value as number);
         }
@@ -264,4 +268,28 @@ export class ConfigFieldComponent extends BaseComponent implements OnInit {
     public hasDefault(): boolean {
         return this.configItem.defaultValue !== undefined && this.configItem.defaultValue !== null;
     }
+
+    /**
+     * Amends the application-wide tinyMCE settings with update triggers that
+     * send updated values only after leaving focus (Blur) or closing the editor (Remove)
+     *
+     * @returns an instance of tinyMCE settings with additional setup definitions
+     */
+    public getTinyMceSettings(): object {
+        return {
+            ...this.tinyMceSettings,
+            setup: editor => {
+                editor.on('Blur', ev => {
+                    if (ev.target.getContent() !== this.translatedValue) {
+                        this.update(ev.target.getContent());
+                    }
+                });
+                editor.on('Remove', ev => {
+                    if (ev.target.getContent() !== this.translatedValue) {
+                        this.update(ev.target.getContent());
+                    }
+                });
+            }
+        };
+    }
 }