@vaadin/rich-text-editor 24.4.6 → 24.5.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 (18) hide show
  1. package/README.md +1 -1
  2. package/package.json +15 -14
  3. package/src/vaadin-lit-rich-text-editor-popup.js +91 -0
  4. package/src/vaadin-lit-rich-text-editor.js +46 -0
  5. package/src/vaadin-rich-text-editor-mixin.d.ts +12 -0
  6. package/src/vaadin-rich-text-editor-mixin.js +91 -1
  7. package/src/vaadin-rich-text-editor-popup-mixin.js +70 -0
  8. package/src/vaadin-rich-text-editor-popup.js +88 -0
  9. package/src/vaadin-rich-text-editor-toolbar-styles.js +34 -0
  10. package/src/vaadin-rich-text-editor.d.ts +3 -0
  11. package/src/vaadin-rich-text-editor.js +37 -0
  12. package/theme/lumo/vaadin-rich-text-editor-styles.js +50 -3
  13. package/theme/material/vaadin-rich-text-editor-styles.js +40 -0
  14. package/vendor/vaadin-quill.js +3 -3
  15. package/vendor/vaadin-quill.js.map +1 -0
  16. package/web-types.json +13 -2
  17. package/web-types.lit.json +9 -2
  18. package/vendor/vaadin-quill.min.js.map +0 -1
package/theme/lumo/vaadin-rich-text-editor-styles.js CHANGED
@@ -3,9 +3,37 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
3
3
  import '@vaadin/vaadin-lumo-styles/spacing.js';
4
4
  import '@vaadin/vaadin-lumo-styles/style.js';
5
5
  import { color } from '@vaadin/vaadin-lumo-styles/color.js';
6
+ import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
6
7
  import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
7
8
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
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
+
9
37
  const richTextEditor = css`
10
38
  :host {
11
39
  min-height: calc(var(--lumo-size-m) * 8);
@@ -29,10 +57,13 @@ const richTextEditor = css`
29
57
  color: var(--lumo-contrast-60pct);
30
58
  margin: 2px 1px;
31
59
  cursor: var(--lumo-clickable-cursor);
32
- transition: background-color 100ms, color 100ms;
60
+ transition:
61
+ background-color 100ms,
62
+ color 100ms;
33
63
  }
34
64
 
35
- [part~='toolbar-button']:focus {
65
+ [part~='toolbar-button']:focus,
66
+ [part~='toolbar-button'][aria-expanded='true'] {
36
67
  outline: none;
37
68
  box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
38
69
  }
@@ -40,7 +71,6 @@ const richTextEditor = css`
40
71
  [part~='toolbar-button']:hover {
41
72
  background-color: var(--lumo-contrast-5pct);
42
73
  color: var(--lumo-contrast-80pct);
43
- box-shadow: none;
44
74
  }
45
75
 
46
76
  @media (hover: none) {
@@ -73,6 +103,8 @@ const richTextEditor = css`
73
103
  }
74
104
 
75
105
  [part~='toolbar-button-bold']::before,
106
+ [part~='toolbar-button-background']::before,
107
+ [part~='toolbar-button-color']::before,
76
108
  [part~='toolbar-button-italic']::before,
77
109
  [part~='toolbar-button-underline']::before,
78
110
  [part~='toolbar-button-strike']::before {
@@ -84,6 +116,21 @@ const richTextEditor = css`
84
116
  font-weight: 700;
85
117
  }
86
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: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
126
+ linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
127
+ }
128
+
129
+ [part~='toolbar-button-background']:active::before {
130
+ background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
131
+ linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
132
+ }
133
+
87
134
  [part~='toolbar-button-h1']::before,
88
135
  [part~='toolbar-button-h2']::before,
89
136
  [part~='toolbar-button-h3']::before {
package/theme/material/vaadin-rich-text-editor-styles.js CHANGED
@@ -1,7 +1,35 @@
1
1
  import '@vaadin/vaadin-material-styles/color.js';
2
+ import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
2
3
  import { typography } from '@vaadin/vaadin-material-styles/typography.js';
3
4
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
4
5
 
6
+ const popupOverlay = css`
7
+ [part='overlay'] {
8
+ margin: 0.25rem 0;
9
+ }
10
+
11
+ [part='content'] {
12
+ padding: 0.25rem;
13
+ max-width: calc(7 * (var(--_button-size) + var(--_button-margin) * 2));
14
+ display: flex;
15
+ flex-wrap: wrap;
16
+ justify-content: center;
17
+ --_button-size: 1.25rem;
18
+ --_button-margin: 3px;
19
+ }
20
+
21
+ [part='content'] ::slotted(button) {
22
+ border: none;
23
+ width: var(--_button-size);
24
+ height: var(--_button-size);
25
+ margin: var(--_button-margin);
26
+ }
27
+ `;
28
+
29
+ registerStyles('vaadin-rich-text-editor-popup-overlay', [overlay, popupOverlay], {
30
+ moduleId: 'material-rich-text-editor-popup-overlay',
31
+ });
32
+
5
33
  const richTextEditor = css`
6
34
  :host {
7
35
  background-color: var(--material-background-color);
@@ -37,6 +65,10 @@ const richTextEditor = css`
37
65
  color: inherit;
38
66
  }
39
67
 
68
+ [part~='toolbar-button'][aria-expanded='true'] {
69
+ outline: -webkit-focus-ring-color auto 1px;
70
+ }
71
+
40
72
  [part~='toolbar-button'][on] {
41
73
  background-color: rgba(0, 0, 0, 0.1);
42
74
  color: inherit;
@@ -71,6 +103,14 @@ const richTextEditor = css`
71
103
  font-size: 20px;
72
104
  }
73
105
 
106
+ [part~='toolbar-button-background']::before {
107
+ background-color: var(--material-secondary-background-color);
108
+ }
109
+
110
+ [part~='toolbar-button-background']::after {
111
+ inset: 0.25rem;
112
+ }
113
+
74
114
  /* TODO unsupported selector */
75
115
  [part='content'] > .ql-editor {
76
116
  padding: 0 16px;