@trycourier/react-designer 0.5.1 → 0.7.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 (66) hide show
  1. package/README.md +75 -3
  2. package/dist/cjs/index.js +66 -58
  3. package/dist/cjs/index.js.map +4 -4
  4. package/dist/cjs/styles.css +579 -249
  5. package/dist/components/BrandEditor/Editor/BrandFooter/BrandFooter.d.ts +3 -1
  6. package/dist/components/Providers/TemplateProvider.d.ts +2 -0
  7. package/dist/components/TemplateEditor/Channels/Email/EmailEditor.d.ts +3 -1
  8. package/dist/components/TemplateEditor/Channels/Inbox/Inbox.d.ts +3 -0
  9. package/dist/components/TemplateEditor/Channels/Inbox/InboxEditor.d.ts +3 -1
  10. package/dist/components/TemplateEditor/Channels/MSTeams/MSTeams.d.ts +6 -1
  11. package/dist/components/TemplateEditor/Channels/MSTeams/MSTeamsEditor.d.ts +3 -1
  12. package/dist/components/TemplateEditor/Channels/MSTeams/SideBar/MSTeamsSideBarItemDetails.d.ts +8 -0
  13. package/dist/components/TemplateEditor/Channels/MSTeams/SideBar/index.d.ts +1 -0
  14. package/dist/components/TemplateEditor/Channels/MSTeams/index.d.ts +1 -1
  15. package/dist/components/TemplateEditor/Channels/Push/PushEditor.d.ts +3 -1
  16. package/dist/components/TemplateEditor/Channels/SMS/SMSEditor.d.ts +3 -1
  17. package/dist/components/TemplateEditor/Channels/Slack/Slack.d.ts +6 -1
  18. package/dist/components/TemplateEditor/Channels/Slack/SlackEditor.d.ts +3 -1
  19. package/dist/components/TemplateEditor/Layout/Layout.d.ts +1 -0
  20. package/dist/components/TemplateEditor/TemplateEditor.d.ts +2 -0
  21. package/dist/components/TemplateEditor/VariableViewModeSync.d.ts +27 -0
  22. package/dist/components/TemplateEditor/index.d.ts +2 -1
  23. package/dist/components/TemplateEditor/store.d.ts +19 -1
  24. package/dist/components/extensions/Blockquote/Blockquote.d.ts +4 -0
  25. package/dist/components/extensions/Button/Button.d.ts +0 -3
  26. package/dist/components/extensions/Button/Button.types.d.ts +8 -4
  27. package/dist/components/extensions/Button/ButtonComponent.d.ts +2 -3
  28. package/dist/components/extensions/Button/buttonUtils.d.ts +13 -0
  29. package/dist/components/extensions/HardBreak/HardBreak.d.ts +12 -0
  30. package/dist/components/extensions/HardBreak/index.d.ts +1 -0
  31. package/dist/components/extensions/ImageBlock/components/ImageBlockView.d.ts +1 -3
  32. package/dist/components/extensions/List/List.d.ts +0 -1
  33. package/dist/components/extensions/List/List.types.d.ts +0 -10
  34. package/dist/components/extensions/List/ListForm.d.ts +6 -1
  35. package/dist/components/extensions/MessagingChannelPaste/MessagingChannelPaste.d.ts +11 -0
  36. package/dist/components/extensions/MessagingChannelPaste/index.d.ts +2 -0
  37. package/dist/components/extensions/Variable/Variable.d.ts +5 -0
  38. package/dist/components/extensions/Variable/index.d.ts +2 -0
  39. package/dist/components/extensions/Variable/variable-storage.types.d.ts +26 -0
  40. package/dist/components/extensions/Variable/variable-storage.utils.d.ts +72 -0
  41. package/dist/components/extensions/extension-kit.d.ts +17 -0
  42. package/dist/components/extensions/index.d.ts +1 -1
  43. package/dist/components/ui/TextMenu/components/ContentTypePicker.d.ts +1 -1
  44. package/dist/components/ui/TextMenu/hooks/useTextmenuCommands.d.ts +0 -1
  45. package/dist/components/ui/TextMenu/hooks/useTextmenuStates.d.ts +1 -0
  46. package/dist/components/ui/VariableEditor/VariableChipBase.d.ts +8 -0
  47. package/dist/components/ui/VariableEditor/VariableInput.d.ts +18 -0
  48. package/dist/components/ui-kit/Button/Button.d.ts +1 -1
  49. package/dist/components/ui-kit/Toggle/Toggle.d.ts +2 -2
  50. package/dist/components/ui-kit/ToggleGroup/ToggleGroup.d.ts +2 -2
  51. package/dist/components/utils/shadowDomDndFix.d.ts +47 -0
  52. package/dist/esm/index.js +65 -57
  53. package/dist/esm/index.js.map +4 -4
  54. package/dist/esm/styles.css +579 -249
  55. package/dist/hooks/useAutoSave.d.ts +1 -0
  56. package/dist/index.d.ts +3 -0
  57. package/dist/lib/constants/block-defaults.d.ts +43 -0
  58. package/dist/lib/constants/email-editor-tiptap-styles.d.ts +62 -0
  59. package/dist/lib/index.d.ts +1 -0
  60. package/dist/lib/testHelpers.d.ts +21 -1
  61. package/dist/lib/utils/convertElementalToTiptap/convertElementalToTiptap.d.ts +6 -1
  62. package/dist/lib/utils/getTitle/index.d.ts +1 -1
  63. package/dist/lib/utils/getTitle/preserveStorageFormat.d.ts +7 -0
  64. package/dist/styles.css +579 -249
  65. package/dist/types/elemental.types.d.ts +3 -6
  66. package/package.json +6 -1
package/dist/styles.css CHANGED
@@ -447,6 +447,23 @@
447
447
  .ProseMirror .ProseMirror-gapcursor + .node-blockquote:hover:is(.courier-dark *) {
448
448
  outline-color: #a3a3a3;
449
449
  }
450
+ /* Hard break wrapper for cursor positioning */
451
+ .ProseMirror .hard-break-wrapper {
452
+ display: inline;
453
+ white-space: pre;
454
+ }
455
+ /* Ensure cursor is visible before inline nodes after line breaks */
456
+ .ProseMirror .hard-break-wrapper + [data-node-view-wrapper] {
457
+ display: inline;
458
+ }
459
+ /* Custom cursor indicator for positions where browser can't render native cursor */
460
+ .ProseMirror .variable-cursor-indicator {
461
+ pointer-events: none;
462
+ }
463
+ @keyframes cursor-blink {
464
+ 0%, 100% { opacity: 1; }
465
+ 50% { opacity: 0; }
466
+ }
450
467
  *, ::before, ::after {
451
468
  --tw-border-spacing-x: 0;
452
469
  --tw-border-spacing-y: 0;
@@ -1000,15 +1017,18 @@ body {
1000
1017
  .courier-z-50 {
1001
1018
  z-index: 50;
1002
1019
  }
1020
+ .courier-z-\[40\] {
1021
+ z-index: 40;
1022
+ }
1023
+ .courier-z-\[50\] {
1024
+ z-index: 50;
1025
+ }
1003
1026
  .courier-z-\[9999\] {
1004
1027
  z-index: 9999;
1005
1028
  }
1006
1029
  .courier-z-\[999\] {
1007
1030
  z-index: 999;
1008
1031
  }
1009
- .courier-z-\[9\] {
1010
- z-index: 9;
1011
- }
1012
1032
  .\!courier-m-0 {
1013
1033
  margin: 0px !important;
1014
1034
  }
@@ -1033,6 +1053,10 @@ body {
1033
1053
  margin-left: -1rem;
1034
1054
  margin-right: -1rem;
1035
1055
  }
1056
+ .courier-mx-0 {
1057
+ margin-left: 0px;
1058
+ margin-right: 0px;
1059
+ }
1036
1060
  .courier-mx-1 {
1037
1061
  margin-left: 0.25rem;
1038
1062
  margin-right: 0.25rem;
@@ -1049,10 +1073,6 @@ body {
1049
1073
  margin-left: auto;
1050
1074
  margin-right: auto;
1051
1075
  }
1052
- .courier-my-0 {
1053
- margin-top: 0px;
1054
- margin-bottom: 0px;
1055
- }
1056
1076
  .courier-my-1 {
1057
1077
  margin-top: 0.25rem;
1058
1078
  margin-bottom: 0.25rem;
@@ -1252,9 +1272,6 @@ body {
1252
1272
  .courier-h-\[25px\] {
1253
1273
  height: 25px;
1254
1274
  }
1255
- .courier-h-\[28px\] {
1256
- height: 28px;
1257
- }
1258
1275
  .courier-h-\[48px\] {
1259
1276
  height: 48px;
1260
1277
  }
@@ -1288,6 +1305,9 @@ body {
1288
1305
  .courier-max-h-\[88px\] {
1289
1306
  max-height: 88px;
1290
1307
  }
1308
+ .courier-min-h-0 {
1309
+ min-height: 0px;
1310
+ }
1291
1311
  .courier-min-h-\[1\.5rem\] {
1292
1312
  min-height: 1.5rem;
1293
1313
  }
@@ -1372,8 +1392,8 @@ body {
1372
1392
  .courier-w-\[360px\] {
1373
1393
  width: 360px;
1374
1394
  }
1375
- .courier-w-\[80vw\] {
1376
- width: 80vw;
1395
+ .courier-w-\[85\%\] {
1396
+ width: 85%;
1377
1397
  }
1378
1398
  .courier-w-auto {
1379
1399
  width: auto;
@@ -1609,9 +1629,15 @@ body {
1609
1629
  .courier-overflow-hidden {
1610
1630
  overflow: hidden;
1611
1631
  }
1632
+ .courier-overflow-x-auto {
1633
+ overflow-x: auto;
1634
+ }
1612
1635
  .courier-overflow-y-auto {
1613
1636
  overflow-y: auto;
1614
1637
  }
1638
+ .courier-overflow-y-clip {
1639
+ overflow-y: clip;
1640
+ }
1615
1641
  .courier-truncate {
1616
1642
  overflow: hidden;
1617
1643
  text-overflow: ellipsis;
@@ -1620,6 +1646,9 @@ body {
1620
1646
  .courier-text-ellipsis {
1621
1647
  text-overflow: ellipsis;
1622
1648
  }
1649
+ .\!courier-whitespace-nowrap {
1650
+ white-space: nowrap !important;
1651
+ }
1623
1652
  .courier-whitespace-nowrap {
1624
1653
  white-space: nowrap;
1625
1654
  }
@@ -2087,9 +2116,6 @@ body {
2087
2116
  .courier-pb-0 {
2088
2117
  padding-bottom: 0px;
2089
2118
  }
2090
- .courier-pb-0\.5 {
2091
- padding-bottom: 0.125rem;
2092
- }
2093
2119
  .courier-pb-1 {
2094
2120
  padding-bottom: 0.25rem;
2095
2121
  }
@@ -2105,6 +2131,9 @@ body {
2105
2131
  .courier-pb-6 {
2106
2132
  padding-bottom: 1.5rem;
2107
2133
  }
2134
+ .courier-pb-\[3px\] {
2135
+ padding-bottom: 3px;
2136
+ }
2108
2137
  .courier-pl-0 {
2109
2138
  padding-left: 0px;
2110
2139
  }
@@ -2226,9 +2255,6 @@ body {
2226
2255
  .courier-uppercase {
2227
2256
  text-transform: uppercase;
2228
2257
  }
2229
- .courier-leading-\[28px\] {
2230
- line-height: 28px;
2231
- }
2232
2258
  .courier-leading-none {
2233
2259
  line-height: 1;
2234
2260
  }
@@ -2266,6 +2292,10 @@ body {
2266
2292
  .courier-text-accent-foreground {
2267
2293
  color: var(--accent-foreground);
2268
2294
  }
2295
+ .courier-text-black {
2296
+ --tw-text-opacity: 1;
2297
+ color: rgb(0 0 0 / var(--tw-text-opacity, 1));
2298
+ }
2269
2299
  .courier-text-blue-700 {
2270
2300
  --tw-text-opacity: 1;
2271
2301
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
@@ -2342,6 +2372,9 @@ body {
2342
2372
  .courier-underline {
2343
2373
  text-decoration-line: underline;
2344
2374
  }
2375
+ .courier-no-underline {
2376
+ text-decoration-line: none;
2377
+ }
2345
2378
  .courier-antialiased {
2346
2379
  -webkit-font-smoothing: antialiased;
2347
2380
  -moz-osx-font-smoothing: grayscale;
@@ -2745,6 +2778,66 @@ body {
2745
2778
  .courier-editor-main > div {
2746
2779
  width: 100%;
2747
2780
  }
2781
+ /* Email-specific font styles: values come from CSS vars set on .courier-email-editor
2782
+ * by EmailEditorContainer (see getEmailEditorTiptapCssVars in lib/constants/email-editor-tiptap-styles.ts).
2783
+ * Edit constants there only; this block stays in sync via var(--email-editor-*).
2784
+ */
2785
+ .courier-email-editor .tiptap {
2786
+ font-family: var(--email-editor-font-family);
2787
+ -webkit-font-smoothing: auto;
2788
+ -moz-osx-font-smoothing: auto;
2789
+ }
2790
+ .courier-email-editor .tiptap p {
2791
+ color: var(--email-editor-p-color);
2792
+ font-size: var(--email-editor-p-font-size);
2793
+ line-height: var(--email-editor-p-line-height);
2794
+ }
2795
+ .courier-email-editor .tiptap h1 {
2796
+ color: var(--email-editor-h1-color);
2797
+ font-size: var(--email-editor-h1-font-size);
2798
+ font-weight: var(--email-editor-h1-font-weight);
2799
+ line-height: var(--email-editor-h1-line-height);
2800
+ }
2801
+ .courier-email-editor .tiptap h2 {
2802
+ color: var(--email-editor-h2-color);
2803
+ font-size: var(--email-editor-h2-font-size);
2804
+ font-weight: var(--email-editor-h2-font-weight);
2805
+ line-height: var(--email-editor-h2-line-height);
2806
+ }
2807
+ .courier-email-editor .tiptap h3 {
2808
+ color: var(--email-editor-h3-color);
2809
+ font-size: var(--email-editor-h3-font-size);
2810
+ font-weight: var(--email-editor-h3-font-weight);
2811
+ line-height: var(--email-editor-h3-line-height);
2812
+ }
2813
+ .courier-email-editor .tiptap blockquote p {
2814
+ color: var(--email-editor-blockquote-p-color);
2815
+ font-size: var(--email-editor-blockquote-p-font-size);
2816
+ line-height: var(--email-editor-blockquote-p-line-height);
2817
+ font-style: var(--email-editor-blockquote-p-font-style);
2818
+ font-weight: var(--email-editor-blockquote-p-font-weight);
2819
+ }
2820
+ .courier-email-editor .tiptap blockquote h1 {
2821
+ color: var(--email-editor-blockquote-h1-color);
2822
+ font-size: var(--email-editor-blockquote-h1-font-size);
2823
+ font-weight: var(--email-editor-blockquote-h1-font-weight);
2824
+ line-height: var(--email-editor-blockquote-h1-line-height);
2825
+ font-style: var(--email-editor-blockquote-h1-font-style);
2826
+ }
2827
+ .courier-email-editor .tiptap blockquote h2 {
2828
+ color: var(--email-editor-blockquote-h2-color);
2829
+ font-size: var(--email-editor-blockquote-h2-font-size);
2830
+ font-weight: var(--email-editor-blockquote-h2-font-weight);
2831
+ line-height: var(--email-editor-blockquote-h2-line-height);
2832
+ font-style: var(--email-editor-blockquote-h2-font-style);
2833
+ }
2834
+ .courier-email-editor .tiptap blockquote h3 {
2835
+ color: var(--email-editor-blockquote-h3-color);
2836
+ font-size: var(--email-editor-blockquote-h3-font-size);
2837
+ font-weight: var(--email-editor-blockquote-h3-font-weight);
2838
+ line-height: var(--email-editor-blockquote-h3-line-height);
2839
+ font-style: var(--email-editor-blockquote-h3-font-style);
2840
+ }
2748
2841
  .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main, .courier-editor-readonly.courier-editor-preview-mode-mobile .courier-editor-main {
2749
2842
  max-width: 24rem;
2750
2843
  }
@@ -2754,6 +2847,19 @@ body {
2754
2847
  .courier-editor-preview-mode .ProseMirror, .courier-editor-readonly .ProseMirror {
2755
2848
  pointer-events: none;
2756
2849
  }
2850
+ /* Re-enable pointer events for clickable elements in preview mode */
2851
+ .courier-editor-preview-mode .ProseMirror a.link, .courier-editor-readonly .ProseMirror a.link {
2852
+ pointer-events: auto !important;
2853
+ cursor: pointer !important;
2854
+ }
2855
+ /* Button link wrapper in preview mode */
2856
+ .courier-editor-preview-mode .ProseMirror a.button-link-wrapper, .courier-editor-readonly .ProseMirror a.button-link-wrapper {
2857
+ pointer-events: auto !important;
2858
+ cursor: pointer !important;
2859
+ text-decoration: none;
2860
+ color: inherit;
2861
+ display: block;
2862
+ }
2757
2863
  .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-list *, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-buttonRow *, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column *, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode *, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock *, .courier-editor-readonly .ProseMirror > .react-renderer.node-button *, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider *, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph *, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading *, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote *, .courier-editor-readonly .ProseMirror > .react-renderer.node-list *, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow *, .courier-editor-readonly .ProseMirror > .react-renderer.node-column *, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode * {
2758
2864
  pointer-events: none;
2759
2865
  }
@@ -2772,7 +2878,10 @@ body {
2772
2878
  .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-list:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list: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"], .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active [data-cypress="draggable-handle"] {
2773
2879
  display: none;
2774
2880
  }
2775
- .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-list:hover .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:hover .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:active .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:active .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list: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, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active .node-element.courier-empty-image::before {
2881
+ .courier-editor-preview-mode .ProseMirror > .react-renderer.node-imageBlock:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-imageBlock:active .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-button:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-button:active .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-divider:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-divider:active .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-paragraph:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-paragraph:active .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-heading:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-heading:active .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-blockquote:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-blockquote:active .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:active .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-buttonRow:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-buttonRow:active .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover .node-element::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover .node-element::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active .node-element::before {
2882
+ display: none;
2883
+ }
2884
+ .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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-imageBlock:hover .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-imageBlock:active .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-button:hover .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-button:active .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-divider:hover .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-divider:active .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-paragraph:hover .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-paragraph:active .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-heading:hover .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-heading:active .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-blockquote:hover .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-blockquote:active .node-element > ol::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-list:hover .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:hover .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:hover .node-element > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:hover .node-element > ol::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:active .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:active .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:active .node-element > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list:active .node-element > ol::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-list: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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-buttonRow:hover .node-element > ol::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 > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-buttonRow:active .node-element > ol::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-buttonRow:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover .node-element > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover .node-element > ol::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active .node-element > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active .node-element > ol::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover .node-element > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover .node-element > ol::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active .node-element > div::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active .node-element > hr::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active .node-element > ul::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active .node-element > ol::before, .courier-editor-preview-mode .ProseMirror > .react-renderer.node-customCode:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-imageBlock:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-button:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-divider:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-paragraph:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-heading:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-blockquote:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-list:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-buttonRow:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-column:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active .node-element > div::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active .node-element > hr::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active .node-element > ul::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active .node-element > ol::before, .courier-editor-readonly .ProseMirror > .react-renderer.node-customCode:active .node-element.courier-empty-image::before {
2776
2885
  display: none;
2777
2886
  }
2778
2887
  .courier-editor-preview-mode .ProseMirror > .react-renderer.node-column .draggable-content-wrapper > .node-element > div, .courier-editor-readonly .ProseMirror > .react-renderer.node-column .draggable-content-wrapper > .node-element > div {
@@ -2801,6 +2910,7 @@ body {
2801
2910
  display: none;
2802
2911
  }
2803
2912
  .courier-sms-editor {
2913
+ --courier-variable-chip-max-width: 14ch;
2804
2914
  margin: 1.5rem;
2805
2915
  margin-right: 3.5rem;
2806
2916
  margin-top: 2.5rem;
@@ -2842,6 +2952,7 @@ body {
2842
2952
  display: none;
2843
2953
  }
2844
2954
  .courier-push-editor {
2955
+ --courier-variable-chip-max-width: 14ch;
2845
2956
  position: relative;
2846
2957
  margin: 1.5rem;
2847
2958
  word-break: break-all;
@@ -3083,10 +3194,6 @@ body {
3083
3194
  margin-top: 0px;
3084
3195
  margin-bottom: 0px;
3085
3196
  }
3086
- .ProseMirror > .react-renderer .node-variable {
3087
- margin-left: 0.25rem !important;
3088
- margin-right: 0.25rem !important;
3089
- }
3090
3197
  .ProseMirror > .react-renderer .node-variable {
3091
3198
  display: inline-block;
3092
3199
  }
@@ -4312,13 +4419,302 @@ body {
4312
4419
  .ProseMirror .react-renderer.node-column [data-column-cell="true"] .draggable-content-wrapper {
4313
4420
  clip-path: inset(-15px);
4314
4421
  }
4315
- /* Slack Editor Styles */
4422
+ [data-theme="slash-command"] {
4423
+ width: 100%;
4424
+ }
4425
+ /* Basic editor styles */
4426
+ .tiptap {
4427
+ outline: none;
4428
+
4429
+ /* hr {
4430
+ border: none;
4431
+ border-top: 1px solid var(--gray-2);
4432
+ margin: 2rem 0;
4433
+ } */
4434
+ }
4435
+ .tiptap :first-child {
4436
+ margin-top: 0;
4437
+ }
4438
+ /* List styles */
4439
+ .tiptap ul,
4440
+ .tiptap ol {
4441
+ padding: 0 1rem;
4442
+ margin: 0;
4443
+ }
4444
+ .tiptap ul li p, .tiptap ol li p {
4445
+ margin-top: 0.25em;
4446
+ margin-bottom: 0.25em;
4447
+ }
4448
+ /* Heading styles */
4449
+ .tiptap h1,
4450
+ .tiptap h2,
4451
+ .tiptap h3,
4452
+ .tiptap h4,
4453
+ .tiptap h5,
4454
+ .tiptap h6 {
4455
+ line-height: 1.1;
4456
+ margin-top: 2.5rem;
4457
+ text-wrap: pretty;
4458
+ }
4459
+ .tiptap h1,
4460
+ .tiptap h2 {
4461
+ margin-top: 3.5rem;
4462
+ margin-bottom: 1.5rem;
4463
+ }
4464
+ .tiptap h1 {
4465
+ font-size: 1.4rem;
4466
+ }
4467
+ .tiptap h2 {
4468
+ font-size: 1.2rem;
4469
+ }
4470
+ .tiptap h3 {
4471
+ font-size: 1.1rem;
4472
+ }
4473
+ .tiptap h4,
4474
+ .tiptap h5,
4475
+ .tiptap h6 {
4476
+ font-size: 1rem;
4477
+ }
4478
+ /* Code and preformatted text styles */
4479
+ .tiptap code {
4480
+ background-color: var(--purple-light);
4481
+ border-radius: 0.4rem;
4482
+ color: var(--black);
4483
+ font-size: 0.85rem;
4484
+ padding: 0.25em 0.3em;
4485
+ }
4486
+ .tiptap pre {
4487
+ background: var(--black);
4488
+ border-radius: 0.5rem;
4489
+ color: var(--white);
4490
+ font-family: "JetBrainsMono", monospace;
4491
+ margin: 1.5rem 0;
4492
+ padding: 0.75rem 1rem;
4493
+ }
4494
+ .tiptap pre code {
4495
+ background: none;
4496
+ color: inherit;
4497
+ font-size: 0.8rem;
4498
+ padding: 0;
4499
+ }
4500
+ .courier-variable-chip {
4501
+ position: relative;
4502
+ margin-left: 0.125rem;
4503
+ margin-right: 0.125rem;
4504
+ display: inline-flex;
4505
+ max-width: 100%;
4506
+ align-items: center;
4507
+ padding-right: 0.375rem;
4508
+ padding-left: 1.5rem;
4509
+
4510
+ font-size: inherit;
4511
+ font-family: inherit;
4512
+ font-weight: inherit;
4513
+
4514
+ color: #92400e;
4515
+ }
4516
+ /* Default state - yellow/warning (no value) */
4517
+ .courier-variable-chip:before {
4518
+ content: "";
4519
+ }
4520
+ .courier-variable-chip:before {
4521
+ position: absolute;
4522
+ }
4523
+ .courier-variable-chip:before {
4524
+ left: 0px;
4525
+ }
4526
+ .courier-variable-chip:before {
4527
+ top: 1px;
4528
+ }
4529
+ .courier-variable-chip:before {
4530
+ height: 100%;
4531
+ }
4532
+ .courier-variable-chip:before {
4533
+ width: 100%;
4534
+ }
4535
+ .courier-variable-chip:before {
4536
+ border-radius: 0.25rem;
4537
+ }
4538
+ .courier-variable-chip:before {
4539
+ border-width: 1px;
4540
+ }
4541
+ .courier-variable-chip:before {
4542
+ background-color: #fffbeb;
4543
+ border-color: #fde68a;
4544
+ }
4545
+ /* Icon container - absolutely positioned */
4546
+ .courier-variable-chip > span:first-child {
4547
+ position: absolute;
4548
+ }
4549
+ .courier-variable-chip > span:first-child {
4550
+ left: 0.25rem;
4551
+ }
4552
+ .courier-variable-chip > span:first-child {
4553
+ top: 50%;
4554
+ }
4555
+ .courier-variable-chip > span:first-child {
4556
+ z-index: 10;
4557
+ }
4558
+ .courier-variable-chip > span:first-child {
4559
+ --tw-translate-y: -50%;
4560
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4561
+ }
4562
+ /* Text span */
4563
+ .courier-variable-chip > span:last-child {
4564
+ position: relative;
4565
+ }
4566
+ .courier-variable-chip > span:last-child {
4567
+ z-index: 10;
4568
+ }
4569
+ /* Has value state - blue */
4570
+ .courier-variable-chip.courier-variable-chip-has-value {
4571
+ color: #1e40af;
4572
+ }
4573
+ .courier-variable-chip.courier-variable-chip-has-value:before {
4574
+ background-color: #eff6ff;
4575
+ border-color: #bfdbfe;
4576
+ }
4577
+ /* Invalid state - reddish */
4578
+ .courier-variable-chip.courier-variable-chip-invalid {
4579
+ color: #991b1b;
4580
+ }
4581
+ .courier-variable-chip.courier-variable-chip-invalid:before {
4582
+ background-color: #fef2f2;
4583
+ border-color: #fecaca;
4584
+ }
4585
+ /* Selected state - matches native text selection highlight */
4586
+ .courier-variable-chip.courier-variable-chip-selected::before {
4587
+ border-color: currentColor;
4588
+ }
4589
+ .courier-variable-chip.courier-variable-chip-selected::after {
4590
+ content: "";
4591
+ }
4592
+ .courier-variable-chip.courier-variable-chip-selected::after {
4593
+ position: absolute;
4594
+ }
4595
+ .courier-variable-chip.courier-variable-chip-selected::after {
4596
+ left: 0px;
4597
+ }
4598
+ .courier-variable-chip.courier-variable-chip-selected::after {
4599
+ top: 1px;
4600
+ }
4601
+ .courier-variable-chip.courier-variable-chip-selected::after {
4602
+ height: 100%;
4603
+ }
4604
+ .courier-variable-chip.courier-variable-chip-selected::after {
4605
+ width: 100%;
4606
+ }
4607
+ .courier-variable-chip.courier-variable-chip-selected::after {
4608
+ border-radius: 0.25rem;
4609
+ }
4610
+ .courier-variable-chip.courier-variable-chip-selected::after {
4611
+ background-color: Highlight;
4612
+ opacity: 0.3;
4613
+ pointer-events: none;
4614
+ z-index: 20;
4615
+ }
4616
+ /* Variable Textarea placeholder styles */
4617
+ .variable-textarea-placeholder {
4618
+ cursor: text;
4619
+ }
4620
+ .variable-textarea-placeholder .ProseMirror p.is-editor-empty:first-child::before,
4621
+ .variable-textarea-placeholder .ProseMirror p.is-empty:first-child::before {
4622
+ content: attr(data-placeholder);
4623
+ float: left;
4624
+ color: var(--muted-foreground);
4625
+ pointer-events: none;
4626
+ height: 0;
4627
+ }
4628
+ /* Variable Input placeholder styles */
4629
+ .variable-input-placeholder {
4630
+ position: relative;
4631
+ cursor: text;
4632
+ padding-left: 1px;
4633
+
4634
+ /* Position placeholder absolutely so cursor appears at start */
4635
+ }
4636
+ .variable-input-placeholder .ProseMirror {
4637
+ width: 100%;
4638
+ }
4639
+ .variable-input-placeholder .ProseMirror {
4640
+ padding: 0px;
4641
+ }
4642
+ .variable-input-placeholder .ProseMirror p {
4643
+ margin: 0px;
4644
+ }
4645
+ .variable-input-placeholder .ProseMirror p {
4646
+ cursor: text;
4647
+ }
4648
+ .variable-input-placeholder .ProseMirror p {
4649
+ border-style: none;
4650
+ }
4651
+ .variable-input-placeholder .ProseMirror p {
4652
+ padding: 0px;
4653
+ }
4654
+ .variable-input-placeholder .ProseMirror p {
4655
+ outline: 2px solid transparent;
4656
+ outline-offset: 2px;
4657
+ }
4658
+ .variable-input-placeholder .ProseMirror .node-variable {
4659
+ vertical-align: middle;
4660
+ position: relative;
4661
+ top: -1px;
4662
+ }
4663
+ .variable-input-placeholder .ProseMirror p.is-editor-empty:first-child::before,
4664
+ .variable-input-placeholder .ProseMirror p.is-empty:first-child::before {
4665
+ content: attr(data-placeholder);
4666
+ color: var(--muted-foreground);
4667
+ pointer-events: none;
4668
+ position: absolute;
4669
+ left: 1px; /* Match the padding */
4670
+ top: 50%;
4671
+ transform: translateY(-50%);
4672
+ }
4673
+ /* Hide scrollbar for variable input while keeping scroll functionality */
4674
+ .variable-input-no-scrollbar::-webkit-scrollbar {
4675
+ display: none;
4676
+ }
4677
+ /* Slack Editor Styles — placed after .tiptap base so channel overrides win. */
4316
4678
  .courier-slack-editor .ProseMirror {
4317
4679
  padding: 0px;
4318
4680
  }
4319
4681
  .courier-slack-editor .ProseMirror:is(.courier-dark *) {
4320
4682
  color: var(--foreground);
4321
4683
  }
4684
+ .courier-slack-editor .ProseMirror {
4685
+ font-family:
4686
+ Lato,
4687
+ -apple-system,
4688
+ BlinkMacSystemFont,
4689
+ "Segoe UI",
4690
+ sans-serif;
4691
+ }
4692
+ .courier-slack-editor .ProseMirror p,
4693
+ .courier-slack-editor .ProseMirror h1 {
4694
+ word-break: normal !important;
4695
+ overflow-wrap: break-word !important;
4696
+ }
4697
+ .courier-slack-editor .ProseMirror p {
4698
+ font-size: 15px;
4699
+ line-height: 22px;
4700
+ }
4701
+ .courier-slack-editor .ProseMirror h1 {
4702
+ font-size: 18px;
4703
+ font-weight: 900;
4704
+ line-height: 1.33;
4705
+ margin-top: 0;
4706
+ margin-bottom: 0;
4707
+ }
4708
+ /* Override email-specific inline styles on the blockquote inner wrapper.
4709
+ * Slack quotes are NOT italic and use body text color. */
4710
+ .courier-slack-editor .ProseMirror blockquote .node-element > div {
4711
+ font-style: normal !important;
4712
+ color: inherit !important;
4713
+ font-size: 15px !important;
4714
+ line-height: 22px !important;
4715
+ word-break: normal !important;
4716
+ overflow-wrap: break-word !important;
4717
+ }
4322
4718
  .courier-slack-editor .ProseMirror > .react-renderer {
4323
4719
  margin-top: 0.5rem;
4324
4720
  margin-bottom: 0.5rem;
@@ -4368,23 +4764,110 @@ body {
4368
4764
  .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div {
4369
4765
  justify-content: flex-start !important;
4370
4766
  }
4371
- .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div {
4767
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a {
4372
4768
  margin-right: auto !important;
4373
4769
  }
4374
- .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div {
4770
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a {
4375
4771
  margin-left: 0px !important;
4376
4772
  }
4377
- .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div {
4773
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a {
4774
+ text-decoration-line: none;
4775
+ }
4776
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
4777
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
4778
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
4779
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
4780
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
4781
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
4782
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
4783
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
4784
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
4785
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
4786
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
4787
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
4788
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
4789
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
4790
+ margin-right: auto !important;
4791
+ }
4792
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
4793
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
4794
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
4795
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
4796
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
4797
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
4798
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
4799
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
4800
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
4801
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
4802
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
4803
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
4804
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
4805
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
4806
+ margin-left: 0px !important;
4807
+ }
4808
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
4809
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
4810
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
4811
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
4812
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
4813
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
4814
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
4815
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
4816
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
4817
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
4818
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
4819
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
4820
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
4821
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
4378
4822
  background-color: transparent !important;
4379
4823
  }
4380
- .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div {
4824
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
4825
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
4826
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
4827
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
4828
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
4829
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
4830
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
4831
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
4832
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
4833
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
4834
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
4835
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
4836
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
4837
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
4381
4838
  --tw-text-opacity: 1 !important;
4382
4839
  color: rgb(23 23 23 / var(--tw-text-opacity, 1)) !important;
4383
4840
  }
4384
- .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div:is(.courier-dark *), .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div:is(.courier-dark *), .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div:is(.courier-dark *), .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div:is(.courier-dark *), .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div:is(.courier-dark *), .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div:is(.courier-dark *), .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div:is(.courier-dark *) {
4841
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div:is(.courier-dark *),
4842
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div:is(.courier-dark *),
4843
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div:is(.courier-dark *),
4844
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div:is(.courier-dark *),
4845
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div:is(.courier-dark *),
4846
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div:is(.courier-dark *),
4847
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div:is(.courier-dark *),
4848
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div:is(.courier-dark *),
4849
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div:is(.courier-dark *),
4850
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div:is(.courier-dark *),
4851
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div:is(.courier-dark *),
4852
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div:is(.courier-dark *),
4853
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div:is(.courier-dark *),
4854
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div:is(.courier-dark *) {
4385
4855
  color: var(--foreground) !important;
4386
4856
  }
4387
- .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div {
4857
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
4858
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
4859
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
4860
+ .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
4861
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
4862
+ .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
4863
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
4864
+ .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
4865
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
4866
+ .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
4867
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
4868
+ .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
4869
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
4870
+ .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
4388
4871
  border: 1px solid #e5e5e5 !important;
4389
4872
  border-radius: 6px !important;
4390
4873
  padding: 6px 9.6px !important;
@@ -4394,10 +4877,30 @@ body {
4394
4877
  line-height: 24px !important;
4395
4878
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
4396
4879
  }
4397
- .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div:hover {
4880
+ .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div:hover, .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div:hover {
4398
4881
  --tw-bg-opacity: 1;
4399
4882
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
4400
4883
  }
4884
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button) .node-element > div > div,
4885
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button) .node-element > div > a > div,
4886
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button) .node-element > div > div,
4887
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button) .node-element > div > a > div,
4888
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button) .node-element > div > div,
4889
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button) .node-element > div > a > div,
4890
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button) .node-element > div > div,
4891
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button) .node-element > div > a > div,
4892
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button) .node-element > div > div,
4893
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button) .node-element > div > a > div,
4894
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button) .node-element > div > div,
4895
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button) .node-element > div > a > div,
4896
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button) .node-element > div > div,
4897
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button) .node-element > div > a > div {
4898
+ border-color: #565856 !important;
4899
+ box-shadow: none !important;
4900
+ }
4901
+ :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button) .node-element > div > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button) .node-element > div > a > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button) .node-element > div > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button) .node-element > div > a > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button) .node-element > div > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button) .node-element > div > a > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button) .node-element > div > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button) .node-element > div > a > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button) .node-element > div > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button) .node-element > div > a > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button) .node-element > div > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button) .node-element > div > a > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button) .node-element > div > div:hover, :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button) .node-element > div > a > div:hover {
4902
+ background-color: rgba(255, 255, 255, 0.06) !important;
4903
+ }
4401
4904
  .courier-slack-editor .ProseMirror > .react-renderer.node-button [data-cypress="draggable-handle"], .courier-slack-editor .ProseMirror > .react-renderer.node-divider [data-cypress="draggable-handle"], .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph [data-cypress="draggable-handle"], .courier-slack-editor .ProseMirror > .react-renderer.node-heading [data-cypress="draggable-handle"], .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote [data-cypress="draggable-handle"], .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow [data-cypress="draggable-handle"], .courier-slack-editor .ProseMirror > .react-renderer.node-column [data-cypress="draggable-handle"] {
4402
4905
  visibility: hidden;
4403
4906
  }
@@ -4502,10 +5005,33 @@ body {
4502
5005
  .courier-slack-editor .ProseMirror > .react-renderer.node-button .selected-element .courier-actions-panel, .courier-slack-editor .ProseMirror > .react-renderer.node-divider .selected-element .courier-actions-panel, .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-slack-editor .ProseMirror > .react-renderer.node-heading .selected-element .courier-actions-panel, .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote .selected-element .courier-actions-panel, .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow .selected-element .courier-actions-panel, .courier-slack-editor .ProseMirror > .react-renderer.node-column .selected-element .courier-actions-panel {
4503
5006
  display: block;
4504
5007
  }
4505
- /* MS Teams Editor Styles */
5008
+ /* MS Teams Editor Styles — placed after .tiptap base so channel overrides win. */
4506
5009
  .courier-msteams-editor .ProseMirror {
4507
5010
  padding: 0px;
4508
5011
  }
5012
+ .courier-msteams-editor .ProseMirror {
5013
+ font-family:
5014
+ "Segoe UI",
5015
+ system-ui,
5016
+ -apple-system,
5017
+ sans-serif;
5018
+ }
5019
+ .courier-msteams-editor .ProseMirror p {
5020
+ font-size: 14px;
5021
+ line-height: 20px;
5022
+ word-break: normal !important;
5023
+ overflow-wrap: break-word !important;
5024
+ }
5025
+ /* Override email-specific inline styles on the blockquote inner wrapper.
5026
+ * Teams quotes are NOT italic and use body text color. */
5027
+ .courier-msteams-editor .ProseMirror blockquote .node-element > div {
5028
+ font-style: normal !important;
5029
+ color: inherit !important;
5030
+ font-size: 14px !important;
5031
+ line-height: 20px !important;
5032
+ word-break: normal !important;
5033
+ overflow-wrap: break-word !important;
5034
+ }
4509
5035
  .courier-msteams-editor .ProseMirror > .react-renderer {
4510
5036
  margin-top: 0.5rem;
4511
5037
  margin-bottom: 0.5rem;
@@ -4656,223 +5182,6 @@ body {
4656
5182
  .courier-msteams-editor .ProseMirror > .react-renderer.node-button .selected-element .courier-actions-panel, .courier-msteams-editor .ProseMirror > .react-renderer.node-divider .selected-element .courier-actions-panel, .courier-msteams-editor .ProseMirror > .react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-msteams-editor .ProseMirror > .react-renderer.node-heading .selected-element .courier-actions-panel, .courier-msteams-editor .ProseMirror > .react-renderer.node-blockquote .selected-element .courier-actions-panel, .courier-msteams-editor .ProseMirror > .react-renderer.node-buttonRow .selected-element .courier-actions-panel, .courier-msteams-editor .ProseMirror > .react-renderer.node-column .selected-element .courier-actions-panel {
4657
5183
  display: block;
4658
5184
  }
4659
- [data-theme="slash-command"] {
4660
- width: 100%;
4661
- }
4662
- /* Basic editor styles */
4663
- .tiptap {
4664
- outline: none;
4665
-
4666
- /* hr {
4667
- border: none;
4668
- border-top: 1px solid var(--gray-2);
4669
- margin: 2rem 0;
4670
- } */
4671
- }
4672
- .tiptap :first-child {
4673
- margin-top: 0;
4674
- }
4675
- /* List styles */
4676
- .tiptap ul,
4677
- .tiptap ol {
4678
- padding: 0 1rem;
4679
- margin: 0;
4680
- }
4681
- .tiptap ul li p, .tiptap ol li p {
4682
- margin-top: 0.25em;
4683
- margin-bottom: 0.25em;
4684
- }
4685
- /* Heading styles */
4686
- .tiptap h1,
4687
- .tiptap h2,
4688
- .tiptap h3,
4689
- .tiptap h4,
4690
- .tiptap h5,
4691
- .tiptap h6 {
4692
- line-height: 1.1;
4693
- margin-top: 2.5rem;
4694
- text-wrap: pretty;
4695
- }
4696
- .tiptap h1,
4697
- .tiptap h2 {
4698
- margin-top: 3.5rem;
4699
- margin-bottom: 1.5rem;
4700
- }
4701
- .tiptap h1 {
4702
- font-size: 1.4rem;
4703
- }
4704
- .tiptap h2 {
4705
- font-size: 1.2rem;
4706
- }
4707
- .tiptap h3 {
4708
- font-size: 1.1rem;
4709
- }
4710
- .tiptap h4,
4711
- .tiptap h5,
4712
- .tiptap h6 {
4713
- font-size: 1rem;
4714
- }
4715
- /* Code and preformatted text styles */
4716
- .tiptap code {
4717
- background-color: var(--purple-light);
4718
- border-radius: 0.4rem;
4719
- color: var(--black);
4720
- font-size: 0.85rem;
4721
- padding: 0.25em 0.3em;
4722
- }
4723
- .tiptap pre {
4724
- background: var(--black);
4725
- border-radius: 0.5rem;
4726
- color: var(--white);
4727
- font-family: "JetBrainsMono", monospace;
4728
- margin: 1.5rem 0;
4729
- padding: 0.75rem 1rem;
4730
- }
4731
- .tiptap pre code {
4732
- background: none;
4733
- color: inherit;
4734
- font-size: 0.8rem;
4735
- padding: 0;
4736
- }
4737
- .courier-variable-chip {
4738
- position: relative;
4739
- display: inline-flex;
4740
- max-width: 100%;
4741
- align-items: center;
4742
- padding-right: 0.375rem;
4743
- padding-left: 1.5rem;
4744
-
4745
- font-size: inherit;
4746
- font-family: inherit;
4747
- font-weight: inherit;
4748
- }
4749
- /* Default state - yellow/warning (no value) */
4750
- .courier-variable-chip:before {
4751
- content: "";
4752
- }
4753
- .courier-variable-chip:before {
4754
- position: absolute;
4755
- }
4756
- .courier-variable-chip:before {
4757
- left: 0px;
4758
- }
4759
- .courier-variable-chip:before {
4760
- top: 1px;
4761
- }
4762
- .courier-variable-chip:before {
4763
- height: 100%;
4764
- }
4765
- .courier-variable-chip:before {
4766
- width: 100%;
4767
- }
4768
- .courier-variable-chip:before {
4769
- border-radius: 0.25rem;
4770
- }
4771
- .courier-variable-chip:before {
4772
- border-width: 1px;
4773
- }
4774
- .courier-variable-chip:before {
4775
- background-color: #fffbeb;
4776
- border-color: #fde68a;
4777
- }
4778
- /* Icon container - absolutely positioned */
4779
- .courier-variable-chip > span:first-child {
4780
- position: absolute;
4781
- }
4782
- .courier-variable-chip > span:first-child {
4783
- left: 0.25rem;
4784
- }
4785
- .courier-variable-chip > span:first-child {
4786
- top: 50%;
4787
- }
4788
- .courier-variable-chip > span:first-child {
4789
- z-index: 10;
4790
- }
4791
- .courier-variable-chip > span:first-child {
4792
- --tw-translate-y: -50%;
4793
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4794
- }
4795
- /* Text span */
4796
- .courier-variable-chip > span:last-child {
4797
- position: relative;
4798
- }
4799
- .courier-variable-chip > span:last-child {
4800
- z-index: 10;
4801
- }
4802
- .courier-variable-chip > span:last-child {
4803
- color: #92400e;
4804
- }
4805
- /* Has value state - blue */
4806
- .courier-variable-chip.courier-variable-chip-has-value:before {
4807
- background-color: #eff6ff;
4808
- border-color: #bfdbfe;
4809
- }
4810
- .courier-variable-chip.courier-variable-chip-has-value > span:last-child {
4811
- color: #1e40af;
4812
- }
4813
- /* Invalid state - reddish */
4814
- .courier-variable-chip.courier-variable-chip-invalid:before {
4815
- background-color: #fef2f2;
4816
- border-color: #fecaca;
4817
- }
4818
- .courier-variable-chip.courier-variable-chip-invalid > span:last-child {
4819
- color: #991b1b;
4820
- }
4821
- /* Variable Textarea placeholder styles */
4822
- .variable-textarea-placeholder {
4823
- cursor: text;
4824
- }
4825
- .variable-textarea-placeholder .ProseMirror p.is-editor-empty:first-child::before,
4826
- .variable-textarea-placeholder .ProseMirror p.is-empty:first-child::before {
4827
- content: attr(data-placeholder);
4828
- float: left;
4829
- color: var(--muted-foreground);
4830
- pointer-events: none;
4831
- height: 0;
4832
- }
4833
- /* Variable Input placeholder styles */
4834
- .variable-input-placeholder {
4835
- cursor: text;
4836
- }
4837
- .variable-input-placeholder .ProseMirror {
4838
- width: 100%;
4839
- }
4840
- .variable-input-placeholder .ProseMirror {
4841
- padding: 0px;
4842
- }
4843
- .variable-input-placeholder .ProseMirror p {
4844
- margin: 0px;
4845
- }
4846
- .variable-input-placeholder .ProseMirror p {
4847
- height: 28px;
4848
- }
4849
- .variable-input-placeholder .ProseMirror p {
4850
- width: 100%;
4851
- }
4852
- .variable-input-placeholder .ProseMirror p {
4853
- cursor: text;
4854
- }
4855
- .variable-input-placeholder .ProseMirror p {
4856
- border-style: none;
4857
- }
4858
- .variable-input-placeholder .ProseMirror p {
4859
- padding: 0px;
4860
- }
4861
- .variable-input-placeholder .ProseMirror p {
4862
- line-height: 28px;
4863
- }
4864
- .variable-input-placeholder .ProseMirror p {
4865
- outline: 2px solid transparent;
4866
- outline-offset: 2px;
4867
- }
4868
- .variable-input-placeholder .ProseMirror p.is-editor-empty:first-child::before,
4869
- .variable-input-placeholder .ProseMirror p.is-empty:first-child::before {
4870
- content: attr(data-placeholder);
4871
- float: left;
4872
- color: var(--muted-foreground);
4873
- pointer-events: none;
4874
- height: 0;
4875
- }
4876
5185
  .file\:courier-border-0::file-selector-button {
4877
5186
  border-width: 0px;
4878
5187
  }
@@ -5407,9 +5716,18 @@ body {
5407
5716
  .\[\&\>svg\]\:courier-shrink-0>svg {
5408
5717
  flex-shrink: 0;
5409
5718
  }
5719
+ .\[\&_\.ProseMirror\]\:courier-inline-flex .ProseMirror {
5720
+ display: inline-flex;
5721
+ }
5410
5722
  .\[\&_\.ProseMirror\]\:courier-min-h-\[20px\] .ProseMirror {
5411
5723
  min-height: 20px;
5412
5724
  }
5725
+ .\[\&_\.ProseMirror\]\:courier-flex-nowrap .ProseMirror {
5726
+ flex-wrap: nowrap;
5727
+ }
5728
+ .\[\&_\.ProseMirror\]\:courier-items-center .ProseMirror {
5729
+ align-items: center;
5730
+ }
5413
5731
  .\[\&_\.ProseMirror\]\:courier-border-none .ProseMirror {
5414
5732
  border-style: none;
5415
5733
  }
@@ -5420,6 +5738,18 @@ body {
5420
5738
  outline: 2px solid transparent;
5421
5739
  outline-offset: 2px;
5422
5740
  }
5741
+ .\[\&_\.tiptap\]\:courier-inline-flex .tiptap {
5742
+ display: inline-flex;
5743
+ }
5744
+ .\[\&_\.tiptap\]\:courier-flex-nowrap .tiptap {
5745
+ flex-wrap: nowrap;
5746
+ }
5747
+ .\[\&_\.tiptap\]\:courier-items-center .tiptap {
5748
+ align-items: center;
5749
+ }
5750
+ .\[\&_\.tiptap\]\:courier-whitespace-nowrap .tiptap {
5751
+ white-space: nowrap;
5752
+ }
5423
5753
  .\[\&_\.tiptap\]\:courier-border-none .tiptap {
5424
5754
  border-style: none;
5425
5755
  }