quill-resizable-table 1.1.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 (15) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +229 -0
  3. package/dist/ResizableTable.d.ts +109 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/quill-resizable-table.cjs.js +707 -0
  6. package/dist/quill-resizable-table.cjs.js.map +1 -0
  7. package/dist/quill-resizable-table.css +173 -0
  8. package/dist/quill-resizable-table.esm.js +705 -0
  9. package/dist/quill-resizable-table.esm.js.map +1 -0
  10. package/dist/quill-resizable-table.umd.js +713 -0
  11. package/dist/quill-resizable-table.umd.js.map +1 -0
  12. package/package.json +55 -0
  13. package/src/ResizableTable.ts +841 -0
  14. package/src/index.ts +2 -0
  15. package/src/quill-resizable-table.css +173 -0
package/src/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { ResizableTable } from './ResizableTable';
2
+ export type { ResizableTableOptions } from './ResizableTable';
package/src/quill-resizable-table.css ADDED
@@ -0,0 +1,173 @@
1
+ /* quill-resizable-table — default styles */
2
+
3
+ /* Ensure tables inside the editor are visible and resizable */
4
+ .ql-editor table {
5
+ border-collapse: collapse;
6
+ table-layout: fixed;
7
+ }
8
+
9
+ .ql-editor table td,
10
+ .ql-editor table th {
11
+ border: 1px solid #ccc;
12
+ padding: 6px 8px;
13
+ position: relative;
14
+ min-width: 30px;
15
+ }
16
+
17
+ /* Right-edge hover (column resize) - BRIGHT visual indicator */
18
+ .ql-editor table td:hover,
19
+ .ql-editor table th:hover {
20
+ background: linear-gradient(to right, transparent 92%, #0078d7 92%) no-repeat right center / 8px 100%;
21
+ }
22
+
23
+ /* Cursor only appears when actually over the resize edge */
24
+ .ql-editor table td.qrt-resize-col,
25
+ .ql-editor table th.qrt-resize-col {
26
+ cursor: col-resize;
27
+ }
28
+
29
+ /* Bottom-right corner (table resize) - BRIGHT indicator */
30
+ .ql-editor table tr:last-child td:last-child:hover,
31
+ .ql-editor table tr:last-child th:last-child:hover {
32
+ background:
33
+ linear-gradient(to right, transparent 92%, #0078d7 92%) no-repeat right center / 8px calc(100% - 8px),
34
+ linear-gradient(to bottom, transparent 92%, #0078d7 92%) no-repeat center bottom / calc(100% - 8px) 8px,
35
+ linear-gradient(135deg, transparent 75%, #0078d7 75%) no-repeat right bottom / 8px 8px;
36
+ }
37
+
38
+ /* Cursor only on corner */
39
+ .ql-editor table td.qrt-resize-corner,
40
+ .ql-editor table th.qrt-resize-corner {
41
+ cursor: nwse-resize;
42
+ }
43
+
44
+ /* Bottom edge for row resize (but not the corner) */
45
+ .ql-editor table tr:last-child td:not(:last-child):hover,
46
+ .ql-editor table tr:last-child th:not(:last-child):hover {
47
+ background: linear-gradient(to bottom, transparent 92%, #0078d7 92%) no-repeat center bottom / 100% 8px;
48
+ }
49
+
50
+ /* Cursor only on row resize edge */
51
+ .ql-editor table td.qrt-resize-row,
52
+ .ql-editor table th.qrt-resize-row {
53
+ cursor: row-resize;
54
+ }
55
+
56
+ /* Subtle right-border highlight on hover (visual affordance) */
57
+ .ql-editor table td:hover::after,
58
+ .ql-editor table th:hover::after {
59
+ content: '';
60
+ position: absolute;
61
+ top: 0;
62
+ right: -2px;
63
+ width: 4px;
64
+ height: 100%;
65
+ background: rgba(0, 120, 215, 0.5);
66
+ pointer-events: none;
67
+ z-index: 1;
68
+ }
69
+
70
+ /* Subtle bottom-border highlight on hover */
71
+ .ql-editor table td:hover::before,
72
+ .ql-editor table th:hover::before {
73
+ content: '';
74
+ position: absolute;
75
+ bottom: -2px;
76
+ left: 0;
77
+ height: 4px;
78
+ width: 100%;
79
+ background: rgba(0, 120, 215, 0.5);
80
+ pointer-events: none;
81
+ z-index: 1;
82
+ }
83
+
84
+ /* ─── Context menu ──────────────────────────────────── */
85
+
86
+ .qrt-context-menu {
87
+ background: #fff;
88
+ border: 1px solid #ddd;
89
+ border-radius: 6px;
90
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
91
+ padding: 4px 0;
92
+ min-width: 180px;
93
+ font-family: system-ui, -apple-system, sans-serif;
94
+ font-size: 13px;
95
+ user-select: none;
96
+ }
97
+
98
+ .qrt-context-menu-item {
99
+ padding: 6px 14px;
100
+ cursor: pointer;
101
+ color: #333;
102
+ transition: background 0.1s;
103
+ }
104
+
105
+ .qrt-context-menu-item:hover {
106
+ background: #f0f4ff;
107
+ color: #0058b0;
108
+ }
109
+
110
+ .qrt-context-menu-item.qrt-disabled {
111
+ color: #bbb;
112
+ cursor: default;
113
+ }
114
+
115
+ .qrt-context-menu-item.qrt-disabled:hover {
116
+ background: transparent;
117
+ color: #bbb;
118
+ }
119
+
120
+ .qrt-context-menu-divider {
121
+ height: 1px;
122
+ background: #eee;
123
+ margin: 4px 0;
124
+ }
125
+
126
+ /* ─── Edge buttons (+) ──────────────────────────────── */
127
+
128
+ .qrt-edge-btn {
129
+ width: 24px;
130
+ height: 24px;
131
+ border-radius: 50%;
132
+ background: #0078d7;
133
+ color: #fff;
134
+ font-size: 16px;
135
+ line-height: 24px;
136
+ text-align: center;
137
+ cursor: pointer;
138
+ user-select: none;
139
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
140
+ transition: background 0.15s, transform 0.15s;
141
+ }
142
+
143
+ .qrt-edge-btn:hover {
144
+ background: #005fa3;
145
+ transform: scale(1.15);
146
+ cursor: pointer;
147
+ }
148
+
149
+ /* ─── Delete table button ──────────────────────────── */
150
+
151
+ .qrt-delete-table-btn {
152
+ width: 28px;
153
+ height: 28px;
154
+ border-radius: 50%;
155
+ background: #d32f2f;
156
+ color: #fff;
157
+ font-size: 18px;
158
+ line-height: 28px;
159
+ text-align: center;
160
+ cursor: pointer;
161
+ user-select: none;
162
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
163
+ transition: background 0.15s, transform 0.15s;
164
+ display: flex;
165
+ align-items: center;
166
+ justify-content: center;
167
+ }
168
+
169
+ .qrt-delete-table-btn:hover {
170
+ background: #b71c1c;
171
+ transform: scale(1.15);
172
+ cursor: pointer;
173
+ }