@trycourier/react-designer 0.0.0-canary-20250605142011 → 0.0.0-canary-20250611183605

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 (27) hide show
  1. package/dist/channels.d.ts +7 -0
  2. package/dist/cjs/index.css +1 -1
  3. package/dist/cjs/index.css.map +2 -2
  4. package/dist/cjs/index.js +33 -33
  5. package/dist/cjs/index.js.map +4 -4
  6. package/dist/cjs/styles.css +31 -17
  7. package/dist/components/extensions/Blockquote/Blockquote.types.d.ts +2 -2
  8. package/dist/components/extensions/Button/Button.types.d.ts +6 -6
  9. package/dist/components/extensions/ButtonRow/ButtonRow.d.ts +11 -0
  10. package/dist/components/extensions/ButtonRow/ButtonRow.types.d.ts +45 -0
  11. package/dist/components/extensions/ButtonRow/ButtonRowComponent.d.ts +5 -0
  12. package/dist/components/extensions/ButtonRow/index.d.ts +4 -0
  13. package/dist/components/extensions/TextBlock/TextBlock.types.d.ts +4 -4
  14. package/dist/components/extensions/index.d.ts +1 -0
  15. package/dist/components/ui-kit/Icon/InAppIcon.d.ts +3 -0
  16. package/dist/components/ui-kit/Icon/PushIcon.d.ts +3 -0
  17. package/dist/components/ui-kit/Icon/SMSIcon.d.ts +3 -0
  18. package/dist/components/ui-kit/Icon/index.d.ts +3 -0
  19. package/dist/esm/index.css +1 -1
  20. package/dist/esm/index.css.map +2 -2
  21. package/dist/esm/index.js +33 -33
  22. package/dist/esm/index.js.map +4 -4
  23. package/dist/esm/styles.css +31 -17
  24. package/dist/store.d.ts +2 -6
  25. package/dist/styles.css +31 -17
  26. package/dist/types/elemental.schema.d.ts +3 -3
  27. package/package.json +2 -2
