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

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/rich-text-editor",
3
- "version": "25.0.0-alpha10",
3
+ "version": "25.0.0-alpha11",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -21,9 +21,6 @@
21
21
  "type": "module",
22
22
  "files": [
23
23
  "src",
24
- "!src/styles/*-base-styles.d.ts",
25
- "!src/styles/*-base-styles.js",
26
- "theme",
27
24
  "vaadin-*.d.ts",
28
25
  "vaadin-*.js",
29
26
  "vendor",
@@ -38,21 +35,21 @@
38
35
  ],
39
36
  "dependencies": {
40
37
  "@open-wc/dedupe-mixin": "^1.3.0",
41
- "@vaadin/button": "25.0.0-alpha10",
42
- "@vaadin/component-base": "25.0.0-alpha10",
43
- "@vaadin/confirm-dialog": "25.0.0-alpha10",
44
- "@vaadin/overlay": "25.0.0-alpha10",
45
- "@vaadin/text-field": "25.0.0-alpha10",
46
- "@vaadin/tooltip": "25.0.0-alpha10",
47
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
48
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
38
+ "@vaadin/button": "25.0.0-alpha11",
39
+ "@vaadin/component-base": "25.0.0-alpha11",
40
+ "@vaadin/confirm-dialog": "25.0.0-alpha11",
41
+ "@vaadin/overlay": "25.0.0-alpha11",
42
+ "@vaadin/text-field": "25.0.0-alpha11",
43
+ "@vaadin/tooltip": "25.0.0-alpha11",
44
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha11",
49
45
  "lit": "^3.0.0"
50
46
  },
51
47
  "devDependencies": {
52
- "@vaadin/a11y-base": "25.0.0-alpha10",
53
- "@vaadin/chai-plugins": "25.0.0-alpha10",
54
- "@vaadin/test-runner-commands": "25.0.0-alpha10",
48
+ "@vaadin/a11y-base": "25.0.0-alpha11",
49
+ "@vaadin/chai-plugins": "25.0.0-alpha11",
50
+ "@vaadin/test-runner-commands": "25.0.0-alpha11",
55
51
  "@vaadin/testing-helpers": "^2.0.0",
52
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
56
53
  "sinon": "^18.0.0"
57
54
  },
58
55
  "cvdlName": "vaadin-rich-text-editor",
@@ -60,5 +57,5 @@
60
57
  "web-types.json",
61
58
  "web-types.lit.json"
62
59
  ],
63
- "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
60
+ "gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
64
61
  }
@@ -16,7 +16,7 @@ import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
16
16
  import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
17
17
  import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
18
18
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
19
- import { richTextEditorPopupOverlayStyles } from './styles/vaadin-rich-text-editor-popup-overlay-core-styles.js';
19
+ import { richTextEditorPopupOverlayStyles } from './styles/vaadin-rich-text-editor-popup-overlay-base-styles.js';
20
20
 
