Merge pull request #3013 from shubhamkumar9199/fix/templates-dark-mode

WEB-552: fix(templates) fix TinyMCE editor dark mode styling

src/app/templates/create-edit-template/create-edit-template.component.html

@@ -99,6 +99,7 @@
         <label for="template-text-editor" class="required-label required-label-editor">
           {{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span>
         </label>
+        @if (editorVisible) {
           <editor
             id="template-text-editor"
             #tinymceEditor
@@ -107,6 +108,7 @@
             licenseKey="gpl"
             [formControl]="templateForm.controls.text"
           ></editor>
+        }
       </div>
     </mat-card-content>
 

src/app/templates/create-edit-template/create-edit-template.component.ts

@@ -7,7 +7,8 @@
  */
 
 /** Angular Imports */
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, OnInit, ViewChild, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -23,6 +24,7 @@ import { clientParameterLabels, loanParameterLabels, repaymentParameterLabels }
 /** Custom Services */
 import { TemplatesService } from '../templates.service';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { ThemingService } from 'app/shared/theme-toggle/theming.service';
 import { EditorComponent, EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import {
   MatAccordion,
@@ -60,9 +62,16 @@ export class CreateEditComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private templateService = inject(TemplatesService);
+  private themingService = inject(ThemingService);
+  private destroyRef = inject(DestroyRef);
 
-  /** TinyMCE instance configuration */
-  tinymceConfig = {
+  themeKey = 'light';
+
+  editorVisible = true;
+
+  get tinymceConfig() {
+    const isDark = this.themeKey === 'dark-theme';
+    return {
       base_url: 'assets/tinymce',
       suffix: '.min',
       menubar: false,
@@ -72,10 +81,15 @@ export class CreateEditComponent implements OnInit {
       statusbar: false,
       elementpath: false,
       resize: false,
+      skin: isDark ? 'oxide-dark' : 'oxide',
+      content_css: isDark ? 'dark' : 'default',
+      content_style: isDark ? 'body { background-color: transparent !important; }' : '',
+      body_class: isDark ? 'dark-theme' : '',
       plugins: 'lists link table media codesample',
       toolbar:
         'undo redo | blocks | bold italic underline | link | numlist bullist outdent indent | alignleft aligncenter alignright alignjustify | table media | removeformat'
     };
+  }
   /** TinyMCE component reference */
   @ViewChild('tinymceEditor', { static: false }) tinymceEditor: EditorComponent;
 
@@ -105,7 +119,9 @@ export class CreateEditComponent implements OnInit {
    * @param {TemplateService} templateService Templates Service
    */
   constructor() {
-    this.route.data.subscribe((data: { templateData: any; mode: 'create' | 'edit' }) => {
+    this.route.data
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((data: { templateData: any; mode: 'create' | 'edit' }) => {
         this.templateData = data.templateData;
         this.mode = data.mode;
         if (this.mode === 'edit') {
@@ -116,6 +132,12 @@ export class CreateEditComponent implements OnInit {
           }));
         }
       });
+
+    this.themingService.theme.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((theme) => {
+      this.themeKey = theme;
+      this.editorVisible = false;
+      setTimeout(() => (this.editorVisible = true));
+    });
   }
 
   ngOnInit() {
@@ -173,7 +195,10 @@ export class CreateEditComponent implements OnInit {
    */
   buildDependencies() {
     const tenantIdentifier = 'default'; // update once global settings are setup.
-    this.templateForm.get('entity').valueChanges.subscribe((value: any) => {
+    this.templateForm
+      .get('entity')
+      .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value: any) => {
         if (value === 0) {
           // client
           this.mappers.splice(0, 1, {
@@ -186,7 +211,9 @@ export class CreateEditComponent implements OnInit {
           this.mappers.splice(0, 1, {
             mappersorder: 0,
             mapperskey: new UntypedFormControl('loan'),
-          mappersvalue: new UntypedFormControl('loans/{{loanId}}?associations=all&tenantIdentifier=' + tenantIdentifier)
+            mappersvalue: new UntypedFormControl(
+              'loans/{{loanId}}?associations=all&tenantIdentifier=' + tenantIdentifier
+            )
           });
         }
         this.setEditorContent('');

src/main.scss

@@ -719,3 +719,85 @@ mat-card {
     overflow: hidden;
   }
 }
+
+.dark-theme {
+  .tox.tox-tinymce {
+    border-color: #444 !important;
+  }
+
+  .tox .tox-editor-header,
+  .tox .tox-toolbar-overlord,
+  .tox .tox-toolbar,
+  .tox .tox-toolbar__overflow,
+  .tox .tox-toolbar__primary {
+    background-color: #303135 !important;
+  }
+
+  .tox .tox-tbtn {
+    background-color: transparent !important;
+    color: rgb(255 255 255 / 87%) !important;
+
+    svg {
+      fill: rgb(255 255 255 / 87%) !important;
+    }
+
+    &:hover {
+      background-color: rgb(255 255 255 / 12%) !important;
+    }
+
+    &:focus {
+      background-color: rgb(255 255 255 / 8%) !important;
+    }
+  }
+
+  .tox .tox-tbtn--bevel {
+    background: transparent !important;
+  }
+
+  .tox .tox-tbtn--select {
+    background-color: transparent !important;
+  }
+
+  .tox .tox-split-button {
+    background-color: transparent !important;
+
+    &:hover {
+      box-shadow: none !important;
+    }
+  }
+
+  .tox .tox-edit-area {
+    background-color: #303135 !important;
+
+    iframe {
+      background-color: transparent !important;
+    }
+  }
+
+  .tox .tox-sidebar-wrap {
+    background-color: #303135 !important;
+  }
+
+  .tox .tox-menubar {
+    background-color: #303135 !important;
+  }
+
+  .tox .tox-menu {
+    background-color: #303135 !important;
+    border-color: #444 !important;
+  }
+
+  .tox .tox-collection__item {
+    color: rgb(255 255 255 / 87%) !important;
+
+    &:hover {
+      background-color: rgb(255 255 255 / 8%) !important;
+    }
+  }
+
+  .tox .tox-statusbar {
+    background-color: #303135 !important;
+    border-color: #444 !important;
+    color: rgb(255 255 255 / 60%) !important;
+  }
+}