@overlap/rte 0.1.4 → 0.1.6

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 +52 -40
  2. package/dist/components/Editor.d.ts.map +1 -1
  3. package/dist/components/Icons.d.ts +2 -0
  4. package/dist/components/Icons.d.ts.map +1 -1
  5. package/dist/constants.d.ts +9 -0
  6. package/dist/constants.d.ts.map +1 -0
  7. package/dist/hooks/useCheckbox.d.ts +23 -0
  8. package/dist/hooks/useCheckbox.d.ts.map +1 -0
  9. package/dist/hooks/useEditorEvents.d.ts +18 -0
  10. package/dist/hooks/useEditorEvents.d.ts.map +1 -0
  11. package/dist/hooks/useEditorInit.d.ts +23 -0
  12. package/dist/hooks/useEditorInit.d.ts.map +1 -0
  13. package/dist/hooks/useEditorSelection.d.ts +7 -0
  14. package/dist/hooks/useEditorSelection.d.ts.map +1 -0
  15. package/dist/index.d.ts +45 -7
  16. package/dist/index.d.ts.map +1 -1
  17. package/dist/index.esm.js +1294 -628
  18. package/dist/index.esm.js.map +1 -1
  19. package/dist/index.js +1295 -626
  20. package/dist/index.js.map +1 -1
  21. package/dist/plugins/blockFormat.d.ts +2 -2
  22. package/dist/plugins/blockFormat.d.ts.map +1 -1
  23. package/dist/styles.css +476 -386
  24. package/dist/types.d.ts +2 -2
  25. package/dist/types.d.ts.map +1 -1
  26. package/dist/utils/checkbox.d.ts +27 -0
  27. package/dist/utils/checkbox.d.ts.map +1 -0
  28. package/dist/utils/content.d.ts +19 -2
  29. package/dist/utils/content.d.ts.map +1 -1
  30. package/dist/utils/dom.d.ts +31 -0
  31. package/dist/utils/dom.d.ts.map +1 -0
  32. package/package.json +1 -7
package/dist/styles.css CHANGED
@@ -1,638 +1,728 @@
1
1
  /* CSS Variables für Theme-Support */
2
2
  :root {
3
- /* Colors */
4
- --rte-border-color: #e5e7eb;
5
- --rte-border-radius: 8px;
6
- --rte-toolbar-bg: #f9fafb;
7
- --rte-button-hover-bg: #f3f4f6;
8
- --rte-button-active-bg: #e5e7eb;
9
- --rte-content-bg: #ffffff;
10
- --rte-text-color: #111827;
11
- --rte-text-secondary: #6b7280;
12
- --rte-primary-color: #3b82f6;
13
- --rte-primary-hover: #2563eb;
14
-
15
- /* Spacing */
16
- --rte-padding-xs: 4px;
17
- --rte-padding-sm: 6px;
18
- --rte-padding-md: 8px;
19
- --rte-padding-lg: 12px;
20
- --rte-padding-xl: 16px;
21
- --rte-padding-2xl: 20px;
22
-
23
- /* Shadows */
24
- --rte-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
25
- --rte-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
26
- --rte-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
27
- --rte-shadow-popover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
28
-
29
- /* Typography */
30
- --rte-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
31
- --rte-line-height: 1.6;
3
+ /* Colors */
4
+ --rte-border-color: #e5e7eb;
5
+ --rte-border-radius: 8px;
6
+ --rte-toolbar-bg: #f9fafb;
7
+ --rte-button-hover-bg: #f3f4f6;
8
+ --rte-button-active-bg: #e5e7eb;
9
+ --rte-content-bg: #ffffff;
10
+ --rte-text-color: #111827;
11
+ --rte-text-secondary: #6b7280;
12
+ --rte-primary-color: #3b82f6;
13
+ --rte-primary-hover: #2563eb;
14
+
15
+ /* Spacing */
16
+ --rte-padding-xs: 4px;
17
+ --rte-padding-sm: 6px;
18
+ --rte-padding-md: 8px;
19
+ --rte-padding-lg: 12px;
20
+ --rte-padding-xl: 16px;
21
+ --rte-padding-2xl: 20px;
22
+
23
+ /* Shadows */
24
+ --rte-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
25
+ --rte-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
26
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
27
+ --rte-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
28
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
29
+ --rte-shadow-popover: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
30
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
31
+
32
+ /* Typography */
33
+ --rte-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
34
+ "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
35
+ "Helvetica Neue", sans-serif;
36
+ --rte-line-height: 1.6;
32
37
  }
33
38
 
34
39
  /* Container */
35
40
  .rte-container {
36
- display: flex;
37
- flex-direction: column;
38
- border: 1px solid var(--rte-border-color);
39
- border-radius: var(--rte-border-radius);
40
- background: var(--rte-content-bg);
41
- font-family: var(--rte-font-family);
42
- box-shadow: var(--rte-shadow-sm);
41
+ display: flex;
42
+ flex-direction: column;
43
+ border: 1px solid var(--rte-border-color);
44
+ border-radius: var(--rte-border-radius);
45
+ background: var(--rte-content-bg);
46
+ font-family: var(--rte-font-family);
47
+ box-shadow: var(--rte-shadow-sm);
43
48
  }
