Add usage hints to tinymce mobile

shows "dont forget to save" and "touch the book to edit" messages if the tinymce
mobile editor was called from motion comments and personal notes

client/src/app/base.component.ts

@@ -27,6 +27,11 @@ export abstract class BaseComponent {
      */
     protected swipeTime?: number;
 
+    /**
+     * Determine to display a save hint
+     */
+    public saveHint: boolean;
+
     /**
      * Settings for the TinyMCE editor selector
      */
@@ -78,4 +83,26 @@ export abstract class BaseComponent {
     public trackByIndex(index: number): number {
         return index;
     }
+
+    /**
+     * TinyMCE Init callback. Used for certain mobile editors
+     * @param event
+     */
+    protected onInitTinyMce(event: any): void {
+        console.log('tinyMCE event: ', event);
+
+        if (event.event.target.settings.theme === 'mobile') {
+            console.log('is mobile editor');
+            this.saveHint = true;
+        } else {
+            console.log('is no mobile editor');
+            event.editor.focus();
+        }
+    }
+
+    protected onLeaveTinyMce(event: any): void {
+        console.log('tinyevent:', event.event.type);
+        this.saveHint = false;
+        // console.log("event: ", event.event.type);
+    }
 }

client/src/app/shared/components/meta-text-block/meta-text-block.component.scss

@@ -19,10 +19,6 @@
             .title-container {
                 display: flex;
                 justify-content: space-between;
-
-                ::ng-deep button {
-                    color: rgba(0, 0, 0, 0.54);
-                }
             }
         }
     }

client/src/app/site/motions/modules/motion-detail/components/motion-comments/motion-comments.component.html

@@ -17,8 +17,19 @@
             </ng-container>
             <form [formGroup]="commentForms[section.id]" *ngIf="isCommentEdited(section)">
                 <!-- The HTML Editor -->
-                <editor formControlName="comment" [init]="tinyMceSettings"></editor>
+                <editor
+                    [id]="section.id"
+                    formControlName="comment"
+                    [init]="tinyMceSettings"
+                    (onInit)="onInitTinyMce($event)"
+                    (onRemove)="onLeaveTinyMce($event)"
+                ></editor>
             </form>
+            <div *ngIf="saveHint">
+                <span translate>Touch the book icon to enter text</span>
+                <br />
+                <span class="red-warning-text" translate>Do not forget to save your changes!</span>
+            </div>
         </ng-container>
 
         <ng-container class="meta-text-block-action-row">
@@ -40,6 +51,7 @@
             </button>
             <button
                 mat-icon-button
+                color="warn"
                 *ngIf="isCommentEdited(section)"
                 (click)="saveComment(section)"
                 matTooltip="{{ 'Save' | translate }}"

client/src/app/site/motions/modules/motion-detail/components/personal-note/personal-note.component.html

@@ -17,7 +17,13 @@
         >
             <mat-icon>picture_as_pdf</mat-icon>
         </button>
-        <button mat-icon-button *ngIf="isEditMode" (click)="savePersonalNote()" matTooltip="{{ 'Save' | translate }}">
+        <button
+            mat-icon-button
+            color="warn"
+            *ngIf="isEditMode"
+            (click)="savePersonalNote()"
+            matTooltip="{{ 'Save' | translate }}"
+        >
             <mat-icon>save</mat-icon>
         </button>
         <button
@@ -40,7 +46,17 @@
         </ng-container>
         <form [formGroup]="personalNoteForm" *ngIf="isEditMode">
             <!-- The HTML Editor -->
-            <editor formControlName="note" [init]="tinyMceSettings"></editor>
+            <editor
+                formControlName="note"
+                [init]="tinyMceSettings"
+                (onInit)="onInitTinyMce($event)"
+                (onRemove)="onLeaveTinyMce($event)"
+            ></editor>
         </form>
+        <div *ngIf="saveHint">
+            <span translate>Touch the book icon to enter text</span>
+            <br />
+            <span class="red-warning-text" translate>Do not forget to save your changes!</span>
+        </div>
     </ng-container>
 </os-meta-text-block>