Edit Contentlet: Add TinyMCE V6 WYSIWFY field to the form (#28010)

* chore: update styles * chore: fix tests * chore: hidden bran logo in the editor
dotCMS · Mar 20, 2024 · ca3eb44 · ca3eb44
1 parent 945339e
commit ca3eb44
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.html
@@ -1 +1,5 @@
-<editor [formControlName]="field.variable" [plugins]="plugins()" [toolbar]="toolbar()"> </editor>
+<editor
+    [formControlName]="field.variable"
+    [plugins]="plugins()"
+    [toolbar]="toolbar()"
+    [init]="init"></editor>
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.scss
@@ -1,7 +1,21 @@
+@use "variables" as *;
+
 :host::ng-deep {
     // Hide the promotion button
     // This button redirect to the tinyMCE premium page
     .tox-promotion {
         display: none;
     }
+
+    .tox-statusbar__branding {
+        display: none;
+    }
+
+    .tox .tox-statusbar {
+        border-top: 1px solid $color-palette-gray-400;
+    }
+
+    .tox-tinymce {
+        border: $field-border-size solid $color-palette-gray-400;
+    }
 }
diff --git a/...eb/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.spec.ts b/...eb/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.spec.ts
@@ -16,7 +16,7 @@ import { WYSIWYG_MOCK, createFormGroupDirectiveMock } from '../../utils/mocks';
 const ALL_PLUGINS =
     'advlist autolink lists link image charmap preview anchor pagebreak searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking save table directionality emoticons template';
 const ALL_TOOLBAR_ITEMS =
-    'paste print textpattern | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image hr | preview | validation media | forecolor dotimageclipboard backcolor emoticons';
+    'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr';
 
 describe('DotWYSIWYGFieldComponent', () => {
     let spectator: Spectator<DotWYSIWYGFieldComponent>;

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.ts
@@ -1,4 +1,5 @@
 import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
+import { RawEditorOptions } from 'tinymce';
 
 import { ChangeDetectionStrategy, Component, Input, inject, signal } from '@angular/core';
 import { ControlContainer, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -23,10 +24,14 @@ import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
 export class DotWYSIWYGFieldComponent {
     @Input() field!: DotCMSContentTypeField;
 
+    protected readonly init: RawEditorOptions = {
+        menubar: false
+    };
+
     protected readonly plugins = signal(
         'advlist autolink lists link image charmap preview anchor pagebreak searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking save table directionality emoticons template'
     );
     protected readonly toolbar = signal(
-        'paste print textpattern | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image hr | preview | validation media | forecolor dotimageclipboard backcolor emoticons'
+        'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr'
     );
 }