@vaadin/rich-text-editor 24.8.4 → 25.0.0-alpha10

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 (32) hide show
  1. package/README.md +0 -23
  2. package/package.json +17 -24
  3. package/src/styles/vaadin-rich-text-editor-base-icons.js +36 -0
  4. package/src/styles/vaadin-rich-text-editor-base-styles.d.ts +13 -0
  5. package/src/styles/vaadin-rich-text-editor-base-styles.js +346 -0
  6. package/src/styles/vaadin-rich-text-editor-core-styles.d.ts +13 -0
  7. package/src/{vaadin-rich-text-editor-toolbar-styles.js → styles/vaadin-rich-text-editor-core-styles.js} +152 -6
  8. package/src/styles/vaadin-rich-text-editor-popup-overlay-base-styles.js +43 -0
  9. package/src/styles/vaadin-rich-text-editor-popup-overlay-core-styles.js +13 -0
  10. package/src/vaadin-rich-text-editor-mixin.js +29 -81
  11. package/src/vaadin-rich-text-editor-popup.js +123 -25
  12. package/src/vaadin-rich-text-editor.d.ts +1 -1
  13. package/src/vaadin-rich-text-editor.js +183 -91
  14. package/theme/lumo/vaadin-rich-text-editor-styles.js +6 -5
  15. package/web-types.json +2 -6
  16. package/web-types.lit.json +2 -9
  17. package/src/vaadin-lit-rich-text-editor-popup.js +0 -91
  18. package/src/vaadin-lit-rich-text-editor.js +0 -330
  19. package/src/vaadin-rich-text-editor-content-styles.js +0 -118
  20. package/src/vaadin-rich-text-editor-icons.js +0 -93
  21. package/src/vaadin-rich-text-editor-popup-mixin.js +0 -70
  22. package/src/vaadin-rich-text-editor-styles.js +0 -61
  23. package/theme/lumo/vaadin-lit-rich-text-editor.d.ts +0 -6
  24. package/theme/lumo/vaadin-lit-rich-text-editor.js +0 -6
  25. package/theme/material/vaadin-lit-rich-text-editor.d.ts +0 -6
  26. package/theme/material/vaadin-lit-rich-text-editor.js +0 -6
  27. package/theme/material/vaadin-rich-text-editor-styles.d.ts +0 -1
  28. package/theme/material/vaadin-rich-text-editor-styles.js +0 -143
  29. package/theme/material/vaadin-rich-text-editor.d.ts +0 -6
  30. package/theme/material/vaadin-rich-text-editor.js +0 -6
  31. package/vaadin-lit-rich-text-editor.d.ts +0 -1
  32. package/vaadin-lit-rich-text-editor.js +0 -2