44
49
 
45
50
  /* Toolbar */
46
51
  .rte-toolbar {
47
- display: flex;
48
- justify-content: space-between;
49
- align-items: center;
50
- gap: var(--rte-padding-md);
51
- padding: var(--rte-padding-md);
52
- background: var(--rte-toolbar-bg);
53
- border-bottom: 1px solid var(--rte-border-color);
54
- border-top-left-radius: var(--rte-border-radius);
55
- border-top-right-radius: var(--rte-border-radius);
52
+ display: flex;
53
+ justify-content: space-between;
54
+ align-items: center;
55
+ gap: var(--rte-padding-md);
56
+ padding: var(--rte-padding-md);
57
+ background: var(--rte-toolbar-bg);
58
+ border-bottom: 1px solid var(--rte-border-color);
59
+ border-top-left-radius: var(--rte-border-radius);
60
+ border-top-right-radius: var(--rte-border-radius);
56
61
  }
57
62
 
58
63
  /* Sticky Toolbar */
59
64
  .rte-toolbar-sticky {
60
- position: sticky;
61
- top: 0;
62
- z-index: 10;
63
- box-shadow: var(--rte-shadow-sm);
64
- transition: box-shadow 0.2s ease;
65
+ position: sticky;
66
+ top: 0;
67
+ z-index: 10;
68
+ box-shadow: var(--rte-shadow-sm);
69
+ transition: box-shadow 0.2s ease;
65
70
  }
66
71
 
67
72
  .rte-toolbar-left {
68
- display: flex;
69
- gap: var(--rte-padding-xs);
70
- flex-wrap: wrap;
71
- align-items: center;
72
- flex: 1;
73
+ display: flex;
74
+ gap: var(--rte-padding-xs);
75
+ flex-wrap: wrap;
76
+ align-items: center;
77
+ flex: 1;
73
78
  }
74
79
 
75
80
  .rte-toolbar-right {
76
- display: flex;
77
- gap: var(--rte-padding-xs);
78
- align-items: center;
79
- flex-shrink: 0;
81
+ display: flex;
82
+ gap: var(--rte-padding-xs);
83
+ align-items: center;
84
+ flex-shrink: 0;
80
85
  }
81
86
 
82
87
  /* Toolbar Divider */
83
88
  .rte-toolbar-divider {
84
- width: 1px;
85
- height: 24px;
86
- background: var(--rte-border-color);
87
- margin: 0 var(--rte-padding-sm);
88
- flex-shrink: 0;
89
+ width: 1px;
90
+ height: 24px;
91
+ background: var(--rte-border-color);
92
+ margin: 0 var(--rte-padding-sm);
93
+ flex-shrink: 0;
89
94
  }
90
95
 
91
96
  /* Toolbar Buttons - Ghost/Subtle Style */
92
97
  .rte-toolbar-button {
93
- display: flex;
94
- align-items: center;
95
- justify-content: center;
96
- min-width: 32px;
97
- height: 32px;
98
- padding: 0 var(--rte-padding-md);
99
- border: none;
100
- background: transparent;
101
- border-radius: 6px;
102
- cursor: pointer;
103
- color: var(--rte-text-color);
104
- transition: all 0.15s ease;
105
- font-size: 14px;
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ min-width: 32px;
102
+ height: 32px;
103
+ padding: 0 var(--rte-padding-md);
104
+ border: none;
105
+ background: transparent;
106
+ border-radius: 6px;
107
+ cursor: pointer;
108
+ color: var(--rte-text-color);
109
+ transition: all 0.15s ease;
110
+ font-size: 14px;
106
111
  }
107
112
 
108
113
  .rte-toolbar-button:hover:not(:disabled) {
109
- background: var(--rte-button-hover-bg);
110
- color: var(--rte-text-color);
114
+ background: var(--rte-button-hover-bg);
115
+ color: var(--rte-text-color);
111
116
  }
112
117
 
113
118
  .rte-toolbar-button:active:not(:disabled) {
114
- background: var(--rte-button-active-bg);
115
- transform: scale(0.98);
119
+ background: var(--rte-button-active-bg);
120
+ transform: scale(0.98);
116
121
  }
117
122
 
118
123
  .rte-toolbar-button:disabled {
119
- opacity: 0.4;
120
- cursor: not-allowed;
124
+ opacity: 0.4;
125
+ cursor: not-allowed;
121
126
  }
122
127
 
123
128
  .rte-toolbar-button-active {
124
- background: var(--rte-button-active-bg);
125
- color: var(--rte-primary-color);
129
+ background: var(--rte-button-active-bg);
130
+ color: var(--rte-primary-color);
126
131
  }
127
132
 
128
133
  .rte-toolbar-button-active:hover:not(:disabled) {
129
- background: var(--rte-button-hover-bg);
130
- color: var(--rte-primary-hover);
134
+ background: var(--rte-button-hover-bg);
135
+ color: var(--rte-primary-hover);
131
136
  }
132
137
 
133
138
  /* Editor Content Area */
