@byline/richtext-lexical 6.10.0 → 6.11.0

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 (60) hide show
  1. package/dist/field/content-editable.css +22 -18
  2. package/dist/field/editor-component.css +33 -29
  3. package/dist/field/editor.css +1218 -1214
  4. package/dist/field/extensions/admonition/admonition-modal.css +20 -16
  5. package/dist/field/extensions/admonition/admonition-node.css +114 -110
  6. package/dist/field/extensions/admonition/icons/danger-icon.css +13 -9
  7. package/dist/field/extensions/admonition/icons/note-icon.css +13 -9
  8. package/dist/field/extensions/admonition/icons/tip-icon.css +13 -9
  9. package/dist/field/extensions/admonition/icons/warning-icon.css +13 -9
  10. package/dist/field/extensions/auto-embed/auto-embed-modal.css +14 -10
  11. package/dist/field/extensions/floating-text-format/index.css +130 -126
  12. package/dist/field/extensions/inline-image/inline-image-modal.css +120 -116
  13. package/dist/field/extensions/inline-image/inline-image-node-component.css +243 -239
  14. package/dist/field/extensions/layout/insert-layout-modal.css +16 -12
  15. package/dist/field/extensions/link/floating-link-editor.css +113 -109
  16. package/dist/field/extensions/link/link-target-fields.css +61 -57
  17. package/dist/field/normalize/adapted-notice.css +2 -4
  18. package/dist/field/plugins/table-plugin/table-modal.css +17 -13
  19. package/dist/field/themes/lexical-editor-theme.css +471 -467
  20. package/dist/field/ui/button.css +28 -24
  21. package/dist/field/ui/checkbox.css +43 -39
  22. package/dist/field/ui/color-picker.css +69 -65
  23. package/dist/field/ui/dialog.css +18 -14
  24. package/dist/field/ui/input.css +23 -19
  25. package/dist/field/ui/modal.css +66 -62
  26. package/dist/field/ui/placeholder.css +25 -21
  27. package/dist/field/ui/select.css +32 -28
  28. package/dist/field/ui/text-area.css +29 -25
  29. package/dist/richtext-field_module.css +21 -17
  30. package/package.json +6 -6
  31. package/src/field/content-editable.css +31 -17
  32. package/src/field/editor-component.css +56 -40
  33. package/src/field/editor.css +1248 -1232
  34. package/src/field/extensions/admonition/admonition-modal.css +32 -16
  35. package/src/field/extensions/admonition/admonition-node.css +105 -89
  36. package/src/field/extensions/admonition/icons/danger-icon.css +25 -9
  37. package/src/field/extensions/admonition/icons/note-icon.css +25 -9
  38. package/src/field/extensions/admonition/icons/tip-icon.css +25 -9
  39. package/src/field/extensions/admonition/icons/warning-icon.css +25 -9
  40. package/src/field/extensions/auto-embed/auto-embed-modal.css +25 -9
  41. package/src/field/extensions/floating-text-format/index.css +142 -126
  42. package/src/field/extensions/inline-image/inline-image-modal.css +144 -128
  43. package/src/field/extensions/inline-image/inline-image-node-component.css +258 -242
  44. package/src/field/extensions/layout/insert-layout-modal.css +28 -12
  45. package/src/field/extensions/link/floating-link-editor.css +129 -113
  46. package/src/field/extensions/link/link-target-fields.css +68 -52
  47. package/src/field/normalize/adapted-notice.css +5 -4
  48. package/src/field/plugins/table-plugin/table-modal.css +29 -13
  49. package/src/field/themes/lexical-editor-theme.css +508 -494
  50. package/src/field/ui/button.css +46 -30
  51. package/src/field/ui/checkbox.css +62 -46
  52. package/src/field/ui/color-picker.css +89 -73
  53. package/src/field/ui/dialog.css +30 -14
  54. package/src/field/ui/input.css +38 -22
  55. package/src/field/ui/modal.css +81 -65
  56. package/src/field/ui/placeholder.css +36 -20
  57. package/src/field/ui/select.css +46 -30
  58. package/src/field/ui/text-area.css +45 -29
  59. package/src/lexical-editor.tsx +2 -0
  60. package/src/richtext-field.module.css +38 -22
@@ -1,3 +1,15 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+ @layer byline-components.primitives, byline-components.cms;
1
13
  /**
2
14
  * Copyright (c) Meta Platforms, Inc. and affiliates.
3
15
  *
@@ -6,594 +18,596 @@
6
18
  *
7
19
  *
8
20
  */
