@fragments-sdk/ui 0.10.0 → 0.11.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 (41) hide show
  1. package/dist/assets/ui.css +304 -0
  2. package/dist/blocks/BlogEditor.block.d.ts +3 -0
  3. package/dist/blocks/BlogEditor.block.d.ts.map +1 -0
  4. package/dist/components/Editor/Editor.module.scss.cjs +57 -0
  5. package/dist/components/Editor/Editor.module.scss.cjs.map +1 -0
  6. package/dist/components/Editor/Editor.module.scss.js +57 -0
  7. package/dist/components/Editor/Editor.module.scss.js.map +1 -0
  8. package/dist/components/Editor/index.cjs +548 -0
  9. package/dist/components/Editor/index.cjs.map +1 -0
  10. package/dist/components/Editor/index.d.ts +107 -0
  11. package/dist/components/Editor/index.d.ts.map +1 -0
  12. package/dist/components/Editor/index.js +531 -0
  13. package/dist/components/Editor/index.js.map +1 -0
  14. package/dist/components/Sidebar/index.cjs +6 -11
  15. package/dist/components/Sidebar/index.cjs.map +1 -1
  16. package/dist/components/Sidebar/index.d.ts.map +1 -1
  17. package/dist/components/Sidebar/index.js +6 -11
  18. package/dist/components/Sidebar/index.js.map +1 -1
  19. package/dist/index.cjs +22 -0
  20. package/dist/index.cjs.map +1 -1
  21. package/dist/index.d.ts +2 -0
  22. package/dist/index.d.ts.map +1 -1
  23. package/dist/index.js +22 -0
  24. package/dist/index.js.map +1 -1
  25. package/dist/utils/keyboard-shortcuts.cjs +295 -0
  26. package/dist/utils/keyboard-shortcuts.cjs.map +1 -0
  27. package/dist/utils/keyboard-shortcuts.d.ts +293 -0
  28. package/dist/utils/keyboard-shortcuts.d.ts.map +1 -0
  29. package/dist/utils/keyboard-shortcuts.js +295 -0
  30. package/dist/utils/keyboard-shortcuts.js.map +1 -0
  31. package/fragments.json +1 -1
  32. package/package.json +27 -2
  33. package/src/blocks/BlogEditor.block.ts +34 -0
  34. package/src/components/Editor/Editor.fragment.tsx +322 -0
  35. package/src/components/Editor/Editor.module.scss +333 -0
  36. package/src/components/Editor/Editor.test.tsx +174 -0
  37. package/src/components/Editor/index.tsx +815 -0
  38. package/src/components/Sidebar/index.tsx +7 -14
  39. package/src/index.ts +43 -0
  40. package/src/utils/keyboard-shortcuts.test.ts +357 -0
  41. package/src/utils/keyboard-shortcuts.ts +502 -0
@@ -10385,6 +10385,310 @@ a {
10385
10385
  outline: 2px solid var(--fui-color-accent);
10386
10386
  outline-offset: -2px;
10387
10387
  }
