Merge pull request #12120 from vvlladd28/bug/notification/mail-template

Fixed incorrect show mail notification preview

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html

@@ -213,7 +213,7 @@
           <div class="notification-content">
             <div class="subject">{{ preview.processedTemplates.EMAIL.subject }}</div>
             <mat-divider></mat-divider>
-            <div class="html-content" [innerHTML]="(preview.processedTemplates.EMAIL.body | safe: 'html')"></div>
+            <editor [init]="tinyMceOptions" [initialValue]="preview.processedTemplates.EMAIL.body"></editor>
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SLACK?.enabled">

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss

@@ -179,14 +179,6 @@
         letter-spacing: 0.25px;
       }
 
-      .html-content {
-        margin-top: 12px;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 20px;
-        overflow-x: auto;
-      }
-
       &.mini {
         font-size: 12px;
         line-height: 1.25;
@@ -233,15 +225,6 @@
     }
   }
 
-  .preview-group {
-    .notification-content {
-      .html-content,
-      .html-content * {
-        all: revert;
-      }
-    }
-  }
-
   .delivery-methods-container {
     .delivery-method-container {
       &.interact * {

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts

@@ -77,6 +77,30 @@ export class SentNotificationDialogComponent extends
 
   showRefresh = false;
 
+  tinyMceOptions: Record<string, any> = {
+    base_url: '/assets/tinymce',
+    suffix: '.min',
+    plugins: ['autoresize'],
+    menubar: false,
+    toolbar: false,
+    statusbar: false,
+    resize: false,
+    readonly: true,
+    height: 400,
+    autofocus: false,
+    branding: false,
+    promotion: false,
+    setup: (ed) => {
+      ed.on('PreInit', () => {
+        const document = $(ed.iframeElement.contentDocument);
+        const body = $('#tinymce', document);
+        body.attr({contenteditable: false});
+        body.css('pointerEvents', 'none');
+        body.css('userSelect', 'none');
+      })
+    }
+  };
+
   private authUser: AuthUser = getCurrentAuthUser(this.store);
 
   private allowNotificationDeliveryMethods: Array<NotificationDeliveryMethod>;