9
- .LexicalEditorTheme__ltr {
10
- text-align: left;
11
- }
21
+ @layer byline-components.cms {
22
+ .LexicalEditorTheme__ltr {
23
+ text-align: left;
24
+ }
12
25
 
13
- .LexicalEditorTheme__rtl {
14
- text-align: right;
15
- }
26
+ .LexicalEditorTheme__rtl {
27
+ text-align: right;
28
+ }
16
29
 
17
- .LexicalEditorTheme__paragraph {
18
- margin: 0 0 1em 0;
19
- position: relative;
20
- }
30
+ .LexicalEditorTheme__paragraph {
31
+ margin: 0 0 1em 0;
32
+ position: relative;
33
+ }
21
34
 
22
- .LexicalEditorTheme__quote {
23
- margin-bottom: 1.75rem;
24
- margin-top: 1.75rem;
25
- margin-left: 20px;
26
- font-size: 1.2rem;
27
- color: rgb(128, 130, 134);
28
- border-left-color: rgb(206, 208, 212);
29
- border-left-width: 4px;
30
- border-left-style: solid;
31
- padding-left: 16px;
32
- }
35
+ .LexicalEditorTheme__quote {
36
+ margin-bottom: 1.75rem;
37
+ margin-top: 1.75rem;
38
+ margin-left: 20px;
39
+ font-size: 1.2rem;
40
+ color: rgb(128, 130, 134);
41
+ border-left-color: rgb(206, 208, 212);
42
+ border-left-width: 4px;
43
+ border-left-style: solid;
44
+ padding-left: 16px;
45
+ }
33
46
 
34
- .LexicalEditorTheme__h1,
35
- .LexicalEditorTheme__h2,
36
- .LexicalEditorTheme__h3,
37
- .LexicalEditorTheme__h4 {
38
- font-weight: 700;
39
- font-family: inherit;
40
- }
47
+ .LexicalEditorTheme__h1,
48
+ .LexicalEditorTheme__h2,
49
+ .LexicalEditorTheme__h3,
50
+ .LexicalEditorTheme__h4 {
51
+ font-weight: 700;
52
+ font-family: inherit;
53
+ }
41
54
 
42
- .LexicalEditorTheme__h1 {
43
- font-size: 2.5rem;
44
- margin-bottom: 1.5rem;
45
- }
55
+ .LexicalEditorTheme__h1 {
56
+ font-size: 2.5rem;
57
+ margin-bottom: 1.5rem;
58
+ }
46
59
 
47
- .LexicalEditorTheme__h2 {
48
- font-size: 2rem;
49
- margin-top: 0.5rem;
50
- margin-bottom: 1.5rem;
51
- }
60
+ .LexicalEditorTheme__h2 {
61
+ font-size: 2rem;
62
+ margin-top: 0.5rem;
63
+ margin-bottom: 1.5rem;
64
+ }
52
65
 
53
- .LexicalEditorTheme__h3 {
54
- font-size: 1.5rem;
55
- margin-top: 1rem;
56
- margin-bottom: 1.5rem;
57
- }
66
+ .LexicalEditorTheme__h3 {
67
+ font-size: 1.5rem;
68
+ margin-top: 1rem;
69
+ margin-bottom: 1.5rem;
70
+ }
58
71
 
59
- .LexicalEditorTheme__h4 {
60
- font-size: 1.125rem;
61
- margin-top: 1rem;
62
- margin-bottom: 1rem;
63
- }
72
+ .LexicalEditorTheme__h4 {
73
+ font-size: 1.125rem;
74
+ margin-top: 1rem;
75
+ margin-bottom: 1rem;
76
+ }
64
77
 
65
- .LexicalEditorTheme__indent {
66
- --lexical-indent-base-value: 40px;
67
- }
78
+ .LexicalEditorTheme__indent {
79
+ --lexical-indent-base-value: 40px;
80
+ }
68
81
 
69
- .LexicalEditorTheme__textBold {
70
- font-weight: bold;
71
- }
82
+ .LexicalEditorTheme__textBold {
83
+ font-weight: bold;
84
+ }
72
85
 
73
- .LexicalEditorTheme__textItalic {
74
- font-style: italic;
75
- }
86
+ .LexicalEditorTheme__textItalic {
87
+ font-style: italic;
88
+ }
76
89
 
77
- .LexicalEditorTheme__textUnderline {
78
- text-decoration: underline;
79
- }
90
+ .LexicalEditorTheme__textUnderline {
91
+ text-decoration: underline;
92
+ }
80
93
 
81
- .LexicalEditorTheme__textStrikethrough {
82
- text-decoration: line-through;
83
- }
94
+ .LexicalEditorTheme__textStrikethrough {
95
+ text-decoration: line-through;
96
+ }
84
97
 
85
- .LexicalEditorTheme__textUnderlineStrikethrough {
86
- text-decoration: underline line-through;
87
- }
98
+ .LexicalEditorTheme__textUnderlineStrikethrough {
99
+ text-decoration: underline line-through;
100
+ }
88
101
 
89
- .LexicalEditorTheme__textSubscript {
90
- font-size: 0.8em;
91
- vertical-align: sub;
92
- }
102
+ .LexicalEditorTheme__textSubscript {
103
+ font-size: 0.8em;
104
+ vertical-align: sub;
105
+ }
93
106
 
94
- .LexicalEditorTheme__textSuperscript {
95
- font-size: 0.8em;
96
- vertical-align: super;
97
- }
107
+ .LexicalEditorTheme__textSuperscript {
108
+ font-size: 0.8em;
109
+ vertical-align: super;
110
+ }
98
111
 
99
- .LexicalEditorTheme__textCode {
100
- color: #1e293b;
101
- font-weight: 400;
102
- font-size: 0.875em;
103
- background-color: rgb(245 245 244 / 30);
104
- border-radius: 0.25rem;
105
- border-width: 1px;
106
- padding-left: 0.375rem;
107
- padding-right: 0.375rem;
108
- padding-top: 0.125rem;
109
- padding-bottom: 0.125rem;
110
- border-style: solid;
111
- border-color: #e5e7eb;
112
- font-family: Menlo, Consolas, Monaco, monospace;
113
- }
112
+ .LexicalEditorTheme__textCode {
113
+ color: #1e293b;
114
+ font-weight: 400;
115
+ font-size: 0.875em;
116
+ background-color: rgb(245 245 244 / 30);
117
+ border-radius: 0.25rem;
118
+ border-width: 1px;
119
+ padding-left: 0.375rem;
120
+ padding-right: 0.375rem;
121
+ padding-top: 0.125rem;
122
+ padding-bottom: 0.125rem;
123
+ border-style: solid;
124
+ border-color: #e5e7eb;
125
+ font-family: Menlo, Consolas, Monaco, monospace;
126
+ }
114
127
 
115
- html[data-theme="dark"] .LexicalEditorTheme__textCode,
116
- .dark .LexicalEditorTheme__textCode {
117
- color: #f1f5f9;
118
- background-color: #1e293b;
119
- border-color: #495362;
120
- }
128
+ html[data-theme="dark"] .LexicalEditorTheme__textCode,
129
+ .dark .LexicalEditorTheme__textCode {
130
+ color: #f1f5f9;
131
+ background-color: #1e293b;
132
+ border-color: #495362;
133
+ }
121
134
 
122
- .LexicalEditorTheme__hashtag {
123
- background-color: rgba(88, 144, 255, 0.15);
124
- border-bottom: 1px solid rgba(88, 144, 255, 0.3);
125
- }
135
+ .LexicalEditorTheme__hashtag {
136
+ background-color: rgba(88, 144, 255, 0.15);
137
+ border-bottom: 1px solid rgba(88, 144, 255, 0.3);
138
+ }
126
139
 
127
- .LexicalEditorTheme__link {
128
- color: rgb(33, 111, 219);
129
- text-decoration: none;
130
- pointer-events: none;
131
- border-bottom: 1px dotted;
132
- }
140
+ .LexicalEditorTheme__link {
141
+ color: rgb(33, 111, 219);
142
+ text-decoration: none;
143
+ pointer-events: none;
144
+ border-bottom: 1px dotted;
145
+ }
133
146
 
134
- .LexicalEditorTheme__link:hover {
135
- text-decoration: underline;
136
- cursor: pointer;
137
- }
147
+ .LexicalEditorTheme__link:hover {
148
+ text-decoration: underline;
149
+ cursor: pointer;
150
+ }
138
151
 
139
- .LexicalEditorTheme__code {
140
- background-color: rgb(240, 242, 245);
141
- font-family: Menlo, Consolas, Monaco, monospace;
142
- display: block;
143
- /* No left padding: the sticky gutter must sit flush at the block's left
152
+ .LexicalEditorTheme__code {
153
+ background-color: rgb(240, 242, 245);
154
+ font-family: Menlo, Consolas, Monaco, monospace;
155
+ display: block;
156
+ /* No left padding: the sticky gutter must sit flush at the block's left
144
157
  * edge. Any left padding offsets the gutter rightward and leaves a strip
145
158
  * to its left where scrolled code text peeks through. The gutter's own
146
159
  * padding + margin-right provides the spacing before the code. */
147
- padding: 8px 8px 8px 0;
148
- line-height: 1.53;
149
- font-size: 15px;
150
- margin: 0;
151
- margin-top: 8px;
152
- margin-bottom: 8px;
153
- tab-size: 2;
154
- /* Code lines must NOT wrap. The data-gutter line numbers track logical
160
+ padding: 8px 8px 8px 0;
161
+ line-height: 1.53;
162
+ font-size: 15px;
163
+ margin: 0;
164
+ margin-top: 8px;
165
+ margin-bottom: 8px;
166
+ tab-size: 2;
167
+ /* Code lines must NOT wrap. The data-gutter line numbers track logical
155
168
  * (newline-separated) lines; if lines wrap, the visual line count exceeds
156
169
  * the gutter and the numbers no longer line up. Overflow scrolls within
157
170
  * the block instead. max-width/box-sizing keep the scroll inside the code
158
171
  * element rather than blowing out the editor width. */
159
- white-space: pre;
160
- overflow-x: auto;
161
- position: relative;
162
- max-width: 100%;
163
- box-sizing: border-box;
164
- }
172
+ white-space: pre;
173
+ overflow-x: auto;
174
+ position: relative;
175
+ max-width: 100%;
176
+ box-sizing: border-box;
177
+ }
165
178
 