@@ -1,330 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
4
- *
5
- * This program is available under Vaadin Commercial License and Service Terms.
6
- *
7
- *
8
- * See https://vaadin.com/commercial-license-and-service-terms for the full
9
- * license.
10
- */
11
- import '@vaadin/button/src/vaadin-lit-button.js';
12
- import '@vaadin/confirm-dialog/src/vaadin-lit-confirm-dialog.js';
13
- import '@vaadin/text-field/src/vaadin-lit-text-field.js';
14
- import '@vaadin/tooltip/src/vaadin-lit-tooltip.js';
15
- import './vaadin-lit-rich-text-editor-popup.js';
16
- import { html, LitElement } from 'lit';
17
- import { defineCustomElement } from '@vaadin/component-base/src/define.js';
18
- import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
19
- import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
20
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
21
- import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
22
- import { richTextEditorStyles } from './vaadin-rich-text-editor-styles.js';
23
-
24
- /**
25
- * LitElement based version of `<vaadin-rich-text-editor>` web component.
26
- *
27
- * ## Disclaimer
28
- *
29
- * This component is an experiment and not yet a part of Vaadin platform.
30
- * There is no ETA regarding specific Vaadin version where it'll land.
31
- */
32
- class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
33
- static get is() {
34
- return 'vaadin-rich-text-editor';
35
- }
36
-
37
- static get cvdlName() {
38
- return 'vaadin-rich-text-editor';
39
- }
40
-
41
- static get styles() {
42
- return richTextEditorStyles;
43
- }
44
-
45
- /** @protected */
46
- render() {
47
- return html`
48
- <div class="vaadin-rich-text-editor-container">
49
- <!-- Create toolbar container -->
50
- <div part="toolbar" role="toolbar">
51
- <span part="toolbar-group toolbar-group-history">
52
- <!-- Undo and Redo -->
53
- <button
54
- id="btn-undo"
55
- type="button"
56
- part="toolbar-button toolbar-button-undo"
57
- @click="${this._undo}"
58
- ></button>
59
- <vaadin-tooltip for="btn-undo" .text="${this.__effectiveI18n.undo}"></vaadin-tooltip>
60
-
61
- <button
62
- id="btn-redo"
63
- type="button"
64
- part="toolbar-button toolbar-button-redo"
65
- @click="${this._redo}"
66
- ></button>
67
- <vaadin-tooltip for="btn-redo" .text="${this.__effectiveI18n.redo}"></vaadin-tooltip>
68
- </span>
69
-
70
- <span part="toolbar-group toolbar-group-emphasis">
71
- <!-- Bold -->
72
- <button id="btn-bold" class="ql-bold" part="toolbar-button toolbar-button-bold"></button>
73
- <vaadin-tooltip for="btn-bold" .text="${this.__effectiveI18n.bold}"></vaadin-tooltip>
74
-
75
- <!-- Italic -->
76
- <button id="btn-italic" class="ql-italic" part="toolbar-button toolbar-button-italic"></button>
77
- <vaadin-tooltip for="btn-italic" .text="${this.__effectiveI18n.italic}"></vaadin-tooltip>
78
-
79
- <!-- Underline -->
80
- <button id="btn-underline" class="ql-underline" part="toolbar-button toolbar-button-underline"></button>
81
- <vaadin-tooltip for="btn-underline" .text="${this.__effectiveI18n.underline}"></vaadin-tooltip>
82
-
83
- <!-- Strike -->
84
- <button id="btn-strike" class="ql-strike" part="toolbar-button toolbar-button-strike"></button>
85
- <vaadin-tooltip for="btn-strike" .text="${this.__effectiveI18n.strike}"></vaadin-tooltip>
86
- </span>
87
-
88
- <span part="toolbar-group toolbar-group-style">
89
- <!-- Color -->
90
- <button
91
- id="btn-color"
92
- type="button"
93
- part="toolbar-button toolbar-button-color"
94
- @click="${this.__onColorClick}"
95
- ></button>
96
- <vaadin-tooltip for="btn-color" .text="${this.__effectiveI18n.color}"></vaadin-tooltip>
97
- <!-- Background -->
98
- <button
99
- id="btn-background"
100
- type="button"
101
- part="toolbar-button toolbar-button-background"
102
- @click="${this.__onBackgroundClick}"
103
- ></button>
104
- <vaadin-tooltip for="btn-background" .text="${this.__effectiveI18n.background}"></vaadin-tooltip>
105
- </span>
106
-
107
- <span part="toolbar-group toolbar-group-heading">
108
- <!-- Header buttons -->
109
- <button
110
- id="btn-h1"
111
- type="button"
112
- class="ql-header"
113
- value="1"
114
- part="toolbar-button toolbar-button-h1"
115
- ></button>
116
- <vaadin-tooltip for="btn-h1" .text="${this.__effectiveI18n.h1}"></vaadin-tooltip>
117
- <button
118
- id="btn-h2"
119
- type="button"
120
- class="ql-header"
121
- value="2"
122
- part="toolbar-button toolbar-button-h2"
123
- ></button>
124
- <vaadin-tooltip for="btn-h2" .text="${this.__effectiveI18n.h2}"></vaadin-tooltip>
125
- <button
126
- id="btn-h3"
127
- type="button"
128
- class="ql-header"
129
- value="3"
130
- part="toolbar-button toolbar-button-h3"
131
- ></button>
132
- <vaadin-tooltip for="btn-h3" .text="${this.__effectiveI18n.h3}"></vaadin-tooltip>
133
- </span>
134
-
135
- <span part="toolbar-group toolbar-group-glyph-transformation">
136
- <!-- Subscript and superscript -->
137
- <button
138
- id="btn-subscript"
139
- class="ql-script"
140
- value="sub"
141
- part="toolbar-button toolbar-button-subscript"
142
- ></button>
143
- <vaadin-tooltip for="btn-subscript" .text="${this.__effectiveI18n.subscript}"></vaadin-tooltip>
144
- <button
145
- id="btn-superscript"
146
- class="ql-script"
147
- value="super"
148
- part="toolbar-button toolbar-button-superscript"
149
- ></button>
150
- <vaadin-tooltip for="btn-superscript" text="${this.__effectiveI18n.superscript}"></vaadin-tooltip>
151
- </span>
152
-
153
- <span part="toolbar-group toolbar-group-list">
154
- <!-- List buttons -->
155
- <button
156
- id="btn-ol"
157
- type="button"
158
- class="ql-list"
159
- value="ordered"
160
- part="toolbar-button toolbar-button-list-ordered"
161
- ></button>
162
- <vaadin-tooltip for="btn-ol" text="${this.__effectiveI18n.listOrdered}"></vaadin-tooltip>
163
- <button
164
- id="btn-ul"
165
- type="button"
166
- class="ql-list"
167
- value="bullet"
168
- part="toolbar-button toolbar-button-list-bullet"
169
- ></button>
170
- <vaadin-tooltip for="btn-ul" text="${this.__effectiveI18n.listBullet}"></vaadin-tooltip>
171
- </span>
172
-
173
- <span part="toolbar-group toolbar-group-alignment">
174
- <!-- Align buttons -->
175
- <button
176
- id="btn-left"
177
- type="button"
178
- class="ql-align"
179
- value=""
180
- part="toolbar-button toolbar-button-align-left"
181
- ></button>
182
- <vaadin-tooltip for="btn-left" .text="${this.__effectiveI18n.alignLeft}"></vaadin-tooltip>
183
- <button
184
- id="btn-center"
185
- type="button"
186
- class="ql-align"
187
- value="center"
188
- part="toolbar-button toolbar-button-align-center"
189
- ></button>
190
- <vaadin-tooltip for="btn-center" .text="${this.__effectiveI18n.alignCenter}"></vaadin-tooltip>
191
- <button
192
- id="btn-right"
193
- type="button"
194
- class="ql-align"
195
- value="right"
196
- part="toolbar-button toolbar-button-align-right"
197
- ></button>
198
- <vaadin-tooltip for="btn-right" .text="${this.__effectiveI18n.alignRight}"></vaadin-tooltip>
199
- </span>
200
-
201
- <span part="toolbar-group toolbar-group-rich-text">
202
- <!-- Image -->
203
- <button
204
- id="btn-image"
205
- type="button"
206
- part="toolbar-button toolbar-button-image"
207
- @touchend="${this._onImageTouchEnd}"
208
- @click="${this._onImageClick}"
209
- ></button>
210
- <vaadin-tooltip for="btn-image" .text="${this.__effectiveI18n.image}"></vaadin-tooltip>
211
- <!-- Link -->
212
- <button
213
- id="btn-link"
214
- type="button"
215
- part="toolbar-button toolbar-button-link"
216
- @click="${this._onLinkClick}"
217
- ></button>
218
- <vaadin-tooltip for="btn-link" .text="${this.__effectiveI18n.link}"></vaadin-tooltip>
219
- </span>
220
-
221
- <span part="toolbar-group toolbar-group-block">
222
- <!-- Blockquote -->
223
- <button
224
- id="btn-blockquote"
225
- type="button"
226
- class="ql-blockquote"
227
- part="toolbar-button toolbar-button-blockquote"
228
- ></button>
229
- <vaadin-tooltip for="btn-blockquote" .text="${this.__effectiveI18n.blockquote}"></vaadin-tooltip>
230
- <!-- Code block -->
231
- <button
232
- id="btn-code"
233
- type="button"
234
- class="ql-code-block"
235
- part="toolbar-button toolbar-button-code-block"
236
- ></button>
237
- <vaadin-tooltip for="btn-code" .text="${this.__effectiveI18n.codeBlock}"></vaadin-tooltip>
238
- </span>
239
-
240
- <span part="toolbar-group toolbar-group-format">
241
- <!-- Clean -->
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.__effectiveI18n.clean}"></vaadin-tooltip>
244
- </span>
245
-
246
- <input
247
- id="fileInput"
248
- type="file"
249
- accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
250
- @change="${this._uploadImage}"
251
- />
252
- </div>
253
-
254
- <div part="content"></div>
255
-
256
- <div class="announcer" aria-live="polite"></div>
257
- </div>
258
-
259
- <vaadin-confirm-dialog
260
- id="linkDialog"
261
- .opened="${this._linkEditing}"
262
- .header="${this.__effectiveI18n.linkDialogTitle}"
263
- @opened-changed="${this._onLinkEditingChanged}"
264
- >
265
- <vaadin-text-field
266
- id="linkUrl"
267
- .value="${this._linkUrl}"
268
- style="width: 100%;"
269
- @keydown="${this._onLinkKeydown}"
270
- @value-changed="${this._onLinkUrlChanged}"
271
- ></vaadin-text-field>
272
- <vaadin-button id="confirmLink" slot="confirm-button" theme="primary" @click="${this._onLinkEditConfirm}">
273
- ${this.__effectiveI18n.ok}
274
- </vaadin-button>
275
- <vaadin-button
276
- id="removeLink"
277
- slot="reject-button"
278
- theme="error"
279
- @click="${this._onLinkEditRemove}"
280
- ?hidden="${!this._linkRange}"
281
- >
282
- ${this.__effectiveI18n.remove}
283
- </vaadin-button>
284
- <vaadin-button id="cancelLink" slot="cancel-button" @click="${this._onLinkEditCancel}">
285
- ${this.__effectiveI18n.cancel}
286
- </vaadin-button>
287
- </vaadin-confirm-dialog>
288
-
289
- <vaadin-rich-text-editor-popup
290
- id="colorPopup"
291
- .colors="${this.colorOptions}"
292
- .opened="${this._colorEditing}"
293
- @color-selected="${this.__onColorSelected}"
294
- @opened-changed="${this.__onColorEditingChanged}"
295
- ></vaadin-rich-text-editor-popup>
296
-
297
- <vaadin-rich-text-editor-popup
298
- id="backgroundPopup"
299
- .colors="${this.colorOptions}"
300
- .opened="${this._backgroundEditing}"
301
- @color-selected="${this.__onBackgroundSelected}"
302
- @opened-changed="${this.__onBackgroundEditingChanged}"
303
- ></vaadin-rich-text-editor-popup>
304
- `;
305
- }
306
-
307
- /** @private */
308
- __onBackgroundEditingChanged(event) {
309
- this._backgroundEditing = event.detail.value;
310
- }
311
-
312
- /** @private */
313
- __onColorEditingChanged(event) {
314
- this._colorEditing = event.detail.value;
315
- }
316
-
317
- /** @private */
318
- _onLinkEditingChanged(event) {
319
- this._linkEditing = event.detail.value;
320
- }
321
-
322
- /** @private */
323
- _onLinkUrlChanged(event) {
324
- this._linkUrl = event.detail.value;
325
- }
326
- }
327
-
328
- defineCustomElement(RichTextEditor);
329
-
330
- export { RichTextEditor };
@@ -1,118 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
4
- *
5
- * This program is available under Vaadin Commercial License and Service Terms.
6
- *
7
- *
8
- * See https://vaadin.com/commercial-license-and-service-terms for the full
9
- * license.
10
- */
11
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
-
13
- export const contentStyles = css`
14
- [part='content'] {
15
- box-sizing: border-box;
16
- position: relative;
17
- flex: auto;
18
- display: flex;
19
- flex-direction: column;
20
- overflow: hidden;
21
- }
22
-
23
- /*
24
- Quill core styles.
25
- CSS selectors removed: margin & padding reset, check list, indentation, video, colors, ordered & unordered list, h1-6, anchor
26
- */
27
- .ql-clipboard {
28
- left: -100000px;
29
- height: 1px;
30
- overflow-y: hidden;
31
- position: absolute;
32
- top: 50%;
33
- }
34
-
35
- .ql-clipboard p {
36
- margin: 0;
37
- padding: 0;
38
- }
39
-
40
- .ql-editor {
41
- box-sizing: border-box;
42
- line-height: 1.42;
43
- height: 100%;
44
- outline: none;
45
- overflow-y: auto;
46
- padding: 0.75em 1em;
47
- -moz-tab-size: 4;
48
- tab-size: 4;
49
- text-align: left;
50
- white-space: pre-wrap;
51
- word-wrap: break-word;
52
- flex: 1;
53
- }
54
-
55
- .ql-editor > * {
56
- cursor: text;
57
- }
58
-
59
- .ql-align-left {
60
- text-align: left;
61
- }
62
-
63
- .ql-direction-rtl {
64
- direction: rtl;
65
- text-align: inherit;
66
- }
67
-
68
- .ql-align-center {
69
- text-align: center;
70
- }
71
-
72
- .ql-align-justify {
73
- text-align: justify;
74
- }
75
-
76
- .ql-align-right {
77
- text-align: right;
78
- }
79
- /* quill core end */
80
-
81
- blockquote {
82
- border-left: 0.25em solid #ccc;
83
- margin-bottom: 0.3125em;
84
- margin-top: 0.3125em;
85
- padding-left: 1em;
86
- }
87
-
88
- code,
89
- pre {
90
- background-color: #f0f0f0;
91
- border-radius: 0.1875em;
92
- }
93
-
94
- pre {
95
- white-space: pre-wrap;
96
- margin-bottom: 0.3125em;
97
- margin-top: 0.3125em;
98
- padding: 0.3125em 0.625em;
99
- }
100
-
101
- code {
102
- font-size: 85%;
103
- padding: 0.125em 0.25em;
104
- }
105
-
106
- img {
107
- max-width: 100%;
108
- }
109
-
110
- /* RTL specific styles */
111
- :host([dir='rtl']) .ql-editor {
112
- direction: rtl;
113
- text-align: right;
114
- }
115
- `;
116
-
117
- // Register a module with ID for backwards compatibility.
118
- registerStyles('', contentStyles, { moduleId: 'vaadin-rich-text-editor-content-styles' });
@@ -1,93 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
4
- *
5
- * This program is available under Vaadin Commercial License and Service Terms.
6
- *
7
- *
8
- * See https://vaadin.com/commercial-license-and-service-terms for the full
9
- * license.
10
- */
11
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
-
13
- const template = document.createElement('template');
14
-
15
- template.innerHTML = `
16
- <style>
17
- @font-face {
18
- font-family: 'vaadin-rte-icons';
19
- src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
20
- font-weight: normal;
21
- font-style: normal;
22
- }
23
-
24
- html {
25
- --vaadin-rte-icons-align-center: "\\ea01";
26
- --vaadin-rte-icons-align-left: "\\ea02";
27
- --vaadin-rte-icons-align-right: "\\ea03";
28
- --vaadin-rte-icons-clean: "\\ea04";
29
- --vaadin-rte-icons-image: "\\ea05";
30
- --vaadin-rte-icons-link: "\\ea06";
31
- --vaadin-rte-icons-list-bullet: "\\ea07";
32
- --vaadin-rte-icons-list-ordered: "\\ea08";
33
- --vaadin-rte-icons-redo: "\\ea09";
34
- --vaadin-rte-icons-undo: "\\ea0a";
35
- }
36
- </style>
37
- `;
38
-
39
- document.head.appendChild(template.content);
40
-
41
- export const iconsStyles = css`
42
- [part~='toolbar-button-align-center']::before {
43
- content: var(--vaadin-rte-icons-align-center);
44
- }
45
-
46
- [part~='toolbar-button-align-left']::before {
47
- content: var(--vaadin-rte-icons-align-left);
48
- }
49
-
50
- [part~='toolbar-button-align-right']::before {
51
- content: var(--vaadin-rte-icons-align-right);
52
- }
53
-
54
- [part~='toolbar-button-clean']::before {
55
- content: var(--vaadin-rte-icons-clean);
56
- }
57
-
58
- [part~='toolbar-button-image']::before {
59
- content: var(--vaadin-rte-icons-image);
60
- }
61
-
62
- [part~='toolbar-button-link']::before {
63
- content: var(--vaadin-rte-icons-link);
64
- }
65
-
66
- [part~='toolbar-button-list-bullet']::before {
67
- content: var(--vaadin-rte-icons-list-bullet);
68
- }
69
-
70
- [part~='toolbar-button-list-ordered']::before {
71
- content: var(--vaadin-rte-icons-list-ordered);
72
- }
73
-
74
- [part~='toolbar-button-redo']::before {
75
- content: var(--vaadin-rte-icons-redo);
76
- }
77
-
78
- [part~='toolbar-button-undo']::before {
79
- content: var(--vaadin-rte-icons-undo);
80
- }
81
-
82
- /* RTL specific styles */
83
- :host([dir='rtl']) [part~='toolbar-button-redo']::before {
84
- content: var(--vaadin-rte-icons-undo);
85
- }
86
-
87
- :host([dir='rtl']) [part~='toolbar-button-undo']::before {
88
- content: var(--vaadin-rte-icons-redo);
89
- }
90
- `;
91
-
92
- // Register a module with ID for backwards compatibility.
93
- registerStyles('', iconsStyles, { moduleId: 'vaadin-rich-text-editor-icons' });
@@ -1,70 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
4
- *
5
- * This program is available under Vaadin Commercial License and Service Terms.
6
- *
7
- *
8
- * See https://vaadin.com/commercial-license-and-service-terms for the full
9
- * license.
10
- */
11
-
12
- /**
13
- * @polymerMixin
14
- */
15
- export const RichTextEditorPopupMixin = (superClass) =>
16
- class RichTextEditorPopupMixinClass extends superClass {
17
- static get properties() {
18
- return {
19
- target: {
20
- type: Object,
21
- },
22
-
23
- opened: {
24
- type: Boolean,
25
- notify: true,
26
- },
27
-
28
- colors: {
29
- type: Array,
30
- },
31
-
32
- renderer: {
33
- type: Object,
34
- },
35
- };
36
- }
37
-
38
- static get observers() {
39
- return ['__openedOrTargetChanged(opened, target)', '__colorsChanged(colors)'];
40
- }
41
-
42
- /** @private */
43
- __colorsChanged(colors) {
44
- this.renderer = (root) => {
45
- if (!root.firstChild) {
46
- colors.forEach((color) => {
47
- const btn = document.createElement('button');
48
- btn.style.background = color;
49
- btn.dataset.color = color;
50
- btn.addEventListener('click', () => {
51
- this.dispatchEvent(new CustomEvent('color-selected', { detail: { color } }));
52
- });
53
- root.appendChild(btn);
54
- });
55
- }
56
- };
57
- }
58
-
59
- /** @private */
60
- __openedOrTargetChanged(opened, target) {
61
- if (target) {
62
- target.setAttribute('aria-expanded', opened ? 'true' : 'false');
63
- }
64
- }
65
-
66
- /** @protected */
67
- _onOverlayEscapePress() {
68
- this.target.focus();
69
- }
70
- };
@@ -1,61 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
4
- *
5
- * This program is available under Vaadin Commercial License and Service Terms.
6
- *
7
- *
8
- * See https://vaadin.com/commercial-license-and-service-terms for the full
9
- * license.
10
- */
11
- import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
- import { contentStyles } from './vaadin-rich-text-editor-content-styles.js';
13
- import { toolbarStyles } from './vaadin-rich-text-editor-toolbar-styles.js';
14
-
15
- export const baseStyles = css`
16
- :host {
17
- display: flex;
18
- flex-direction: column;
19
- box-sizing: border-box;
20
- }
21
-
22
- :host([hidden]) {
23
- display: none !important;
24
- }
25
-
26
- .announcer {
27
- position: fixed;
28
- clip: rect(0, 0, 0, 0);
29
- }
30
-
31
- input[type='file'] {
32
- display: none;
33
- }
34
-
35
- .vaadin-rich-text-editor-container {
36
- display: flex;
37
- flex-direction: column;
38
- min-height: inherit;
39
- max-height: inherit;
40
- flex: auto;
41
- }
42
- `;
43
-
44
- export const statesStyles = css`
45
- :host([readonly]) [part='toolbar'] {
46
- display: none;
47
- }
48
-
49
- :host([disabled]) {
50
- pointer-events: none;
51
- opacity: 0.5;
52
- -webkit-user-select: none;
53
- user-select: none;
54
- }
55
-
56
- :host([disabled]) [part~='toolbar-button'] {
57
- background-color: transparent;
58
- }
59
- `;
60
-
61
- export const richTextEditorStyles = [baseStyles, contentStyles, toolbarStyles, statesStyles];
@@ -1,6 +0,0 @@
1
- import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
2
- import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog-styles.js';
3
- import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
4
- import '@vaadin/tooltip/theme/lumo/vaadin-tooltip-styles.js';
5
- import './vaadin-rich-text-editor-styles.js';
6
- import '../../src/vaadin-lit-rich-text-editor.js';
@@ -1,6 +0,0 @@
1
- import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
2
- import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog-styles.js';
3
- import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
4
- import '@vaadin/tooltip/theme/lumo/vaadin-tooltip-styles.js';
5
- import './vaadin-rich-text-editor-styles.js';
6
- import '../../src/vaadin-lit-rich-text-editor.js';