package/dist/esm/styles.css CHANGED
@@ -896,11 +896,11 @@ body {
896
896
  .courier-inset-0 {
897
897
  inset: 0px;
898
898
  }
899
- .-courier-left-\[10px\] {
900
- left: -10px;
899
+ .-courier-left-\[2px\] {
900
+ left: -2px;
901
901
  }
902
- .-courier-right-\[10px\] {
903
- right: -10px;
902
+ .-courier-right-\[2px\] {
903
+ right: -2px;
904
904
  }
905
905
  .courier-bottom-0 {
906
906
  bottom: 0px;
@@ -1415,6 +1415,9 @@ body {
1415
1415
  .courier-items-center {
1416
1416
  align-items: center;
1417
1417
  }
1418
+ .courier-justify-start {
1419
+ justify-content: flex-start;
1420
+ }
1418
1421
  .courier-justify-end {
1419
1422
  justify-content: flex-end;
1420
1423
  }
@@ -1485,6 +1488,9 @@ body {
1485
1488
  .courier-rounded-3xl {
1486
1489
  border-radius: 1.5rem;
1487
1490
  }
1491
+ .courier-rounded-\[40px\] {
1492
+ border-radius: 40px;
1493
+ }
1488
1494
  .courier-rounded-full {
1489
1495
  border-radius: 9999px;
1490
1496
  }
@@ -1793,6 +1799,10 @@ body {
1793
1799
  .courier-p-\[3px\] {
1794
1800
  padding: 3px;
1795
1801
  }
1802
+ .\!courier-px-2 {
1803
+ padding-left: 0.5rem !important;
1804
+ padding-right: 0.5rem !important;
1805
+ }
1796
1806
  .\!courier-py-\[5px\] {
1797
1807
  padding-top: 5px !important;
1798
1808
  padding-bottom: 5px !important;
@@ -1873,12 +1883,6 @@ body {
1873
1883
  padding-top: 1px;
1874
1884
  padding-bottom: 1px;
1875
1885
  }
1876
- .\!courier-pl-2 {
1877
- padding-left: 0.5rem !important;
1878
- }
1879
- .\!courier-pr-2 {
1880
- padding-right: 0.5rem !important;
1881
- }
1882
1886
  .courier-pb-0 {
1883
1887
  padding-bottom: 0px;
1884
1888
  }
@@ -2394,19 +2398,19 @@ body {
2394
2398
  .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main:hover >button {
2395
2399
  display: none;
2396
2400
  }
2397
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote * {
2401
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow * {
2398
2402
  pointer-events: none;
2399
2403
  }
2400
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote * {
2404
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow * {
2401
2405
  cursor: default;
2402
2406
  }
2403
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote [data-cypress="draggable-handle"] {
2407
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow [data-cypress="draggable-handle"] {
2404
2408
  display: none;
2405
2409
  }
2406
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active [data-cypress="draggable-handle"] {
2410
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active [data-cypress="draggable-handle"] {
2407
2411
  display: none;
2408
2412
  }
2409
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element.courier-empty-image::before {
2413
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active .node-element.courier-empty-image::before {
2410
2414
  display: none;
2411
2415
  }
2412
2416
  .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
@@ -2591,13 +2595,23 @@ body {
2591
2595
  font-size: 0.875rem;
2592
2596
  line-height: 1.25rem;
2593
2597
  }
2598
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow {
2599
+ margin-top: 0.5rem;
2600
+ }
2601
+ /* Override the centering from SortableItemWrapper */
2602
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow .draggable-item {
2603
+ justify-content: flex-start !important;
2604
+ }
2605
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow [data-cypress="draggable-handle"] {
2606
+ display: none;
2607
+ }
2594
2608
  .courier-inbox-editor .ProseMirror>.react-renderer .draggable-item {
2595
2609
  padding: 0px;
2596
2610
  }
2597
- .courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before {
2611
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow .selected-element .node-element::before {
2598
2612
  display: none;
2599
2613
  }
2600
- .courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel {
2614
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow .selected-element .courier-actions-panel {
2601
2615
  display: none;
2602
2616
  }
2603
2617
  .courier-inbox-editor .ProseMirror>.react-renderer:hover [data-cypress="draggable-handle"] {
package/dist/store.d.ts CHANGED
@@ -1,12 +1,8 @@
1
- export type ChannelType = "email" | "sms" | "push" | "inbox";
2
- export interface Channel {
3
- label: string;
4
- value: ChannelType;
5
- }
6
- export declare const CHANNELS: Channel[];
1
+ import type { ChannelType } from "./channels";
7
2
  export declare const channelAtom: import("jotai").PrimitiveAtom<ChannelType> & {
8
3
  init: ChannelType;
9
4
  };
10
5
  export declare const pageAtom: import("jotai").PrimitiveAtom<"template" | "brand"> & {
11
6
  init: "template" | "brand";
12
7
  };
8
+ export * from "./channels";
package/dist/styles.css CHANGED
@@ -896,11 +896,11 @@ body {
896
896
  .courier-inset-0 {
897
897
  inset: 0px;
898
898
  }
899
- .-courier-left-\[10px\] {
900
- left: -10px;
899
+ .-courier-left-\[2px\] {
900
+ left: -2px;
901
901
  }
902
- .-courier-right-\[10px\] {
903
- right: -10px;
902
+ .-courier-right-\[2px\] {
903
+ right: -2px;
904
904
  }
905
905
  .courier-bottom-0 {
906
906
  bottom: 0px;
@@ -1415,6 +1415,9 @@ body {
1415
1415
  .courier-items-center {
1416
1416
  align-items: center;
1417
1417
  }
1418
+ .courier-justify-start {
1419
+ justify-content: flex-start;
1420
+ }
1418
1421
  .courier-justify-end {
1419
1422
  justify-content: flex-end;
1420
1423
  }
@@ -1485,6 +1488,9 @@ body {
1485
1488
  .courier-rounded-3xl {
1486
1489
  border-radius: 1.5rem;
1487
1490
  }
1491
+ .courier-rounded-\[40px\] {
1492
+ border-radius: 40px;
1493
+ }
1488
1494
  .courier-rounded-full {
1489
1495
  border-radius: 9999px;
1490
1496
  }
@@ -1793,6 +1799,10 @@ body {
1793
1799
  .courier-p-\[3px\] {
1794
1800
  padding: 3px;
1795
1801
  }
1802
+ .\!courier-px-2 {
1803
+ padding-left: 0.5rem !important;
1804
+ padding-right: 0.5rem !important;
1805
+ }
1796
1806
  .\!courier-py-\[5px\] {
1797
1807
  padding-top: 5px !important;
1798
1808
  padding-bottom: 5px !important;
@@ -1873,12 +1883,6 @@ body {
1873
1883
  padding-top: 1px;
1874
1884
  padding-bottom: 1px;
1875
1885
  }
1876
- .\!courier-pl-2 {
1877
- padding-left: 0.5rem !important;
1878
- }
1879
- .\!courier-pr-2 {
1880
- padding-right: 0.5rem !important;
1881
- }
1882
1886
  .courier-pb-0 {
1883
1887
  padding-bottom: 0px;
1884
1888
  }
@@ -2394,19 +2398,19 @@ body {
2394
2398
  .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main:hover >button {
2395
2399
  display: none;
2396
2400
  }
2397
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote * {
2401
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow * {
2398
2402
  pointer-events: none;
2399
2403
  }
2400
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote * {
2404
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow * {
2401
2405
  cursor: default;
2402
2406
  }
2403
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote [data-cypress="draggable-handle"] {
2407
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow [data-cypress="draggable-handle"] {
2404
2408
  display: none;
2405
2409
  }
2406
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active [data-cypress="draggable-handle"] {
2410
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active [data-cypress="draggable-handle"] {
2407
2411
  display: none;
2408
2412
  }
2409
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element.courier-empty-image::before {
2413
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active .node-element.courier-empty-image::before {
2410
2414
  display: none;
2411
2415
  }
2412
2416
  .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
@@ -2591,13 +2595,23 @@ body {
2591
2595
  font-size: 0.875rem;
2592
2596
  line-height: 1.25rem;
2593
2597
  }
2598
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow {
2599
+ margin-top: 0.5rem;
2600
+ }
2601
+ /* Override the centering from SortableItemWrapper */
2602
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow .draggable-item {
2603
+ justify-content: flex-start !important;
2604
+ }
2605
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow [data-cypress="draggable-handle"] {
2606
+ display: none;
2607
+ }
2594
2608
  .courier-inbox-editor .ProseMirror>.react-renderer .draggable-item {
2595
2609
  padding: 0px;
2596
2610
  }
2597
- .courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before {
2611
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow .selected-element .node-element::before {
2598
2612
  display: none;
2599
2613
  }
2600
- .courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel {
2614
+ .courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow .selected-element .courier-actions-panel {
2601
2615
  display: none;
2602
2616
  }
2603
2617
  .courier-inbox-editor .ProseMirror>.react-renderer:hover [data-cypress="draggable-handle"] {
package/dist/types/elemental.schema.d.ts CHANGED
@@ -5,17 +5,17 @@ export declare const ElementalSchema: z.ZodObject<{
5
5
  version: z.ZodLiteral<"2022-01-01">;
6
6
  elements: z.ZodArray<z.ZodType<ElementalNode, z.ZodTypeDef, ElementalNode>, "many">;
7
7
  }, "strip", z.ZodTypeAny, {
8
- version: "2022-01-01";
9
8
  elements: ElementalNode[];
10
- }, {
11
9
  version: "2022-01-01";
10
+ }, {
12
11
  elements: ElementalNode[];
12
+ version: "2022-01-01";
13
13
  }>;
14
14
  export declare const validateElemental: (json: unknown) => {
15
15
  success: boolean;
16
16
  data: {
17
- version: "2022-01-01";
18
17
  elements: ElementalNode[];
18
+ version: "2022-01-01";
19
19
  };
20
20
  errors?: undefined;
21
21
  } | {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trycourier/react-designer",
3
- "version": "0.0.0-canary-20250605142011",
3
+ "version": "0.0.0-canary-20250611183605",
4
4
  "description": "React-based rich text designer component",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
@@ -139,7 +139,7 @@
139
139
  "lint": "eslint \"src/**/*.ts*\"",
140
140
  "test": "vitest run",
141
141
  "test:watch": "vitest",
142
- "test:e2e": "playwright test",
142
+ "test:e2e": "playwright test --workers=1",
143
143
  "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
144
144
  "analyze": "node build.js --analyze",
145
145
  "release": "node scripts/publish.js",