166
- .LexicalEditorTheme__code:before {
167
- content: attr(data-gutter);
168
- /* sticky + float keeps the gutter pinned to the left edge while the code
179
+ .LexicalEditorTheme__code:before {
180
+ content: attr(data-gutter);
181
+ /* sticky + float keeps the gutter pinned to the left edge while the code
169
182
  * scrolls horizontally (previously position: absolute, which scrolled out
170
183
  * of view with the content, leaving the line numbers behind). */
171
- position: sticky;
172
- float: left;
173
- left: 0;
174
- top: 0;
175
- z-index: 3;
176
- min-height: 100%;
177
- background-color: #eee;
178
- border-right: 1px solid #ccc;
179
- padding: 8px;
180
- margin-right: 10px;
181
- margin-top: -8px;
182
- color: #777;
183
- white-space: pre-wrap;
184
- text-align: right;
185
- min-width: 25px;
186
- }
184
+ position: sticky;
185
+ float: left;
186
+ left: 0;
187
+ top: 0;
188
+ z-index: 3;
189
+ min-height: 100%;
190
+ background-color: #eee;
191
+ border-right: 1px solid #ccc;
192
+ padding: 8px;
193
+ margin-right: 10px;
194
+ margin-top: -8px;
195
+ color: #777;
196
+ white-space: pre-wrap;
197
+ text-align: right;
198
+ min-width: 25px;
199
+ }
187
200
 
