@editora/plugin-table 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +35 -0
- package/dist/index.esm.js +498 -0
- package/dist/plugin-table.css +1 -0
- package/package.json +27 -0
- package/src/TablePlugin.native.ts +1053 -0
- package/src/index.ts +1 -0
- package/src/table.css +407 -0
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TablePlugin } from './TablePlugin.native';
|
package/src/table.css
ADDED
|
@@ -0,0 +1,407 @@
|
|
|
1
|
+
/* Table Styles for Rich Text Editor */
|
|
2
|
+
|
|
3
|
+
.rte-table,
|
|
4
|
+
table {
|
|
5
|
+
border-collapse: collapse;
|
|
6
|
+
width: 100%;
|
|
7
|
+
margin: 1rem 0;
|
|
8
|
+
border: 1px solid #ddd;
|
|
9
|
+
font-size: 14px;
|
|
10
|
+
line-height: 1.4;
|
|
11
|
+
position: relative;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.rte-table td,
|
|
15
|
+
.rte-table th,
|
|
16
|
+
table td,
|
|
17
|
+
table th {
|
|
18
|
+
border: 1px solid #ddd;
|
|
19
|
+
padding: 8px 12px;
|
|
20
|
+
min-width: 80px;
|
|
21
|
+
vertical-align: top;
|
|
22
|
+
position: relative;
|
|
23
|
+
user-select: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.rte-table td:focus,
|
|
27
|
+
.rte-table th:focus,
|
|
28
|
+
table td:focus,
|
|
29
|
+
table th:focus {
|
|
30
|
+
outline: 2px solid #007acc;
|
|
31
|
+
outline-offset: -2px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.rte-table th,
|
|
35
|
+
table th {
|
|
36
|
+
background-color: #f8f9fa;
|
|
37
|
+
font-weight: 600;
|
|
38
|
+
text-align: left;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.rte-table td p,
|
|
42
|
+
table td p {
|
|
43
|
+
margin: 0;
|
|
44
|
+
padding: 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.rte-table td p:empty::before,
|
|
48
|
+
table td p:empty::before {
|
|
49
|
+
content: '\200B'; /* Zero-width space to maintain height */
|
|
50
|
+
display: inline-block;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Table cell content editing */
|
|
54
|
+
.rte-table td[contenteditable]:empty::before,
|
|
55
|
+
table td[contenteditable]:empty::before {
|
|
56
|
+
content: 'Type here...';
|
|
57
|
+
color: #999;
|
|
58
|
+
font-style: italic;
|
|
59
|
+
pointer-events: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Table hover effects */
|
|
63
|
+
.rte-table tr:hover,
|
|
64
|
+
table tr:hover {
|
|
65
|
+
background-color: #f8f9fa;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Table selection styles */
|
|
69
|
+
.rte-table td.selected,
|
|
70
|
+
table td.selected {
|
|
71
|
+
background-color: #e3f2fd;
|
|
72
|
+
border-color: #2196f3;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* ============================================
|
|
76
|
+
TABLE TOOLBAR STYLES - INLINE DESIGN
|
|
77
|
+
============================================ */
|
|
78
|
+
|
|
79
|
+
.table-toolbar {
|
|
80
|
+
background: white;
|
|
81
|
+
border: 1px solid #d0d0d0;
|
|
82
|
+
border-radius: 4px;
|
|
83
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
84
|
+
padding: 4px;
|
|
85
|
+
display: flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
gap: 0;
|
|
88
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
89
|
+
min-width: max-content;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.toolbar-section {
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
gap: 2px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.toolbar-divider {
|
|
99
|
+
width: 1px;
|
|
100
|
+
height: 20px;
|
|
101
|
+
background: #e0e0e0;
|
|
102
|
+
margin: 0 4px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Icon Button Styling */
|
|
106
|
+
.toolbar-icon-btn {
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
width: 28px;
|
|
111
|
+
height: 28px;
|
|
112
|
+
padding: 0;
|
|
113
|
+
border: 1px solid transparent;
|
|
114
|
+
background: transparent;
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
color: #333;
|
|
117
|
+
border-radius: 3px;
|
|
118
|
+
transition: all 0.2s ease;
|
|
119
|
+
flex-shrink: 0;
|
|
120
|
+
font-size: 14px;
|
|
121
|
+
line-height: 1;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.toolbar-icon-btn svg {
|
|
125
|
+
width: 16px;
|
|
126
|
+
height: 16px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.toolbar-icon-btn:hover:not(:disabled) {
|
|
130
|
+
background: #f0f0f0;
|
|
131
|
+
border-color: #d0d0d0;
|
|
132
|
+
color: #0066cc;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.toolbar-icon-btn:active:not(:disabled) {
|
|
136
|
+
background: #e8f0ff;
|
|
137
|
+
border-color: #0066cc;
|
|
138
|
+
transform: scale(0.95);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.toolbar-icon-btn:disabled {
|
|
142
|
+
opacity: 0.4;
|
|
143
|
+
cursor: not-allowed;
|
|
144
|
+
color: #ccc;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Danger buttons */
|
|
148
|
+
.toolbar-icon-btn-danger {
|
|
149
|
+
color: #d32f2f;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.toolbar-icon-btn-danger:hover:not(:disabled) {
|
|
153
|
+
background: #fff3f3;
|
|
154
|
+
border-color: #ffcccc;
|
|
155
|
+
color: #d32f2f;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.toolbar-icon-btn-danger:active:not(:disabled) {
|
|
159
|
+
background: #ffebee;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Delete button styling */
|
|
163
|
+
.toolbar-icon-btn-delete {
|
|
164
|
+
color: #d32f2f;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.toolbar-icon-btn-delete:hover:not(:disabled) {
|
|
168
|
+
background: #fff3f3;
|
|
169
|
+
border-color: #ffcccc;
|
|
170
|
+
color: #d32f2f;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.toolbar-icon-btn-delete:active:not(:disabled) {
|
|
174
|
+
background: #ffebee;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* Resize Handle Styling */
|
|
178
|
+
.resize-handle {
|
|
179
|
+
opacity: 0;
|
|
180
|
+
transition: all 0.15s ease;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.resize-handle:hover {
|
|
184
|
+
opacity: 1;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Show resize handle on table cell hover */
|
|
188
|
+
td:hover > .resize-handle,
|
|
189
|
+
th:hover > .resize-handle {
|
|
190
|
+
opacity: 1;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Table resize handle (for table-level resizing) */
|
|
194
|
+
.table-resize-handle {
|
|
195
|
+
position: absolute;
|
|
196
|
+
bottom: -4px;
|
|
197
|
+
right: -4px;
|
|
198
|
+
width: 12px;
|
|
199
|
+
height: 12px;
|
|
200
|
+
background: transparent;
|
|
201
|
+
cursor: nwse-resize;
|
|
202
|
+
z-index: 10;
|
|
203
|
+
transition: background 0.15s ease;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.table-resize-handle::after {
|
|
207
|
+
content: '';
|
|
208
|
+
position: absolute;
|
|
209
|
+
bottom: 0;
|
|
210
|
+
right: 0;
|
|
211
|
+
width: 8px;
|
|
212
|
+
height: 8px;
|
|
213
|
+
background: rgba(0, 102, 204, 0.3);
|
|
214
|
+
border-bottom: 2px solid #0066cc;
|
|
215
|
+
border-right: 2px solid #0066cc;
|
|
216
|
+
border-radius: 0 0 2px 0;
|
|
217
|
+
opacity: 0;
|
|
218
|
+
transition: opacity 0.15s ease;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.table-resize-handle:hover::after {
|
|
222
|
+
opacity: 1;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.rte-table:hover .table-resize-handle::after,
|
|
226
|
+
table:hover .table-resize-handle::after {
|
|
227
|
+
opacity: 1;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* ============================================
|
|
231
|
+
DARK THEME TABLE STYLES
|
|
232
|
+
============================================ */
|
|
233
|
+
|
|
234
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) :is(.rte-table, table) {
|
|
235
|
+
border-color: #607088;
|
|
236
|
+
background: #24303c;
|
|
237
|
+
color: #e6eefb;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) :is(.rte-table td, .rte-table th, table td, table th) {
|
|
241
|
+
border-color: #607088;
|
|
242
|
+
color: #e6eefb;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) :is(.rte-table th, table th) {
|
|
246
|
+
background: linear-gradient(180deg, #3b4553 0%, #333d4a 100%);
|
|
247
|
+
color: #f3f8ff;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) :is(.rte-table tr:hover, table tr:hover) {
|
|
251
|
+
background-color: rgba(88, 166, 255, 0.12);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) :is(.rte-table td.selected, table td.selected) {
|
|
255
|
+
background-color: rgba(88, 166, 255, 0.28);
|
|
256
|
+
border-color: #79beff;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) :is(.rte-table td[contenteditable]:empty::before, table td[contenteditable]:empty::before) {
|
|
260
|
+
color: #94a3b8;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .table-toolbar {
|
|
264
|
+
background: linear-gradient(180deg, #2f3844 0%, #2a323c 100%);
|
|
265
|
+
border-color: #4d596b;
|
|
266
|
+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.table-toolbar.rte-theme-dark {
|
|
270
|
+
background: linear-gradient(180deg, #2f3844 0%, #2a323c 100%);
|
|
271
|
+
border-color: #4d596b;
|
|
272
|
+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-divider {
|
|
276
|
+
background: #4d596b;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.table-toolbar.rte-theme-dark .toolbar-divider {
|
|
280
|
+
background: #4d596b;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn {
|
|
284
|
+
color: #d7deea;
|
|
285
|
+
border-color: transparent;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn {
|
|
289
|
+
color: #d7deea;
|
|
290
|
+
border-color: transparent;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn svg {
|
|
294
|
+
color: currentColor;
|
|
295
|
+
fill: currentColor;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn svg {
|
|
299
|
+
color: currentColor;
|
|
300
|
+
fill: currentColor;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn svg [stroke="#000" i],
|
|
304
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn svg [stroke="#000000" i],
|
|
305
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn svg [stroke="black" i] {
|
|
306
|
+
stroke: currentColor !important;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn svg [stroke="#000" i],
|
|
310
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn svg [stroke="#000000" i],
|
|
311
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn svg [stroke="black" i] {
|
|
312
|
+
stroke: currentColor !important;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn svg [fill="#000" i],
|
|
316
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn svg [fill="#000000" i],
|
|
317
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn svg [fill="black" i] {
|
|
318
|
+
fill: currentColor !important;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn svg [fill="#000" i],
|
|
322
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn svg [fill="#000000" i],
|
|
323
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn svg [fill="black" i] {
|
|
324
|
+
fill: currentColor !important;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn:hover:not(:disabled) {
|
|
328
|
+
background: #3a4554;
|
|
329
|
+
border-color: #607088;
|
|
330
|
+
color: #f3f8ff;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn:hover:not(:disabled) {
|
|
334
|
+
background: #3a4554;
|
|
335
|
+
border-color: #607088;
|
|
336
|
+
color: #f3f8ff;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn:active:not(:disabled) {
|
|
340
|
+
background: #4a95de;
|
|
341
|
+
border-color: #67adf4;
|
|
342
|
+
color: #0f1b2a;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn:active:not(:disabled) {
|
|
346
|
+
background: #4a95de;
|
|
347
|
+
border-color: #67adf4;
|
|
348
|
+
color: #0f1b2a;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
:is([data-theme="dark"], .dark, .editora-theme-dark) .toolbar-icon-btn:disabled {
|
|
352
|
+
color: #7f8ca1;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.table-toolbar.rte-theme-dark .toolbar-icon-btn:disabled {
|
|
356
|
+
color: #7f8ca1;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/* Responsive table */
|
|
360
|
+
@media (max-width: 768px) {
|
|
361
|
+
.rte-table, table {
|
|
362
|
+
font-size: 12px;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.rte-table td,
|
|
366
|
+
.rte-table th,
|
|
367
|
+
table td,
|
|
368
|
+
table th {
|
|
369
|
+
padding: 4px 6px;
|
|
370
|
+
min-width: 60px;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.table-toolbar {
|
|
374
|
+
padding: 3px;
|
|
375
|
+
gap: 0;
|
|
376
|
+
max-width: 90vw;
|
|
377
|
+
overflow-x: auto;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.toolbar-icon-btn {
|
|
381
|
+
width: 26px;
|
|
382
|
+
height: 26px;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.toolbar-divider {
|
|
386
|
+
height: 18px;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
/* Print styles */
|
|
391
|
+
@media print {
|
|
392
|
+
.rte-table, table {
|
|
393
|
+
border: 1px solid #000;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.rte-table td,
|
|
397
|
+
.rte-table th,
|
|
398
|
+
table td,
|
|
399
|
+
table th {
|
|
400
|
+
border: 1px solid #000;
|
|
401
|
+
padding: 4px;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.table-toolbar {
|
|
405
|
+
display: none;
|
|
406
|
+
}
|
|
407
|
+
}
|