@vaadin/rich-text-editor 24.8.0-alpha3 → 24.8.0-alpha5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +14 -14
  2. package/src/vaadin-lit-rich-text-editor.js +27 -27
  3. package/src/vaadin-rich-text-editor-mixin.d.ts +35 -30
  4. package/src/vaadin-rich-text-editor-mixin.js +50 -43
  5. package/src/vaadin-rich-text-editor.js +27 -27
  6. package/web-types.json +10 -10
  7. package/web-types.lit.json +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/rich-text-editor",
3
- "version": "24.8.0-alpha3",
3
+ "version": "24.8.0-alpha5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -41,21 +41,21 @@
41
41
  "dependencies": {
42
42
  "@open-wc/dedupe-mixin": "^1.3.0",
43
43
  "@polymer/polymer": "^3.0.0",
44
- "@vaadin/button": "24.8.0-alpha3",
45
- "@vaadin/component-base": "24.8.0-alpha3",
46
- "@vaadin/confirm-dialog": "24.8.0-alpha3",
47
- "@vaadin/overlay": "24.8.0-alpha3",
48
- "@vaadin/text-field": "24.8.0-alpha3",
49
- "@vaadin/tooltip": "24.8.0-alpha3",
50
- "@vaadin/vaadin-lumo-styles": "24.8.0-alpha3",
51
- "@vaadin/vaadin-material-styles": "24.8.0-alpha3",
52
- "@vaadin/vaadin-themable-mixin": "24.8.0-alpha3",
44
+ "@vaadin/button": "24.8.0-alpha5",
45
+ "@vaadin/component-base": "24.8.0-alpha5",
46
+ "@vaadin/confirm-dialog": "24.8.0-alpha5",
47
+ "@vaadin/overlay": "24.8.0-alpha5",
48
+ "@vaadin/text-field": "24.8.0-alpha5",
49
+ "@vaadin/tooltip": "24.8.0-alpha5",
50
+ "@vaadin/vaadin-lumo-styles": "24.8.0-alpha5",
51
+ "@vaadin/vaadin-material-styles": "24.8.0-alpha5",
52
+ "@vaadin/vaadin-themable-mixin": "24.8.0-alpha5",
53
53
  "lit": "^3.0.0"
54
54
  },
55
55
  "devDependencies": {
56
- "@vaadin/a11y-base": "24.8.0-alpha3",
57
- "@vaadin/chai-plugins": "24.8.0-alpha3",
58
- "@vaadin/test-runner-commands": "24.8.0-alpha3",
56
+ "@vaadin/a11y-base": "24.8.0-alpha5",
57
+ "@vaadin/chai-plugins": "24.8.0-alpha5",
58
+ "@vaadin/test-runner-commands": "24.8.0-alpha5",
59
59
  "@vaadin/testing-helpers": "^1.1.0",
60
60
  "gulp": "^4.0.2",
61
61
  "gulp-cli": "^2.3.0",
@@ -67,5 +67,5 @@
67
67
  "web-types.json",
68
68
  "web-types.lit.json"
69
69
  ],
70
- "gitHead": "8c49e2337a1905ae68d0d7aee2e672500ea72343"
70
+ "gitHead": "3bb64b9ad9b00ac3adb94eb1bedd81b0f4ae574e"
71
71
  }
package/src/vaadin-lit-rich-text-editor.js CHANGED
@@ -56,7 +56,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
56
56
  part="toolbar-button toolbar-button-undo"
57
57
  @click="${this._undo}"
58
58
  ></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>
60
60
 
61
61
  <button
62
62
  id="btn-redo"
@@ -64,25 +64,25 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
64
64
  part="toolbar-button toolbar-button-redo"
65
65
  @click="${this._redo}"
66
66
  ></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>
68
68
  </span>
69
69
 
70
70
  <span part="toolbar-group toolbar-group-emphasis">
71
71
  <!-- Bold -->
72
72
  <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>