188
- html[data-theme="dark"] .LexicalEditorTheme__code,
189
- .dark .LexicalEditorTheme__code {
190
- background-color: #1a1a1a;
191
- }
201
+ html[data-theme="dark"] .LexicalEditorTheme__code,
202
+ .dark .LexicalEditorTheme__code {
203
+ background-color: #1a1a1a;
204
+ }
192
205
 
193
- html[data-theme="dark"] .LexicalEditorTheme__code:before,
194
- .dark .LexicalEditorTheme__code:before {
195
- background-color: #161616;
196
- border-right: 1px solid #ccc;
197
- color: #777;
198
- }
206
+ html[data-theme="dark"] .LexicalEditorTheme__code:before,
207
+ .dark .LexicalEditorTheme__code:before {
208
+ background-color: #161616;
209
+ border-right: 1px solid #ccc;
210
+ color: #777;
211
+ }
199
212
 
200
- .LexicalEditorTheme__table {
201
- border-collapse: collapse;
202
- border-spacing: 0;
203
- max-width: 100%;
204
- overflow-y: scroll;
205
- table-layout: fixed;
206
- width: 100%;
207
- margin: 30px 0;
208
- }
213
+ .LexicalEditorTheme__table {
214
+ border-collapse: collapse;
215
+ border-spacing: 0;
216
+ max-width: 100%;
217
+ overflow-y: scroll;
218
+ table-layout: fixed;
219
+ width: 100%;
220
+ margin: 30px 0;
221
+ }
209
222
 
210
- .LexicalEditorTheme__tableScrollableWrapper {
211
- overflow-x: auto;
212
- margin: 30px 0;
213
- }
223
+ .LexicalEditorTheme__tableScrollableWrapper {
224
+ overflow-x: auto;
225
+ margin: 30px 0;
226
+ }
214
227
 
215
- /* When wrapped for horizontal scroll, the wrapper owns the vertical margin
228
+ /* When wrapped for horizontal scroll, the wrapper owns the vertical margin
216
229
  so the table's own margin doesn't compound it. */
217
- .LexicalEditorTheme__tableScrollableWrapper > .LexicalEditorTheme__table {
218
- margin-top: 0;
219
- margin-bottom: 0;
220
- }
221
-
222
- .LexicalEditorTheme__tableSelected {
223
- outline: 2px solid rgb(60, 132, 244);
224
- }
225
-
226
- .LexicalEditorTheme__tableCell {
227
- border: 1px solid #bbb;
228
- min-width: 75px;
229
- vertical-align: top;
230
- text-align: start;
231
- padding: 6px 8px;
232
- position: relative;
233
- cursor: default;
234
- outline: none;
235
- }
230
+ .LexicalEditorTheme__tableScrollableWrapper > .LexicalEditorTheme__table {
231
+ margin-top: 0;
232
+ margin-bottom: 0;
233
+ }
236
234
 
237
- .LexicalEditorTheme__tableCellSortedIndicator {
238
- display: block;
239
- opacity: 0.5;
240
- position: absolute;
241
- bottom: 0;
242
- left: 0;
243
- width: 100%;
244
- height: 4px;
245
- background-color: #999;
246
- }
235
+ .LexicalEditorTheme__tableSelected {
236
+ outline: 2px solid rgb(60, 132, 244);
237
+ }
247
238
 
248
- .LexicalEditorTheme__tableCellResizer {
249
- position: absolute;
250
- right: -4px;
251
- height: 100%;
252
- width: 8px;
253
- cursor: ew-resize;
254
- z-index: 10;
255
- top: 0;
256
- }
239
+ .LexicalEditorTheme__tableCell {
240
+ border: 1px solid #bbb;
241
+ min-width: 75px;
242
+ vertical-align: top;
243
+ text-align: start;
244
+ padding: 6px 8px;
245
+ position: relative;
246
+ cursor: default;
247
+ outline: none;
248
+ }
257
249
 
258
- .LexicalEditorTheme__tableCellHeader {
259
- background-color: #f2f3f5;
260
- text-align: start;
261
- }
250
+ .LexicalEditorTheme__tableCellSortedIndicator {
251
+ display: block;
252
+ opacity: 0.5;
253
+ position: absolute;
254
+ bottom: 0;
255
+ left: 0;
256
+ width: 100%;
257
+ height: 4px;
258
+ background-color: #999;
259
+ }
262
260
 
263
- .LexicalEditorTheme__tableCellSelected {
264
- background-color: #c9dbf0;
265
- }
261
+ .LexicalEditorTheme__tableCellResizer {
262
+ position: absolute;
263
+ right: -4px;
264
+ height: 100%;
265
+ width: 8px;
266
+ cursor: ew-resize;
267
+ z-index: 10;
268
+ top: 0;
269
+ }
266
270
 
