Merge pull request #4449 from MaximilianKrambach/tinyMCE_blur

change config update behavior for editors

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>

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());
+                    }
+                });
+            }
+        };
+    }
 }