10388
+ }._editor_49q64_1 {
10389
+ background-color: var(--fui-bg-elevated, #ffffff);
10390
+ border: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
10391
+ border-radius: var(--fui-radius-lg, 0.571rem);
10392
+ display: flex;
10393
+ flex-direction: column;
10394
+ min-width: 400px;
10395
+ overflow: hidden;
10396
+ }
10397
+ ._editor_49q64_1:focus-within:not([data-disabled]) {
10398
+ outline: none;
10399
+ box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
10400
+ }
10401
+ ._editor_49q64_1[data-disabled] {
10402
+ opacity: 0.5;
10403
+ pointer-events: none;
10404
+ }
10405
+ ._editor_49q64_1[data-readonly] ._contentTextarea_49q64_18 {
10406
+ cursor: default;
10407
+ }
10408
+ ._editor_49q64_1[data-size=sm] ._content_49q64_18,
10409
+ ._editor_49q64_1[data-size=sm] ._contentTextarea_49q64_18,
10410
+ ._editor_49q64_1[data-size=sm] .tiptap {
10411
+ min-height: 120px;
10412
+ }
10413
+ ._editor_49q64_1[data-size=md] ._content_49q64_18,
10414
+ ._editor_49q64_1[data-size=md] ._contentTextarea_49q64_18,
10415
+ ._editor_49q64_1[data-size=md] .tiptap {
10416
+ min-height: 200px;
10417
+ }
10418
+ ._editor_49q64_1[data-size=lg] ._content_49q64_18,
10419
+ ._editor_49q64_1[data-size=lg] ._contentTextarea_49q64_18,
10420
+ ._editor_49q64_1[data-size=lg] .tiptap {
10421
+ min-height: 400px;
10422
+ }
10423
+
10424
+ ._toolbar_49q64_37 {
10425
+ display: flex;
10426
+ align-items: center;
10427
+ justify-content: space-between;
10428
+ flex-wrap: wrap;
10429
+ gap: var(--fui-space-2, 1rem);
10430
+ padding: var(--fui-padding-item-xs, 0.5rem) var(--fui-padding-item-sm, 1rem);
10431
+ border-bottom: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
10432
+ background-color: var(--fui-bg-secondary, #f4f4f5);
10433
+ }
10434
+
10435
+ ._toolbarGroup_49q64_48 {
10436
+ display: flex;
10437
+ align-items: center;
10438
+ gap: var(--fui-space-0-5, 0.15rem);
10439
+ }
10440
+
10441
+ ._toolbarButton_49q64_54 {
10442
+ appearance: none;
10443
+ background: transparent;
10444
+ border: none;
10445
+ padding: 0;
10446
+ margin: 0;
10447
+ font: inherit;
10448
+ color: inherit;
10449
+ cursor: pointer;
10450
+ }
10451
+ ._toolbarButton_49q64_54:disabled {
10452
+ cursor: not-allowed;
10453
+ }
10454
+ ._toolbarButton_49q64_54 {
10455
+ transition: background-color var(--fui-transition-fast, 150ms ease), border-color var(--fui-transition-fast, 150ms ease), box-shadow var(--fui-transition-fast, 150ms ease), opacity var(--fui-transition-fast, 150ms ease);
10456
+ }
10457
+ ._toolbarButton_49q64_54:focus-visible {
10458
+ outline: none;
10459
+ box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
10460
+ }
10461
+ ._toolbarButton_49q64_54:disabled, ._toolbarButton_49q64_54[data-disabled] {
10462
+ opacity: 0.5;
10463
+ pointer-events: none;
10464
+ }
10465
+ ._toolbarButton_49q64_54 {
10466
+ min-width: var(--fui-target-size-min, 1.714rem);
10467
+ min-height: var(--fui-target-size-min, 1.714rem);
10468
+ display: inline-flex;
10469
+ align-items: center;
10470
+ justify-content: center;
10471
+ display: inline-flex;
10472
+ align-items: center;
10473
+ justify-content: center;
10474
+ width: 2rem;
10475
+ height: 2rem;
10476
+ border-radius: var(--fui-radius-md, 0.429rem);
10477
+ background-color: transparent;
10478
+ color: var(--fui-text-secondary, #52525b);
10479
+ }
10480
+ ._toolbarButton_49q64_54:hover:not(:disabled) {
10481
+ background-color: var(--fui-bg-hover, rgba(0, 0, 0, 0.04));
10482
+ color: var(--fui-text-primary, #18181b);
10483
+ }
10484
+ ._toolbarButton_49q64_54:active:not(:disabled) {
10485
+ background-color: var(--fui-bg-active, rgba(0, 0, 0, 0.06));
10486
+ }
10487
+ ._toolbarButton_49q64_54 svg {
10488
+ width: 1rem;
10489
+ height: 1rem;
10490
+ }
10491
+
10492
+ ._toolbarButtonActive_49q64_105 {
10493
+ color: var(--fui-color-accent, #18181b);
10494
+ background-color: var(--fui-bg-tertiary, #f4f4f5);
10495
+ }
10496
+ ._toolbarButtonActive_49q64_105:hover:not(:disabled) {
10497
+ color: var(--fui-color-accent-hover, rgb(62.88, 62.88, 70.74));
10498
+ }
10499
+
10500
+ ._separator_49q64_113 {
10501
+ width: 1px;
10502
+ height: 1rem;
10503
+ background-color: var(--fui-border, rgba(0, 0, 0, 0.08));
10504
+ margin: 0 var(--fui-space-1, 0.5rem);
10505
+ flex-shrink: 0;
10506
+ }
10507
+
10508
+ ._statusIndicator_49q64_121 {
10509
+ font-family: var(--fui-font-sans, Geist Sans, Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);
10510
+ font-size: var(--fui-font-size-xs, 0.857rem);
10511
+ color: var(--fui-text-secondary, #52525b);
10512
+ font-size: var(--fui-font-size-2xs, 0.714rem);
10513
+ font-weight: var(--fui-font-weight-medium, 500);
10514
+ text-transform: uppercase;
10515
+ letter-spacing: 0.05em;
10516
+ color: var(--fui-text-tertiary, #71717a);
10517
+ white-space: nowrap;
10518
+ padding: 0 var(--fui-space-2, 1rem);
10519
+ }
10520
+
10521
+ ._statusError_49q64_134 {
10522
+ color: var(--fui-color-danger, #ef4444);
10523
+ }
10524
+
10525
+ ._content_49q64_18 {
10526
+ flex: 1;
10527
+ min-height: 200px;
10528
+ overflow-y: auto;
10529
+ }
10530
+
10531
+ ._contentRich_49q64_144 .tiptap {
10532
+ padding: var(--fui-padding-inline-md, 1.5rem);
10533
+ min-height: 200px;
10534
+ outline: none;
10535
+ font-family: var(--fui-font-sans, Geist Sans, Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);
10536
+ font-size: var(--fui-font-size-sm, 1rem);
10537
+ line-height: var(--fui-line-height-normal, 1.5);
10538
+ color: var(--fui-text-primary, #18181b);
10539
+ -webkit-font-smoothing: antialiased;
10540
+ -moz-osx-font-smoothing: grayscale;
10541
+ line-height: var(--fui-line-height-relaxed, 1.625);
10542
+ font-size: var(--fui-font-size-base, 1.143rem);
10543
+ }
10544
+ ._contentRich_49q64_144 .tiptap:focus-visible {
10545
+ outline: none;
10546
+ }
10547
+ ._contentRich_49q64_144 .tiptap p._is-editor-empty_49q64_160:first-child::before {
10548
+ content: attr(data-placeholder);
10549
+ float: left;
10550
+ color: var(--fui-text-tertiary, #71717a);
10551
+ pointer-events: none;
10552
+ height: 0;
10553
+ }
10554
+ ._contentRich_49q64_144 .tiptap h1 {
10555
+ font-size: var(--fui-font-size-2xl, 2.143rem);
10556
+ font-weight: var(--fui-font-weight-semibold, 600);
10557
+ line-height: var(--fui-line-height-tight, 1.25);
10558
+ margin: 0 0 var(--fui-space-3, 1.5rem);
10559
+ }
10560
+ ._contentRich_49q64_144 .tiptap h2 {
10561
+ font-size: var(--fui-font-size-xl, 1.714rem);
10562
+ font-weight: var(--fui-font-weight-semibold, 600);
10563
+ line-height: var(--fui-line-height-tight, 1.25);
10564
+ margin: 0 0 var(--fui-space-2, 1rem);
10565
+ }
10566
+ ._contentRich_49q64_144 .tiptap h3 {
10567
+ font-size: var(--fui-font-size-lg, 1.286rem);
10568
+ font-weight: var(--fui-font-weight-semibold, 600);
10569
+ line-height: var(--fui-line-height-tight, 1.25);
10570
+ margin: 0 0 var(--fui-space-2, 1rem);
10571
+ }
10572
+ ._contentRich_49q64_144 .tiptap blockquote {
10573
+ border-left: 3px solid var(--fui-color-accent, #18181b);
10574
+ padding-left: var(--fui-space-4, 2rem);
10575
+ margin: 0 0 var(--fui-space-2, 1rem);
10576
+ color: var(--fui-text-secondary, #52525b);
10577
+ font-style: italic;
10578
+ }
10579
+ ._contentRich_49q64_144 .tiptap code {
10580
+ background-color: var(--fui-bg-tertiary, #f4f4f5);
10581
+ border-radius: var(--fui-radius-sm, 0.25rem);
10582
+ padding: 0.15em 0.3em;
10583
+ font-family: var(--fui-font-mono, "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace);
10584
+ font-size: 0.9em;
10585
+ }
10586
+ ._contentRich_49q64_144 .tiptap a {
10587
+ color: var(--fui-color-accent, #18181b);
10588
+ text-decoration: underline;
10589
+ cursor: pointer;
10590
+ }
10591
+ ._contentRich_49q64_144 .tiptap a:hover {
10592
+ color: var(--fui-color-accent-hover, rgb(62.88, 62.88, 70.74));
10593
+ }
10594
+ ._contentRich_49q64_144 .tiptap ul {
10595
+ padding-left: var(--fui-space-5, 2.5rem);
10596
+ list-style-type: disc;
10597
+ }
10598
+ ._contentRich_49q64_144 .tiptap ol {
10599
+ padding-left: var(--fui-space-5, 2.5rem);
10600
+ list-style-type: decimal;
10601
+ }
10602
+ ._contentRich_49q64_144 .tiptap s {
10603
+ text-decoration: line-through;
10604
+ }
10605
+ ._contentRich_49q64_144 .tiptap p {
10606
+ margin: 0 0 var(--fui-space-2, 1rem);
10607
+ }
10608
+ ._contentRich_49q64_144 .tiptap p:last-child {
10609
+ margin-bottom: 0;
10610
+ }
10611
+
10612
+ ._contentTextarea_49q64_18 {
10613
+ appearance: none;
10614
+ background: transparent;
10615
+ border: none;
10616
+ padding: 0;
10617
+ margin: 0;
10618
+ font: inherit;
10619
+ color: inherit;
10620
+ cursor: pointer;
10621
+ }
10622
+ ._contentTextarea_49q64_18:disabled {
10623
+ cursor: not-allowed;
10624
+ }
10625
+ ._contentTextarea_49q64_18 {
10626
+ font-family: var(--fui-font-sans, Geist Sans, Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);
10627
+ font-size: var(--fui-font-size-sm, 1rem);
10628
+ line-height: var(--fui-line-height-normal, 1.5);
10629
+ color: var(--fui-text-primary, #18181b);
10630
+ -webkit-font-smoothing: antialiased;
10631
+ -moz-osx-font-smoothing: grayscale;
10632
+ display: block;
10633
+ width: 100%;
10634
+ height: 100%;
10635
+ min-height: 200px;
10636
+ padding: var(--fui-padding-inline-md, 1.5rem);
10637
+ background: transparent;
10638
+ border: none;
10639
+ resize: none;
10640
+ overflow-y: auto;
10641
+ line-height: var(--fui-line-height-relaxed, 1.625);
10642
+ font-size: var(--fui-font-size-base, 1.143rem);
10643
+ }
10644
+ ._contentTextarea_49q64_18::placeholder {
10645
+ color: var(--fui-text-tertiary, #71717a);
10646
+ }
10647
+ ._contentTextarea_49q64_18:focus-visible {
10648
+ outline: none;
10649
+ }
10650
+ ._contentTextarea_49q64_18:disabled {
10651
+ cursor: not-allowed;
10652
+ }
10653
+
10654
+ ._statusBar_49q64_267 {
10655
+ display: flex;
10656
+ align-items: center;
10657
+ justify-content: space-between;
10658
+ gap: var(--fui-space-2, 1rem);
10659
+ padding: var(--fui-padding-item-xs, 0.5rem) var(--fui-padding-item-sm, 1rem);
10660
+ border-top: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
10661
+ background-color: var(--fui-bg-secondary, #f4f4f5);
10662
+ }
10663
+
10664
+ ._statusBarLeft_49q64_277 {
10665
+ display: flex;
10666
+ align-items: center;
10667
+ gap: var(--fui-space-2, 1rem);
10668
+ }
10669
+
10670
+ ._statusBarRight_49q64_283 {
10671
+ display: flex;
10672
+ align-items: center;
10673
+ gap: var(--fui-space-2, 1rem);
10674
+ margin-left: auto;
10675
+ }
10676
+
10677
+ ._statusBarItem_49q64_290 {
10678
+ font-family: var(--fui-font-sans, Geist Sans, Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);
10679
+ font-size: var(--fui-font-size-xs, 0.857rem);
10680
+ color: var(--fui-text-secondary, #52525b);
10681
+ white-space: nowrap;
10682
+ }
10683
+
10684
+ ._statusBarItemWarning_49q64_297 {
10685
+ color: var(--fui-color-warning, #f59e0b);
10686
+ font-weight: var(--fui-font-weight-medium, 500);
10687
+ }
10688
+
10689
+ ._statusBarItemError_49q64_302 {
10690
+ color: var(--fui-color-danger, #ef4444);
10691
+ font-weight: var(--fui-font-weight-medium, 500);
10388
10692
  }._root_wjgd1_1 {
10389
10693
  display: flex;
10390
10694
  align-items: center;
@@ -0,0 +1,3 @@
1
+ declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
2
+ export default _default;
3
+ //# sourceMappingURL=BlogEditor.block.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BlogEditor.block.d.ts","sourceRoot":"","sources":["../../src/blocks/BlogEditor.block.ts"],"names":[],"mappings":";AAEA,wBA+BG"}
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const editor = "_editor_49q64_1";
4
+ const contentTextarea = "_contentTextarea_49q64_18";
5
+ const content = "_content_49q64_18";
6
+ const toolbar = "_toolbar_49q64_37";
7
+ const toolbarGroup = "_toolbarGroup_49q64_48";
8
+ const toolbarButton = "_toolbarButton_49q64_54";
9
+ const toolbarButtonActive = "_toolbarButtonActive_49q64_105";
10
+ const separator = "_separator_49q64_113";
11
+ const statusIndicator = "_statusIndicator_49q64_121";
12
+ const statusError = "_statusError_49q64_134";
13
+ const contentRich = "_contentRich_49q64_144";
14
+ const statusBar = "_statusBar_49q64_267";
15
+ const statusBarLeft = "_statusBarLeft_49q64_277";
16
+ const statusBarRight = "_statusBarRight_49q64_283";
17
+ const statusBarItem = "_statusBarItem_49q64_290";
18
+ const statusBarItemWarning = "_statusBarItemWarning_49q64_297";
19
+ const statusBarItemError = "_statusBarItemError_49q64_302";
20
+ const styles = {
21
+ editor,
22
+ contentTextarea,
23
+ content,
24
+ toolbar,
25
+ toolbarGroup,
26
+ toolbarButton,
27
+ toolbarButtonActive,
28
+ separator,
29
+ statusIndicator,
30
+ statusError,
31
+ contentRich,
32
+ statusBar,
33
+ statusBarLeft,
34
+ statusBarRight,
35
+ statusBarItem,
36
+ statusBarItemWarning,
37
+ statusBarItemError
38
+ };
39
+ exports.content = content;
40
+ exports.contentRich = contentRich;
41
+ exports.contentTextarea = contentTextarea;
42
+ exports.default = styles;
43
+ exports.editor = editor;
44
+ exports.separator = separator;
45
+ exports.statusBar = statusBar;
46
+ exports.statusBarItem = statusBarItem;
47
+ exports.statusBarItemError = statusBarItemError;
48
+ exports.statusBarItemWarning = statusBarItemWarning;
49
+ exports.statusBarLeft = statusBarLeft;
50
+ exports.statusBarRight = statusBarRight;
51
+ exports.statusError = statusError;
52
+ exports.statusIndicator = statusIndicator;
53
+ exports.toolbar = toolbar;
54
+ exports.toolbarButton = toolbarButton;
55
+ exports.toolbarButtonActive = toolbarButtonActive;
56
+ exports.toolbarGroup = toolbarGroup;
57
+ //# sourceMappingURL=Editor.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Editor.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,57 @@
1
+ const editor = "_editor_49q64_1";
2
+ const contentTextarea = "_contentTextarea_49q64_18";
3
+ const content = "_content_49q64_18";
4
+ const toolbar = "_toolbar_49q64_37";
5
+ const toolbarGroup = "_toolbarGroup_49q64_48";
6
+ const toolbarButton = "_toolbarButton_49q64_54";
7
+ const toolbarButtonActive = "_toolbarButtonActive_49q64_105";
8
+ const separator = "_separator_49q64_113";
9
+ const statusIndicator = "_statusIndicator_49q64_121";
10
+ const statusError = "_statusError_49q64_134";
11
+ const contentRich = "_contentRich_49q64_144";
12
+ const statusBar = "_statusBar_49q64_267";
13
+ const statusBarLeft = "_statusBarLeft_49q64_277";
14
+ const statusBarRight = "_statusBarRight_49q64_283";
15
+ const statusBarItem = "_statusBarItem_49q64_290";
16
+ const statusBarItemWarning = "_statusBarItemWarning_49q64_297";
17
+ const statusBarItemError = "_statusBarItemError_49q64_302";
18
+ const styles = {
19
+ editor,
20
+ contentTextarea,
21
+ content,
22
+ toolbar,
23
+ toolbarGroup,
24
+ toolbarButton,
25
+ toolbarButtonActive,
26
+ separator,
27
+ statusIndicator,
28
+ statusError,
29
+ contentRich,
30
+ statusBar,
31
+ statusBarLeft,
32
+ statusBarRight,
33
+ statusBarItem,
34
+ statusBarItemWarning,
35
+ statusBarItemError
36
+ };
37
+ export {
38
+ content,
39
+ contentRich,
40
+ contentTextarea,
41
+ styles as default,
42
+ editor,
43
+ separator,
44
+ statusBar,
45
+ statusBarItem,
46
+ statusBarItemError,
47
+ statusBarItemWarning,
48
+ statusBarLeft,
49
+ statusBarRight,
50
+ statusError,
51
+ statusIndicator,
52
+ toolbar,
53
+ toolbarButton,
54
+ toolbarButtonActive,
55
+ toolbarGroup
56
+ };
57
+ //# sourceMappingURL=Editor.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Editor.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}