267
- .LexicalEditorTheme__tableCellPrimarySelected {
268
- border: 2px solid rgb(60, 132, 244);
269
- display: block;
270
- height: calc(100% - 2px);
271
- position: absolute;
272
- width: calc(100% - 2px);
273
- left: -1px;
274
- top: -1px;
275
- z-index: 2;
276
- }
271
+ .LexicalEditorTheme__tableCellHeader {
272
+ background-color: #f2f3f5;
273
+ text-align: start;
274
+ }
277
275
 
278
- .LexicalEditorTheme__tableCellEditing {
279
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
280
- border-radius: 3px;
281
- }
276
+ .LexicalEditorTheme__tableCellSelected {
277
+ background-color: #c9dbf0;
278
+ }
282
279
 
283
- .LexicalEditorTheme__tableAddColumns {
284
- position: absolute;
285
- top: 0;
286
- width: 20px;
287
- background-color: #eee;
288
- height: 100%;
289
- right: 0;
290
- animation: table-controls 0.2s ease;
291
- border: 0;
292
- cursor: pointer;
293
- }
280
+ .LexicalEditorTheme__tableCellPrimarySelected {
281
+ border: 2px solid rgb(60, 132, 244);
282
+ display: block;
283
+ height: calc(100% - 2px);
284
+ position: absolute;
285
+ width: calc(100% - 2px);
286
+ left: -1px;
287
+ top: -1px;
288
+ z-index: 2;
289
+ }
294
290
 
295
- .LexicalEditorTheme__tableAddColumns:after {
296
- background-image: url(../images/icons/plus.svg);
297
- background-size: contain;
298
- background-position: center;
299
- background-repeat: no-repeat;
300
- display: block;
301
- content: " ";
302
- position: absolute;
303
- top: 0;
304
- left: 0;
305
- width: 100%;
306
- height: 100%;
307
- opacity: 0.4;
308
- }
291
+ .LexicalEditorTheme__tableCellEditing {
292
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
293
+ border-radius: 3px;
294
+ }
309
295
 
310
- .LexicalEditorTheme__tableAddColumns:hover {
311
- background-color: #c9dbf0;
312
- }
296
+ .LexicalEditorTheme__tableAddColumns {
297
+ position: absolute;
298
+ top: 0;
299
+ width: 20px;
300
+ background-color: #eee;
301
+ height: 100%;
302
+ right: 0;
303
+ animation: table-controls 0.2s ease;
304
+ border: 0;
305
+ cursor: pointer;
306
+ }
313
307
 
314
- .LexicalEditorTheme__tableAddRows {
315
- position: absolute;
316
- bottom: -25px;
317
- width: calc(100% - 25px);
318
- background-color: #eee;
319
- height: 20px;
320
- left: 0;
321
- animation: table-controls 0.2s ease;
322
- border: 0;
323
- cursor: pointer;
324
- }
308
+ .LexicalEditorTheme__tableAddColumns:after {
309
+ background-image: url(../images/icons/plus.svg);
310
+ background-size: contain;
311
+ background-position: center;
312
+ background-repeat: no-repeat;
313
+ display: block;
314
+ content: " ";
315
+ position: absolute;
316
+ top: 0;
317
+ left: 0;
318
+ width: 100%;
319
+ height: 100%;
320
+ opacity: 0.4;
321
+ }
325
322
 
326
- .LexicalEditorTheme__tableAddRows:after {
327
- background-image: url(../images/icons/plus.svg);
328
- background-size: contain;
329
- background-position: center;
330
- background-repeat: no-repeat;
331
- display: block;
332
- content: " ";
333
- position: absolute;
334
- top: 0;
335
- left: 0;
336
- width: 100%;
337
- height: 100%;
338
- opacity: 0.4;
339
- }
323
+ .LexicalEditorTheme__tableAddColumns:hover {
324
+ background-color: #c9dbf0;
325
+ }
340
326
 
341
- .LexicalEditorTheme__tableAddRows:hover {
342
- background-color: #c9dbf0;
343
- }
327
+ .LexicalEditorTheme__tableAddRows {
328
+ position: absolute;
329
+ bottom: -25px;
330
+ width: calc(100% - 25px);
331
+ background-color: #eee;
332
+ height: 20px;
333
+ left: 0;
334
+ animation: table-controls 0.2s ease;
335
+ border: 0;
336
+ cursor: pointer;
337
+ }
344
338
 
