-
Notifications
You must be signed in to change notification settings - Fork 467
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(Edit Contentlet): Add TinyMCE V6 WYSIWFY field to the form (#27961)
* feat: add WYSIWYG field * chore: code cleanup * chore: cover tests * chore: code cleanup * chore: run yarn
- Loading branch information
Showing
12 changed files
with
152 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
core-web/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <editor [formControlName]="field.variable" [plugins]="plugins()" [toolbar]="toolbar()"> </editor> |
7 changes: 7 additions & 0 deletions
7
core-web/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| :host::ng-deep { | ||
| // Hide the promotion button | ||
| // This button redirect to the tinyMCE premium page | ||
| .tox-promotion { | ||
| display: none; | ||
| } | ||
| } |
50 changes: 50 additions & 0 deletions
50
...eb/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Spectator, createComponentFactory } from '@ngneat/spectator'; | ||
| import { EditorComponent, EditorModule } from '@tinymce/tinymce-angular'; | ||
| import { MockComponent } from 'ng-mocks'; | ||
|
|
||
| import { | ||
| ControlContainer, | ||
| FormGroupDirective, | ||
| FormsModule, | ||
| ReactiveFormsModule | ||
| } from '@angular/forms'; | ||
|
|
||
| import { DotWYSIWYGFieldComponent } from './dot-wysiwyg-field.component'; | ||
|
|
||
| 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'; | ||
|
|
||
| describe('DotWYSIWYGFieldComponent', () => { | ||
| let spectator: Spectator<DotWYSIWYGFieldComponent>; | ||
| const createComponent = createComponentFactory({ | ||
| component: DotWYSIWYGFieldComponent, | ||
| imports: [EditorModule, FormsModule, ReactiveFormsModule], | ||
| declarations: [MockComponent(EditorComponent)], | ||
| componentViewProviders: [ | ||
| { | ||
| provide: ControlContainer, | ||
| useValue: createFormGroupDirectiveMock() | ||
| } | ||
| ], | ||
| providers: [FormGroupDirective] | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| spectator = createComponent({ | ||
| props: { | ||
| field: WYSIWYG_MOCK | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| it('should instance WYSIWYG editor and set the correct plugins and toolbar items', () => { | ||
| const editor = spectator.query(EditorComponent); | ||
| expect(editor).toBeTruthy(); | ||
| expect(editor.plugins).toEqual(ALL_PLUGINS); | ||
| expect(editor.toolbar).toEqual(ALL_TOOLBAR_ITEMS); | ||
| }); | ||
| }); |
32 changes: 32 additions & 0 deletions
32
core-web/libs/edit-content/src/lib/fields/dot-wysiwyg-field/dot-wysiwyg-field.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; | ||
|
|
||
| import { ChangeDetectionStrategy, Component, Input, inject, signal } from '@angular/core'; | ||
| import { ControlContainer, FormsModule, ReactiveFormsModule } from '@angular/forms'; | ||
|
|
||
| import { DotCMSContentTypeField } from '@dotcms/dotcms-models'; | ||
|
|
||
| @Component({ | ||
| selector: 'dot-wysiwyg-field', | ||
| standalone: true, | ||
| imports: [EditorModule, FormsModule, ReactiveFormsModule], | ||
| templateUrl: './dot-wysiwyg-field.component.html', | ||
| styleUrl: './dot-wysiwyg-field.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }], | ||
| viewProviders: [ | ||
| { | ||
| provide: ControlContainer, | ||
| useFactory: () => inject(ControlContainer, { skipSelf: true }) | ||
| } | ||
| ] | ||
| }) | ||
| export class DotWYSIWYGFieldComponent { | ||
| @Input() field!: DotCMSContentTypeField; | ||
|
|
||
| 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' | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters