@rtif-sdk/web 1.4.0 → 1.6.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 (50) hide show
  1. package/dist/block-drag-handler.d.ts +26 -0
  2. package/dist/block-drag-handler.d.ts.map +1 -1
  3. package/dist/block-drag-handler.js +33 -23
  4. package/dist/block-drag-handler.js.map +1 -1
  5. package/dist/block-gutter.d.ts +81 -0
  6. package/dist/block-gutter.d.ts.map +1 -0
  7. package/dist/block-gutter.js +331 -0
  8. package/dist/block-gutter.js.map +1 -0
  9. package/dist/context-menu.d.ts +54 -0
  10. package/dist/context-menu.d.ts.map +1 -0
  11. package/dist/context-menu.js +470 -0
  12. package/dist/context-menu.js.map +1 -0
  13. package/dist/drop-indicator.d.ts.map +1 -1
  14. package/dist/drop-indicator.js +8 -34
  15. package/dist/drop-indicator.js.map +1 -1
  16. package/dist/editor.d.ts +1 -1
  17. package/dist/editor.d.ts.map +1 -1
  18. package/dist/editor.js +153 -12
  19. package/dist/editor.js.map +1 -1
  20. package/dist/floating-toolbar.d.ts.map +1 -1
  21. package/dist/floating-toolbar.js +4 -7
  22. package/dist/floating-toolbar.js.map +1 -1
  23. package/dist/index.d.ts +4 -0
  24. package/dist/index.d.ts.map +1 -1
  25. package/dist/index.js +6 -0
  26. package/dist/index.js.map +1 -1
  27. package/dist/link-popover.d.ts.map +1 -1
  28. package/dist/link-popover.js +2 -43
  29. package/dist/link-popover.js.map +1 -1
  30. package/dist/renderer.d.ts.map +1 -1
  31. package/dist/renderer.js +27 -5
  32. package/dist/renderer.js.map +1 -1
  33. package/dist/selection-sync.d.ts.map +1 -1
  34. package/dist/selection-sync.js +20 -3
  35. package/dist/selection-sync.js.map +1 -1
  36. package/dist/types.d.ts +208 -1
  37. package/dist/types.d.ts.map +1 -1
  38. package/package.json +8 -4
  39. package/styles/all.css +21 -0
  40. package/styles/base.css +33 -0
  41. package/styles/block-gutter.css +76 -0
  42. package/styles/blocks.css +199 -0
  43. package/styles/context-menu.css +58 -0
  44. package/styles/drop-indicator.css +37 -0
  45. package/styles/floating-toolbar.css +51 -0
  46. package/styles/link-popover.css +64 -0
  47. package/styles/marks.css +27 -0
  48. package/styles/mention.css +17 -0
  49. package/styles/pickers.css +317 -0
  50. package/styles/toolbar.css +151 -0