74
74
 
75
75
  <!-- Italic -->
76
76
  <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>
78
78
 
79
79
  <!-- Underline -->
80
80
  <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>
82
82
 
83
83
  <!-- Strike -->
84
84
  <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>
86
86
  </span>
87
87
 
88
88
  <span part="toolbar-group toolbar-group-style">
@@ -93,7 +93,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
93
93
  part="toolbar-button toolbar-button-color"
94
94
  @click="${this.__onColorClick}"
95
95
  ></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>
97
97
  <!-- Background -->
98
98
  <button
99
99
  id="btn-background"
@@ -101,7 +101,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
101
101
  part="toolbar-button toolbar-button-background"
102
102
  @click="${this.__onBackgroundClick}"
103
103
  ></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>
105
105
  </span>
106
106
 
107
107
  <span part="toolbar-group toolbar-group-heading">
@@ -113,7 +113,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
113
113
  value="1"
114
114
  part="toolbar-button toolbar-button-h1"
115
115
  ></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>
117
117
  <button
118
118
  id="btn-h2"
119
119
  type="button"
@@ -121,7 +121,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
121
121
  value="2"
122
122
  part="toolbar-button toolbar-button-h2"
123
123
  ></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>
125
125
  <button
126
126
  id="btn-h3"
127
127
  type="button"
@@ -129,7 +129,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
129
129
  value="3"
130
130
  part="toolbar-button toolbar-button-h3"
131
131
  ></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>
133
133
  </span>
134
134
 
135
135
  <span part="toolbar-group toolbar-group-glyph-transformation">
@@ -140,14 +140,14 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
140
140
  value="sub"
141
141
  part="toolbar-button toolbar-button-subscript"
142
142
  ></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>
144
144
  <button
145
145
  id="btn-superscript"
146
146
  class="ql-script"
147
147
  value="super"
148
148
  part="toolbar-button toolbar-button-superscript"
149
149
  ></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>
151
151
  </span>
152
152
 
153
153
  <span part="toolbar-group toolbar-group-list">
@@ -159,7 +159,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
159
159
  value="ordered"
160
160
  part="toolbar-button toolbar-button-list-ordered"
161
161
  ></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>
163
163
  <button
164
164
  id="btn-ul"
165
165
  type="button"
@@ -167,7 +167,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
167
167
  value="bullet"
168
168
  part="toolbar-button toolbar-button-list-bullet"
169
169
  ></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>
171
171
  </span>
172
172
 
173
173
  <span part="toolbar-group toolbar-group-alignment">
@@ -179,7 +179,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
179
179
  value=""
180
180
  part="toolbar-button toolbar-button-align-left"
181
181
  ></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>
183
183
  <button
184
184
  id="btn-center"
185
185
  type="button"
@@ -187,7 +187,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
187
187
  value="center"
188
188
  part="toolbar-button toolbar-button-align-center"
189
189
  ></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>
191
191
  <button
192
192
  id="btn-right"
193
193
  type="button"
@@ -195,7 +195,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
195
195
  value="right"
196
196
  part="toolbar-button toolbar-button-align-right"
197
197
  ></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>
199
199
  </span>
200
200
 
201
201
  <span part="toolbar-group toolbar-group-rich-text">
@@ -207,7 +207,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
207
207
  @touchend="${this._onImageTouchEnd}"
208
208
  @click="${this._onImageClick}"
209
209
  ></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>
211
211
  <!-- Link -->
212
212
  <button
213
213
  id="btn-link"
@@ -215,7 +215,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
215
215
  part="toolbar-button toolbar-button-link"
216
216
  @click="${this._onLinkClick}"
217
217
  ></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>
219
219
  </span>
220
220
 
221
221
  <span part="toolbar-group toolbar-group-block">
@@ -226,7 +226,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
226
226
  class="ql-blockquote"
227
227
  part="toolbar-button toolbar-button-blockquote"
228
228
  ></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>
