Skip to content

Commit 5c87b19

Browse files
sissbrueckersissbruecker
authored
feat: support partial i18n in rich text editor (#8838)
1 parent 86f9e2a commit 5c87b19

File tree

5 files changed

+148
-127
lines changed

5 files changed

+148
-127
lines changed

‎packages/rich-text-editor/src/vaadin-lit-rich-text-editor.js

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -56,33 +56,33 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
5656
part="toolbar-button toolbar-button-undo"
5757
@click="${this._undo}"
5858
></button>
59-
<vaadin-tooltip for="btn-undo" .text="${this.i18n.undo}"></vaadin-tooltip>
59+
<vaadin-tooltip for="btn-undo" .text="${this.__effectiveI18n.undo}"></vaadin-tooltip>
6060
6161
<button
6262
id="btn-redo"
6363
type="button"
6464
part="toolbar-button toolbar-button-redo"
6565
@click="${this._redo}"
6666
></button>
67-
<vaadin-tooltip for="btn-redo" .text="${this.i18n.redo}"></vaadin-tooltip>
67+
<vaadin-tooltip for="btn-redo" .text="${this.__effectiveI18n.redo}"></vaadin-tooltip>
6868
</span>
6969
7070
<span part="toolbar-group toolbar-group-emphasis">
7171
<!-- Bold -->
7272
<button id="btn-bold" class="ql-bold" part="toolbar-button toolbar-button-bold"></button>
73-
<vaadin-tooltip for="btn-bold" .text="${this.i18n.bold}"></vaadin-tooltip>
73+
<vaadin-tooltip for="btn-bold" .text="${this.__effectiveI18n.bold}"></vaadin-tooltip>
7474
7575
<!-- Italic -->
7676
<button id="btn-italic" class="ql-italic" part="toolbar-button toolbar-button-italic"></button>
77-
<vaadin-tooltip for="btn-italic" .text="${this.i18n.italic}"></vaadin-tooltip>
77+
<vaadin-tooltip for="btn-italic" .text="${this.__effectiveI18n.italic}"></vaadin-tooltip>
7878
7979
<!-- Underline -->
8080
<button id="btn-underline" class="ql-underline" part="toolbar-button toolbar-button-underline"></button>
81-
<vaadin-tooltip for="btn-underline" .text="${this.i18n.underline}"></vaadin-tooltip>
81+
<vaadin-tooltip for="btn-underline" .text="${this.__effectiveI18n.underline}"></vaadin-tooltip>
8282
8383
<!-- Strike -->
8484
<button id="btn-strike" class="ql-strike" part="toolbar-button toolbar-button-strike"></button>
85-
<vaadin-tooltip for="btn-strike" .text="${this.i18n.strike}"></vaadin-tooltip>
85+
<vaadin-tooltip for="btn-strike" .text="${this.__effectiveI18n.strike}"></vaadin-tooltip>
8686
</span>
8787
8888
<span part="toolbar-group toolbar-group-style">
@@ -93,15 +93,15 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
9393
part="toolbar-button toolbar-button-color"
9494
@click="${this.__onColorClick}"
9595
></button>
96-
<vaadin-tooltip for="btn-color" .text="${this.i18n.color}"></vaadin-tooltip>
96+
<vaadin-tooltip for="btn-color" .text="${this.__effectiveI18n.color}"></vaadin-tooltip>
9797
<!-- Background -->
9898
<button
9999
id="btn-background"
100100
type="button"
101101
part="toolbar-button toolbar-button-background"
102102
@click="${this.__onBackgroundClick}"
103103
></button>
104-
<vaadin-tooltip for="btn-background" .text="${this.i18n.background}"></vaadin-tooltip>
104+
<vaadin-tooltip for="btn-background" .text="${this.__effectiveI18n.background}"></vaadin-tooltip>
105105
</span>
106106
107107
<span part="toolbar-group toolbar-group-heading">
@@ -113,23 +113,23 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
113113
value="1"
114114
part="toolbar-button toolbar-button-h1"
115115
></button>
116-
<vaadin-tooltip for="btn-h1" .text="${this.i18n.h1}"></vaadin-tooltip>
116+
<vaadin-tooltip for="btn-h1" .text="${this.__effectiveI18n.h1}"></vaadin-tooltip>
117117
<button
118118
id="btn-h2"
119119
type="button"
120120
class="ql-header"
121121
value="2"
122122
part="toolbar-button toolbar-button-h2"
123123
></button>
124-
<vaadin-tooltip for="btn-h2" .text="${this.i18n.h2}"></vaadin-tooltip>
124+
<vaadin-tooltip for="btn-h2" .text="${this.__effectiveI18n.h2}"></vaadin-tooltip>
125125
<button
126126
id="btn-h3"
127127
type="button"
128128
class="ql-header"
129129
value="3"
130130
part="toolbar-button toolbar-button-h3"
131131
></button>
132-
<vaadin-tooltip for="btn-h3" .text="${this.i18n.h3}"></vaadin-tooltip>
132+
<vaadin-tooltip for="btn-h3" .text="${this.__effectiveI18n.h3}"></vaadin-tooltip>
133133
</span>
134134
135135
<span part="toolbar-group toolbar-group-glyph-transformation">
@@ -140,14 +140,14 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
140140
value="sub"
141141
part="toolbar-button toolbar-button-subscript"
142142
></button>
143-
<vaadin-tooltip for="btn-subscript" .text="${this.i18n.subscript}"></vaadin-tooltip>
143+
<vaadin-tooltip for="btn-subscript" .text="${this.__effectiveI18n.subscript}"></vaadin-tooltip>
144144
<button
145145
id="btn-superscript"
146146
class="ql-script"
147147
value="super"
148148
part="toolbar-button toolbar-button-superscript"
149149
></button>
150-
<vaadin-tooltip for="btn-superscript" text="${this.i18n.superscript}"></vaadin-tooltip>
150+
<vaadin-tooltip for="btn-superscript" text="${this.__effectiveI18n.superscript}"></vaadin-tooltip>
151151
</span>
152152
153153
<span part="toolbar-group toolbar-group-list">
@@ -159,15 +159,15 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
159159
value="ordered"
160160
part="toolbar-button toolbar-button-list-ordered"
161161
></button>
162-
<vaadin-tooltip for="btn-ol" text="${this.i18n.listOrdered}"></vaadin-tooltip>
162+
<vaadin-tooltip for="btn-ol" text="${this.__effectiveI18n.listOrdered}"></vaadin-tooltip>
163163
<button
164164
id="btn-ul"
165165
type="button"
166166
class="ql-list"
167167
value="bullet"
168168
part="toolbar-button toolbar-button-list-bullet"
169169
></button>
170-
<vaadin-tooltip for="btn-ul" text="${this.i18n.listBullet}"></vaadin-tooltip>
170+
<vaadin-tooltip for="btn-ul" text="${this.__effectiveI18n.listBullet}"></vaadin-tooltip>
171171
</span>
172172
173173
<span part="toolbar-group toolbar-group-alignment">
@@ -179,23 +179,23 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
179179
value=""
180180
part="toolbar-button toolbar-button-align-left"
181181
></button>
182-
<vaadin-tooltip for="btn-left" .text="${this.i18n.alignLeft}"></vaadin-tooltip>
182+
<vaadin-tooltip for="btn-left" .text="${this.__effectiveI18n.alignLeft}"></vaadin-tooltip>
183183
<button
184184
id="btn-center"
185185
type="button"
186186
class="ql-align"
187187
value="center"
188188
part="toolbar-button toolbar-button-align-center"
189189
></button>
190-
<vaadin-tooltip for="btn-center" .text="${this.i18n.alignCenter}"></vaadin-tooltip>
190+
<vaadin-tooltip for="btn-center" .text="${this.__effectiveI18n.alignCenter}"></vaadin-tooltip>
191191
<button
192192
id="btn-right"
193193
type="button"
194194
class="ql-align"
195195
value="right"
196196
part="toolbar-button toolbar-button-align-right"
197197
></button>
198-
<vaadin-tooltip for="btn-right" .text="${this.i18n.alignRight}"></vaadin-tooltip>
198+
<vaadin-tooltip for="btn-right" .text="${this.__effectiveI18n.alignRight}"></vaadin-tooltip>
199199
</span>
200200
201201
<span part="toolbar-group toolbar-group-rich-text">
@@ -207,15 +207,15 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
207207
@touchend="${this._onImageTouchEnd}"
208208
@click="${this._onImageClick}"
209209
></button>
210-
<vaadin-tooltip for="btn-image" .text="${this.i18n.image}"></vaadin-tooltip>
210+
<vaadin-tooltip for="btn-image" .text="${this.__effectiveI18n.image}"></vaadin-tooltip>
211211
<!-- Link -->
212212
<button
213213
id="btn-link"
214214
type="button"
215215
part="toolbar-button toolbar-button-link"
216216
@click="${this._onLinkClick}"
217217
></button>
218-
<vaadin-tooltip for="btn-link" .text="${this.i18n.link}"></vaadin-tooltip>
218+
<vaadin-tooltip for="btn-link" .text="${this.__effectiveI18n.link}"></vaadin-tooltip>
219219
</span>
220220
221221
<span part="toolbar-group toolbar-group-block">
@@ -226,21 +226,21 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
226226
class="ql-blockquote"
227227
part="toolbar-button toolbar-button-blockquote"
228228
></button>
229-
<vaadin-tooltip for="btn-blockquote" .text="${this.i18n.blockquote}"></vaadin-tooltip>
229+
<vaadin-tooltip for="btn-blockquote" .text="${this.__effectiveI18n.blockquote}"></vaadin-tooltip>
230230
<!-- Code block -->
231231
<button
232232
id="btn-code"
233233
type="button"
234234
class="ql-code-block"
235235
part="toolbar-button toolbar-button-code-block"
236236
></button>
237-
<vaadin-tooltip for="btn-code" .text="${this.i18n.codeBlock}"></vaadin-tooltip>
237+
<vaadin-tooltip for="btn-code" .text="${this.__effectiveI18n.codeBlock}"></vaadin-tooltip>
238238
</span>
239239
240240
<span part="toolbar-group toolbar-group-format">
241241
<!-- Clean -->
242242
<button id="btn-clean" type="button" class="ql-clean" part="toolbar-button toolbar-button-clean"></button>
243-
<vaadin-tooltip for="btn-clean" .text="${this.i18n.clean}"></vaadin-tooltip>
243+
<vaadin-tooltip for="btn-clean" .text="${this.__effectiveI18n.clean}"></vaadin-tooltip>
244244
</span>
245245
246246
<input
@@ -259,7 +259,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
259259
<vaadin-confirm-dialog
260260
id="linkDialog"
261261
.opened="${this._linkEditing}"
262-
.header="${this.i18n.linkDialogTitle}"
262+
.header="${this.__effectiveI18n.linkDialogTitle}"
263263
@opened-changed="${this._onLinkEditingChanged}"
264264
>
265265
<vaadin-text-field
@@ -270,7 +270,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
270270
@value-changed="${this._onLinkUrlChanged}"
271271
></vaadin-text-field>
272272
<vaadin-button id="confirmLink" slot="confirm-button" theme="primary" @click="${this._onLinkEditConfirm}">
273-
${this.i18n.ok}
273+
${this.__effectiveI18n.ok}
274274
</vaadin-button>
275275
<vaadin-button
276276
id="removeLink"
@@ -279,10 +279,10 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
279279
@click="${this._onLinkEditRemove}"
280280
?hidden="${!this._linkRange}"
281281
>
282-
${this.i18n.remove}
282+
${this.__effectiveI18n.remove}
283283
</vaadin-button>
284284
<vaadin-button id="cancelLink" slot="cancel-button" @click="${this._onLinkEditCancel}">
285-
${this.i18n.cancel}
285+
${this.__effectiveI18n.cancel}
286286
</vaadin-button>
287287
</vaadin-confirm-dialog>
288288

‎packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.d.ts

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,35 +9,36 @@
99
* license.
1010
*/
1111
import type { Constructor } from '@open-wc/dedupe-mixin';
12+
import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
1213

1314
export interface RichTextEditorI18n {
14-
undo: string;
15-
redo: string;
16-
bold: string;
17-
italic: string;
18-
underline: string;
19-
strike: string;
20-
color: string;
21-
background: string;
22-
h1: string;
23-
h2: string;
24-
h3: string;
25-
subscript: string;
26-
superscript: string;
27-
listOrdered: string;
28-
listBullet: string;
29-
alignLeft: string;
30-
alignCenter: string;
31-
alignRight: string;
32-
image: string;
33-
link: string;
34-
blockquote: string;
35-
codeBlock: string;
36-
clean: string;
37-
linkDialogTitle: string;
38-
ok: string;
39-
cancel: string;
40-
remove: string;
15+
undo?: string;
16+
redo?: string;
17+
bold?: string;
18+
italic?: string;
19+
underline?: string;
20+
strike?: string;
21+
color?: string;
22+
background?: string;
23+
h1?: string;
24+
h2?: string;
25+
h3?: string;
26+
subscript?: string;
27+
superscript?: string;
28+
listOrdered?: string;
29+
listBullet?: string;
30+
alignLeft?: string;
31+
alignCenter?: string;
32+
alignRight?: string;
33+
image?: string;
34+
link?: string;
35+
blockquote?: string;
36+
codeBlock?: string;
37+
clean?: string;
38+
linkDialogTitle?: string;
39+
ok?: string;
40+
cancel?: string;
41+
remove?: string;
4142
}
4243

4344
/**
@@ -58,7 +59,7 @@ export interface RichTextEditorCustomEventMap {
5859

5960
export declare function RichTextEditorMixin<T extends Constructor<HTMLElement>>(
6061
base: T,
61-
): Constructor<RichTextEditorMixinClass> & T;
62+
): Constructor<RichTextEditorMixinClass> & I18nMixinClass<RichTextEditorI18n> & T;
6263

6364
export declare class RichTextEditorMixinClass {
6465
/**
@@ -93,8 +94,12 @@ export declare class RichTextEditorMixinClass {
9394
readonly: boolean;
9495

9596
/**
96-
* An object used to localize this component. The properties are used
97-
* e.g. as the tooltips for the editor toolbar buttons.
97+
* The object used to localize this component. To change the default
98+
* localization, replace this with an object that provides all properties, or
99+
* just the individual properties you want to change.
100+
*
101+
* The properties are used e.g. as the tooltips for the editor toolbar
102+
* buttons.
98103
*/
99104
i18n: RichTextEditorI18n;
100105

0 commit comments

Comments
 (0)