21
21
  /**
22
22
  * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
@@ -19,7 +19,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
19
19
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
20
20
  import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
21
21
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
22
- import { richTextEditorStyles } from './styles/vaadin-rich-text-editor-core-styles.js';
22
+ import { richTextEditorStyles } from './styles/vaadin-rich-text-editor-base-styles.js';
23
23
  import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
24
24
 
25
25
  /**
@@ -1,2 +1,2 @@
1
- import './theme/lumo/vaadin-rich-text-editor.js';
1
+ import './src/vaadin-rich-text-editor.js';
2
2
  export * from './src/vaadin-rich-text-editor.js';
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": "25.0.0-alpha10",
4
+ "version": "25.0.0-alpha11",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/rich-text-editor",
4
- "version": "25.0.0-alpha10",
4
+ "version": "25.0.0-alpha11",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -1,13 +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 type { CSSResult } from 'lit';
12
-
13
- export const richTextEditorStyles: CSSResult;
@@ -1,329 +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 'lit';
12
-
13
- const base = css`
14
- :host {
15
- display: flex;
16
- flex-direction: column;
17
- box-sizing: border-box;
18
- }
19
-
20
- :host([hidden]) {
21
- display: none !important;
22
- }
23
-
24
- .announcer {
25
- position: fixed;
26
- clip: rect(0, 0, 0, 0);
27
- }
28
-
29
- input[type='file'] {
30
- display: none;
31
- }
32
-
33
- .vaadin-rich-text-editor-container {
34
- display: flex;
35
- flex-direction: column;
36
- min-height: inherit;
37
- max-height: inherit;
38
- flex: auto;
39
- }
40
- `;
41
-
42
- export const content = css`
43
- [part='content'] {
44
- box-sizing: border-box;
45
- position: relative;
46
- flex: auto;
47
- display: flex;
48
- flex-direction: column;
49
- overflow: hidden;
50
- }
51
-
52
- /*
53
- Quill core styles.
54
- CSS selectors removed: margin & padding reset, check list, indentation, video, colors, ordered & unordered list, h1-6, anchor
55
- */
56
- .ql-clipboard {
57
- left: -100000px;
58
- height: 1px;
59
- overflow-y: hidden;
60
- position: absolute;
61
- top: 50%;
62
- }
63
-
64
- .ql-clipboard p {
65
- margin: 0;
66
- padding: 0;
67
- }
68
-
69
- .ql-editor {
70
- box-sizing: border-box;
71
- line-height: 1.42;
72
- height: 100%;
73
- outline: none;
74
- overflow-y: auto;
75
- padding: 0.75em 1em;
76
- -moz-tab-size: 4;
77
- tab-size: 4;
78
- text-align: left;
79
- white-space: pre-wrap;
80
- word-wrap: break-word;
81
- flex: 1;
82
- }
83
-
84
- .ql-editor > * {
85
- cursor: text;
86
- }
87
-
88
- .ql-align-left {
89
- text-align: left;
90
- }
91
-
92
- .ql-direction-rtl {
93
- direction: rtl;
94
- text-align: inherit;
95
- }
96
-
97
- .ql-align-center {
98
- text-align: center;
99
- }
100
-
101
- .ql-align-justify {
102
- text-align: justify;
103
- }
104
-
105
- .ql-align-right {
106
- text-align: right;
107
- }
108
- /* quill core end */
109
-
110
- blockquote {
111
- border-left: 0.25em solid #ccc;
112
- margin-bottom: 0.3125em;
113
- margin-top: 0.3125em;
114
- padding-left: 1em;
115
- }
116
-
117
- code,
118
- pre {
119
- background-color: #f0f0f0;
120
- border-radius: 0.1875em;
121
- }
122
-
123
- pre {
124
- white-space: pre-wrap;
125
- margin-bottom: 0.3125em;
126
- margin-top: 0.3125em;
127
- padding: 0.3125em 0.625em;
128
- }
129
-
130
- code {
131
- font-size: 85%;
132
- padding: 0.125em 0.25em;
133
- }
134
-
135
- img {
136
- max-width: 100%;
137
- }
138
-
139
- /* RTL specific styles */
140
- :host([dir='rtl']) .ql-editor {
141
- direction: rtl;
142
- text-align: right;
143
- }
144
- `;
145
-
146
- const toolbar = css`
147
- [part='toolbar'] {
148
- display: flex;
149
- flex-wrap: wrap;
150
- flex-shrink: 0;
151
- }
152
-
153
- [part~='toolbar-button'] {
154
- width: 2em;
155
- height: 2em;
156
- margin: 0;
157
- padding: 0;
158
- font: inherit;
159
- line-height: 1;
160
- text-transform: none;
161
- background: transparent;
162
- border: none;
163
- position: relative;
164
- }
165
-
166
- [part~='toolbar-button']:hover {
167
- outline: none;
168
- }
169
-
170
- @media (forced-colors: active) {
171
- [part~='toolbar-button']:focus,
172
- [part~='toolbar-button']:hover {
173
- outline: 1px solid !important;
174
- }
175
-
176
- [part~='toolbar-button'][on] {
177
- outline: 2px solid;
178
- outline-offset: -1px;
179
- }
180
- }
181
-
182
- [part~='toolbar-button']::before {
183
- position: absolute;
184
- top: 50%;
185
- left: 50%;
186
- transform: translate(-50%, -50%);
187
- }
188
-
189
- [part~='toolbar-button-undo']::before,
190
- [part~='toolbar-button-redo']::before,
191
- [part~='toolbar-button-list-ordered']::before,
192
- [part~='toolbar-button-list-bullet']::before,
193
- [part~='toolbar-button-align-left']::before,
194
- [part~='toolbar-button-align-center']::before,
195
- [part~='toolbar-button-align-right']::before,
196
- [part~='toolbar-button-image']::before,
197
- [part~='toolbar-button-link']::before,
198
- [part~='toolbar-button-clean']::before {
199
- font-family: 'vaadin-rte-icons', sans-serif;
200
- }
201
-
202
- [part~='toolbar-group'] {
203
- display: flex;
204
- margin: 0 0.5em;
205
- }
206
-
207
- [part~='toolbar-button-bold']::before {
208
- content: 'B';
209
- font-weight: 700;
210
- }
211
-
212
- [part~='toolbar-button-italic']::before {
213
- content: 'I';
214
- font-style: italic;
215
- }
216
-
217
- [part~='toolbar-button-underline']::before {
218
- content: 'U';
219
- text-decoration: underline;
220
- }
221
-
222
- [part~='toolbar-button-strike']::before {
223
- content: 'T';
224
- text-decoration: line-through;
225
- }
226
-
227
- [part~='toolbar-button-h1']::before {
228
- content: 'H1';
229
- font-size: 1.25em;
230
- }
231
-
232
- [part~='toolbar-button-h2']::before {
233
- content: 'H2';
234
- font-size: 1em;
235
- }
236
-
237
- [part~='toolbar-button-h3']::before {
238
- content: 'H3';
239
- font-size: 0.875em;
240
- }
241
-
242
- [part~='toolbar-button-h1']::before,
243
- [part~='toolbar-button-h2']::before,
244
- [part~='toolbar-button-h3']::before {
245
- letter-spacing: -0.05em;
246
- }
247
-
248
- [part~='toolbar-button-subscript']::before,
249
- [part~='toolbar-button-superscript']::before {
250
- content: 'X';
251
- }
252
-
253
- [part~='toolbar-button-subscript']::after,
254
- [part~='toolbar-button-superscript']::after {
255
- content: '2';
256
- position: absolute;
257
- top: 50%;
258
- left: 70%;
259
- font-size: 0.625em;
260
- }
261
-
262
- [part~='toolbar-button-superscript']::after {
263
- top: 20%;
264
- }
265
-
266
- [part~='toolbar-button-blockquote']::before {
267
- content: '\\201D';
268
- font-size: 2em;
269
- height: 0.6em;
270
- }
271
-
272
- [part~='toolbar-button-code-block']::before {
273
- content: '</>';
274
- font-size: 0.875em;
275
- }
276
-
277
- [part~='toolbar-button-background']::before,
278
- [part~='toolbar-button-color']::before {
279
- content: 'A';
280
- font-size: 1em;
281
- }
282
-
283
- [part~='toolbar-button-color']::after {
284
- content: '';
285
- position: absolute;
286
- bottom: 4px;
287
- left: 25%;
288
- right: 25%;
289
- width: 50%;
290
- height: 4px;
291
- background-color: var(--_color-value, currentColor);
292
- }
293
-
294
- [part~='toolbar-button-background']::before {
295
- z-index: 1;
296
- }
297
-
298
- [part~='toolbar-button-background']::after {
299
- content: '';
300
- position: absolute;
301
- inset: 20%;
302
- background: repeating-linear-gradient(
303
- 135deg,
304
- var(--_background-value, currentColor),
305
- var(--_background-value, currentColor) 1px,
306
- transparent 1px,
307
- transparent 2px
308
- );
309
- }
310
- `;
311
-
312
- const states = css`
313
- :host([readonly]) [part='toolbar'] {
314
- display: none;
315
- }
316
-
317
- :host([disabled]) {
318
- pointer-events: none;
319
- opacity: 0.5;
320
- -webkit-user-select: none;
321
- user-select: none;
322
- }
323
-
324
- :host([disabled]) [part~='toolbar-button'] {
325
- background-color: transparent;
326
- }
327
- `;
328
-
329
- export const richTextEditorStyles = [base, content, toolbar, states];
@@ -1,13 +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 { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
12
-
13
- export const richTextEditorPopupOverlayStyles = [overlayStyles];
@@ -1,4 +0,0 @@
1
- import '@vaadin/vaadin-lumo-styles/font-icons.js';
2
- import '@vaadin/vaadin-lumo-styles/sizing.js';
3
- import '@vaadin/vaadin-lumo-styles/spacing.js';
4
- import '@vaadin/vaadin-lumo-styles/style.js';
@@ -1,297 +0,0 @@
1
- import '@vaadin/vaadin-lumo-styles/font-icons.js';
2
- import '@vaadin/vaadin-lumo-styles/sizing.js';
3
- import '@vaadin/vaadin-lumo-styles/spacing.js';
4
- import '@vaadin/vaadin-lumo-styles/style.js';
5
- import { color } from '@vaadin/vaadin-lumo-styles/color.js';
6
- import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
7
- import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
8
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
-
10
- const popupOverlay = css`
11
- [part='overlay'] {
12
- margin: var(--lumo-space-xs) 0;
13
- }
14
-
15
- [part='content'] {
16
- padding: var(--lumo-space-xs);
17
- max-width: calc(7 * (var(--_button-size) + var(--_button-margin) * 2));
18
- display: flex;
19
- flex-wrap: wrap;
20
- justify-content: center;
21
- --_button-size: 1.25rem;
22
- --_button-margin: 3px;
23
- }
24
-
25
- [part='content'] ::slotted(button) {
26
- border: none;
27
- width: var(--_button-size);
28
- height: var(--_button-size);
29
- margin: var(--_button-margin);
30
- }
31
- `;
32
-
33
- registerStyles('vaadin-rich-text-editor-popup-overlay', [overlay, popupOverlay], {
34
- moduleId: 'lumo-rich-text-editor-popup-overlay',
35
- });
36
-
37
- const richTextEditor = css`
38
- :host {
39
- min-height: calc(var(--lumo-size-m) * 8);
40
- --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
41
- --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
42
- }
43
-
44
- [part='toolbar'] {
45
- background-color: var(--lumo-contrast-5pct);
46
- padding: calc(var(--lumo-space-s) - 1px) var(--lumo-space-xs);
47
- }
48
-
49
- [part~='toolbar-group'] {
50
- margin: 0 calc(var(--lumo-space-l) / 2 - 1px);
51
- }
52
-
53
- [part~='toolbar-button'] {
54
- width: var(--lumo-size-m);
55
- height: var(--lumo-size-m);
56
- border-radius: var(--lumo-border-radius-m);
57
- color: var(--lumo-contrast-60pct);
58
- margin: 2px 1px;
59
- cursor: var(--lumo-clickable-cursor);
60
- transition:
61
- background-color 100ms,
62
- color 100ms;
63
- }
64
-
65
- [part~='toolbar-button']:focus,
66
- [part~='toolbar-button'][aria-expanded='true'] {
67
- outline: none;
68
- box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
69
- }
70
-
71
- [part~='toolbar-button']:hover {
72
- background-color: var(--lumo-contrast-5pct);
73
- color: var(--lumo-contrast-80pct);
74
- }
75
-
76
- @media (hover: none) {
77
- [part~='toolbar-button']:hover {
78
- background-color: transparent;
79
- }
80
- }
81
-
82
- [part~='toolbar-button'][on] {
83
- background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
84
- color: var(--lumo-primary-contrast-color);
85
- }
86
-
87
- [part~='toolbar-button']:active {
88
- background-color: var(--lumo-contrast-10pct);
89
- color: var(--lumo-contrast-90pct);
90
- }
91
-
92
- [part~='toolbar-button']::before {
93
- font-family: 'lumo-icons', var(--lumo-font-family);
94
- font-size: var(--lumo-icon-size-m);
95
- }
96
-
97
- [part~='toolbar-button-undo']::before {
98
- content: var(--lumo-icons-undo);
99
- }
100
-
101
- [part~='toolbar-button-redo']::before {
102
- content: var(--lumo-icons-redo);
103
- }
104
-
105
- [part~='toolbar-button-bold']::before,
106
- [part~='toolbar-button-background']::before,
107
- [part~='toolbar-button-color']::before,
108
- [part~='toolbar-button-italic']::before,
109
- [part~='toolbar-button-underline']::before,
110
- [part~='toolbar-button-strike']::before {
111
- font-size: var(--lumo-font-size-m);
112
- font-weight: 600;
113
- }
114
-
115
- [part~='toolbar-button-bold']::before {
116
- font-weight: 700;
117
- }
118
-
119
- [part~='toolbar-button-background']::before {
120
- background-color: var(--lumo-base-color);
121
- background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
122
- }
123
-
124
- [part~='toolbar-button-background']:hover::before {
125
- background-image:
126
- linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
127
- linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
128
- }
129
-
130
- [part~='toolbar-button-background']:active::before {
131
- background-image:
132
- linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
133
- linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
134
- }
135
-
136
- [part~='toolbar-button-h1']::before,
137
- [part~='toolbar-button-h2']::before,
138
- [part~='toolbar-button-h3']::before {
139
- font-weight: 600;
140
- }
141
-
142
- [part~='toolbar-button-h1']::before {
143
- font-size: var(--lumo-font-size-m);
144
- }
145
-
146
- [part~='toolbar-button-h2']::before {
147
- font-size: var(--lumo-font-size-s);
148
- }
149
-
150
- [part~='toolbar-button-h3']::before {
151
- font-size: var(--lumo-font-size-xs);
152
- }
153
-
154
- [part~='toolbar-button-subscript']::before,
155
- [part~='toolbar-button-superscript']::before {
156
- font-weight: 600;
157
- font-size: var(--lumo-font-size-s);
158
- }
159
-
160
- [part~='toolbar-button-subscript']::after,
161
- [part~='toolbar-button-superscript']::after {
162
- font-size: 0.625em;
163
- font-weight: 700;
164
- }
165
-
166
- [part~='toolbar-button-list-ordered']::before {
167
- content: var(--lumo-icons-ordered-list);
168
- }
169
-
170
- [part~='toolbar-button-list-bullet']::before {
171
- content: var(--lumo-icons-unordered-list);
172
- }
173
-
174
- [part~='toolbar-button-align-left']::before {
175
- content: var(--lumo-icons-align-left);
176
- }
177
-
178
- [part~='toolbar-button-align-center']::before {
179
- content: var(--lumo-icons-align-center);
180
- }
181
-
182
- [part~='toolbar-button-align-right']::before {
183
- content: var(--lumo-icons-align-right);
184
- }
185
-
186
- [part~='toolbar-button-blockquote']::before {
187
- font-size: var(--lumo-font-size-xxl);
188
- }
189
-
190
- [part~='toolbar-button-code-block']::before {
191
- content: var(--lumo-icons-angle-left) var(--lumo-icons-angle-right);
192
- font-size: var(--lumo-font-size-l);
193
- letter-spacing: -0.5em;
194
- margin-left: -0.25em;
195
- font-weight: 600;
196
- }
197
-
198
- [part~='toolbar-button-image']::before {
199
- content: var(--lumo-icons-photo);
200
- }
201
-
202
- [part~='toolbar-button-link']::before {
203
- content: var(--lumo-icons-link);
204
- }
205
-
206
- [part~='toolbar-button-clean']::before {
207
- content: var(--lumo-icons-clean);
208
- font-size: var(--lumo-font-size-l);
209
- }
210
-
211
- [part='content'] {
212
- background-color: var(--lumo-base-color);
213
- }
214
-
215
- /* TODO unsupported selector */
216
- [part='content'] > .ql-editor {
217
- padding: 0 var(--lumo-space-m);
218
- line-height: inherit;
219
- }
220
-
221
- /* Theme variants */
222
-
223
- /* No border */
224
- :host(:not([theme~='no-border'])) {
225
- border: 1px solid var(--lumo-contrast-20pct);
226
- }
227
-
228
- :host(:not([theme~='no-border']):not([readonly])) [part='content'] {
229
- border-top: 1px solid var(--lumo-contrast-20pct);
230
- }
231
-
232
- :host([theme~='no-border']) [part='toolbar'] {
233
- padding-top: var(--lumo-space-s);
234
- padding-bottom: var(--lumo-space-s);
235
- }
236
-
237
- /* Compact */
238
- :host([theme~='compact']) {
239
- min-height: calc(var(--lumo-size-m) * 6);
240
- }
241
-
242
- :host([theme~='compact']) [part='toolbar'] {
243
- padding: var(--lumo-space-xs) 0;
244
- }
245
-
246
- :host([theme~='compact'][theme~='no-border']) [part='toolbar'] {
247
- padding: calc(var(--lumo-space-xs) + 1px) 0;
248
- }
249
-
250
- :host([theme~='compact']) [part~='toolbar-button'] {
251
- width: var(--lumo-size-s);
252
- height: var(--lumo-size-s);
253
- }
254
-
255
- :host([theme~='compact']) [part~='toolbar-group'] {
256
- margin: 0 calc(var(--lumo-space-m) / 2 - 1px);
257
- }
258
-
259
- /* RTL specific styles */
260
- :host([dir='rtl']) [part~='toolbar-button-redo']::before {
261
- content: var(--lumo-icons-undo);
262
- }
263
-
264
- :host([dir='rtl']) [part~='toolbar-button-undo']::before {
265
- content: var(--lumo-icons-redo);
266
- }
267
- `;
268
-
269
- const contentStyles = css`
270
- :where(h1, h2, h3, h4, h5, h6) {
271
- margin-top: 1.25em;
272
- }
273
-
274
- :where(h1) {
275
- margin-bottom: 0.75em;
276
- }
277
-
278
- :where(h2) {
279
- margin-bottom: 0.5em;
280
- }
281
-
282
- :where(h3) {
283
- margin-bottom: 0.5em;
284
- }
285
-
286
- :where(h4) {
287
- margin-bottom: 0.5em;
288
- }
289
-
290
- :where(h5) {
291
- margin-bottom: 0.25em;
292
- }
293
- `;
294
-
295
- registerStyles('vaadin-rich-text-editor', [color, typography, richTextEditor, contentStyles], {
296
- moduleId: 'lumo-rich-text-editor',
297
- });
@@ -1,6 +0,0 @@
1
- import '@vaadin/button/theme/lumo/vaadin-button.js';
2
- import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
3
- import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
4
- import '@vaadin/tooltip/theme/lumo/vaadin-tooltip.js';
5
- import './vaadin-rich-text-editor-styles.js';
6
- import '../../src/vaadin-rich-text-editor.js';
@@ -1,6 +0,0 @@
1
- import '@vaadin/button/theme/lumo/vaadin-button.js';
2
- import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
3
- import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
4
- import '@vaadin/tooltip/theme/lumo/vaadin-tooltip.js';
5
- import './vaadin-rich-text-editor-styles.js';
6
- import '../../src/vaadin-rich-text-editor.js';