@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
package/README.md CHANGED
@@ -28,29 +28,6 @@ Once installed, import the component in your application:
28
28
  import '@vaadin/rich-text-editor';
29
29
  ```
30
30
 
31
- ## Themes
32
-
33
- Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
34
- The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/rich-text-editor/vaadin-rich-text-editor.js) of the package uses the Lumo theme.
35
-
36
- To use the Material theme, import the component from the `theme/material` folder:
37
-
38
- ```js
39
- import '@vaadin/rich-text-editor/theme/material/vaadin-rich-text-editor.js';
40
- ```
41
-
42
- You can also import the Lumo version of the component explicitly:
43
-
44
- ```js
45
- import '@vaadin/rich-text-editor/theme/lumo/vaadin-rich-text-editor.js';
46
- ```
47
-
48
- Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
49
-
50
- ```js
51
- import '@vaadin/rich-text-editor/src/vaadin-rich-text-editor.js';
52
- ```
53
-
54
31
  ## Contributing
55
32
 
56
33
  Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/rich-text-editor",
3
- "version": "24.8.4",
3
+ "version": "25.0.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -19,11 +19,10 @@
19
19
  "main": "vaadin-rich-text-editor.js",
20
20
  "module": "vaadin-rich-text-editor.js",
21
21
  "type": "module",
22
- "scripts": {
23
- "icons": "gulp icons --gulpfile gulpfile.cjs"
24
- },
25
22
  "files": [
26
23
  "src",
24
+ "!src/styles/*-base-styles.d.ts",
25
+ "!src/styles/*-base-styles.js",
27
26
  "theme",
28
27
  "vaadin-*.d.ts",
29
28
  "vaadin-*.js",
@@ -35,31 +34,25 @@
35
34
  "Vaadin",
36
35
  "vaadin-rich-text-editor",
37
36
  "web-components",
38
- "web-component",
39
- "polymer"
37
+ "web-component"
40
38
  ],
41
39
  "dependencies": {
42
40
  "@open-wc/dedupe-mixin": "^1.3.0",
43
- "@polymer/polymer": "^3.0.0",
44
- "@vaadin/button": "~24.8.4",
45
- "@vaadin/component-base": "~24.8.4",
46
- "@vaadin/confirm-dialog": "~24.8.4",
47
- "@vaadin/overlay": "~24.8.4",
48
- "@vaadin/text-field": "~24.8.4",
49
- "@vaadin/tooltip": "~24.8.4",
50
- "@vaadin/vaadin-lumo-styles": "~24.8.4",
51
- "@vaadin/vaadin-material-styles": "~24.8.4",
52
- "@vaadin/vaadin-themable-mixin": "~24.8.4",
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",
53
49
  "lit": "^3.0.0"
54
50
  },
55
51
  "devDependencies": {
56
- "@vaadin/a11y-base": "~24.8.4",
57
- "@vaadin/chai-plugins": "~24.8.4",
58
- "@vaadin/test-runner-commands": "~24.8.4",
59
- "@vaadin/testing-helpers": "^1.1.0",
60
- "gulp": "^5.0.0",
61
- "gulp-cli": "^3.0.0",
62
- "gulp-iconfont": "^11.0.0",
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",
55
+ "@vaadin/testing-helpers": "^2.0.0",
63
56
  "sinon": "^18.0.0"
64
57
  },
65
58
  "cvdlName": "vaadin-rich-text-editor",
@@ -67,5 +60,5 @@
67
60
  "web-types.json",
68
61
  "web-types.lit.json"
69
62
  ],
70
- "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
63
+ "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
71
64
  }
package/src/styles/vaadin-rich-text-editor-base-icons.js ADDED
@@ -0,0 +1,36 @@
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
+ export const icons = css`
14
+ :host {
15
+ --_vaadin-icon-align-center: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 10H6M21 6H3M21 14H3M18 18H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
16
+ --_vaadin-icon-align-left: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 10H3M20 6H3M20 14H3M16 18H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
17
+ --_vaadin-icon-align-right: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 10H8M21 6H4M21 14H4M21 18H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
18
+ --_vaadin-icon-background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6 12L12 9.4L8 13.4L10.575 16L14.6 12ZM13.425 8L16 10.575L20 6.6L17.4 4L13.425 8ZM11.325 7.275L16.725 12.675L12 17.425C11.6 17.825 11.1292 18.025 10.5875 18.025C10.0458 18.025 9.575 17.825 9.175 17.425L8.5 18H3.5L6.65 14.875C6.25 14.475 6.04167 13.9958 6.025 13.4375C6.00833 12.8792 6.2 12.4 6.6 12L11.325 7.275ZM11.325 7.275L16 2.6C16.4 2.2 16.8708 2 17.4125 2C17.9542 2 18.425 2.2 18.825 2.6L21.425 5.175C21.825 5.575 22.025 6.04583 22.025 6.5875C22.025 7.12917 21.825 7.6 21.425 8L16.725 12.675L11.325 7.275Z" fill="currentColor"/></svg>');
19
+ --_vaadin-icon-bold: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linejoin="round" d="M6.75 3.744h-.753v8.25h7.125a4.125 4.125 0 0 0 0-8.25H6.75Zm0 0v.38m0 16.122h6.747a4.5 4.5 0 0 0 0-9.001h-7.5v9h.753Zm0 0v-.37m0-15.751h6a3.75 3.75 0 1 1 0 7.5h-6m0-7.5v7.5m0 0v8.25m0-8.25h6.375a4.125 4.125 0 0 1 0 8.25H6.75m.747-15.38h4.875a3.375 3.375 0 0 1 0 6.75H7.497v-6.75Zm0 7.5h5.25a3.75 3.75 0 0 1 0 7.5h-5.25v-7.5Z" /></svg>');
20
+ --_vaadin-icon-clear: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="m528-546-93-93-121-121h486v120H568l-40 94ZM792-56 460-388l-80 188H249l119-280L56-792l56-56 736 736-56 56Z"/></svg>');
21
+ --_vaadin-icon-code: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 18L22 12L16 6M8 6L2 12L8 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
22
+ --_vaadin-icon-color: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 17L10.75 3H13.25L18.5 17H16.1L14.85 13.4H9.2L7.9 17H5.5ZM9.9 11.4H14.1L12.05 5.6H11.95L9.9 11.4Z" fill="currentColor"/></svg>');
23
+ --_vaadin-icon-color-underline: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 24V20H22V24H2Z" fill="currentColor"/></svg>');
24
+ --_vaadin-icon-h1: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25" /></svg>');
25
+ --_vaadin-icon-h2: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" /></svg>');
26
+ --_vaadin-icon-h3: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" /></svg>');
27
+ --_vaadin-icon-italic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.248 20.246H9.05m0 0h3.696m-3.696 0 5.893-16.502m0 0h-3.697m3.697 0h3.803" /></svg>');
28
+ --_vaadin-icon-list-number: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" /></svg>');
29
+ --_vaadin-icon-list-bullet: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>');
30
+ --_vaadin-icon-quote: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg>');
31
+ --_vaadin-icon-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12a8.912 8.912 0 0 1-.318-.079c-1.585-.424-2.904-1.247-3.76-2.236-.873-1.009-1.265-2.19-.968-3.301.59-2.2 3.663-3.29 6.863-2.432A8.186 8.186 0 0 1 16.5 5.21M6.42 17.81c.857.99 2.176 1.812 3.761 2.237 3.2.858 6.274-.23 6.863-2.431.233-.868.044-1.779-.465-2.617M3.75 12h16.5" /></svg>');
32
+ --_vaadin-icon-subscript: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M760-160v-80q0-17 11.5-28.5T800-280h80v-40H760v-40h120q17 0 28.5 11.5T920-320v40q0 17-11.5 28.5T880-240h-80v40h120v40H760Zm-525-80 185-291-172-269h106l124 200h4l123-200h107L539-531l186 291H618L482-457h-4L342-240H235Z"/></svg>');
33
+ --_vaadin-icon-superscript: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M760-600v-80q0-17 11.5-28.5T800-720h80v-40H760v-40h120q17 0 28.5 11.5T920-760v40q0 17-11.5 28.5T880-680h-80v40h120v40H760ZM235-160l185-291-172-269h106l124 200h4l123-200h107L539-451l186 291H618L482-377h-4L342-160H235Z"/></svg>');
34
+ --_vaadin-icon-underline: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.995 3.744v7.5a6 6 0 1 1-12 0v-7.5m-2.25 16.502h16.5" /></svg>');
35
+ }
36
+ `;
package/src/styles/vaadin-rich-text-editor-base-styles.d.ts ADDED
@@ -0,0 +1,13 @@
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;
package/src/styles/vaadin-rich-text-editor-base-styles.js ADDED
@@ -0,0 +1,346 @@
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
+ import { icons } from './vaadin-rich-text-editor-base-icons.js';
13
+
14
+ const base = css`
15
+ :host {
16
+ background: var(--vaadin-rich-text-editor-background, var(--vaadin-background-color));
17
+ border: var(--vaadin-input-field-border-width, 1px) solid
18
+ var(--vaadin-input-field-border-color, var(--vaadin-border-color-strong));
19
+ border-radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
20
+ box-sizing: border-box;
21
+ display: flex;
22
+ flex-direction: column;
23
+ overflow: hidden;
24
+ }
25
+
26
+ :host(:focus-within) {
27
+ outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
28
+ outline-offset: -1px;
29
+ }
30
+
31
+ :host([hidden]) {
32
+ display: none !important;
33
+ }
34
+
35
+ .announcer {
36
+ clip: rect(0, 0, 0, 0);
37
+ position: fixed;
38
+ }
39
+
40
+ input[type='file'] {
41
+ display: none;
42
+ }
43
+
44
+ .vaadin-rich-text-editor-container {
45
+ display: flex;
46
+ flex: auto;
47
+ flex-direction: column;
48
+ max-height: inherit;
49
+ min-height: inherit;
50
+ }
51
+ `;
52
+
53
+ export const content = css`
54
+ [part='content'] {
55
+ box-sizing: border-box;
56
+ display: flex;
57
+ flex: auto;
58
+ flex-direction: column;
59
+ overflow: hidden;
60
+ position: relative;
61
+ }
62
+
63
+ /*
64
+ Quill core styles.
65
+ CSS selectors removed: margin & padding reset, check list, indentation, video, colors, ordered & unordered list, h1-6, anchor
66
+ */
67
+ .ql-clipboard {
68
+ height: 1px;
69
+ left: -100000px;
70
+ overflow-y: hidden;
71
+ position: absolute;
72
+ top: 50%;
73
+ }
74
+
75
+ .ql-clipboard p {
76
+ margin: 0;
77
+ padding: 0;
78
+ }
79
+
80
+ .ql-editor {
81
+ box-sizing: border-box;
82
+ color: var(--vaadin-rich-text-editor-editor-color, var(--vaadin-color));
83
+ flex: 1;
84
+ font-size: var(--vaadin-rich-text-editor-editor-font-size, inherit);
85
+ height: 100%;
86
+ line-height: var(--vaadin-rich-text-editor-editor-line-height, inherit);
87
+ outline: none;
88
+ overflow-y: auto;
89
+ padding: var(--vaadin-rich-text-editor-editor-padding, var(--vaadin-padding-container));
90
+ tab-size: 4;
91
+ -moz-tab-size: 4;
92
+ text-align: left;
93
+ white-space: pre-wrap;
94
+ word-wrap: break-word;
95
+ }
96
+
97
+ .ql-editor > * {
98
+ cursor: text;
99
+ }
100
+
101
+ .ql-align-left {
102
+ text-align: left;
103
+ }
104
+
105
+ .ql-direction-rtl {
106
+ direction: rtl;
107
+ text-align: inherit;
108
+ }
109
+
110
+ .ql-align-center {
111
+ text-align: center;
112
+ }
113
+
114
+ .ql-align-justify {
115
+ text-align: justify;
116
+ }
117
+
118
+ .ql-align-right {
119
+ text-align: right;
120
+ }
121
+ /* quill core end */
122
+
123
+ blockquote {
124
+ border-inline-start: 4px solid var(--vaadin-border-color);
125
+ margin: var(--vaadin-padding-container);
126
+ padding-inline-start: var(--vaadin-padding);
127
+ }
128
+
129
+ code,
130
+ pre {
131
+ background-color: var(--vaadin-background-container);
132
+ border-radius: var(--vaadin-radius-s);
133
+ }
134
+
135
+ pre {
136
+ white-space: pre-wrap;
137
+ margin-block: var(--vaadin-padding);
138
+ padding: var(--vaadin-padding-container);
139
+ }
140
+
141
+ code {
142
+ padding: 0.125rem 0.25rem;
143
+ }
144
+
145
+ img {
146
+ max-width: 100%;
147
+ }
148
+
149
+ /* RTL specific styles */
150
+ :host([dir='rtl']) .ql-editor {
151
+ direction: rtl;
152
+ text-align: right;
153
+ }
154
+ `;
155
+
156
+ const toolbar = css`
157
+ [part='toolbar'] {
158
+ background-color: var(--vaadin-rich-text-editor-toolbar-background, var(--vaadin-background-container));
159
+ display: flex;
160
+ flex-shrink: 0;
161
+ flex-wrap: wrap;
162
+ gap: var(--vaadin-rich-text-editor-toolbar-gap, var(--vaadin-gap-container-inline));
163
+ padding: var(--vaadin-rich-text-editor-toolbar-padding, var(--vaadin-padding));
164
+ }
165
+
166
+ [part~='toolbar-group'] {
167
+ display: flex;
168
+ }
169
+
170
+ [part~='toolbar-button'] {
171
+ background: var(--vaadin-rich-text-editor-toolbar-button-background, var(--vaadin-background-container));
172
+ border: var(--vaadin-rich-text-editor-toolbar-button-border-width, 1px) solid
173
+ var(--vaadin-rich-text-editor-toolbar-button-border-color, transparent);
174
+ border-radius: var(--vaadin-rich-text-editor-toolbar-button-border-radius, var(--vaadin-radius-m));
175
+ color: var(--vaadin-rich-text-editor-toolbar-button-text-color, var(--vaadin-color));
176
+ cursor: var(--vaadin-clickable-cursor);
177
+ flex-shrink: 0;
178
+ font-family: var(--vaadin-rich-text-editor-toolbar-button-font-family, inherit);
179
+ font-size: var(--vaadin-rich-text-editor-toolbar-button-font-size, inherit);
180
+ font-weight: var(--vaadin-rich-text-editor-toolbar-button-font-weight, 500);
181
+ height: var(--vaadin-rich-text-editor-toolbar-button-height, auto);
182
+ line-height: var(--vaadin-rich-text-editor-toolbar-button-line-height, inherit);
183
+ padding: var(--vaadin-rich-text-editor-toolbar-button-padding, var(--vaadin-padding-container));
184
+ position: relative;
185
+ }
186
+
187
+ [part~='toolbar-button']::before {
188
+ background: currentcolor;
189
+ content: '';
190
+ display: block;
191
+ height: var(--vaadin-icon-size, 1lh);
192
+ width: var(--vaadin-icon-size, 1lh);
193
+ }
194
+
195
+ [part~='toolbar-button']:focus {
196
+ outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
197
+ outline-offset: 1px;
198
+ z-index: 1;
199
+ }
200
+
201
+ [part~='toolbar-button'][on],
202
+ [part~='toolbar-button'][aria-expanded='true'] {
203
+ --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container-strong);
204
+ }
205
+
206
+ [part~='toolbar-button-undo']::before {
207
+ mask-image: var(--_vaadin-icon-undo);
208
+ }
209
+
210
+ [part~='toolbar-button-redo']::before {
211
+ mask-image: var(--_vaadin-icon-redo);
212
+ }
213
+
214
+ [part~='toolbar-button-bold']::before {
215
+ mask-image: var(--_vaadin-icon-bold);
216
+ }
217
+
218
+ [part~='toolbar-button-italic']::before {
219
+ mask-image: var(--_vaadin-icon-italic);
220
+ }
221
+
222
+ [part~='toolbar-button-underline']::before {
223
+ mask-image: var(--_vaadin-icon-underline);
224
+ }
225
+
226
+ [part~='toolbar-button-strike']::before {
227
+ mask-image: var(--_vaadin-icon-strikethrough);
228
+ }
229
+
230
+ [part~='toolbar-button-color']::before {
231
+ mask-image: var(--_vaadin-icon-color);
232
+ }
233
+
234
+ [part~='toolbar-button-color']::after {
235
+ background-color: var(--_color-value, currentColor);
236
+ }
237
+
238
+ [part~='toolbar-button-background']::before {
239
+ mask-image: var(--_vaadin-icon-background);
240
+ }
241
+
242
+ [part~='toolbar-button-background']::after {
243
+ background-color: var(--_background-value, currentColor);
244
+ }
245
+
246
+ [part~='toolbar-button-color']::after,
247
+ [part~='toolbar-button-background']::after {
248
+ bottom: 50%;
249
+ content: '';
250
+ display: block;
251
+ height: var(--vaadin-icon-size, 1lh);
252
+ mask-image: var(--_vaadin-icon-color-underline);
253
+ position: absolute;
254
+ transform: translateY(50%);
255
+ width: var(--vaadin-icon-size, 1lh);
256
+ }
257
+
258
+ [part~='toolbar-button-h1']::before {
259
+ mask-image: var(--_vaadin-icon-h1);
260
+ }
261
+
262
+ [part~='toolbar-button-h2']::before {
263
+ mask-image: var(--_vaadin-icon-h2);
264
+ }
265
+
266
+ [part~='toolbar-button-h3']::before {
267
+ mask-image: var(--_vaadin-icon-h3);
268
+ }
269
+
270
+ [part~='toolbar-button-subscript']::before {
271
+ mask-image: var(--_vaadin-icon-subscript);
272
+ }
273
+
274
+ [part~='toolbar-button-superscript']::before {
275
+ mask-image: var(--_vaadin-icon-superscript);
276
+ }
277
+
278
+ [part~='toolbar-button-list-ordered']::before {
279
+ mask-image: var(--_vaadin-icon-list-number);
280
+ }
281
+
282
+ [part~='toolbar-button-list-bullet']::before {
283
+ mask-image: var(--_vaadin-icon-list-bullet);
284
+ }
285
+
286
+ [part~='toolbar-button-align-left']::before {
287
+ mask-image: var(--_vaadin-icon-align-left);
288
+ }
289
+
290
+ [part~='toolbar-button-align-center']::before {
291
+ mask-image: var(--_vaadin-icon-align-center);
292
+ }
293
+
294
+ [part~='toolbar-button-align-right']::before {
295
+ mask-image: var(--_vaadin-icon-align-right);
296
+ }
297
+
298
+ [part~='toolbar-button-image']::before {
299
+ mask-image: var(--_vaadin-icon-image);
300
+ }
301
+
302
+ [part~='toolbar-button-link']::before {
303
+ mask-image: var(--_vaadin-icon-link);
304
+ }
305
+
306
+ [part~='toolbar-button-blockquote']::before {
307
+ mask-image: var(--_vaadin-icon-quote);
308
+ }
309
+
310
+ [part~='toolbar-button-code-block']::before {
311
+ mask-image: var(--_vaadin-icon-code);
312
+ }
313
+
314
+ [part~='toolbar-button-clean']::before {
315
+ mask-image: var(--_vaadin-icon-clear);
316
+ }
317
+
318
+ @media (forced-colors: active) {
319
+ [part~='toolbar-button']::before {
320
+ background: CanvasText;
321
+ }
322
+
323
+ [part~='toolbar-button'][on] {
324
+ background: Highlight;
325
+ }
326
+
327
+ [part~='toolbar-button'][on]::before {
328
+ background: HighlightText;
329
+ }
330
+ }
331
+ `;
332
+
333
+ const states = css`
334
+ :host([readonly]) [part='toolbar'] {
335
+ display: none;
336
+ }
337
+
338
+ :host([disabled]) {
339
+ pointer-events: none;
340
+ opacity: 0.5;
341
+ -webkit-user-select: none;
342
+ user-select: none;
343
+ }
344
+ `;
345
+
346
+ export const richTextEditorStyles = [icons, base, content, toolbar, states];
package/src/styles/vaadin-rich-text-editor-core-styles.d.ts ADDED
@@ -0,0 +1,13 @@
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;
package/src/{vaadin-rich-text-editor-toolbar-styles.js → styles/vaadin-rich-text-editor-core-styles.js} RENAMED
@@ -8,10 +8,142 @@
8
8
  * See https://vaadin.com/commercial-license-and-service-terms for the full
9
9
  * license.
10
10
  */
11
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
- import { iconsStyles } from './vaadin-rich-text-editor-icons.js';
11
+ import { css } from 'lit';
13
12
 
14
- export const buttonsStyles = css`
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`
15
147
  [part='toolbar'] {
16
148
  display: flex;
17
149
  flex-wrap: wrap;
@@ -177,7 +309,21 @@ export const buttonsStyles = css`
177
309
  }
178
310
  `;
179
311
 
180
- export const toolbarStyles = [iconsStyles, buttonsStyles];
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
+ `;
181
328
 
182
- // Register a module with ID for backwards compatibility.
183
- registerStyles('', toolbarStyles, { moduleId: 'vaadin-rich-text-editor-toolbar-styles' });
329
+ export const richTextEditorStyles = [base, content, toolbar, states];