134
139
  .rte-editor {
135
- min-height: 200px;
136
- padding: var(--rte-padding-2xl);
137
- outline: none;
138
- line-height: var(--rte-line-height);
139
- color: var(--rte-text-color);
140
- overflow-y: auto;
141
- background: var(--rte-content-bg);
142
- border-bottom-left-radius: var(--rte-border-radius);
143
- border-bottom-right-radius: var(--rte-border-radius);
140
+ min-height: 200px;
141
+ padding: var(--rte-padding-2xl);
142
+ outline: none;
143
+ line-height: var(--rte-line-height);
144
+ color: var(--rte-text-color);
145
+ overflow-y: auto;
146
+ background: var(--rte-content-bg);
147
+ border-bottom-left-radius: var(--rte-border-radius);
148
+ border-bottom-right-radius: var(--rte-border-radius);
144
149
  }
145
150
 
146
151
  .rte-editor:focus {
147
- outline: none;
152
+ outline: none;
148
153
  }
149
154
 
150
155
  .rte-editor:empty:before {
151
- content: attr(data-placeholder);
152
- color: var(--rte-text-secondary);
153
- pointer-events: none;
156
+ content: attr(data-placeholder);
157
+ color: var(--rte-text-secondary);
158
+ pointer-events: none;
159
+ display: block;
160
+ min-height: 1.5em;
154
161
  }
155
162
 
156
163
  /* Typography in Editor */
157
164
  .rte-editor p {
158
- margin: 0 0 var(--rte-padding-lg) 0;
165
+ margin: 0 0 var(--rte-padding-lg) 0;
159
166
  }
160
167
 
161
168
  .rte-editor p:last-child {
162
- margin-bottom: 0;
169
+ margin-bottom: 0;
163
170
  }
164
171
 
165
172
  .rte-editor h1 {
166
- font-size: 2em;
167
- font-weight: 700;
168
- margin: 0 0 var(--rte-padding-lg) 0;
169
- line-height: 1.2;
173
+ font-size: 2em;
174
+ font-weight: 700;
175
+ margin: 0 0 var(--rte-padding-lg) 0;
176
+ line-height: 1.2;
170
177
  }
171
178
 
172
179
  .rte-editor h2 {
173
- font-size: 1.5em;
174
- font-weight: 600;
175
- margin: 0 0 var(--rte-padding-lg) 0;
176
- line-height: 1.3;
180
+ font-size: 1.5em;
181
+ font-weight: 600;
182
+ margin: 0 0 var(--rte-padding-lg) 0;
183
+ line-height: 1.3;
177
184
  }
178
185
 
179
186
  .rte-editor h3 {
180
- font-size: 1.25em;
181
- font-weight: 600;
182
- margin: 0 0 var(--rte-padding-lg) 0;
183
- line-height: 1.4;
187
+ font-size: 1.25em;
188
+ font-weight: 600;
189
+ margin: 0 0 var(--rte-padding-lg) 0;
190
+ line-height: 1.4;
184
191
  }
185
192
 
186
193
  .rte-editor h4 {
187
- font-size: 1.1em;
188
- font-weight: 600;
189
- margin: 0 0 var(--rte-padding-lg) 0;
190
- line-height: 1.4;
194
+ font-size: 1.1em;
195
+ font-weight: 600;
196
+ margin: 0 0 var(--rte-padding-lg) 0;
197
+ line-height: 1.4;
191
198
  }
192
199
 
193
200
  .rte-editor h5 {
194
- font-size: 1em;
195
- font-weight: 600;
196
- margin: 0 0 var(--rte-padding-lg) 0;
197
- line-height: 1.5;
201
+ font-size: 1em;
202
+ font-weight: 600;
203
+ margin: 0 0 var(--rte-padding-lg) 0;
204
+ line-height: 1.5;
198
205
  }
199
206
 
200
207
  .rte-editor h6 {
201
- font-size: 0.9em;
202
- font-weight: 600;
203
- margin: 0 0 var(--rte-padding-lg) 0;
204
- line-height: 1.5;
208
+ font-size: 0.9em;
209
+ font-weight: 600;
210
+ margin: 0 0 var(--rte-padding-lg) 0;
211
+ line-height: 1.5;
205
212
  }
206
213
 