230
230
  <!-- Code block -->
231
231
  <button
232
232
  id="btn-code"
@@ -234,13 +234,13 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
234
234
  class="ql-code-block"
235
235
  part="toolbar-button toolbar-button-code-block"
236
236
  ></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>
238
238
  </span>
239
239
 
240
240
  <span part="toolbar-group toolbar-group-format">
241
241
  <!-- Clean -->
242
242
  <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>
244
244
  </span>
245
245
 
246
246
  <input
@@ -259,7 +259,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
259
259
  <vaadin-confirm-dialog
260
260
  id="linkDialog"
261
261
  .opened="${this._linkEditing}"
262
- .header="${this.i18n.linkDialogTitle}"
262
+ .header="${this.__effectiveI18n.linkDialogTitle}"
263
263
  @opened-changed="${this._onLinkEditingChanged}"
264
264
  >
265
265
  <vaadin-text-field
@@ -270,7 +270,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
270
270
  @value-changed="${this._onLinkUrlChanged}"
271
271
  ></vaadin-text-field>
272
272
  <vaadin-button id="confirmLink" slot="confirm-button" theme="primary" @click="${this._onLinkEditConfirm}">
273
- ${this.i18n.ok}
273
+ ${this.__effectiveI18n.ok}
274
274
  </vaadin-button>
275
275
  <vaadin-button
276
276
  id="removeLink"
@@ -279,10 +279,10 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
279
279
  @click="${this._onLinkEditRemove}"
280
280
  ?hidden="${!this._linkRange}"
281
281
  >
282
- ${this.i18n.remove}
282
+ ${this.__effectiveI18n.remove}
283
283
  </vaadin-button>
284
284
  <vaadin-button id="cancelLink" slot="cancel-button" @click="${this._onLinkEditCancel}">
285
- ${this.i18n.cancel}
285
+ ${this.__effectiveI18n.cancel}
286
286
  </vaadin-button>
287
287
  </vaadin-confirm-dialog>
288
288
 
package/src/vaadin-rich-text-editor-mixin.d.ts CHANGED
@@ -9,35 +9,36 @@
9
9
  * license.
10
10
  */
11
11
  import type { Constructor } from '@open-wc/dedupe-mixin';
12
+ import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
12
13
 
13
14
  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;
41
42
  }
42
43
 
43
44
  /**
@@ -58,7 +59,7 @@ export interface RichTextEditorCustomEventMap {
58
59
 
59
60
  export declare function RichTextEditorMixin<T extends Constructor<HTMLElement>>(
60
61
  base: T,
61
- ): Constructor<RichTextEditorMixinClass> & T;
62
+ ): Constructor<RichTextEditorMixinClass> & I18nMixinClass<RichTextEditorI18n> & T;
62
63
 
63
64
  export declare class RichTextEditorMixinClass {
64
65
  /**
@@ -93,8 +94,12 @@ export declare class RichTextEditorMixinClass {
93
94
  readonly: boolean;
94
95
 
95
96
  /**
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.
98
103
  */
99
104
  i18n: RichTextEditorI18n;
100
105
 
package/src/vaadin-rich-text-editor-mixin.js CHANGED
@@ -12,6 +12,7 @@ import '../vendor/vaadin-quill.js';
12
12
  import { timeOut } from '@vaadin/component-base/src/async.js';
13
13
  import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
14
14
  import { Debouncer } from '@vaadin/component-base/src/debounce.js';
15
+ import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
15
16
 
16
17
  const Quill = window.Quill;
17
18
 
