@kubex/zinc 1.1.100 → 1.1.102
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/custom-elements.json +260 -81
- package/dist/vscode.html-custom-data.json +13 -13
- package/dist/web-types.json +25 -25
- package/dist/zn.d.ts +124 -4
- package/dist/zn.min.js +359 -282
- package/docs/pages/components/remarkd-editor.md +59 -0
- package/package.json +1 -1
- package/src/components/menu/menu.component.ts +4 -1
- package/src/components/menu/menu.scss +3 -0
- package/src/components/page/page.scss +14 -2
- package/src/components/remarkd-editor/actions.ts +159 -0
- package/src/components/remarkd-editor/feature-keys.ts +17 -0
- package/src/components/remarkd-editor/remarkd-editor.component.ts +509 -49
- package/src/components/remarkd-editor/remarkd-editor.scss +68 -1
- package/src/components/remarkd-editor/remarkd-editor.test.ts +675 -9
- package/src/components/slash-menu/slash-menu.scss +2 -0
- package/src/internal/toolbar-overflow.ts +100 -0
|
@@ -23,11 +23,35 @@
|
|
|
23
23
|
display: flex;
|
|
24
24
|
flex: none;
|
|
25
25
|
gap: 2px;
|
|
26
|
-
|
|
26
|
+
// Collapsing overflow into the "more" menu replaces wrapping — see ToolbarOverflowController.
|
|
27
|
+
flex-wrap: nowrap;
|
|
27
28
|
padding: var(--zn-spacing-x-small);
|
|
28
29
|
border-bottom: 1px solid rgb(var(--zn-border-color));
|
|
29
30
|
}
|
|
30
31
|
|
|
32
|
+
.toolbar__group {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
gap: 2px;
|
|
36
|
+
align-items: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.toolbar__group + .toolbar__group::before {
|
|
40
|
+
content: '';
|
|
41
|
+
align-self: stretch;
|
|
42
|
+
margin-inline: 4px;
|
|
43
|
+
border-left: 1px solid rgb(var(--zn-border-color));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// The constraint has to land on zn-menu's own scroll container (--zn-menu-max-height),
|
|
47
|
+
// not the host: the host has room to spare (nothing to chain a wheel-over-an-item to), so
|
|
48
|
+
// putting the cap on the host left the inner list unscrollable except at its edge. The
|
|
49
|
+
// popup auto-sizes to the space it actually has (--auto-size-available-height); 60dvh is
|
|
50
|
+
// only the fallback for when that variable isn't published.
|
|
51
|
+
.remarkd-editor__toolbar-more zn-menu {
|
|
52
|
+
--zn-menu-max-height: var(--auto-size-available-height, 60dvh);
|
|
53
|
+
}
|
|
54
|
+
|
|
31
55
|
.remarkd-editor__body {
|
|
32
56
|
padding: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-large) 52px;
|
|
33
57
|
min-height: 10rem;
|
|
@@ -265,6 +289,49 @@
|
|
|
265
289
|
font-size: var(--zn-font-size-small);
|
|
266
290
|
}
|
|
267
291
|
|
|
292
|
+
.remarkd-editor__conditional {
|
|
293
|
+
border-left: 3px solid rgba(var(--zn-primary), 0.5);
|
|
294
|
+
padding-left: var(--zn-spacing-small);
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.remarkd-editor__conditional-label {
|
|
298
|
+
display: inline-flex;
|
|
299
|
+
align-items: center;
|
|
300
|
+
gap: 4px;
|
|
301
|
+
margin-bottom: var(--zn-spacing-x-small);
|
|
302
|
+
color: rgb(var(--zn-primary));
|
|
303
|
+
font-size: 0.75rem;
|
|
304
|
+
text-transform: uppercase;
|
|
305
|
+
letter-spacing: 0.04em;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.remarkd-editor__meta {
|
|
309
|
+
display: flex;
|
|
310
|
+
flex-wrap: wrap;
|
|
311
|
+
gap: var(--zn-spacing-x-small);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.remarkd-editor__variable {
|
|
315
|
+
display: inline-flex;
|
|
316
|
+
align-items: center;
|
|
317
|
+
gap: var(--zn-spacing-x-small);
|
|
318
|
+
padding: 2px var(--zn-spacing-x-small);
|
|
319
|
+
border: 1px dashed rgb(var(--zn-border-color));
|
|
320
|
+
border-radius: var(--zn-border-radius);
|
|
321
|
+
font-size: 0.875rem;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.remarkd-editor__variable-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
325
|
+
.remarkd-editor__variable-state { color: rgb(var(--zn-text-body)); font-style: italic; }
|
|
326
|
+
|
|
327
|
+
.remarkd-editor__var {
|
|
328
|
+
padding: 0 2px;
|
|
329
|
+
border-radius: 3px;
|
|
330
|
+
background: rgba(var(--zn-primary), 0.12);
|
|
331
|
+
color: rgb(var(--zn-primary));
|
|
332
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
333
|
+
}
|
|
334
|
+
|
|
268
335
|
.remarkd-editor__include-picker {
|
|
269
336
|
display: flex;
|
|
270
337
|
flex-direction: column;
|