@@ -0,0 +1,317 @@
1
+ /* --------------------------------------------------------
2
+ * RTIF Picker Styles
3
+ *
4
+ * Color picker, font size picker, font family picker.
5
+ * Dynamic values (swatch backgroundColor, font-family
6
+ * preview) remain as inline styles.
7
+ * -------------------------------------------------------- */
8
+
9
+ /* ==== Shared picker patterns ==== */
10
+
11
+ /* ---- Color Picker ---- */
12
+ .rtif-color-picker {
13
+ position: relative;
14
+ display: inline-flex;
15
+ align-items: center;
16
+ }
17
+
18
+ .rtif-color-picker-trigger {
19
+ display: inline-flex;
20
+ align-items: center;
21
+ gap: 2px;
22
+ height: 30px;
23
+ padding: 0 6px;
24
+ border: 1px solid var(--rtif-border, #d0d0d0);
25
+ border-radius: var(--rtif-radius-sm, 4px);
26
+ background: var(--rtif-surface, #fff);
27
+ cursor: pointer;
28
+ font-size: 0.75rem;
29
+ font-weight: 600;
30
+ color: #444;
31
+ transition: background 0.1s, border-color 0.1s;
32
+ }
33
+
34
+ .rtif-color-picker-trigger:hover {
35
+ background: #f5f5f5;
36
+ border-color: #bbb;
37
+ }
38
+
39
+ .rtif-color-picker-letter {
40
+ font-size: 0.875rem;
41
+ font-weight: 700;
42
+ line-height: 1;
43
+ }
44
+
45
+ .rtif-color-picker-bar {
46
+ width: 16px;
47
+ height: 3px;
48
+ border-radius: 1px;
49
+ }
50
+
51
+ .rtif-color-picker-chevron {
52
+ font-size: 0.625rem;
53
+ color: #888;
54
+ margin-left: 1px;
55
+ }
56
+
57
+ .rtif-color-picker-menu {
58
+ position: absolute;
59
+ top: 100%;
60
+ left: 0;
61
+ z-index: 1000;
62
+ min-width: 200px;
63
+ margin-top: 2px;
64
+ padding: 8px;
65
+ background: var(--rtif-surface, #fff);
66
+ border: 1px solid var(--rtif-border, #d0d0d0);
67
+ border-radius: var(--rtif-radius, 6px);
68
+ box-shadow: var(--rtif-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
69
+ }
70
+
71
+ .rtif-color-picker-option {
72
+ padding: 6px 10px;
73
+ border-radius: var(--rtif-radius-sm, 4px);
74
+ cursor: pointer;
75
+ font-size: 0.8125rem;
76
+ color: #1a1a1a;
77
+ transition: background 0.1s;
78
+ }
79
+
80
+ .rtif-color-picker-option:hover,
81
+ .rtif-color-picker-option-highlighted {
82
+ background: #f0f6ff;
83
+ }
84
+
85
+ .rtif-color-picker-auto {
86
+ margin-bottom: 4px;
87
+ }
88
+
89
+ .rtif-color-picker-grid {
90
+ display: grid;
91
+ grid-template-columns: repeat(var(--rtif-color-picker-columns, 5), 1fr);
92
+ gap: 4px;
93
+ padding: 4px 0;
94
+ }
95
+
96
+ .rtif-color-picker-swatch {
97
+ width: 24px;
98
+ height: 24px;
99
+ border-radius: 4px;
100
+ cursor: pointer;
101
+ border: 2px solid transparent;
102
+ transition: border-color 0.1s, transform 0.1s;
103
+ }
104
+
105
+ .rtif-color-picker-swatch:hover {
106
+ transform: scale(1.15);
107
+ }
108
+
109
+ .rtif-color-picker-swatch[aria-selected="true"] {
110
+ border-color: var(--rtif-accent-color, #2563eb);
111
+ }
112
+
113
+ .rtif-color-picker-swatch-light {
114
+ border-color: #e0e0e0;
115
+ }
116
+
117
+ .rtif-color-picker-separator {
118
+ height: 1px;
119
+ margin: 4px 0;
120
+ background: #e8e8e8;
121
+ }
122
+
123
+ .rtif-color-picker-custom {
124
+ display: flex;
125
+ align-items: center;
126
+ gap: 8px;
127
+ padding: 4px 0;
128
+ }
129
+
130
+ .rtif-color-picker-custom-label {
131
+ font-size: 0.75rem;
132
+ color: #666;
133
+ white-space: nowrap;
134
+ }
135
+
136
+ .rtif-color-picker-custom-input {
137
+ width: 28px;
138
+ height: 28px;
139
+ padding: 0;
140
+ border: 1px solid var(--rtif-border, #d0d0d0);
141
+ border-radius: var(--rtif-radius-sm, 4px);
142
+ cursor: pointer;
143
+ }
144
+
145
+ /* ---- Font Size Picker ---- */
146
+ .rtif-font-size-picker {
147
+ position: relative;
148
+ display: inline-flex;
149
+ align-items: center;
150
+ }
151
+
152
+ .rtif-font-size-picker-trigger {
153
+ display: inline-flex;
154
+ align-items: center;
155
+ gap: 4px;
156
+ min-width: 50px;
157
+ height: 30px;
158
+ padding: 0 8px;
159
+ border: 1px solid var(--rtif-border, #d0d0d0);
160
+ border-radius: var(--rtif-radius-sm, 4px);
161
+ background: var(--rtif-surface, #fff);
162
+ font-size: 0.75rem;
163
+ font-weight: 500;
164
+ color: #444;
165
+ cursor: pointer;
166
+ transition: background 0.1s, border-color 0.1s;
167
+ }
168
+
169
+ .rtif-font-size-picker-trigger:hover {
170
+ background: #f5f5f5;
171
+ border-color: #bbb;
172
+ }
173
+
174
+ .rtif-font-size-picker-label {
175
+ flex: 1;
176
+ text-align: center;
177
+ }
178
+
179
+ .rtif-font-size-picker-chevron {
180
+ font-size: 0.625rem;
181
+ color: #888;
182
+ }
183
+
184
+ .rtif-font-size-picker-menu {
185
+ position: absolute;
186
+ top: 100%;
187
+ left: 0;
188
+ z-index: 1000;
189
+ min-width: 80px;
190
+ max-height: 240px;
191
+ overflow-y: auto;
192
+ margin-top: 2px;
193
+ padding: 4px;
194
+ background: var(--rtif-surface, #fff);
195
+ border: 1px solid var(--rtif-border, #d0d0d0);
196
+ border-radius: var(--rtif-radius, 6px);
197
+ box-shadow: var(--rtif-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
198
+ }
199
+
200
+ .rtif-font-size-picker-option {
201
+ padding: 4px 10px;
202
+ border-radius: var(--rtif-radius-sm, 4px);
203
+ cursor: pointer;
204
+ font-size: 0.8125rem;
205
+ color: #1a1a1a;
206
+ text-align: center;
207
+ transition: background 0.1s;
208
+ }
209
+
210
+ .rtif-font-size-picker-option:hover,
211
+ .rtif-font-size-picker-option-highlighted {
212
+ background: #f0f6ff;
213
+ }
214
+
215
+ .rtif-font-size-picker-option[aria-selected="true"] {
216
+ font-weight: 600;
217
+ color: var(--rtif-accent-color, #1a5ccc);
218
+ }
219
+
220
+ .rtif-font-size-picker-default {
221
+ font-style: italic;
222
+ color: #666;
223
+ }
224
+
225
+ .rtif-font-size-picker-separator {
226
+ height: 1px;
227
+ margin: 4px 0;
228
+ background: #e8e8e8;
229
+ }
230
+
231
+ /* ---- Font Family Picker ---- */
232
+ .rtif-font-family-picker {
233
+ position: relative;
234
+ display: inline-flex;
235
+ align-items: center;
236
+ }
237
+
238
+ .rtif-font-family-picker-trigger {
239
+ display: inline-flex;
240
+ align-items: center;
241
+ gap: 4px;
242
+ min-width: 100px;
243
+ height: 30px;
244
+ padding: 0 8px;
245
+ border: 1px solid var(--rtif-border, #d0d0d0);
246
+ border-radius: var(--rtif-radius-sm, 4px);
247
+ background: var(--rtif-surface, #fff);
248
+ font-size: 0.75rem;
249
+ font-weight: 500;
250
+ color: #444;
251
+ cursor: pointer;
252
+ transition: background 0.1s, border-color 0.1s;
253
+ }
254
+
255
+ .rtif-font-family-picker-trigger:hover {
256
+ background: #f5f5f5;
257
+ border-color: #bbb;
258
+ }
259
+
260
+ .rtif-font-family-picker-label {
261
+ flex: 1;
262
+ text-align: left;
263
+ white-space: nowrap;
264
+ overflow: hidden;
265
+ text-overflow: ellipsis;
266
+ }
267
+
268
+ .rtif-font-family-picker-chevron {
269
+ font-size: 0.625rem;
270
+ color: #888;
271
+ }
272
+
273
+ .rtif-font-family-picker-menu {
274
+ position: absolute;
275
+ top: 100%;
276
+ left: 0;
277
+ z-index: 1000;
278
+ min-width: 180px;
279
+ max-height: 280px;
280
+ overflow-y: auto;
281
+ margin-top: 2px;
282
+ padding: 4px;
283
+ background: var(--rtif-surface, #fff);
284
+ border: 1px solid var(--rtif-border, #d0d0d0);
285
+ border-radius: var(--rtif-radius, 6px);
286
+ box-shadow: var(--rtif-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
287
+ }
288
+
289
+ .rtif-font-family-picker-option {
290
+ padding: 6px 10px;
291
+ border-radius: var(--rtif-radius-sm, 4px);
292
+ cursor: pointer;
293
+ font-size: 0.8125rem;
294
+ color: #1a1a1a;
295
+ transition: background 0.1s;
296
+ }
297
+
298
+ .rtif-font-family-picker-option:hover,
299
+ .rtif-font-family-picker-option-highlighted {
300
+ background: #f0f6ff;
301
+ }
302
+
303
+ .rtif-font-family-picker-option[aria-selected="true"] {
304
+ font-weight: 600;
305
+ color: var(--rtif-accent-color, #1a5ccc);
306
+ }
307
+
308
+ .rtif-font-family-picker-default {
309
+ font-style: italic;
310
+ color: #666;
311
+ }
312
+
313
+ .rtif-font-family-picker-separator {
314
+ height: 1px;
315
+ margin: 4px 0;
316
+ background: #e8e8e8;
317
+ }
@@ -0,0 +1,151 @@
1
+ /* --------------------------------------------------------
2
+ * RTIF Toolbar Styles
3
+ *
4
+ * Covers toolbar buttons, separators, and the block type
5
+ * dropdown. Applied via classes in toolbar.ts and
6
+ * block-type-dropdown.ts.
7
+ * -------------------------------------------------------- */
8
+
9
+ /* ---- Toolbar buttons ---- */
10
+ .rtif-toolbar-button {
11
+ display: inline-flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ min-width: 30px;
15
+ height: 30px;
16
+ padding: 0 5px;
17
+ border: none;
18
+ border-radius: var(--rtif-radius-sm, 4px);
19
+ background: transparent;
20
+ font-size: 0.75rem;
21
+ font-weight: 600;
22
+ color: #444;
23
+ cursor: pointer;
24
+ transition: background 0.1s;
25
+ }
26
+
27
+ .rtif-toolbar-button:hover {
28
+ background: #e8e8e8;
29
+ }
30
+
31
+ .rtif-toolbar-button[aria-pressed="true"],
32
+ .rtif-toolbar-button.rtif-toolbar-active {
33
+ background: #d0e0ff;
34
+ color: #1a5ccc;
35
+ }
36
+
37
+ .rtif-toolbar-button[aria-disabled="true"] {
38
+ opacity: 0.3;
39
+ cursor: not-allowed;
40
+ }
41
+
42
+ .rtif-toolbar-separator {
43
+ width: 1px;
44
+ height: 18px;
45
+ margin: 0 4px;
46
+ background: #ddd;
47
+ align-self: center;
48
+ }
49
+
50
+ /* ---- Block type dropdown ---- */
51
+ .rtif-block-type-dropdown {
52
+ position: relative;
53
+ display: inline-flex;
54
+ align-items: center;
55
+ margin: 0 2px;
56
+ }
57
+
58
+ .rtif-block-type-dropdown-trigger {
59
+ display: inline-flex;
60
+ align-items: center;
61
+ gap: 4px;
62
+ min-width: 110px;
63
+ height: 30px;
64
+ padding: 0 8px;
65
+ border: 1px solid var(--rtif-border, #d0d0d0);
66
+ border-radius: var(--rtif-radius-sm, 4px);
67
+ background: var(--rtif-surface, #fff);
68
+ font-size: 0.75rem;
69
+ font-weight: 500;
70
+ color: #444;
71
+ cursor: pointer;
72
+ transition: background 0.1s, border-color 0.1s;
73
+ }
74
+
75
+ .rtif-block-type-dropdown-trigger:hover {
76
+ background: #f5f5f5;
77
+ border-color: #bbb;
78
+ }
79
+
80
+ .rtif-block-type-dropdown-trigger[aria-expanded="true"] {
81
+ border-color: var(--rtif-accent-color, #1a5ccc);
82
+ background: #f0f6ff;
83
+ }
84
+
85
+ .rtif-block-type-dropdown-icon {
86
+ font-weight: 700;
87
+ min-width: 16px;
88
+ text-align: center;
89
+ }
90
+
91
+ .rtif-block-type-dropdown-label {
92
+ flex: 1;
93
+ text-align: left;
94
+ white-space: nowrap;
95
+ overflow: hidden;
96
+ text-overflow: ellipsis;
97
+ }
98
+
99
+ .rtif-block-type-dropdown-chevron {
100
+ font-size: 0.625rem;
101
+ color: #888;
102
+ margin-left: 2px;
103
+ }
104
+
105
+ .rtif-block-type-dropdown-menu {
106
+ position: absolute;
107
+ top: 100%;
108
+ left: 0;
109
+ z-index: 1000;
110
+ min-width: 160px;
111
+ margin-top: 2px;
112
+ padding: 4px;
113
+ background: var(--rtif-surface, #fff);
114
+ border: 1px solid var(--rtif-border, #d0d0d0);
115
+ border-radius: var(--rtif-radius, 6px);
116
+ box-shadow: var(--rtif-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
117
+ }
118
+
119
+ .rtif-block-type-dropdown-option {
120
+ display: flex;
121
+ align-items: center;
122
+ gap: 8px;
123
+ padding: 6px 10px;
124
+ border-radius: var(--rtif-radius-sm, 4px);
125
+ cursor: pointer;
126
+ font-size: 0.8125rem;
127
+ color: #1a1a1a;
128
+ transition: background 0.1s;
129
+ }
130
+
131
+ .rtif-block-type-dropdown-option:hover,
132
+ .rtif-block-type-dropdown-option-highlighted {
133
+ background: #f0f6ff;
134
+ }
135
+
136
+ .rtif-block-type-dropdown-option[aria-selected="true"] {
137
+ font-weight: 600;
138
+ color: var(--rtif-accent-color, #1a5ccc);
139
+ }
140
+
141
+ .rtif-block-type-dropdown-option-icon {
142
+ min-width: 20px;
143
+ text-align: center;
144
+ font-weight: 700;
145
+ font-size: 0.75rem;
146
+ color: #666;
147
+ }
148
+
149
+ .rtif-block-type-dropdown-option[aria-selected="true"] .rtif-block-type-dropdown-option-icon {
150
+ color: var(--rtif-accent-color, #1a5ccc);
151
+ }