Skip to content

Commit c86f47b

Browse files
SambhuPegatumms2021389
SambhuPega
and
tumms2021389
authored
Richtext theme support (#402)
* Theme update for the rich text component * Updated without using the shortcuts * format issues fixed * format issues fixed * PR comments resolved * Refactor rich text editor configuration and improve change detection logic --------- Co-authored-by: tumms2021389 <[email protected]> Co-authored-by: Siva Rama Krishna <[email protected]>
1 parent 7acab3b commit c86f47b

File tree

5 files changed

+210
-17
lines changed

5 files changed

+210
-17
lines changed

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/rich-text-editor/rich-text-editor.component.html‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,19 @@
11
<div [attr.data-test-id]="testId">
22
<label [ngClass]="{ 'label-required': required === true }" class="rich-text-label">{{ label }}</label>
3+
34
<div class="rich-text-editor" *ngIf="!readonly">
45
<editor
56
[formControl]="richText"
67
[attr.disabled]="disabled"
78
[initialValue]="value"
8-
[init]="{
9-
base_url: '/tinymce',
10-
suffix: '.min',
11-
menubar: false,
12-
placeholder,
13-
statusbar: false,
14-
min_height: 130,
15-
plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
16-
autoresize_bottom_margin: 0,
17-
toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
18-
toolbar_location: 'bottom',
19-
content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
20-
branding: false,
21-
paste_data_images: true,
22-
file_picker_types: 'image',
23-
file_picker_callback: filePickerCallback
24-
}"
9+
[init]="editorConfig"
2510
(onBlur)="blur()"
2611
(onChange)="change($event)"
2712
></editor>
13+
2814
<p *ngIf="richText.invalid" [ngClass]="'text-editor-error'">{{ info }}</p>
2915
</div>
16+
3017
<div *ngIf="readonly">
3118
<div class="readonly-richtext-editor" style="margin: 10px 5px" [innerHTML]="value || '--'"></div>
3219
</div>

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/rich-text-editor/rich-text-editor.component.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export class RichTextEditorComponent implements OnChanges {
2727
@Output() onChange: EventEmitter<any> = new EventEmitter();
2828

2929
richText = new FormControl();
30+
editorConfig: any = {};
3031

3132
ngOnChanges() {
3233
if (this.required) {
@@ -42,6 +43,35 @@ export class RichTextEditorComponent implements OnChanges {
4243
if (this.value) {
4344
this.richText.setValue(this.value);
4445
}
46+
47+
const themeElement = document.querySelector('.dark') || document.body;
48+
let textColor = getComputedStyle(themeElement).getPropertyValue('--mat-sys-on-surface').trim();
49+
if (!textColor) textColor = '#000000';
50+
51+
this.editorConfig = {
52+
base_url: '/tinymce',
53+
suffix: '.min',
54+
menubar: false,
55+
placeholder: this.placeholder,
56+
statusbar: false,
57+
min_height: 130,
58+
plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
59+
autoresize_bottom_margin: 0,
60+
toolbar: this.disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
61+
toolbar_location: 'bottom',
62+
content_style: `
63+
body {
64+
font-family: Helvetica, Arial, sans-serif;
65+
font-size: 14px;
66+
color: ${textColor} !important;
67+
background: transparent !important;
68+
}
69+
`,
70+
branding: false,
71+
paste_data_images: true,
72+
file_picker_types: 'image',
73+
file_picker_callback: this.filePickerCallback
74+
};
4575
}
4676

4777
filePickerCallback = cb => {

‎packages/angular-sdk-components/src/lib/_components/field/rich-text/rich-text.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div *ngIf="displayMode$; else noDisplayMode">
22
<component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$, isHtml$: true }"></component-mapper>
33
</div>
4+
45
<ng-template #noDisplayMode>
56
<div *ngIf="!bReadonly$; else noEdit">
67
<div *ngIf="bVisible$">
@@ -13,6 +14,7 @@
1314
</div>
1415
</div>
1516
</ng-template>
17+
1618
<ng-template #noEdit>
1719
<div *ngIf="bVisible$ !== false">
1820
<component-mapper name="RichTextEditor" [props]="{ label: label$, value: value$, readonly: true, testId }" [parent]="this"></component-mapper>

‎packages/angular-sdk-components/src/lib/_components/field/rich-text/rich-text.component.scss‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
@use '@angular/material' as mat;
2+
3+
:host {
4+
display: block;
5+
background-color: var(--mat-sys-surface, #fff);
6+
color: var(--mat-sys-on-surface, #000);
7+
}
8+
9+
::ng-deep {
10+
.tox-tinymce {
11+
border: 1px solid var(--mat-sys-outline, #ccc) !important;
12+
border-radius: 4px !important;
13+
}
14+
15+
.tox-edit-area__iframe {
16+
background-color: transparent !important;
17+
}
18+
19+
.tox .tox-toolbar,
20+
.tox .tox-toolbar__primary,
21+
.tox .tox-editor-header {
22+
background-color: var(--mat-sys-surface-container-high, #f0f0f0) !important;
23+
border-bottom: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
24+
}
25+
26+
.tox .tox-tbtn {
27+
color: var(--mat-sys-on-surface-variant, #555) !important;
28+
background: transparent !important;
29+
}
30+
31+
.tox .tox-tbtn svg {
32+
fill: var(--mat-sys-on-surface-variant, #555) !important;
33+
}
34+
35+
.tox .tox-tbtn:hover {
36+
background: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05)) !important;
37+
}
38+
39+
.tox .tox-tbtn--enabled,
40+
.tox .tox-tbtn--enabled:hover {
41+
background: var(--mat-sys-secondary-container, #e8def8) !important;
42+
color: var(--mat-sys-on-secondary-container, #1d192b) !important;
43+
}
44+
45+
.tox .tox-tbtn--enabled svg {
46+
fill: var(--mat-sys-on-secondary-container, #1d192b) !important;
47+
}
48+
49+
.tox .tox-tbtn--select {
50+
background-color: transparent !important;
51+
margin: 2px 0;
52+
}
53+
54+
.tox .tox-tbtn__select-label {
55+
color: var(--mat-sys-on-surface, #000) !important;
56+
}
57+
58+
.tox .tox-tbtn__select-chevron svg {
59+
fill: var(--mat-sys-on-surface-variant, #555) !important;
60+
}
61+
62+
.tox .tox-tbtn--select:hover {
63+
background-color: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05)) !important;
64+
}
65+
66+
.tox .tox-statusbar {
67+
background-color: var(--mat-sys-surface-container-high, #f0f0f0) !important;
68+
border-top: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
69+
color: var(--mat-sys-on-surface-variant, #555) !important;
70+
}
71+
72+
.tox .tox-dialog {
73+
background-color: var(--mat-sys-surface-container, #fff) !important;
74+
color: var(--mat-sys-on-surface, #000) !important;
75+
border: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
76+
box-shadow: 0 4px 12px var(--mat-sys-shadow, rgba(0, 0, 0, 0.2)) !important;
77+
}
78+
79+
.tox .tox-dialog__header {
80+
background-color: var(--mat-sys-surface-container, #fff) !important;
81+
color: var(--mat-sys-on-surface, #000) !important;
82+
border-bottom: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
83+
}
84+
85+
.tox .tox-dialog__footer {
86+
background-color: var(--mat-sys-surface-container, #fff) !important;
87+
border-top: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
88+
}
89+
90+
.tox .tox-dialog-wrap__backdrop {
91+
background-color: var(--mat-sys-scrim, rgba(0, 0, 0, 0.5)) !important;
92+
opacity: 0.6;
93+
}
94+
95+
.tox .tox-dialog__body input,
96+
.tox .tox-dialog__body textarea,
97+
.tox .tox-dialog__body select {
98+
background-color: transparent !important;
99+
color: var(--mat-sys-on-surface, #000) !important;
100+
border: 1px solid var(--mat-sys-outline, #ccc) !important;
101+
border-radius: 4px !important;
102+
}
103+
104+
.tox .tox-label {
105+
color: var(--mat-sys-on-surface-variant, #555) !important;
106+
}
107+
108+
.tox .tox-button--icon--hover:hover {
109+
background-color: var(--mat-sys-hover-state-layer-opacity) !important;
110+
color: var(--mat-sys-on-surface) !important;
111+
}
112+
113+
.tox .tox-dialog__footer .tox-button {
114+
background-color: var(--mat-sys-primary, #6200ee) !important;
115+
color: var(--mat-sys-on-primary, #fff) !important;
116+
border: none !important;
117+
}
118+
119+
.tox .tox-dialog__footer .tox-button--secondary {
120+
background-color: transparent !important;
121+
color: var(--mat-sys-primary, #6200ee) !important;
122+
border: 1px solid var(--mat-sys-outline, #ccc) !important;
123+
}
124+
}
125+
126+
::ng-deep {
127+
.tox .tox-menu {
128+
background-color: var(--mat-sys-surface-container, #2e334f) !important;
129+
border: 1px solid var(--mat-sys-outline-variant, #404562) !important;
130+
box-shadow: 0 4px 10px var(--mat-sys-shadow, rgba(0, 0, 0, 0.3)) !important;
131+
}
132+
133+
.tox .tox-collection__item {
134+
color: var(--mat-sys-on-surface, #dde1ff) !important;
135+
}
136+
137+
.tox .tox-collection__item--active {
138+
background-color: var(--mat-sys-secondary-container, #810081) !important;
139+
color: var(--mat-sys-on-secondary-container, #ffd7f5) !important;
140+
}
141+
142+
.tox .tox-collection__item-icon svg {
143+
fill: var(--mat-sys-on-surface, #dde1ff) !important;
144+
}
145+
146+
.tox .tox-collection__item-accessory {
147+
color: var(--mat-sys-on-surface-variant, #c0c5e7) !important;
148+
}
149+
150+
.tox .tox-swatches__picker-btn {
151+
border-color: var(--mat-sys-outline-variant) !important;
152+
}
153+
154+
.tox .tox-listbox {
155+
background-color: transparent !important;
156+
border: 1px solid var(--mat-sys-outline, #8a8faf) !important;
157+
color: var(--mat-sys-on-surface, #dde1ff) !important;
158+
}
159+
160+
.tox .tox-listbox__select-chevron svg {
161+
fill: var(--mat-sys-on-surface-variant, #c0c5e7) !important;
162+
}
163+
164+
.tox .tox-listbox__select-label {
165+
color: var(--mat-sys-on-surface, #dde1ff) !important;
166+
}
167+
168+
.tox .tox-listboxfield .tox-listbox--select {
169+
background-color: transparent !important;
170+
color: var(--mat-sys-on-surface, #dde1ff) !important;
171+
}
172+
}

‎packages/angular-sdk-components/src/lib/_components/field/rich-text/rich-text.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export class RichTextComponent extends FieldBase {
4747
fieldOnChange(editorValue: any) {
4848
const oldVal = this.value$ ?? '';
4949
const newVal = editorValue?.editor?.getBody()?.innerHTML ?? '';
50+
5051
const isValueChanged = newVal.toString() !== oldVal.toString();
5152

5253
if (isValueChanged || this.status === 'error') {
@@ -61,6 +62,7 @@ export class RichTextComponent extends FieldBase {
6162

6263
fieldOnBlur(editorValue: any) {
6364
const oldVal = this.value$ ?? '';
65+
6466
const isValueChanged = editorValue.toString() !== oldVal.toString();
6567

6668
if (isValueChanged) {

0 commit comments

Comments
 (0)