345
- @keyframes table-controls {
346
- 0% {
347
- opacity: 0;
339
+ .LexicalEditorTheme__tableAddRows:after {
340
+ background-image: url(../images/icons/plus.svg);
341
+ background-size: contain;
342
+ background-position: center;
343
+ background-repeat: no-repeat;
344
+ display: block;
345
+ content: " ";
346
+ position: absolute;
347
+ top: 0;
348
+ left: 0;
349
+ width: 100%;
350
+ height: 100%;
351
+ opacity: 0.4;
348
352
  }
349
353
 
350
- 100% {
351
- opacity: 1;
354
+ .LexicalEditorTheme__tableAddRows:hover {
355
+ background-color: #c9dbf0;
352
356
  }
353
- }
354
357
 
355
- .LexicalEditorTheme__tableCellResizeRuler {
356
- display: block;
357
- position: absolute;
358
- width: 1px;
359
- background-color: rgb(60, 132, 244);
360
- height: 100%;
361
- top: 0;
362
- }
358
+ @keyframes table-controls {
359
+ 0% {
360
+ opacity: 0;
361
+ }
363
362
 
364
- .LexicalEditorTheme__tableCellActionButtonContainer {
365
- display: block;
366
- right: 5px;
367
- top: 6px;
368
- position: absolute;
369
- z-index: 4;
370
- width: 20px;
371
- height: 20px;
372
- }
363
+ 100% {
364
+ opacity: 1;
365
+ }
366
+ }
373
367
 
374
- .LexicalEditorTheme__tableCellActionButton {
375
- background-color: #eee;
376
- display: block;
377
- border: 0;
378
- border-radius: 20px;
379
- width: 20px;
380
- height: 20px;
381
- color: #222;
382
- cursor: pointer;
383
- }
368
+ .LexicalEditorTheme__tableCellResizeRuler {
369
+ display: block;
370
+ position: absolute;
371
+ width: 1px;
372
+ background-color: rgb(60, 132, 244);
373
+ height: 100%;
374
+ top: 0;
375
+ }
384
376
 
385
- .LexicalEditorTheme__tableCellActionButton:hover {
386
- background-color: #ddd;
387
- }
377
+ .LexicalEditorTheme__tableCellActionButtonContainer {
378
+ display: block;
379
+ right: 5px;
380
+ top: 6px;
381
+ position: absolute;
382
+ z-index: 4;
383
+ width: 20px;
384
+ height: 20px;
385
+ }
388
386
 
389
- .LexicalEditorTheme__characterLimit {
390
- display: inline;
391
- background-color: #ffbbbb;
392
- }
387
+ .LexicalEditorTheme__tableCellActionButton {
388
+ background-color: #eee;
389
+ display: block;
390
+ border: 0;
391
+ border-radius: 20px;
392
+ width: 20px;
393
+ height: 20px;
394
+ color: #222;
395
+ cursor: pointer;
396
+ }
393
397
 
394
- .LexicalEditorTheme__ol1 {
395
- padding: 0;
396
- margin: 1.5rem 0 1.5rem 1rem;
397
- list-style: decimal;
398
- list-style-position: outside;
399
- }
398
+ .LexicalEditorTheme__tableCellActionButton:hover {
399
+ background-color: #ddd;
400
+ }
400
401
 
401
- .LexicalEditorTheme__ol2 {
402
- padding: 0;
403
- margin: 0 0 0.5rem 0;
404
- list-style-type: lower-alpha;
405
- list-style-position: outside;
406
- }
402
+ .LexicalEditorTheme__characterLimit {
403
+ display: inline;
404
+ background-color: #ffbbbb;
405
+ }
407
406
 
408
- .LexicalEditorTheme__ol3 {
409
- padding: 0;
410
- margin: 0 0 0.5rem 0;
411
- list-style-type: lower-roman;
412
- list-style-position: outside;
413
- }
407
+ .LexicalEditorTheme__ol1 {
408
+ padding: 0;
409
+ margin: 1.5rem 0 1.5rem 1rem;
410
+ list-style: decimal;
411
+ list-style-position: outside;
412
+ }
414
413
 
415
- .LexicalEditorTheme__ol4 {
416
- padding: 0;
417
- margin: 1.5rem 0 1.5rem 0;
418
- list-style-type: upper-roman;
419
- list-style-position: outside;
420
- }
414
+ .LexicalEditorTheme__ol2 {
415
+ padding: 0;
416
+ margin: 0 0 0.5rem 0;
417
+ list-style-type: lower-alpha;
418
+ list-style-position: outside;
419
+ }
421
420
 
422
- .LexicalEditorTheme__ol5 {
423
- padding: 0;
424
- margin: 1.5rem 0 1.5rem 0;
425
- list-style-type: lower-roman;
426
- list-style-position: outside;
427
- }
421
+ .LexicalEditorTheme__ol3 {
422
+ padding: 0;
423
+ margin: 0 0 0.5rem 0;
424
+ list-style-type: lower-roman;
425
+ list-style-position: outside;
426
+ }
428
427
 
429
- .LexicalEditorTheme__ul {
430
- padding: 0;
431
- margin: 0 0 0.5rem 0;
432
- list-style-position: outside;
433
- list-style-type: disc;
434
- }
428
+ .LexicalEditorTheme__ol4 {
429
+ padding: 0;
430
+ margin: 1.5rem 0 1.5rem 0;
431
+ list-style-type: upper-roman;
432
+ list-style-position: outside;
433
+ }
435
434
 
436
- .LexicalEditorTheme__listItem {
437
- margin: 0 32px;
438
- padding-left: 4px;
439
- }
435
+ .LexicalEditorTheme__ol5 {
436
+ padding: 0;
437
+ margin: 1.5rem 0 1.5rem 0;
438
+ list-style-type: lower-roman;
439
+ list-style-position: outside;
440
+ }
440
441
 
441
- .LexicalEditorTheme__listItemChecked,
442
- .LexicalEditorTheme__listItemUnchecked {
443
- position: relative;
444
- margin-left: 8px;
445
- margin-right: 8px;
446
- padding-left: 24px;
447
- padding-right: 24px;
448
- list-style-type: none;
449
- outline: none;
450
- }
442
+ .LexicalEditorTheme__ul {
443
+ padding: 0;
444
+ margin: 0 0 0.5rem 0;
445
+ list-style-position: outside;
446
+ list-style-type: disc;
447
+ }
451
448
 
452
- .LexicalEditorTheme__listItemChecked {
453
- text-decoration: line-through;
454
- }
449
+ .LexicalEditorTheme__listItem {
450
+ margin: 0 32px;
451
+ padding-left: 4px;
452
+ }
455
453
 
456
- .LexicalEditorTheme__listItemUnchecked:before,
457
- .LexicalEditorTheme__listItemChecked:before {
458
- content: "";
459
- width: 16px;
460
- height: 16px;
461
- top: 7px;
462
- left: 0;
463
- cursor: pointer;
464
- display: block;
465
- background-size: cover;
466
- position: absolute;
467
- }
454
+ .LexicalEditorTheme__listItemChecked,
455
+ .LexicalEditorTheme__listItemUnchecked {
456
+ position: relative;
457
+ margin-left: 8px;
458
+ margin-right: 8px;
459
+ padding-left: 24px;
460
+ padding-right: 24px;
461
+ list-style-type: none;
462
+ outline: none;
463
+ }
468
464
 
469
- .LexicalEditorTheme__listItemUnchecked[dir="rtl"]:before,
470
- .LexicalEditorTheme__listItemChecked[dir="rtl"]:before {
471
- left: auto;
472
- right: 0;
473
- }
465
+ .LexicalEditorTheme__listItemChecked {
466
+ text-decoration: line-through;
467
+ }
474
468
 
475
- .LexicalEditorTheme__listItemUnchecked:focus:before,
476
- .LexicalEditorTheme__listItemChecked:focus:before {
477
- box-shadow: 0 0 0 2px #a6cdfe;
478
- border-radius: 2px;
479
- }
469
+ .LexicalEditorTheme__listItemUnchecked:before,
470
+ .LexicalEditorTheme__listItemChecked:before {
471
+ content: "";
472
+ width: 16px;
473
+ height: 16px;
474
+ top: 7px;
475
+ left: 0;
476
+ cursor: pointer;
477
+ display: block;
478
+ background-size: cover;
479
+ position: absolute;
480
+ }
480
481
 
481
- .LexicalEditorTheme__listItemUnchecked:before {
482
- border: 1px solid #999;
483
- border-radius: 2px;
484
- }
482
+ .LexicalEditorTheme__listItemUnchecked[dir="rtl"]:before,
483
+ .LexicalEditorTheme__listItemChecked[dir="rtl"]:before {
484
+ left: auto;
485
+ right: 0;
486
+ }
485
487
 
486
- .LexicalEditorTheme__listItemChecked:before {
487
- border: 1px solid rgb(61, 135, 245);
488
- border-radius: 2px;
489
- background-color: #3d87f5;
490
- background-repeat: no-repeat;
491
- }
488
+ .LexicalEditorTheme__listItemUnchecked:focus:before,
489
+ .LexicalEditorTheme__listItemChecked:focus:before {
490
+ box-shadow: 0 0 0 2px #a6cdfe;
491
+ border-radius: 2px;
492
+ }
492
493
 
493
- .LexicalEditorTheme__listItemChecked:after {
494
- content: "";
495
- cursor: pointer;
496
- border-color: #fff;
497
- border-style: solid;
498
- position: absolute;
499
- display: block;
500
- top: 10px;
501
- width: 3px;
502
- left: 7px;
503
- right: 7px;
504
- height: 6px;
505
- transform: rotate(45deg);
506
- border-width: 0 2px 2px 0;
507
- }
494
+ .LexicalEditorTheme__listItemUnchecked:before {
495
+ border: 1px solid #999;
496
+ border-radius: 2px;
497
+ }
508
498
 
509
- .LexicalEditorTheme__nestedListItem {
510
- list-style-type: none;
511
- }
499
+ .LexicalEditorTheme__listItemChecked:before {
500
+ border: 1px solid rgb(61, 135, 245);
501
+ border-radius: 2px;
502
+ background-color: #3d87f5;
503
+ background-repeat: no-repeat;
504
+ }
512
505
 
513
- .LexicalEditorTheme__nestedListItem:before,
514
- .LexicalEditorTheme__nestedListItem:after {
515
- display: none;
516
- }
506
+ .LexicalEditorTheme__listItemChecked:after {
507
+ content: "";
508
+ cursor: pointer;
509
+ border-color: #fff;
510
+ border-style: solid;
511
+ position: absolute;
512
+ display: block;
513
+ top: 10px;
514
+ width: 3px;
515
+ left: 7px;
516
+ right: 7px;
517
+ height: 6px;
518
+ transform: rotate(45deg);
519
+ border-width: 0 2px 2px 0;
520
+ }
517
521
 
518
- .LexicalEditorTheme__tokenComment {
519
- color: slategray;
520
- }
522
+ .LexicalEditorTheme__nestedListItem {
523
+ list-style-type: none;
524
+ }
521
525
 
522
- .LexicalEditorTheme__tokenPunctuation {
523
- color: #999;
524
- }
526
+ .LexicalEditorTheme__nestedListItem:before,
527
+ .LexicalEditorTheme__nestedListItem:after {
528
+ display: none;
529
+ }
525
530
 
526
- .LexicalEditorTheme__tokenProperty {
527
- color: #905;
528
- }
531
+ .LexicalEditorTheme__tokenComment {
532
+ color: slategray;
533
+ }
529
534
 
530
- .LexicalEditorTheme__tokenSelector {
531
- color: #690;
532
- }
535
+ .LexicalEditorTheme__tokenPunctuation {
536
+ color: #999;
537
+ }
533
538
 
534
- .LexicalEditorTheme__tokenOperator {
535
- color: #9a6e3a;
536
- }
539
+ .LexicalEditorTheme__tokenProperty {
540
+ color: #905;
541
+ }
537
542
 
538
- .LexicalEditorTheme__tokenAttr {
539
- color: #07a;
540
- }
543
+ .LexicalEditorTheme__tokenSelector {
544
+ color: #690;
545
+ }
541
546
 
542
- .LexicalEditorTheme__tokenVariable {
543
- color: #e90;
544
- }
547
+ .LexicalEditorTheme__tokenOperator {
548
+ color: #9a6e3a;
549
+ }
545
550
 
546
- .LexicalEditorTheme__tokenFunction {
547
- color: #dd4a68;
548
- }
551
+ .LexicalEditorTheme__tokenAttr {
552
+ color: #07a;
553
+ }
549
554
 
550
- .LexicalEditorTheme__mark {
551
- background: rgba(255, 212, 0, 0.14);
552
- border-bottom: 2px solid rgba(255, 212, 0, 0.3);
553
- padding-bottom: 2px;
554
- }
555
+ .LexicalEditorTheme__tokenVariable {
556
+ color: #e90;
557
+ }
555
558
 
556
- .LexicalEditorTheme__markOverlap {
557
- background: rgba(255, 212, 0, 0.3);
558
- border-bottom: 2px solid rgba(255, 212, 0, 0.7);
559
- }
559
+ .LexicalEditorTheme__tokenFunction {
560
+ color: #dd4a68;
561
+ }
560
562
 
561
- .LexicalEditorTheme__mark.selected {
562
- background: rgba(255, 212, 0, 0.5);
563
- border-bottom: 2px solid rgba(255, 212, 0, 1);
564
- }
563
+ .LexicalEditorTheme__mark {
564
+ background: rgba(255, 212, 0, 0.14);
565
+ border-bottom: 2px solid rgba(255, 212, 0, 0.3);
566
+ padding-bottom: 2px;
567
+ }
565
568
 
566
- .LexicalEditorTheme__markOverlap.selected {
567
- background: rgba(255, 212, 0, 0.7);
568
- border-bottom: 2px solid rgba(255, 212, 0, 0.7);
569
- }
569
+ .LexicalEditorTheme__markOverlap {
570
+ background: rgba(255, 212, 0, 0.3);
571
+ border-bottom: 2px solid rgba(255, 212, 0, 0.7);
572
+ }
570
573
 
571
- .LexicalEditorTheme__embedBlock {
572
- user-select: none;
573
- }
574
+ .LexicalEditorTheme__mark.selected {
575
+ background: rgba(255, 212, 0, 0.5);
576
+ border-bottom: 2px solid rgba(255, 212, 0, 1);
577
+ }
574
578
 
575
- .LexicalEditorTheme__embedBlockFocus {
576
- outline: 2px solid rgb(60, 132, 244);
577
- }
579
+ .LexicalEditorTheme__markOverlap.selected {
580
+ background: rgba(255, 212, 0, 0.7);
581
+ border-bottom: 2px solid rgba(255, 212, 0, 0.7);
582
+ }
578
583
 
579
- .LexicalEditor__layoutContainer {
580
- display: grid;
581
- gap: 10px;
582
- margin: 10px 0;
583
- }
584
+ .LexicalEditorTheme__embedBlock {
585
+ user-select: none;
586
+ }
584
587
 
585
- .LexicalEditor__layoutItem {
586
- border: 1px dashed #ddd;
587
- padding: 8px 16px;
588
- }
588
+ .LexicalEditorTheme__embedBlockFocus {
589
+ outline: 2px solid rgb(60, 132, 244);
590
+ }
589
591
 
590
- .dark,
591
- [data-theme="dark"] {
592
- .LexicalEditorTheme__quote {
593
- color: rgb(187, 189, 192);
592
+ .LexicalEditor__layoutContainer {
593
+ display: grid;
594
+ gap: 10px;
595
+ margin: 10px 0;
594
596
  }
595
597
 
596
- .LexicalEditorTheme__tableCellHeader {
597
- background-color: var(--canvas-700);
598
+ .LexicalEditor__layoutItem {
599
+ border: 1px dashed #ddd;
600
+ padding: 8px 16px;
601
+ }
602
+
603
+ .dark,
604
+ [data-theme="dark"] {
605
+ .LexicalEditorTheme__quote {
606
+ color: rgb(187, 189, 192);
607
+ }
608
+
609
+ .LexicalEditorTheme__tableCellHeader {
610
+ background-color: var(--canvas-700);
611
+ }
598
612
  }
599
613
  }