testomatio-editor-blocks 0.2.3 → 0.4.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.
- package/package/editor/blocks/markdown.d.ts +5 -0
- package/package/editor/blocks/markdown.js +30 -5
- package/package/editor/blocks/snippet.js +127 -2
- package/package/editor/blocks/step.js +82 -15
- package/package/editor/blocks/stepField.d.ts +7 -3
- package/package/editor/blocks/stepField.js +395 -230
- package/package/editor/blocks/useAutoResize.d.ts +8 -0
- package/package/editor/blocks/useAutoResize.js +31 -0
- package/package/editor/customMarkdownConverter.js +150 -21
- package/package/styles.css +327 -71
- package/package.json +5 -2
- package/src/App.tsx +1 -1
- package/src/editor/blocks/markdown.ts +35 -5
- package/src/editor/blocks/snippet.tsx +202 -26
- package/src/editor/blocks/step.tsx +132 -36
- package/src/editor/blocks/stepField.tsx +552 -267
- package/src/editor/blocks/useAutoResize.ts +44 -0
- package/src/editor/customMarkdownConverter.test.ts +114 -2
- package/src/editor/customMarkdownConverter.ts +166 -19
- package/src/editor/customSchema.test.ts +35 -0
- package/src/editor/markdownToBlocks.test.ts +119 -0
- package/src/editor/styles.css +342 -71
package/package/styles.css
CHANGED
|
@@ -1,14 +1,98 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
COLOR PALETTE
|
|
3
|
+
Adjust these variables to change the theme
|
|
4
|
+
============================================ */
|
|
5
|
+
:root {
|
|
6
|
+
/* Base colors */
|
|
7
|
+
--color-white: #ffffff;
|
|
8
|
+
--color-slate-900: #0f172a;
|
|
9
|
+
--color-slate-400: #94a3b8;
|
|
10
|
+
|
|
11
|
+
/* Primary (Blue) - used for steps, buttons, focus states */
|
|
12
|
+
--color-primary-900: #1e3a8a;
|
|
13
|
+
--color-primary-700: #1d4ed8;
|
|
14
|
+
--color-primary-600: #2563eb;
|
|
15
|
+
--color-primary-500: #3b82f6;
|
|
16
|
+
|
|
17
|
+
/* Success (Green) - used for ready status */
|
|
18
|
+
--color-success-500: #22c55e;
|
|
19
|
+
|
|
20
|
+
/* Danger (Red) - used for blocked status */
|
|
21
|
+
--color-danger-500: #ef4444;
|
|
22
|
+
|
|
23
|
+
/* Accent (Emerald/Teal) - used for snippets */
|
|
24
|
+
--color-accent-700: #0f766e;
|
|
25
|
+
--color-accent-500: #10b981;
|
|
26
|
+
|
|
27
|
+
/* Selection */
|
|
28
|
+
--color-selection: #f4d35e;
|
|
29
|
+
|
|
30
|
+
/* Semantic tokens - these reference the palette above */
|
|
31
|
+
--text-primary: var(--color-slate-900);
|
|
32
|
+
--text-muted: rgba(15, 23, 42, 0.65);
|
|
33
|
+
|
|
34
|
+
--border-light: rgba(15, 23, 42, 0.1);
|
|
35
|
+
--border-default: rgba(15, 23, 42, 0.12);
|
|
36
|
+
--shadow-subtle: rgba(15, 23, 42, 0.05);
|
|
37
|
+
--shadow-medium: rgba(15, 23, 42, 0.16);
|
|
38
|
+
--shadow-heavy: rgba(15, 23, 42, 0.35);
|
|
39
|
+
--overlay-dark: rgba(15, 23, 42, 0.75);
|
|
40
|
+
|
|
41
|
+
--bg-white: rgba(255, 255, 255, 0.85);
|
|
42
|
+
--bg-white-solid: rgba(255, 255, 255, 0.92);
|
|
43
|
+
--bg-white-opaque: rgba(255, 255, 255, 0.98);
|
|
44
|
+
--bg-muted: rgba(15, 23, 42, 0.05);
|
|
45
|
+
|
|
46
|
+
/* Step block colors */
|
|
47
|
+
--step-border: rgba(59, 130, 246, 0.65);
|
|
48
|
+
--step-bg: rgba(59, 130, 246, 0.12);
|
|
49
|
+
--step-shadow: rgba(37, 99, 235, 0.08);
|
|
50
|
+
--step-border-light: rgba(37, 99, 235, 0.25);
|
|
51
|
+
--step-border-medium: rgba(37, 99, 235, 0.35);
|
|
52
|
+
--step-border-strong: rgba(37, 99, 235, 0.55);
|
|
53
|
+
--step-border-focus: rgba(37, 99, 235, 0.7);
|
|
54
|
+
--step-bg-hover: rgba(59, 130, 246, 0.18);
|
|
55
|
+
--step-bg-light: rgba(59, 130, 246, 0.1);
|
|
56
|
+
--step-bg-button: rgba(37, 99, 235, 0.12);
|
|
57
|
+
--step-bg-button-hover: rgba(37, 99, 235, 0.2);
|
|
58
|
+
--step-focus-ring: rgba(59, 130, 246, 0.2);
|
|
59
|
+
--step-focus-outline: rgba(37, 99, 235, 0.4);
|
|
60
|
+
--step-underline: rgba(37, 99, 235, 0.7);
|
|
61
|
+
--step-shadow-hover: rgba(37, 99, 235, 0.18);
|
|
62
|
+
--step-shadow-focus: rgba(37, 99, 235, 0.2);
|
|
63
|
+
|
|
64
|
+
/* Snippet block colors */
|
|
65
|
+
--snippet-border: rgba(16, 185, 129, 0.75);
|
|
66
|
+
--snippet-bg: rgba(16, 185, 129, 0.12);
|
|
67
|
+
--snippet-shadow: rgba(16, 185, 129, 0.16);
|
|
68
|
+
--snippet-border-light: rgba(16, 185, 129, 0.25);
|
|
69
|
+
--snippet-border-medium: rgba(16, 185, 129, 0.35);
|
|
70
|
+
--snippet-border-strong: rgba(16, 185, 129, 0.55);
|
|
71
|
+
--snippet-border-focus: rgba(16, 185, 129, 0.7);
|
|
72
|
+
--snippet-bg-light: rgba(16, 185, 129, 0.1);
|
|
73
|
+
--snippet-bg-hover: rgba(16, 185, 129, 0.18);
|
|
74
|
+
--snippet-focus-ring: rgba(16, 185, 129, 0.2);
|
|
75
|
+
|
|
76
|
+
/* Status colors */
|
|
77
|
+
--status-default: var(--color-slate-400);
|
|
78
|
+
--status-default-bg: rgba(148, 163, 184, 0.12);
|
|
79
|
+
--status-ready: var(--color-success-500);
|
|
80
|
+
--status-ready-bg: rgba(34, 197, 94, 0.12);
|
|
81
|
+
--status-blocked: var(--color-danger-500);
|
|
82
|
+
--status-blocked-bg: rgba(239, 68, 68, 0.12);
|
|
83
|
+
}
|
|
84
|
+
|
|
1
85
|
.testomatio-editor {
|
|
2
86
|
font-family: "Inter", system-ui, -apple-system, sans-serif;
|
|
3
87
|
}
|
|
4
88
|
|
|
5
89
|
.bn-testcase {
|
|
6
|
-
--status-color:
|
|
90
|
+
--status-color: var(--status-default);
|
|
7
91
|
position: relative;
|
|
8
92
|
border-radius: 1rem;
|
|
9
93
|
border-left: 6px solid var(--status-color);
|
|
10
94
|
padding: 1rem 1.25rem;
|
|
11
|
-
background:
|
|
95
|
+
background: var(--status-default-bg);
|
|
12
96
|
display: flex;
|
|
13
97
|
flex-direction: column;
|
|
14
98
|
gap: 0.75rem;
|
|
@@ -20,7 +104,7 @@
|
|
|
20
104
|
inset: 0;
|
|
21
105
|
border-radius: inherit;
|
|
22
106
|
pointer-events: none;
|
|
23
|
-
box-shadow: 0 0 0 1px
|
|
107
|
+
box-shadow: 0 0 0 1px var(--shadow-subtle);
|
|
24
108
|
}
|
|
25
109
|
|
|
26
110
|
.bn-testcase__header {
|
|
@@ -42,20 +126,20 @@
|
|
|
42
126
|
font-weight: 700;
|
|
43
127
|
text-transform: uppercase;
|
|
44
128
|
letter-spacing: 0.08em;
|
|
45
|
-
color:
|
|
129
|
+
color: var(--text-primary);
|
|
46
130
|
}
|
|
47
131
|
|
|
48
132
|
.bn-testcase__reference {
|
|
49
133
|
padding: 0.35rem 0.6rem;
|
|
50
134
|
border-radius: 0.5rem;
|
|
51
|
-
border: 1px solid
|
|
52
|
-
background:
|
|
135
|
+
border: 1px solid var(--border-light);
|
|
136
|
+
background: var(--bg-white);
|
|
53
137
|
font-size: 0.85rem;
|
|
54
138
|
min-width: 8rem;
|
|
55
139
|
}
|
|
56
140
|
|
|
57
141
|
.bn-testcase__reference:focus-visible {
|
|
58
|
-
outline: 2px solid
|
|
142
|
+
outline: 2px solid var(--step-focus-outline);
|
|
59
143
|
outline-offset: 2px;
|
|
60
144
|
}
|
|
61
145
|
|
|
@@ -64,13 +148,13 @@
|
|
|
64
148
|
align-items: center;
|
|
65
149
|
gap: 0.35rem;
|
|
66
150
|
font-size: 0.85rem;
|
|
67
|
-
color:
|
|
151
|
+
color: var(--text-primary);
|
|
68
152
|
font-weight: 600;
|
|
69
153
|
}
|
|
70
154
|
|
|
71
155
|
.bn-testcase__status select {
|
|
72
156
|
border-radius: 0.5rem;
|
|
73
|
-
border: 1px solid
|
|
157
|
+
border: 1px solid var(--border-default);
|
|
74
158
|
padding: 0.35rem 0.6rem;
|
|
75
159
|
background: rgba(255, 255, 255, 0.95);
|
|
76
160
|
font-size: 0.85rem;
|
|
@@ -83,19 +167,19 @@
|
|
|
83
167
|
}
|
|
84
168
|
|
|
85
169
|
.bn-testcase--ready {
|
|
86
|
-
--status-color:
|
|
87
|
-
background:
|
|
170
|
+
--status-color: var(--status-ready);
|
|
171
|
+
background: var(--status-ready-bg);
|
|
88
172
|
}
|
|
89
173
|
|
|
90
174
|
.bn-testcase--blocked {
|
|
91
|
-
--status-color:
|
|
92
|
-
background:
|
|
175
|
+
--status-color: var(--status-blocked);
|
|
176
|
+
background: var(--status-blocked-bg);
|
|
93
177
|
}
|
|
94
178
|
|
|
95
179
|
.bn-teststep {
|
|
96
180
|
border-radius: 0.85rem;
|
|
97
|
-
border-left: 5px solid
|
|
98
|
-
background:
|
|
181
|
+
border-left: 5px solid var(--step-border);
|
|
182
|
+
background: var(--step-bg);
|
|
99
183
|
padding: 0.85rem 1.1rem 1rem;
|
|
100
184
|
display: grid;
|
|
101
185
|
gap: 0.75rem;
|
|
@@ -109,60 +193,60 @@
|
|
|
109
193
|
inset: 0;
|
|
110
194
|
border-radius: inherit;
|
|
111
195
|
pointer-events: none;
|
|
112
|
-
box-shadow: 0 0 0 1px
|
|
196
|
+
box-shadow: 0 0 0 1px var(--step-shadow);
|
|
113
197
|
}
|
|
114
198
|
|
|
115
199
|
.bn-snippet {
|
|
116
|
-
border-left-color:
|
|
117
|
-
background:
|
|
200
|
+
border-left-color: var(--snippet-border);
|
|
201
|
+
background: var(--snippet-bg);
|
|
118
202
|
}
|
|
119
203
|
|
|
120
204
|
.bn-snippet::after {
|
|
121
|
-
box-shadow: 0 0 0 1px
|
|
205
|
+
box-shadow: 0 0 0 1px var(--snippet-shadow);
|
|
122
206
|
}
|
|
123
207
|
|
|
124
208
|
.bn-snippet .bn-teststep__toggle {
|
|
125
209
|
border-color: rgba(16, 185, 129, 0.45);
|
|
126
|
-
background:
|
|
127
|
-
color:
|
|
210
|
+
background: var(--snippet-bg-light);
|
|
211
|
+
color: var(--color-accent-700);
|
|
128
212
|
}
|
|
129
213
|
|
|
130
214
|
.bn-snippet .bn-teststep__toggle:hover {
|
|
131
|
-
background:
|
|
132
|
-
border-color:
|
|
133
|
-
box-shadow: 0 0 0 1px
|
|
215
|
+
background: var(--snippet-bg-hover);
|
|
216
|
+
border-color: var(--snippet-border-strong);
|
|
217
|
+
box-shadow: 0 0 0 1px var(--snippet-focus-ring);
|
|
134
218
|
}
|
|
135
219
|
|
|
136
220
|
.bn-snippet .bn-step-field__label {
|
|
137
|
-
color:
|
|
221
|
+
color: var(--color-accent-700);
|
|
138
222
|
}
|
|
139
223
|
|
|
140
224
|
.bn-snippet .bn-step-toolbar__button {
|
|
141
|
-
border-color:
|
|
142
|
-
color:
|
|
225
|
+
border-color: var(--snippet-border-medium);
|
|
226
|
+
color: var(--color-accent-700);
|
|
143
227
|
}
|
|
144
228
|
|
|
145
229
|
.bn-snippet .bn-step-toolbar__button:hover {
|
|
146
|
-
background:
|
|
147
|
-
border-color:
|
|
230
|
+
background: var(--snippet-bg);
|
|
231
|
+
border-color: var(--snippet-border-strong);
|
|
148
232
|
}
|
|
149
233
|
|
|
150
234
|
.bn-snippet .bn-step-editor {
|
|
151
|
-
border-color:
|
|
235
|
+
border-color: var(--snippet-border-light);
|
|
152
236
|
}
|
|
153
237
|
|
|
154
|
-
.bn-snippet .bn-step-editor
|
|
155
|
-
border-color:
|
|
156
|
-
box-shadow: 0 0 0 3px
|
|
238
|
+
.bn-snippet .bn-step-editor.bn-step-editor--focused {
|
|
239
|
+
border-color: var(--snippet-border-focus);
|
|
240
|
+
box-shadow: 0 0 0 3px var(--snippet-focus-ring);
|
|
157
241
|
}
|
|
158
242
|
|
|
159
243
|
.bn-snippet .bn-step-suggestions {
|
|
160
|
-
border-color:
|
|
244
|
+
border-color: var(--snippet-border-light);
|
|
161
245
|
}
|
|
162
246
|
|
|
163
247
|
.bn-snippet .bn-step-suggestion:hover,
|
|
164
248
|
.bn-snippet .bn-step-suggestion--active {
|
|
165
|
-
background:
|
|
249
|
+
background: var(--snippet-bg-light);
|
|
166
250
|
}
|
|
167
251
|
|
|
168
252
|
.bn-snippet .bn-step-suggestion__meta {
|
|
@@ -172,15 +256,15 @@
|
|
|
172
256
|
.bn-snippet__empty {
|
|
173
257
|
margin: 0;
|
|
174
258
|
font-size: 0.9rem;
|
|
175
|
-
color:
|
|
259
|
+
color: var(--text-muted);
|
|
176
260
|
}
|
|
177
261
|
|
|
178
262
|
.bn-step-add {
|
|
179
263
|
align-self: flex-start;
|
|
180
264
|
margin-top: 0.25rem;
|
|
181
265
|
border: none;
|
|
182
|
-
background:
|
|
183
|
-
color:
|
|
266
|
+
background: var(--step-bg-button);
|
|
267
|
+
color: var(--color-primary-700);
|
|
184
268
|
font-weight: 600;
|
|
185
269
|
font-size: 0.85rem;
|
|
186
270
|
padding: 0.35rem 0.65rem;
|
|
@@ -192,8 +276,8 @@
|
|
|
192
276
|
}
|
|
193
277
|
|
|
194
278
|
.bn-step-add:hover {
|
|
195
|
-
background:
|
|
196
|
-
box-shadow: 0 0 0 1px
|
|
279
|
+
background: var(--step-bg-button-hover);
|
|
280
|
+
box-shadow: 0 0 0 1px var(--step-shadow-hover);
|
|
197
281
|
}
|
|
198
282
|
|
|
199
283
|
.bn-teststep__toggle {
|
|
@@ -201,8 +285,8 @@
|
|
|
201
285
|
padding: 0.35rem 0.6rem;
|
|
202
286
|
border-radius: 0.5rem;
|
|
203
287
|
border: 1px dashed rgba(37, 99, 235, 0.45);
|
|
204
|
-
background:
|
|
205
|
-
color:
|
|
288
|
+
background: var(--step-bg-light);
|
|
289
|
+
color: var(--color-primary-700);
|
|
206
290
|
font-size: 0.75rem;
|
|
207
291
|
font-weight: 700;
|
|
208
292
|
letter-spacing: 0.06em;
|
|
@@ -215,9 +299,9 @@
|
|
|
215
299
|
}
|
|
216
300
|
|
|
217
301
|
.bn-teststep__toggle:hover {
|
|
218
|
-
background:
|
|
219
|
-
border-color:
|
|
220
|
-
box-shadow: 0 0 0 1px
|
|
302
|
+
background: var(--step-bg-hover);
|
|
303
|
+
border-color: var(--step-border-strong);
|
|
304
|
+
box-shadow: 0 0 0 1px var(--step-shadow-focus);
|
|
221
305
|
}
|
|
222
306
|
|
|
223
307
|
.bn-step-field {
|
|
@@ -227,6 +311,10 @@
|
|
|
227
311
|
position: relative;
|
|
228
312
|
}
|
|
229
313
|
|
|
314
|
+
.bn-step-field--collapsed {
|
|
315
|
+
align-items: flex-start;
|
|
316
|
+
}
|
|
317
|
+
|
|
230
318
|
.bn-step-field__top {
|
|
231
319
|
display: flex;
|
|
232
320
|
justify-content: space-between;
|
|
@@ -234,6 +322,12 @@
|
|
|
234
322
|
gap: 0.5rem;
|
|
235
323
|
}
|
|
236
324
|
|
|
325
|
+
.bn-step-field__label-row {
|
|
326
|
+
display: flex;
|
|
327
|
+
align-items: center;
|
|
328
|
+
gap: 0.35rem;
|
|
329
|
+
}
|
|
330
|
+
|
|
237
331
|
.bn-step-field__label {
|
|
238
332
|
display: inline-flex;
|
|
239
333
|
align-items: center;
|
|
@@ -242,7 +336,46 @@
|
|
|
242
336
|
text-transform: uppercase;
|
|
243
337
|
letter-spacing: 0.08em;
|
|
244
338
|
font-weight: 700;
|
|
245
|
-
color:
|
|
339
|
+
color: var(--color-primary-700);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.bn-step-field__label--toggle {
|
|
343
|
+
cursor: pointer;
|
|
344
|
+
display: inline-flex;
|
|
345
|
+
align-items: center;
|
|
346
|
+
gap: 0.35rem;
|
|
347
|
+
text-decoration-line: underline;
|
|
348
|
+
text-decoration-style: dashed;
|
|
349
|
+
text-underline-offset: 0.2em;
|
|
350
|
+
text-decoration-color: var(--step-underline);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.bn-step-field__label--toggle:hover {
|
|
354
|
+
color: var(--color-primary-900);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.bn-step-suggestions-toggle {
|
|
358
|
+
width: 1.75rem;
|
|
359
|
+
height: 1.75rem;
|
|
360
|
+
border-radius: 0.4rem;
|
|
361
|
+
border: 1px solid var(--step-border-medium);
|
|
362
|
+
background: transparent;
|
|
363
|
+
color: var(--color-primary-700);
|
|
364
|
+
font-weight: 700;
|
|
365
|
+
font-size: 1rem;
|
|
366
|
+
display: flex;
|
|
367
|
+
align-items: center;
|
|
368
|
+
justify-content: center;
|
|
369
|
+
cursor: pointer;
|
|
370
|
+
transition:
|
|
371
|
+
background-color 120ms ease,
|
|
372
|
+
border-color 120ms ease,
|
|
373
|
+
box-shadow 120ms ease;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.bn-step-suggestions-toggle:hover {
|
|
377
|
+
background: var(--step-bg-button);
|
|
378
|
+
border-color: var(--step-border-strong);
|
|
246
379
|
}
|
|
247
380
|
|
|
248
381
|
.bn-step-toolbar {
|
|
@@ -254,9 +387,9 @@
|
|
|
254
387
|
width: 2rem;
|
|
255
388
|
height: 2rem;
|
|
256
389
|
border-radius: 0.4rem;
|
|
257
|
-
border: 1px solid
|
|
258
|
-
background:
|
|
259
|
-
color:
|
|
390
|
+
border: 1px solid var(--step-border-medium);
|
|
391
|
+
background: var(--bg-white);
|
|
392
|
+
color: var(--color-primary-700);
|
|
260
393
|
font-weight: 700;
|
|
261
394
|
font-size: 0.9rem;
|
|
262
395
|
display: flex;
|
|
@@ -270,49 +403,172 @@
|
|
|
270
403
|
}
|
|
271
404
|
|
|
272
405
|
.bn-step-toolbar__button:hover {
|
|
273
|
-
background:
|
|
274
|
-
border-color:
|
|
406
|
+
background: var(--step-bg-button);
|
|
407
|
+
border-color: var(--step-border-strong);
|
|
275
408
|
}
|
|
276
409
|
|
|
277
410
|
.bn-step-editor {
|
|
411
|
+
position: relative;
|
|
278
412
|
border-radius: 0.6rem;
|
|
279
|
-
border: 1px solid
|
|
280
|
-
|
|
281
|
-
font-size: 0.95rem;
|
|
282
|
-
background: rgba(255, 255, 255, 0.92);
|
|
413
|
+
border: 1px solid var(--step-border-light);
|
|
414
|
+
background: var(--bg-white-solid);
|
|
283
415
|
transition:
|
|
284
416
|
border-color 120ms ease,
|
|
285
417
|
box-shadow 120ms ease;
|
|
286
418
|
min-height: 2.5rem;
|
|
287
|
-
|
|
288
|
-
|
|
419
|
+
font-size: 0.95rem;
|
|
420
|
+
overflow: hidden;
|
|
289
421
|
}
|
|
290
422
|
|
|
291
|
-
.bn-step-editor
|
|
423
|
+
.bn-step-editor--multiline {
|
|
292
424
|
min-height: 4rem;
|
|
293
425
|
}
|
|
294
426
|
|
|
295
|
-
.bn-step-editor
|
|
427
|
+
.bn-step-editor.bn-step-editor--focused {
|
|
296
428
|
outline: none;
|
|
297
|
-
border-color:
|
|
298
|
-
box-shadow: 0 0 0 3px
|
|
429
|
+
border-color: var(--step-border-focus);
|
|
430
|
+
box-shadow: 0 0 0 3px var(--step-focus-ring);
|
|
299
431
|
}
|
|
300
432
|
|
|
301
|
-
.bn-step-editor
|
|
302
|
-
|
|
303
|
-
|
|
433
|
+
.bn-step-editor .overtype-container {
|
|
434
|
+
height: 100%;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.bn-step-editor .overtype-wrapper {
|
|
438
|
+
min-height: 100%;
|
|
439
|
+
background: transparent !important;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.bn-step-editor .overtype-wrapper .overtype-input,
|
|
443
|
+
.bn-step-editor .overtype-wrapper .overtype-preview {
|
|
444
|
+
padding: 0.5rem 0.75rem !important;
|
|
445
|
+
min-height: inherit !important;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.bn-step-editor .overtype-wrapper .overtype-preview {
|
|
449
|
+
color: var(--text-primary) !important;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.bn-step-editor .overtype-wrapper .overtype-preview img {
|
|
453
|
+
display: block;
|
|
454
|
+
max-width: 100%;
|
|
455
|
+
border-radius: 0.65rem;
|
|
456
|
+
margin: 0.5rem 0;
|
|
304
457
|
pointer-events: none;
|
|
305
458
|
}
|
|
306
459
|
|
|
460
|
+
.bn-step-field:not(:focus-within) .overtype-wrapper .overtype-input::selection {
|
|
461
|
+
background-color: transparent !important;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.bn-step-field:focus-within .overtype-wrapper .overtype-input::selection {
|
|
465
|
+
background-color: rgba(244, 211, 94, 0.4) !important; /* var(--color-selection) with opacity */
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.bn-step-images {
|
|
469
|
+
display: flex;
|
|
470
|
+
flex-wrap: wrap;
|
|
471
|
+
gap: 0.5rem;
|
|
472
|
+
margin-top: 0.35rem;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.bn-step-image-thumb {
|
|
476
|
+
position: relative;
|
|
477
|
+
width: 4rem;
|
|
478
|
+
height: 4rem;
|
|
479
|
+
border-radius: 0.5rem;
|
|
480
|
+
border: 1px solid var(--step-border-light);
|
|
481
|
+
overflow: hidden;
|
|
482
|
+
background: var(--bg-muted);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.bn-step-image-thumb__button {
|
|
486
|
+
width: 100%;
|
|
487
|
+
height: 100%;
|
|
488
|
+
border: none;
|
|
489
|
+
padding: 0;
|
|
490
|
+
background: transparent;
|
|
491
|
+
cursor: pointer;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.bn-step-image-thumb__button img {
|
|
495
|
+
width: 100%;
|
|
496
|
+
height: 100%;
|
|
497
|
+
object-fit: cover;
|
|
498
|
+
display: block;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.bn-step-image-thumb__remove {
|
|
502
|
+
position: absolute;
|
|
503
|
+
top: 0.15rem;
|
|
504
|
+
right: 0.15rem;
|
|
505
|
+
border: none;
|
|
506
|
+
border-radius: 999px;
|
|
507
|
+
width: 1.35rem;
|
|
508
|
+
height: 1.35rem;
|
|
509
|
+
background: var(--overlay-dark);
|
|
510
|
+
color: var(--color-white);
|
|
511
|
+
cursor: pointer;
|
|
512
|
+
opacity: 0;
|
|
513
|
+
transition: opacity 120ms ease;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
.bn-step-image-thumb:hover .bn-step-image-thumb__remove,
|
|
517
|
+
.bn-step-image-thumb__remove:focus-visible {
|
|
518
|
+
opacity: 1;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
.bn-step-image-preview {
|
|
522
|
+
position: fixed;
|
|
523
|
+
inset: 0;
|
|
524
|
+
background: var(--overlay-dark);
|
|
525
|
+
display: flex;
|
|
526
|
+
align-items: center;
|
|
527
|
+
justify-content: center;
|
|
528
|
+
padding: 1.5rem;
|
|
529
|
+
z-index: 15;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.bn-step-image-preview__content {
|
|
533
|
+
position: relative;
|
|
534
|
+
max-width: min(90vw, 800px);
|
|
535
|
+
width: 100%;
|
|
536
|
+
background: var(--color-white);
|
|
537
|
+
border-radius: 0.75rem;
|
|
538
|
+
padding: 1rem;
|
|
539
|
+
box-shadow: 0 25px 45px var(--shadow-heavy);
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
.bn-step-image-preview__content img {
|
|
543
|
+
width: 100%;
|
|
544
|
+
height: auto;
|
|
545
|
+
display: block;
|
|
546
|
+
border-radius: 0.5rem;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.bn-step-image-preview__close {
|
|
550
|
+
position: absolute;
|
|
551
|
+
top: 0.35rem;
|
|
552
|
+
right: 0.35rem;
|
|
553
|
+
border: none;
|
|
554
|
+
background: rgba(15, 23, 42, 0.65);
|
|
555
|
+
color: var(--color-white);
|
|
556
|
+
border-radius: 999px;
|
|
557
|
+
width: 2rem;
|
|
558
|
+
height: 2rem;
|
|
559
|
+
cursor: pointer;
|
|
560
|
+
font-size: 1.1rem;
|
|
561
|
+
}
|
|
562
|
+
|
|
307
563
|
.bn-step-suggestions {
|
|
308
564
|
position: absolute;
|
|
309
565
|
left: 0;
|
|
310
566
|
right: 0;
|
|
311
567
|
top: calc(100% + 0.25rem);
|
|
312
|
-
background:
|
|
568
|
+
background: var(--bg-white-opaque);
|
|
313
569
|
border-radius: 0.65rem;
|
|
314
|
-
border: 1px solid
|
|
315
|
-
box-shadow: 0 18px 35px
|
|
570
|
+
border: 1px solid var(--step-border-light);
|
|
571
|
+
box-shadow: 0 18px 35px var(--shadow-medium);
|
|
316
572
|
padding: 0.25rem;
|
|
317
573
|
display: flex;
|
|
318
574
|
flex-direction: column;
|
|
@@ -333,12 +589,12 @@
|
|
|
333
589
|
justify-content: space-between;
|
|
334
590
|
gap: 0.5rem;
|
|
335
591
|
cursor: pointer;
|
|
336
|
-
color:
|
|
592
|
+
color: var(--text-primary);
|
|
337
593
|
}
|
|
338
594
|
|
|
339
595
|
.bn-step-suggestion:hover,
|
|
340
596
|
.bn-step-suggestion--active {
|
|
341
|
-
background:
|
|
597
|
+
background: var(--step-bg-light);
|
|
342
598
|
}
|
|
343
599
|
|
|
344
600
|
.bn-step-suggestion__title {
|
|
@@ -349,7 +605,7 @@
|
|
|
349
605
|
.bn-step-suggestion__meta {
|
|
350
606
|
font-size: 0.75rem;
|
|
351
607
|
font-weight: 600;
|
|
352
|
-
color:
|
|
608
|
+
color: var(--text-muted);
|
|
353
609
|
}
|
|
354
610
|
|
|
355
611
|
.bn-inline-image {
|
|
@@ -370,5 +626,5 @@
|
|
|
370
626
|
}
|
|
371
627
|
|
|
372
628
|
.bn-testcase--draft {
|
|
373
|
-
--status-color:
|
|
629
|
+
--status-color: var(--status-default);
|
|
374
630
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "testomatio-editor-blocks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./package/index.js",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"build:package": "node scripts/build-package.mjs",
|
|
30
30
|
"lint": "eslint .",
|
|
31
31
|
"test": "vitest",
|
|
32
|
-
"test:run": "vitest run",
|
|
32
|
+
"test:run": "vitest run --reporter=verbose",
|
|
33
33
|
"preview": "vite preview"
|
|
34
34
|
},
|
|
35
35
|
"keywords": [
|
|
@@ -64,5 +64,8 @@
|
|
|
64
64
|
"typescript-eslint": "^8.45.0",
|
|
65
65
|
"vite": "^7.1.7",
|
|
66
66
|
"vitest": "^3.2.4"
|
|
67
|
+
},
|
|
68
|
+
"dependencies": {
|
|
69
|
+
"overtype": "^2.0.6"
|
|
67
70
|
}
|
|
68
71
|
}
|
package/src/App.tsx
CHANGED
|
@@ -664,7 +664,7 @@ function App() {
|
|
|
664
664
|
<h2>Autocomplete Steps</h2>
|
|
665
665
|
</div>
|
|
666
666
|
<p className="app__panel-text">
|
|
667
|
-
|
|
667
|
+
Markdown format supported
|
|
668
668
|
</p>
|
|
669
669
|
<ol className="app__step-list">
|
|
670
670
|
{(DEMO_STEP_FIXTURES.data ?? []).map((step) => (
|