@@ -71,11 +72,41 @@ const STATE = {
71
72
 
72
73
  const TAB_KEY = 9;
73
74
 
75
+ const DEFAULT_I18N = {
76
+ undo: 'undo',
77
+ redo: 'redo',
78
+ bold: 'bold',
79
+ italic: 'italic',
80
+ underline: 'underline',
81
+ strike: 'strike',
82
+ color: 'color',
83
+ background: 'background',
84
+ h1: 'h1',
85
+ h2: 'h2',
86
+ h3: 'h3',
87
+ subscript: 'subscript',
88
+ superscript: 'superscript',
89
+ listOrdered: 'list ordered',
90
+ listBullet: 'list bullet',
91
+ alignLeft: 'align left',
92
+ alignCenter: 'align center',
93
+ alignRight: 'align right',
94
+ image: 'image',
95
+ link: 'link',
96
+ blockquote: 'blockquote',
97
+ codeBlock: 'code block',
98
+ clean: 'clean',
99
+ linkDialogTitle: 'Link address',
100
+ ok: 'OK',
101
+ cancel: 'Cancel',
102
+ remove: 'Remove',
103
+ };
104
+
74
105
  /**
75
106
  * @polymerMixin
76
107
  */
77
108
  export const RichTextEditorMixin = (superClass) =>
78
- class RichTextEditorMixinClass extends superClass {
109
+ class RichTextEditorMixinClass extends I18nMixin(DEFAULT_I18N, superClass) {
79
110
  static get properties() {
80
111
  return {
81
112
  /**
@@ -129,48 +160,6 @@ export const RichTextEditorMixin = (superClass) =>
129
160
  reflectToAttribute: true,
130
161
  },
131
162
 
132
- /**
133
- * An object used to localize this component. The properties are used
134
- * e.g. as the tooltips for the editor toolbar buttons.
135
- *
136
- * @type {!RichTextEditorI18n}
137
- * @default {English/US}
138
- */
139
- i18n: {
140
- type: Object,
141
- value: () => {
142
- return {
143
- undo: 'undo',
144
- redo: 'redo',
145
- bold: 'bold',
146
- italic: 'italic',
147
- underline: 'underline',
148
- strike: 'strike',
149
- color: 'color',
150
- background: 'background',
151
- h1: 'h1',
152
- h2: 'h2',
153
- h3: 'h3',
154
- subscript: 'subscript',
155
- superscript: 'superscript',
156
- listOrdered: 'list ordered',
157
- listBullet: 'list bullet',
158
- alignLeft: 'align left',
159
- alignCenter: 'align center',
160
- alignRight: 'align right',
161
- image: 'image',
162
- link: 'link',
163
- blockquote: 'blockquote',
164
- codeBlock: 'code block',
165
- clean: 'clean',
166
- linkDialogTitle: 'Link address',
167
- ok: 'OK',
168
- cancel: 'Cancel',
169
- remove: 'Remove',
170
- };
171
- },
172
- },
173
-
174
163
  /**
175
164
  * The list of colors used by the background and text color
176
165
  * selection controls. Should contain an array of HEX strings.
@@ -265,6 +254,24 @@ export const RichTextEditorMixin = (superClass) =>
265
254
  return ['_valueChanged(value, _editor)', '_disabledChanged(disabled, readonly, _editor)'];
266
255
  }
267
256
 
257
+ /**
258
+ * The object used to localize this component. To change the default
259
+ * localization, replace this with an object that provides all properties, or
260
+ * just the individual properties you want to change.
261
+ *
262
+ * The properties are used e.g. as the tooltips for the editor toolbar
263
+ * buttons.
264
+ *
265
+ * @return {!RichTextEditorI18n}
266
+ */
267
+ get i18n() {
268
+ return super.i18n;
269
+ }
270
+
271
+ set i18n(value) {
272
+ super.i18n = value;
273
+ }
274
+
268
275
  /** @private */
269
276
  get _toolbarButtons() {
270
277
  return Array.from(this.shadowRoot.querySelectorAll('[part="toolbar"] button')).filter((btn) => {
package/src/vaadin-rich-text-editor.js CHANGED
@@ -110,28 +110,28 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
110
110
  <span part="toolbar-group toolbar-group-history">
111
111
  <!-- Undo and Redo -->
112
112
  <button id="btn-undo" type="button" part="toolbar-button toolbar-button-undo" on-click="_undo"></button>
113
- <vaadin-tooltip for="btn-undo" text="[[i18n.undo]]"></vaadin-tooltip>
113
+ <vaadin-tooltip for="btn-undo" text="[[__effectiveI18n.undo]]"></vaadin-tooltip>
114
114
 
115
115
  <button id="btn-redo" type="button" part="toolbar-button toolbar-button-redo" on-click="_redo"></button>
116
- <vaadin-tooltip for="btn-redo" text="[[i18n.redo]]"></vaadin-tooltip>
116
+ <vaadin-tooltip for="btn-redo" text="[[__effectiveI18n.redo]]"></vaadin-tooltip>
117
117
  </span>
118
118
 
119
119
  <span part="toolbar-group toolbar-group-emphasis">
120
120
  <!-- Bold -->
121
121
  <button id="btn-bold" class="ql-bold" part="toolbar-button toolbar-button-bold"></button>
122
- <vaadin-tooltip for="btn-bold" text="[[i18n.bold]]"></vaadin-tooltip>
122
+ <vaadin-tooltip for="btn-bold" text="[[__effectiveI18n.bold]]"></vaadin-tooltip>
123
123
 
124
124
  <!-- Italic -->
125
125
  <button id="btn-italic" class="ql-italic" part="toolbar-button toolbar-button-italic"></button>
126
- <vaadin-tooltip for="btn-italic" text="[[i18n.italic]]"></vaadin-tooltip>
126
+ <vaadin-tooltip for="btn-italic" text="[[__effectiveI18n.italic]]"></vaadin-tooltip>
127
127
 
128
128
  <!-- Underline -->
129
129
  <button id="btn-underline" class="ql-underline" part="toolbar-button toolbar-button-underline"></button>
130
- <vaadin-tooltip for="btn-underline" text="[[i18n.underline]]"></vaadin-tooltip>
130
+ <vaadin-tooltip for="btn-underline" text="[[__effectiveI18n.underline]]"></vaadin-tooltip>
131
131
 
132
132
  <!-- Strike -->
133
133
  <button id="btn-strike" class="ql-strike" part="toolbar-button toolbar-button-strike"></button>
134
- <vaadin-tooltip for="btn-strike" text="[[i18n.strike]]"></vaadin-tooltip>
134
+ <vaadin-tooltip for="btn-strike" text="[[__effectiveI18n.strike]]"></vaadin-tooltip>
135
135
  </span>
136
136
 
137
137
  <span part="toolbar-group toolbar-group-style">
@@ -142,7 +142,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
142
142
  part="toolbar-button toolbar-button-color"
143
143
  on-click="__onColorClick"
144
144
  ></button>
145
- <vaadin-tooltip for="btn-color" text="[[i18n.color]]"></vaadin-tooltip>
145
+ <vaadin-tooltip for="btn-color" text="[[__effectiveI18n.color]]"></vaadin-tooltip>
146
146
  <!-- Background -->
147
147
  <button
148
148
  id="btn-background"
@@ -150,7 +150,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
150
150
  part="toolbar-button toolbar-button-background"
151
151
  on-click="__onBackgroundClick"
152
152
  ></button>
153
- <vaadin-tooltip for="btn-background" text="[[i18n.background]]"></vaadin-tooltip>
153
+ <vaadin-tooltip for="btn-background" text="[[__effectiveI18n.background]]"></vaadin-tooltip>
154
154
  </span>
155
155
 
156
156
  <span part="toolbar-group toolbar-group-heading">
@@ -162,7 +162,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
162
162
  value="1"
163
163
  part="toolbar-button toolbar-button-h1"
164
164
  ></button>
165
- <vaadin-tooltip for="btn-h1" text="[[i18n.h1]]"></vaadin-tooltip>
165
+ <vaadin-tooltip for="btn-h1" text="[[__effectiveI18n.h1]]"></vaadin-tooltip>
166
166
  <button
167
167
  id="btn-h2"
168
168
  type="button"
@@ -170,7 +170,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
170
170
  value="2"
171
171
  part="toolbar-button toolbar-button-h2"
172
172
  ></button>
173
- <vaadin-tooltip for="btn-h2" text="[[i18n.h2]]"></vaadin-tooltip>
173
+ <vaadin-tooltip for="btn-h2" text="[[__effectiveI18n.h2]]"></vaadin-tooltip>
174
174
  <button
175
175
  id="btn-h3"
176
176
  type="button"
@@ -178,7 +178,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
178
178
  value="3"
179
179
  part="toolbar-button toolbar-button-h3"
180
180
  ></button>
181
- <vaadin-tooltip for="btn-h3" text="[[i18n.h3]]"></vaadin-tooltip>
181
+ <vaadin-tooltip for="btn-h3" text="[[__effectiveI18n.h3]]"></vaadin-tooltip>
182
182
  </span>
183
183
 
184
184
  <span part="toolbar-group toolbar-group-glyph-transformation">
@@ -189,14 +189,14 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
189
189
  value="sub"
190
190
  part="toolbar-button toolbar-button-subscript"
191
191
  ></button>
192
- <vaadin-tooltip for="btn-subscript" text="[[i18n.subscript]]"></vaadin-tooltip>
192
+ <vaadin-tooltip for="btn-subscript" text="[[__effectiveI18n.subscript]]"></vaadin-tooltip>
193
193
  <button
194
194
  id="btn-superscript"
195
195
  class="ql-script"
196
196
  value="super"
197
197
  part="toolbar-button toolbar-button-superscript"
198
198
  ></button>
199
- <vaadin-tooltip for="btn-superscript" text="[[i18n.superscript]]"></vaadin-tooltip>
199
+ <vaadin-tooltip for="btn-superscript" text="[[__effectiveI18n.superscript]]"></vaadin-tooltip>
200
200
  </span>
201
201
 
202
202
  <span part="toolbar-group toolbar-group-list">
@@ -208,7 +208,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
208
208
  value="ordered"
209
209
  part="toolbar-button toolbar-button-list-ordered"
210
210
  ></button>
211
- <vaadin-tooltip for="btn-ol" text="[[i18n.listOrdered]]"></vaadin-tooltip>
211
+ <vaadin-tooltip for="btn-ol" text="[[__effectiveI18n.listOrdered]]"></vaadin-tooltip>
212
212
  <button
213
213
  id="btn-ul"
214
214
  type="button"
@@ -216,7 +216,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
216
216
  value="bullet"
217
217
  part="toolbar-button toolbar-button-list-bullet"
218
218
  ></button>
219
- <vaadin-tooltip for="btn-ul" text="[[i18n.listBullet]]"></vaadin-tooltip>
219
+ <vaadin-tooltip for="btn-ul" text="[[__effectiveI18n.listBullet]]"></vaadin-tooltip>
220
220
  </span>
221
221
 
222
222
  <span part="toolbar-group toolbar-group-alignment">
@@ -228,7 +228,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
228
228
  value=""
229
229
  part="toolbar-button toolbar-button-align-left"
230
230
  ></button>
231
- <vaadin-tooltip for="btn-left" text="[[i18n.alignLeft]]"></vaadin-tooltip>
231
+ <vaadin-tooltip for="btn-left" text="[[__effectiveI18n.alignLeft]]"></vaadin-tooltip>
232
232
  <button
233
233
  id="btn-center"
234
234
  type="button"
@@ -236,7 +236,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
236
236
  value="center"
237
237
  part="toolbar-button toolbar-button-align-center"
238
238
  ></button>
239
- <vaadin-tooltip for="btn-center" text="[[i18n.alignCenter]]"></vaadin-tooltip>
239
+ <vaadin-tooltip for="btn-center" text="[[__effectiveI18n.alignCenter]]"></vaadin-tooltip>
240
240
  <button
241
241
  id="btn-right"
242
242
  type="button"
@@ -244,7 +244,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
244
244
  value="right"
245
245
  part="toolbar-button toolbar-button-align-right"
246
246
  ></button>
247
- <vaadin-tooltip for="btn-right" text="[[i18n.alignRight]]"></vaadin-tooltip>
247
+ <vaadin-tooltip for="btn-right" text="[[__effectiveI18n.alignRight]]"></vaadin-tooltip>
248
248
  </span>
249
249
 
250
250
  <span part="toolbar-group toolbar-group-rich-text">
@@ -256,7 +256,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
256
256
  on-touchend="_onImageTouchEnd"
257
257
  on-click="_onImageClick"
258
258
  ></button>
259
- <vaadin-tooltip for="btn-image" text="[[i18n.image]]"></vaadin-tooltip>
259
+ <vaadin-tooltip for="btn-image" text="[[__effectiveI18n.image]]"></vaadin-tooltip>
260
260
  <!-- Link -->
261
261
  <button
262
262
  id="btn-link"
@@ -264,7 +264,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
264
264
  part="toolbar-button toolbar-button-link"
265
265
  on-click="_onLinkClick"
266
266
  ></button>
267
- <vaadin-tooltip for="btn-link" text="[[i18n.link]]"></vaadin-tooltip>
267
+ <vaadin-tooltip for="btn-link" text="[[__effectiveI18n.link]]"></vaadin-tooltip>
268
268
  </span>
269
269
 
270
270
  <span part="toolbar-group toolbar-group-block">
@@ -275,7 +275,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
275
275
  class="ql-blockquote"
276
276
  part="toolbar-button toolbar-button-blockquote"
277
277
  ></button>
278
- <vaadin-tooltip for="btn-blockquote" text="[[i18n.blockquote]]"></vaadin-tooltip>
278
+ <vaadin-tooltip for="btn-blockquote" text="[[__effectiveI18n.blockquote]]"></vaadin-tooltip>
279
279
  <!-- Code block -->
280
280
  <button
281
281
  id="btn-code"
@@ -283,13 +283,13 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
283
283
  class="ql-code-block"
284
284
  part="toolbar-button toolbar-button-code-block"
285
285
  ></button>
286
- <vaadin-tooltip for="btn-code" text="[[i18n.codeBlock]]"></vaadin-tooltip>
286
+ <vaadin-tooltip for="btn-code" text="[[__effectiveI18n.codeBlock]]"></vaadin-tooltip>
287
287
  </span>
288
288
 
289
289
  <span part="toolbar-group toolbar-group-format">
290
290
  <!-- Clean -->
291
291
  <button id="btn-clean" type="button" class="ql-clean" part="toolbar-button toolbar-button-clean"></button>
292
- <vaadin-tooltip for="btn-clean" text="[[i18n.clean]]"></vaadin-tooltip>
292
+ <vaadin-tooltip for="btn-clean" text="[[__effectiveI18n.clean]]"></vaadin-tooltip>
293
293
  </span>
294
294
 
295
295
  <input
@@ -305,7 +305,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
305
305
  <div class="announcer" aria-live="polite"></div>
306
306
  </div>
307
307
 
308
- <vaadin-confirm-dialog id="linkDialog" opened="{{_linkEditing}}" header="[[i18n.linkDialogTitle]]">
308
+ <vaadin-confirm-dialog id="linkDialog" opened="{{_linkEditing}}" header="[[__effectiveI18n.linkDialogTitle]]">
309
309
  <vaadin-text-field
310
310
  id="linkUrl"
311
311
  value="{{_linkUrl}}"
@@ -313,7 +313,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
313
313
  on-keydown="_onLinkKeydown"
314
314
  ></vaadin-text-field>
315
315
  <vaadin-button id="confirmLink" slot="confirm-button" theme="primary" on-click="_onLinkEditConfirm">
316
- [[i18n.ok]]
316
+ [[__effectiveI18n.ok]]
317
317
  </vaadin-button>
318
318
  <vaadin-button
319
319
  id="removeLink"
@@ -322,10 +322,10 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
322
322
  on-click="_onLinkEditRemove"
323
323
  hidden$="[[!_linkRange]]"
324
324
  >
325
- [[i18n.remove]]
325
+ [[__effectiveI18n.remove]]
326
326
  </vaadin-button>
327
327
  <vaadin-button id="cancelLink" slot="cancel-button" on-click="_onLinkEditCancel">
328
- [[i18n.cancel]]
328
+ [[__effectiveI18n.cancel]]
329
329
  </vaadin-button>
330
330
  </vaadin-confirm-dialog>
331
331
 
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/rich-text-editor",
4
- "version": "24.8.0-alpha3",
4
+ "version": "24.8.0-alpha5",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -51,6 +51,15 @@
51
51
  ],
52
52
  "js": {
53
53
  "properties": [
54
+ {
55
+ "name": "i18n",
56
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe properties are used e.g. as the tooltips for the editor toolbar\nbuttons.",
57
+ "value": {
58
+ "type": [
59
+ "RichTextEditorI18n"
60
+ ]
61
+ }
62
+ },
54
63
  {
55
64
  "name": "value",
56
65
  "description": "Value is a list of the operations which describe change to the document.\nEach of those operations describe the change at the current index.\nThey can be an `insert`, `delete` or `retain`. The format is as follows:\n\n```js\n [\n { insert: 'Hello World' },\n { insert: '!', attributes: { bold: true }}\n ]\n```\n\nSee also https://github.com/quilljs/delta for detailed documentation.",
@@ -78,15 +87,6 @@
78
87
  ]
79
88
  }
80
89
  },
81
- {
82
- "name": "i18n",
83
- "description": "An object used to localize this component. The properties are used\ne.g. as the tooltips for the editor toolbar buttons.",
84
- "value": {
85
- "type": [
86
- "RichTextEditorI18n"
87
- ]
88
- }
89
- },
90
90
  {
91
91
  "name": "colorOptions",
92
92
  "description": "The list of colors used by the background and text color\nselection controls. Should contain an array of HEX strings.\n\nWhen user selects `#000000` (black) as a text color,\nor `#ffffff` (white) as a background color, it resets\nthe corresponding format for the selected text.",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/rich-text-editor",
4
- "version": "24.8.0-alpha3",
4
+ "version": "24.8.0-alpha5",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -34,15 +34,15 @@
34
34
  }
35
35
  },
36
36
  {
37
- "name": ".value",
38
- "description": "Value is a list of the operations which describe change to the document.\nEach of those operations describe the change at the current index.\nThey can be an `insert`, `delete` or `retain`. The format is as follows:\n\n```js\n [\n { insert: 'Hello World' },\n { insert: '!', attributes: { bold: true }}\n ]\n```\n\nSee also https://github.com/quilljs/delta for detailed documentation.",
37
+ "name": ".i18n",
38
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe properties are used e.g. as the tooltips for the editor toolbar\nbuttons.",
39
39
  "value": {
40
40
  "kind": "expression"
41
41
  }
42
42
  },
43
43
  {
44
- "name": ".i18n",
45
- "description": "An object used to localize this component. The properties are used\ne.g. as the tooltips for the editor toolbar buttons.",
44
+ "name": ".value",
45
+ "description": "Value is a list of the operations which describe change to the document.\nEach of those operations describe the change at the current index.\nThey can be an `insert`, `delete` or `retain`. The format is as follows:\n\n```js\n [\n { insert: 'Hello World' },\n { insert: '!', attributes: { bold: true }}\n ]\n```\n\nSee also https://github.com/quilljs/delta for detailed documentation.",
46
46
  "value": {
47
47
  "kind": "expression"
48
48
  }