207
214
  .rte-editor blockquote {
208
- margin: 0 0 var(--rte-padding-lg) 0;
209
- padding: var(--rte-padding-lg) var(--rte-padding-xl);
210
- border-left: 3px solid var(--rte-border-color);
211
- background: var(--rte-toolbar-bg);
212
- color: var(--rte-text-secondary);
213
- border-radius: 0 var(--rte-border-radius) var(--rte-border-radius) 0;
215
+ margin: 0 0 var(--rte-padding-lg) 0;
216
+ padding: var(--rte-padding-lg) var(--rte-padding-xl);
217
+ border-left: 3px solid var(--rte-border-color);
218
+ background: var(--rte-toolbar-bg);
219
+ color: var(--rte-text-secondary);
220
+ border-radius: 0 var(--rte-border-radius) var(--rte-border-radius) 0;
221
+ }
222
+
223
+ /* ==========================================================================
224
+ Checkbox Lists (Todo Lists)
225
+ Supports: own format (.rte-checkbox-list),
226
+ Lexical format ([__lexicallisttype="check"], [class*="checklist"]),
227
+ and GitHub format (.contains-task-list)
228
+ Detection uses attribute selectors so it works with any CSS framework.
229
+ ========================================================================== */
230
+
231
+ /* Base checkbox list styles - matches all supported formats */
232
+ .rte-editor ul.rte-checkbox-list,
233
+ .rte-editor ul[__lexicallisttype="check"],
234
+ .rte-editor ul[class*="checklist"],
235
+ .rte-editor ul.contains-task-list {
236
+ list-style: none;
237
+ padding-left: var(--rte-padding-2xl);
238
+ margin: var(--rte-padding-md) 0;
239
+ position: relative;
240
+ min-height: 1.5em;
241
+ }
242
+
243
+ /* All checkbox list items */
244
+ .rte-editor ul.rte-checkbox-list li,
245
+ .rte-editor ul[__lexicallisttype="check"] li,
246
+ .rte-editor ul[class*="checklist"] li,
247
+ .rte-editor ul.contains-task-list li {
248
+ margin: var(--rte-padding-sm) 0;
249
+ padding-left: 0;
250
+ position: relative;
251
+ min-height: 1.5em;
252
+ cursor: text;
253
+ }
254
+
255
+ /* Invisible clickable area for checkbox toggle */
256
+ .rte-editor li[role="checkbox"]::after {
257
+ content: "";
258
+ position: absolute;
259
+ left: -40px;
260
+ top: 0;
261
+ width: 40px;
262
+ height: 100%;
263
+ cursor: pointer;
264
+ z-index: 100;
265
+ pointer-events: auto;
266
+ background: transparent;
267
+ }
268
+
269
+ /* Visual checkbox marker via ::before pseudo-element */
270
+ .rte-editor li[role="checkbox"]::before {
271
+ content: "";
272
+ position: absolute;
273
+ left: -24px;
274
+ top: 2px;
275
+ width: 18px;
276
+ height: 18px;
277
+ border: 2px solid var(--rte-primary-color, #000);
278
+ border-radius: 3px;
279
+ background-color: transparent;
280
+ cursor: pointer;
281
+ -webkit-user-select: none;
282
+ -moz-user-select: none;
283
+ user-select: none;
284
+ z-index: 101;
285
+ pointer-events: none;
286
+ }
287
+
288
+ /* Checked state: show checkmark */
289
+ .rte-editor li[role="checkbox"][aria-checked="true"]::before {
290
+ background-color: var(--rte-primary-color, #000);
291
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10 3L4.5 8.5L2 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
292
+ background-repeat: no-repeat;
293
+ background-position: center;
294
+ background-size: 12px 12px;
295
+ }
296
+
297
+ /* Checked state: strikethrough + reduced opacity */
298
+ .rte-editor li[role="checkbox"][aria-checked="true"] {
299
+ opacity: 0.6;
300
+ text-decoration: line-through;
301
+ }
302
+
303
+ /* Focus state */
304
+ .rte-editor li[role="checkbox"]:focus {
305
+ outline: 2px solid var(--rte-primary-color, #000);
306
+ outline-offset: 2px;
307
+ }
308
+
309
+ /* RTL support */
310
+ .rte-editor li[dir="rtl"][role="checkbox"]::before {
311
+ left: auto;
312
+ right: -24px;
313
+ }
314
+
315
+ .rte-editor li[dir="rtl"][role="checkbox"]::after {
316
+ left: auto;
317
+ right: -40px;
318
+ }
319
+
320
+ /* Strikethrough support (Lexical uses <s> tag) */
321
+ .rte-editor s,
322
+ .rte-editor del,
323
+ .rte-editor strike {
324
+ text-decoration: line-through;
214
325
  }
215
326
 
216
327
  .rte-editor ul,
217
328
  .rte-editor ol {
218
- margin: 0 0 var(--rte-padding-lg) 0;
219
- padding-left: var(--rte-padding-2xl);
329
+ margin: 0 0 var(--rte-padding-lg) 0;
330
+ padding-left: var(--rte-padding-2xl);
220
331
  }
221
332
 
222
333
  .rte-editor li {
223
- margin: var(--rte-padding-sm) 0;
334
+ margin: var(--rte-padding-sm) 0;
224
335
  }
225
336
 
226
337
  .rte-editor a {
227
- color: var(--rte-primary-color);
228
- text-decoration: underline;
229
- text-underline-offset: 2px;
230
- transition: color 0.15s ease;
338
+ color: var(--rte-primary-color);
339
+ text-decoration: underline;
340
+ text-underline-offset: 2px;
341
+ transition: color 0.15s ease;
231
342
  }
232
343
 
233
344
  .rte-editor a:hover {
234
- color: var(--rte-primary-hover);
345
+ color: var(--rte-primary-hover);
235
346
  }
236
347
 
237
348
  .rte-editor strong,
238
349
  .rte-editor b {
239
- font-weight: 600;
350
+ font-weight: 600;
240
351
  }
241
352
 
242
353
  .rte-editor em,
243
354
  .rte-editor i {
244
- font-style: italic;
355
+ font-style: italic;
245
356
  }
246
357
 
247
358
  .rte-editor u {
248
- text-decoration: underline;
249
- text-underline-offset: 2px;
359
+ text-decoration: underline;
360
+ text-underline-offset: 2px;
250
361
  }
251
362
 
252
363
  /* Dropdown Styles */
253
364
  .rte-dropdown {
254
- position: relative;
255
- display: inline-block;
365
+ position: relative;
366
+ display: inline-block;
256
367
  }
257
368
 
258
369
  .rte-dropdown-button {
259
- min-width: 32px;
260
- width: auto;
261
- padding: 0 var(--rte-padding-md);
370
+ min-width: 32px;
371
+ width: auto;
372
+ padding: 0 var(--rte-padding-md);
262
373
  }
263
374
 
264
375
  .rte-dropdown-button-has-value {
265
- padding: 0 var(--rte-padding-lg);
376
+ padding: 0 var(--rte-padding-lg);
266
377
  }
267
378
 
268
379
  .rte-dropdown-value {
269
- margin-left: var(--rte-padding-sm);
270
- font-size: 12px;
271
- font-weight: 500;
272
- color: var(--rte-text-color);
380
+ margin-left: var(--rte-padding-sm);
381
+ font-size: 12px;
382
+ font-weight: 500;
383
+ color: var(--rte-text-color);
273
384
  }
274
385
 
275
386
  /* Dropdown Menu - Modern Popover */
276
387
  .rte-dropdown-menu {
277
- position: absolute;
278
- top: calc(100% + 4px);
279
- left: 0;
280
- background: var(--rte-content-bg);
281
- border: 1px solid var(--rte-border-color);
282
- border-radius: var(--rte-border-radius);
283
- box-shadow: var(--rte-shadow-popover);
284
- z-index: 1000;
285
- min-width: 180px;
286
- max-height: 320px;
287
- overflow-y: auto;
288
- padding: var(--rte-padding-sm);
289
- margin-top: var(--rte-padding-xs);
388
+ position: absolute;
389
+ top: calc(100% + 4px);
390
+ left: 0;
391
+ background: var(--rte-content-bg);
392
+ border: 1px solid var(--rte-border-color);
393
+ border-radius: var(--rte-border-radius);
394
+ box-shadow: var(--rte-shadow-popover);
395
+ z-index: 1000;
396
+ min-width: 180px;
397
+ max-height: 320px;
398
+ overflow-y: auto;
399
+ padding: var(--rte-padding-sm);
400
+ margin-top: var(--rte-padding-xs);
290
401
  }
291
402
 
292
403
  .rte-dropdown-item {
293
- display: flex;
294
- align-items: center;
295
- gap: var(--rte-padding-md);
296
- width: 100%;
297
- padding: var(--rte-padding-md) var(--rte-padding-lg);
298
- border: none;
299
- background: transparent;
300
- text-align: left;
301
- cursor: pointer;
302
- color: var(--rte-text-color);
303
- font-size: 14px;
304
- border-radius: 6px;
305
- transition: all 0.15s ease;
306
- font-family: var(--rte-font-family);
307
- position: relative;
404
+ display: flex;
405
+ align-items: center;
406
+ gap: var(--rte-padding-md);
407
+ width: 100%;
408
+ padding: var(--rte-padding-md) var(--rte-padding-lg);
409
+ border: none;
410
+ background: transparent;
411
+ text-align: left;
412
+ cursor: pointer;
413
+ color: var(--rte-text-color);
414
+ font-size: 14px;
415
+ border-radius: 6px;
416
+ transition: all 0.15s ease;
417
+ font-family: var(--rte-font-family);
418
+ position: relative;
308
419
  }
309
420
 
310
421
  .rte-dropdown-item:hover {
311
- background: var(--rte-button-hover-bg);
422
+ background: var(--rte-button-hover-bg);
312
423
  }
313
424
 
314
425
  .rte-dropdown-item-active {
315
- background: var(--rte-button-hover-bg);
316
- color: var(--rte-text-color);
317
- font-weight: 500;
426
+ background: var(--rte-button-hover-bg);
427
+ color: var(--rte-text-color);
428
+ font-weight: 500;
318
429
  }
319
430
 
320
431
  .rte-dropdown-item-active::before {
321
- content: '';
322
- position: absolute;
323
- left: 0;
324
- top: 0;
325
- bottom: 0;
326
- width: 3px;
327
- background: var(--rte-primary-color);
328
- border-radius: 0 2px 2px 0;
432
+ content: "";
433
+ position: absolute;
434
+ left: 0;
435
+ top: 0;
436
+ bottom: 0;
437
+ width: 3px;
438
+ background: var(--rte-primary-color);
439
+ border-radius: 0 2px 2px 0;
329
440
  }
330
441
 
331
442
  .rte-dropdown-item-active .rte-dropdown-heading-preview,
332
443
  .rte-dropdown-item-active > span:last-child {
333
- color: var(--rte-primary-color);
334
- font-weight: 600;
444
+ color: var(--rte-primary-color);
445
+ font-weight: 600;
335
446
  }
336
447
 
337
448
  .rte-dropdown-color-preview.active {
338
- border: 2px solid var(--rte-primary-color);
339
- box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
449
+ border: 2px solid var(--rte-primary-color);
450
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
340
451
  }
341
452
 
342
453
  /* Color Preview in Dropdown */
343
454
  .rte-dropdown-color-preview {
344
- display: inline-block;
345
- width: 20px;
346
- height: 20px;
347
- border-radius: 4px;
348
- border: 1px solid var(--rte-border-color);
349
- flex-shrink: 0;
350
- box-shadow: var(--rte-shadow-sm);
455
+ display: inline-block;
456
+ width: 20px;
457
+ height: 20px;
458
+ border-radius: 4px;
459
+ border: 1px solid var(--rte-border-color);
460
+ flex-shrink: 0;
461
+ box-shadow: var(--rte-shadow-sm);
351
462
  }
352
463
 
353
464
  /* Font Size Preview in Dropdown */
354
465
  .rte-dropdown-fontsize-preview {
355
- display: inline-block;
356
- min-width: 40px;
357
- text-align: right;
358
- font-weight: 500;
359
- color: var(--rte-text-secondary);
466
+ display: inline-block;
467
+ min-width: 40px;
468
+ text-align: right;
469
+ font-weight: 500;
470
+ color: var(--rte-text-secondary);
360
471
  }
361
472
 
362
473
  /* Heading Preview in Dropdown */
363
474
  .rte-dropdown-heading-preview {
364
- display: inline-flex;
365
- align-items: center;
366
- min-width: 60px;
367
- font-weight: 600;
368
- color: var(--rte-text-color);
369
- font-size: 14px;
370
- line-height: 1.2;
371
- }
372
-
373
- .rte-dropdown-heading-preview.h1 {
374
- font-size: 18px;
375
- font-weight: 700;
376
- }
377
-
378
- .rte-dropdown-heading-preview.h2 {
379
- font-size: 16px;
380
- font-weight: 600;
381
- }
382
-
383
- .rte-dropdown-heading-preview.h3 {
384
- font-size: 15px;
385
- font-weight: 600;
386
- }
387
-
388
- .rte-dropdown-heading-preview.h4 {
389
- font-size: 14px;
390
- font-weight: 600;
391
- }
392
-
393
- .rte-dropdown-heading-preview.h5 {
394
- font-size: 13px;
395
- font-weight: 600;
396
- }
397
-
475
+ display: inline-flex;
476
+ align-items: center;
477
+ font-weight: 600;
478
+ color: var(--rte-text-color);
479
+ font-size: 14px;
480
+ line-height: 1.2;
481
+ }
482
+
483
+ .rte-dropdown-heading-preview.h1,
484
+ .rte-dropdown-heading-preview.h2,
485
+ .rte-dropdown-heading-preview.h3,
486
+ .rte-dropdown-heading-preview.h4,
487
+ .rte-dropdown-heading-preview.h5,
398
488
  .rte-dropdown-heading-preview.h6 {
399
- font-size: 12px;
400
- font-weight: 600;
489
+ font-size: 16px;
490
+ font-weight: 600;
401
491
  }
402
492
 
403
493
  .rte-dropdown-heading-preview.p {
404
- font-size: 14px;
405
- font-weight: 400;
494
+ font-size: 14px;
495
+ font-weight: 400;
406
496
  }
407
497
 
408
498
  /* Image Styles in Editor */
409
499
  .rte-editor img {
410
- max-width: 100%;
411
- height: auto;
412
- display: block;
413
- margin: var(--rte-padding-xl) 0;
414
- border-radius: var(--rte-border-radius);
415
- box-shadow: var(--rte-shadow-sm);
500
+ max-width: 100%;
501
+ height: auto;
502
+ display: block;
503
+ margin: var(--rte-padding-xl) 0;
504
+ border-radius: var(--rte-border-radius);
505
+ box-shadow: var(--rte-shadow-sm);
416
506
  }
417
507
 
418
508
  .rte-editor img[data-uploading="true"] {
419
- opacity: 0.6;
420
- position: relative;
509
+ opacity: 0.6;
510
+ position: relative;
421
511
  }
422
512
 
423
513
  .rte-editor img[data-uploading="true"]::after {
424
- content: '';
425
- position: absolute;
426
- top: 50%;
427
- left: 50%;
428
- transform: translate(-50%, -50%);
429
- width: 24px;
430
- height: 24px;
431
- border: 2px solid var(--rte-primary-color);
432
- border-top-color: transparent;
433
- border-radius: 50%;
434
- animation: spin 0.8s linear infinite;
514
+ content: "";
515
+ position: absolute;
516
+ top: 50%;
517
+ left: 50%;
518
+ transform: translate(-50%, -50%);
519
+ width: 24px;
520
+ height: 24px;
521
+ border: 2px solid var(--rte-primary-color);
522
+ border-top-color: transparent;
523
+ border-radius: 50%;
524
+ animation: spin 0.8s linear infinite;
435
525
  }
436
526
 
437
527
  @keyframes spin {
438
- to {
439
- transform: translate(-50%, -50%) rotate(360deg);
440
- }
528
+ to {
529
+ transform: translate(-50%, -50%) rotate(360deg);
530
+ }
441
531
  }
442
532
 
443
533
  /* Image Modal */
444
534
  .rte-image-modal-overlay {
445
- position: fixed;
446
- top: 0;
447
- left: 0;
448
- right: 0;
449
- bottom: 0;
450
- background: rgba(0, 0, 0, 0.5);
451
- display: flex;
452
- align-items: center;
453
- justify-content: center;
454
- z-index: 10000;
455
- padding: var(--rte-padding-xl);
535
+ position: fixed;
536
+ top: 0;
537
+ left: 0;
538
+ right: 0;
539
+ bottom: 0;
540
+ background: rgba(0, 0, 0, 0.5);
541
+ display: flex;
542
+ align-items: center;
543
+ justify-content: center;
544
+ z-index: 10000;
545
+ padding: var(--rte-padding-xl);
456
546
  }
457
547
 
458
548
  .rte-image-modal {
459
- background: var(--rte-content-bg);
460
- border-radius: var(--rte-border-radius);
461
- box-shadow: var(--rte-shadow-lg);
462
- width: 100%;
463
- max-width: 500px;
464
- max-height: 90vh;
465
- overflow-y: auto;
466
- display: flex;
467
- flex-direction: column;
549
+ background: var(--rte-content-bg);
550
+ border-radius: var(--rte-border-radius);
551
+ box-shadow: var(--rte-shadow-lg);
552
+ width: 100%;
553
+ max-width: 500px;
554
+ max-height: 90vh;
555
+ overflow-y: auto;
556
+ display: flex;
557
+ flex-direction: column;
468
558
  }
469
559
 
470
560
  .rte-image-modal-header {
471
- display: flex;
472
- align-items: center;
473
- justify-content: space-between;
474
- padding: var(--rte-padding-xl);
475
- border-bottom: 1px solid var(--rte-border-color);
561
+ display: flex;
562
+ align-items: center;
563
+ justify-content: space-between;
564
+ padding: var(--rte-padding-xl);
565
+ border-bottom: 1px solid var(--rte-border-color);
476
566
  }
477
567
 
478
568
  .rte-image-modal-header h3 {
479
- margin: 0;
480
- font-size: 18px;
481
- font-weight: 600;
482
- color: var(--rte-text-color);
569
+ margin: 0;
570
+ font-size: 18px;
571
+ font-weight: 600;
572
+ color: var(--rte-text-color);
483
573
  }
484
574
 
485
575
  .rte-image-modal-close {
486
- display: flex;
487
- align-items: center;
488
- justify-content: center;
489
- width: 32px;
490
- height: 32px;
491
- border: none;
492
- background: transparent;
493
- border-radius: 6px;
494
- cursor: pointer;
495
- color: var(--rte-text-secondary);
496
- transition: all 0.15s ease;
576
+ display: flex;
577
+ align-items: center;
578
+ justify-content: center;
579
+ width: 32px;
580
+ height: 32px;
581
+ border: none;
582
+ background: transparent;
583
+ border-radius: 6px;
584
+ cursor: pointer;
585
+ color: var(--rte-text-secondary);
586
+ transition: all 0.15s ease;
497
587
  }
498
588
 
499
589
  .rte-image-modal-close:hover {
500
- background: var(--rte-button-hover-bg);
501
- color: var(--rte-text-color);
590
+ background: var(--rte-button-hover-bg);
591
+ color: var(--rte-text-color);
502
592
  }
503
593
 
504
594
  .rte-image-modal-content {
505
- padding: var(--rte-padding-xl);
506
- display: flex;
507
- flex-direction: column;
508
- gap: var(--rte-padding-xl);
595
+ padding: var(--rte-padding-xl);
596
+ display: flex;
597
+ flex-direction: column;
598
+ gap: var(--rte-padding-xl);
509
599
  }
510
600
 
511
601
  .rte-image-upload-section {
512
- display: flex;
513
- flex-direction: column;
514
- gap: var(--rte-padding-md);
602
+ display: flex;
603
+ flex-direction: column;
604
+ gap: var(--rte-padding-md);
515
605
  }
516
606
 
517
607
  .rte-image-upload-label {
518
- display: block;
519
- cursor: pointer;
608
+ display: block;
609
+ cursor: pointer;
520
610
  }
521
611
 
522
612
  .rte-image-upload-button {
523
- display: flex;
524
- align-items: center;
525
- justify-content: center;
526
- gap: var(--rte-padding-md);
527
- padding: var(--rte-padding-xl);
528
- border: 2px dashed var(--rte-border-color);
529
- border-radius: var(--rte-border-radius);
530
- background: var(--rte-toolbar-bg);
531
- color: var(--rte-text-color);
532
- transition: all 0.15s ease;
533
- font-size: 14px;
534
- font-weight: 500;
613
+ display: flex;
614
+ align-items: center;
615
+ justify-content: center;
616
+ gap: var(--rte-padding-md);
617
+ padding: var(--rte-padding-xl);
618
+ border: 2px dashed var(--rte-border-color);
619
+ border-radius: var(--rte-border-radius);
620
+ background: var(--rte-toolbar-bg);
621
+ color: var(--rte-text-color);
622
+ transition: all 0.15s ease;
623
+ font-size: 14px;
624
+ font-weight: 500;
535
625
  }
536
626
 
537
627
  .rte-image-upload-button:hover {
538
- border-color: var(--rte-primary-color);
539
- background: var(--rte-button-hover-bg);
628
+ border-color: var(--rte-primary-color);
629
+ background: var(--rte-button-hover-bg);
540
630
  }
541
631
 
542
632
  .rte-image-url-section,
543
633
  .rte-image-alt-section {
544
- display: flex;
545
- flex-direction: column;
546
- gap: var(--rte-padding-sm);
634
+ display: flex;
635
+ flex-direction: column;
636
+ gap: var(--rte-padding-sm);
547
637
  }
548
638
 
549
639
  .rte-image-url-section label,
550
640
  .rte-image-alt-section label {
551
- font-size: 14px;
552
- font-weight: 500;
553
- color: var(--rte-text-color);
641
+ font-size: 14px;
642
+ font-weight: 500;
643
+ color: var(--rte-text-color);
554
644
  }
555
645
 
556
646
  .rte-image-url-input,
557
647
  .rte-image-alt-input {
558
- width: 100%;
559
- padding: var(--rte-padding-md) var(--rte-padding-lg);
560
- border: 1px solid var(--rte-border-color);
561
- border-radius: 6px;
562
- font-size: 14px;
563
- font-family: var(--rte-font-family);
564
- color: var(--rte-text-color);
565
- background: var(--rte-content-bg);
566
- transition: all 0.15s ease;
648
+ width: 100%;
649
+ padding: var(--rte-padding-md) var(--rte-padding-lg);
650
+ border: 1px solid var(--rte-border-color);
651
+ border-radius: 6px;
652
+ font-size: 14px;
653
+ font-family: var(--rte-font-family);
654
+ color: var(--rte-text-color);
655
+ background: var(--rte-content-bg);
656
+ transition: all 0.15s ease;
567
657
  }
568
658
 
569
659
  .rte-image-url-input:focus,
570
660
  .rte-image-alt-input:focus {
571
- outline: none;
572
- border-color: var(--rte-primary-color);
573
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
661
+ outline: none;
662
+ border-color: var(--rte-primary-color);
663
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
574
664
  }
575
665
 
576
666
  .rte-image-preview {
577
- display: flex;
578
- justify-content: center;
579
- padding: var(--rte-padding-lg);
580
- background: var(--rte-toolbar-bg);
581
- border-radius: var(--rte-border-radius);
667
+ display: flex;
668
+ justify-content: center;
669
+ padding: var(--rte-padding-lg);
670
+ background: var(--rte-toolbar-bg);
671
+ border-radius: var(--rte-border-radius);
582
672
  }
583
673
 
584
674
  .rte-image-preview img {
585
- max-width: 100%;
586
- max-height: 200px;
587
- border-radius: var(--rte-border-radius);
588
- box-shadow: var(--rte-shadow-sm);
675
+ max-width: 100%;
676
+ max-height: 200px;
677
+ border-radius: var(--rte-border-radius);
678
+ box-shadow: var(--rte-shadow-sm);
589
679
  }
590
680
 
591
681
  .rte-image-modal-footer {
592
- display: flex;
593
- align-items: center;
594
- justify-content: flex-end;
595
- gap: var(--rte-padding-md);
596
- padding: var(--rte-padding-xl);
597
- border-top: 1px solid var(--rte-border-color);
682
+ display: flex;
683
+ align-items: center;
684
+ justify-content: flex-end;
685
+ gap: var(--rte-padding-md);
686
+ padding: var(--rte-padding-xl);
687
+ border-top: 1px solid var(--rte-border-color);
598
688
  }
599
689
 
600
690
  .rte-image-modal-cancel,
601
691
  .rte-image-modal-insert {
602
- padding: var(--rte-padding-md) var(--rte-padding-xl);
603
- border: none;
604
- border-radius: 6px;
605
- font-size: 14px;
606
- font-weight: 500;
607
- cursor: pointer;
608
- transition: all 0.15s ease;
609
- font-family: var(--rte-font-family);
692
+ padding: var(--rte-padding-md) var(--rte-padding-xl);
693
+ border: none;
694
+ border-radius: 6px;
695
+ font-size: 14px;
696
+ font-weight: 500;
697
+ cursor: pointer;
698
+ transition: all 0.15s ease;
699
+ font-family: var(--rte-font-family);
610
700
  }
611
701
 
612
702
  .rte-image-modal-cancel {
613
- background: transparent;
614
- color: var(--rte-text-secondary);
703
+ background: transparent;
704
+ color: var(--rte-text-secondary);
615
705
  }
616
706
 
617
707
  .rte-image-modal-cancel:hover {
618
- background: var(--rte-button-hover-bg);
619
- color: var(--rte-text-color);
708
+ background: var(--rte-button-hover-bg);
709
+ color: var(--rte-text-color);
620
710
  }
621
711
 
622
712
  .rte-image-modal-insert {
623
- background: var(--rte-primary-color);
624
- color: white;
713
+ background: var(--rte-primary-color);
714
+ color: white;
625
715
  }
626
716
 
627
717
  .rte-image-modal-insert:hover:not(:disabled) {
628
- background: var(--rte-primary-hover);
718
+ background: var(--rte-primary-hover);
629
719
  }
630
720
 
631
721
  .rte-image-modal-insert:disabled {
632
- opacity: 0.5;
633
- cursor: not-allowed;
722
+ opacity: 0.5;
723
+ cursor: not-allowed;
634
724
  }
635
725
 
636
726
  .rte-spin {
637
- animation: spin 0.8s linear infinite;
727
+ animation: spin 0.8s linear infinite;
638
728
  }