@trycourier/react-designer 0.6.0 → 0.7.0

package/dist/esm/styles.css

@@ -1305,6 +1305,9 @@ body {
 .courier-max-h-\[88px\] {
   max-height: 88px;
 }
+.courier-min-h-0 {
+  min-height: 0px;
+}
 .courier-min-h-\[1\.5rem\] {
   min-height: 1.5rem;
 }
@@ -1553,9 +1556,6 @@ body {
 .courier-flex-wrap {
   flex-wrap: wrap;
 }
-.courier-flex-nowrap {
-  flex-wrap: nowrap;
-}
 .courier-content-center {
   align-content: center;
 }
@@ -2116,9 +2116,6 @@ body {
 .courier-pb-0 {
   padding-bottom: 0px;
 }
-.courier-pb-0\.5 {
-  padding-bottom: 0.125rem;
-}
 .courier-pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -2134,6 +2131,9 @@ body {
 .courier-pb-6 {
   padding-bottom: 1.5rem;
 }
+.courier-pb-\[3px\] {
+  padding-bottom: 3px;
+}
 .courier-pl-0 {
   padding-left: 0px;
 }
@@ -2778,6 +2778,66 @@ body {
 .courier-editor-main > div {
   width: 100%;
 }
+/* Email-specific font styles: values come from CSS vars set on .courier-email-editor
+ * by EmailEditorContainer (see getEmailEditorTiptapCssVars in lib/constants/email-editor-tiptap-styles.ts).
+ * Edit constants there only; this block stays in sync via var(--email-editor-*).
+ */
+.courier-email-editor .tiptap {
+  font-family: var(--email-editor-font-family);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+.courier-email-editor .tiptap p {
+    color: var(--email-editor-p-color);
+    font-size: var(--email-editor-p-font-size);
+    line-height: var(--email-editor-p-line-height);
+  }
+.courier-email-editor .tiptap h1 {
+    color: var(--email-editor-h1-color);
+    font-size: var(--email-editor-h1-font-size);
+    font-weight: var(--email-editor-h1-font-weight);
+    line-height: var(--email-editor-h1-line-height);
+  }
+.courier-email-editor .tiptap h2 {
+    color: var(--email-editor-h2-color);
+    font-size: var(--email-editor-h2-font-size);
+    font-weight: var(--email-editor-h2-font-weight);
+    line-height: var(--email-editor-h2-line-height);
+  }
+.courier-email-editor .tiptap h3 {
+    color: var(--email-editor-h3-color);
+    font-size: var(--email-editor-h3-font-size);
+    font-weight: var(--email-editor-h3-font-weight);
+    line-height: var(--email-editor-h3-line-height);
+  }
+.courier-email-editor .tiptap blockquote p {
+      color: var(--email-editor-blockquote-p-color);
+      font-size: var(--email-editor-blockquote-p-font-size);
+      line-height: var(--email-editor-blockquote-p-line-height);
+      font-style: var(--email-editor-blockquote-p-font-style);
+      font-weight: var(--email-editor-blockquote-p-font-weight);
+    }
+.courier-email-editor .tiptap blockquote h1 {
+      color: var(--email-editor-blockquote-h1-color);
+      font-size: var(--email-editor-blockquote-h1-font-size);
+      font-weight: var(--email-editor-blockquote-h1-font-weight);
+      line-height: var(--email-editor-blockquote-h1-line-height);
+      font-style: var(--email-editor-blockquote-h1-font-style);
+    }
+.courier-email-editor .tiptap blockquote h2 {
+      color: var(--email-editor-blockquote-h2-color);
+      font-size: var(--email-editor-blockquote-h2-font-size);
+      font-weight: var(--email-editor-blockquote-h2-font-weight);
+      line-height: var(--email-editor-blockquote-h2-line-height);
+      font-style: var(--email-editor-blockquote-h2-font-style);
+    }
+.courier-email-editor .tiptap blockquote h3 {
+      color: var(--email-editor-blockquote-h3-color);
+      font-size: var(--email-editor-blockquote-h3-font-size);
+      font-weight: var(--email-editor-blockquote-h3-font-weight);
+      line-height: var(--email-editor-blockquote-h3-line-height);
+      font-style: var(--email-editor-blockquote-h3-font-style);
+    }
 .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main, .courier-editor-readonly.courier-editor-preview-mode-mobile .courier-editor-main {
   max-width: 24rem;
 }
@@ -2850,6 +2910,7 @@ body {
   display: none;
 }
 .courier-sms-editor {
+  --courier-variable-chip-max-width: 14ch;
   margin: 1.5rem;
   margin-right: 3.5rem;
   margin-top: 2.5rem;
@@ -2891,6 +2952,7 @@ body {
   display: none;
 }
 .courier-push-editor {
+  --courier-variable-chip-max-width: 14ch;
   position: relative;
   margin: 1.5rem;
   word-break: break-all;
@@ -4357,13 +4419,302 @@ body {
 .ProseMirror .react-renderer.node-column [data-column-cell="true"] .draggable-content-wrapper {
     clip-path: inset(-15px);
   }
-/* Slack Editor Styles */
+[data-theme="slash-command"] {
+  width: 100%;
+}
+/* Basic editor styles */
+.tiptap {
+  outline: none;
+
+  /* hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  } */
+}
+.tiptap :first-child {
+    margin-top: 0;
+  }
+/* List styles */
+.tiptap ul,
+  .tiptap ol {
+    padding: 0 1rem;
+    margin: 0;
+  }
+.tiptap ul li p, .tiptap ol li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+/* Heading styles */
+.tiptap h1,
+  .tiptap h2,
+  .tiptap h3,
+  .tiptap h4,
+  .tiptap h5,
+  .tiptap h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+.tiptap h1,
+  .tiptap h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+.tiptap h1 {
+    font-size: 1.4rem;
+  }
+.tiptap h2 {
+    font-size: 1.2rem;
+  }
+.tiptap h3 {
+    font-size: 1.1rem;
+  }
+.tiptap h4,
+  .tiptap h5,
+  .tiptap h6 {
+    font-size: 1rem;
+  }
+/* Code and preformatted text styles */
+.tiptap code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+.tiptap pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: "JetBrainsMono", monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+  }
+.tiptap pre code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+.courier-variable-chip {
+  position: relative;
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  padding-right: 0.375rem;
+  padding-left: 1.5rem;
+
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+
+  color: #92400e;
+}
+/* Default state - yellow/warning (no value) */
+.courier-variable-chip:before {
+    content: "";
+  }
+.courier-variable-chip:before {
+  position: absolute;
+}
+.courier-variable-chip:before {
+  left: 0px;
+}
+.courier-variable-chip:before {
+  top: 1px;
+}
+.courier-variable-chip:before {
+  height: 100%;
+}
+.courier-variable-chip:before {
+  width: 100%;
+}
+.courier-variable-chip:before {
+  border-radius: 0.25rem;
+}
+.courier-variable-chip:before {
+  border-width: 1px;
+}
+.courier-variable-chip:before {
+    background-color: #fffbeb;
+    border-color: #fde68a;
+  }
+/* Icon container - absolutely positioned */
+.courier-variable-chip > span:first-child {
+  position: absolute;
+}
+.courier-variable-chip > span:first-child {
+  left: 0.25rem;
+}
+.courier-variable-chip > span:first-child {
+  top: 50%;
+}
+.courier-variable-chip > span:first-child {
+  z-index: 10;
+}
+.courier-variable-chip > span:first-child {
+  --tw-translate-y: -50%;
+  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));
+}
+/* Text span */
+.courier-variable-chip > span:last-child {
+  position: relative;
+}
+.courier-variable-chip > span:last-child {
+  z-index: 10;
+}
+/* Has value state - blue */
+.courier-variable-chip.courier-variable-chip-has-value {
+    color: #1e40af;
+  }
+.courier-variable-chip.courier-variable-chip-has-value:before {
+      background-color: #eff6ff;
+      border-color: #bfdbfe;
+    }
+/* Invalid state - reddish */
+.courier-variable-chip.courier-variable-chip-invalid {
+    color: #991b1b;
+  }
+.courier-variable-chip.courier-variable-chip-invalid:before {
+      background-color: #fef2f2;
+      border-color: #fecaca;
+    }
+/* Selected state - matches native text selection highlight */
+.courier-variable-chip.courier-variable-chip-selected::before {
+      border-color: currentColor;
+    }
+.courier-variable-chip.courier-variable-chip-selected::after {
+      content: "";
+    }
+.courier-variable-chip.courier-variable-chip-selected::after {
+  position: absolute;
+}
+.courier-variable-chip.courier-variable-chip-selected::after {
+  left: 0px;
+}
+.courier-variable-chip.courier-variable-chip-selected::after {
+  top: 1px;
+}
+.courier-variable-chip.courier-variable-chip-selected::after {
+  height: 100%;
+}
+.courier-variable-chip.courier-variable-chip-selected::after {
+  width: 100%;
+}
+.courier-variable-chip.courier-variable-chip-selected::after {
+  border-radius: 0.25rem;
+}
+.courier-variable-chip.courier-variable-chip-selected::after {
+      background-color: Highlight;
+      opacity: 0.3;
+      pointer-events: none;
+      z-index: 20;
+    }
+/* Variable Textarea placeholder styles */
+.variable-textarea-placeholder {
+  cursor: text;
+}
+.variable-textarea-placeholder .ProseMirror p.is-editor-empty:first-child::before,
+    .variable-textarea-placeholder .ProseMirror p.is-empty:first-child::before {
+      content: attr(data-placeholder);
+      float: left;
+      color: var(--muted-foreground);
+      pointer-events: none;
+      height: 0;
+    }
+/* Variable Input placeholder styles */
+.variable-input-placeholder {
+  position: relative;
+  cursor: text;
+  padding-left: 1px;
+
+  /* Position placeholder absolutely so cursor appears at start */
+}
+.variable-input-placeholder .ProseMirror {
+  width: 100%;
+}
+.variable-input-placeholder .ProseMirror {
+  padding: 0px;
+}
+.variable-input-placeholder .ProseMirror p {
+  margin: 0px;
+}
+.variable-input-placeholder .ProseMirror p {
+  cursor: text;
+}
+.variable-input-placeholder .ProseMirror p {
+  border-style: none;
+}
+.variable-input-placeholder .ProseMirror p {
+  padding: 0px;
+}
+.variable-input-placeholder .ProseMirror p {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.variable-input-placeholder .ProseMirror .node-variable {
+      vertical-align: middle;
+      position: relative;
+      top: -1px;
+    }
+.variable-input-placeholder .ProseMirror p.is-editor-empty:first-child::before,
+  .variable-input-placeholder .ProseMirror p.is-empty:first-child::before {
+    content: attr(data-placeholder);
+    color: var(--muted-foreground);
+    pointer-events: none;
+    position: absolute;
+    left: 1px; /* Match the padding */
+    top: 50%;
+    transform: translateY(-50%);
+  }
+/* Hide scrollbar for variable input while keeping scroll functionality */
+.variable-input-no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+/* Slack Editor Styles — placed after .tiptap base so channel overrides win. */
 .courier-slack-editor .ProseMirror {
   padding: 0px;
 }
 .courier-slack-editor .ProseMirror:is(.courier-dark *) {
   color: var(--foreground);
 }
+.courier-slack-editor .ProseMirror {
+    font-family:
+      Lato,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      sans-serif;
+  }
+.courier-slack-editor .ProseMirror p,
+    .courier-slack-editor .ProseMirror h1 {
+      word-break: normal !important;
+      overflow-wrap: break-word !important;
+    }
+.courier-slack-editor .ProseMirror p {
+      font-size: 15px;
+      line-height: 22px;
+    }
+.courier-slack-editor .ProseMirror h1 {
+      font-size: 18px;
+      font-weight: 900;
+      line-height: 1.33;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+/* Override email-specific inline styles on the blockquote inner wrapper.
+     * Slack quotes are NOT italic and use body text color. */
+.courier-slack-editor .ProseMirror blockquote .node-element > div {
+      font-style: normal !important;
+      color: inherit !important;
+      font-size: 15px !important;
+      line-height: 22px !important;
+      word-break: normal !important;
+      overflow-wrap: break-word !important;
+    }
 .courier-slack-editor .ProseMirror > .react-renderer {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -4413,23 +4764,110 @@ body {
 .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 {
   justify-content: flex-start !important;
 }
-.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 {
+.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 {
+  margin-right: auto !important;
+}
+.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 {
+  margin-left: 0px !important;
+}
+.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 {
+  text-decoration-line: none;
+}
+.courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
   margin-right: auto !important;
 }
-.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 {
+.courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
   margin-left: 0px !important;
 }
-.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 {
+.courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
   background-color: transparent !important;
 }
-.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 {
+.courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
   --tw-text-opacity: 1 !important;
   color: rgb(23 23 23 / var(--tw-text-opacity, 1)) !important;
 }
-.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 *) {
+.courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div:is(.courier-dark *),
+              .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > 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-divider.node-button .node-element > div > a > 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-paragraph.node-button .node-element > div > a > 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-heading.node-button .node-element > div > a > 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-blockquote.node-button .node-element > div > a > 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-buttonRow.node-button .node-element > div > a > div:is(.courier-dark *),
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div:is(.courier-dark *),
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div:is(.courier-dark *) {
   color: var(--foreground) !important;
 }
-.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 {
+.courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button .node-element > div > a > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > div,
+              .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button .node-element > div > a > div {
                 border: 1px solid #e5e5e5 !important;
                 border-radius: 6px !important;
                 padding: 6px 9.6px !important;
@@ -4439,10 +4877,30 @@ body {
                 line-height: 24px !important;
                 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
               }
-.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 {
+.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 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+:is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button) .node-element > div > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-button.node-button) .node-element > div > a > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button) .node-element > div > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-divider.node-button) .node-element > div > a > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button) .node-element > div > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-paragraph.node-button) .node-element > div > a > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button) .node-element > div > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-heading.node-button) .node-element > div > a > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button) .node-element > div > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-blockquote.node-button) .node-element > div > a > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button) .node-element > div > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-buttonRow.node-button) .node-element > div > a > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button) .node-element > div > div,
+            :is(.dark .courier-slack-editor .ProseMirror > .react-renderer.node-column.node-button) .node-element > div > a > div {
+              border-color: #565856 !important;
+              box-shadow: none !important;
+            }
+: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 {
+                background-color: rgba(255, 255, 255, 0.06) !important;
+              }
 .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"] {
   visibility: hidden;
 }
@@ -4547,10 +5005,33 @@ body {
 .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 {
   display: block;
 }
-/* MS Teams Editor Styles */
+/* MS Teams Editor Styles — placed after .tiptap base so channel overrides win. */
 .courier-msteams-editor .ProseMirror {
   padding: 0px;
 }
+.courier-msteams-editor .ProseMirror {
+    font-family:
+      "Segoe UI",
+      system-ui,
+      -apple-system,
+      sans-serif;
+  }
+.courier-msteams-editor .ProseMirror p {
+      font-size: 14px;
+      line-height: 20px;
+      word-break: normal !important;
+      overflow-wrap: break-word !important;
+    }
+/* Override email-specific inline styles on the blockquote inner wrapper.
+     * Teams quotes are NOT italic and use body text color. */
+.courier-msteams-editor .ProseMirror blockquote .node-element > div {
+      font-style: normal !important;
+      color: inherit !important;
+      font-size: 14px !important;
+      line-height: 20px !important;
+      word-break: normal !important;
+      overflow-wrap: break-word !important;
+    }
 .courier-msteams-editor .ProseMirror > .react-renderer {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -4701,226 +5182,6 @@ body {
 .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 {
   display: block;
 }
-[data-theme="slash-command"] {
-  width: 100%;
-}
-/* Basic editor styles */
-.tiptap {
-  outline: none;
-
-  /* hr {
-    border: none;
-    border-top: 1px solid var(--gray-2);
-    margin: 2rem 0;
-  } */
-}
-.tiptap :first-child {
-    margin-top: 0;
-  }
-/* List styles */
-.tiptap ul,
-  .tiptap ol {
-    padding: 0 1rem;
-    margin: 0;
-  }
-.tiptap ul li p, .tiptap ol li p {
-      margin-top: 0.25em;
-      margin-bottom: 0.25em;
-    }
-/* Heading styles */
-.tiptap h1,
-  .tiptap h2,
-  .tiptap h3,
-  .tiptap h4,
-  .tiptap h5,
-  .tiptap h6 {
-    line-height: 1.1;
-    margin-top: 2.5rem;
-    text-wrap: pretty;
-  }
-.tiptap h1,
-  .tiptap h2 {
-    margin-top: 3.5rem;
-    margin-bottom: 1.5rem;
-  }
-.tiptap h1 {
-    font-size: 1.4rem;
-  }
-.tiptap h2 {
-    font-size: 1.2rem;
-  }
-.tiptap h3 {
-    font-size: 1.1rem;
-  }
-.tiptap h4,
-  .tiptap h5,
-  .tiptap h6 {
-    font-size: 1rem;
-  }
-/* Code and preformatted text styles */
-.tiptap code {
-    background-color: var(--purple-light);
-    border-radius: 0.4rem;
-    color: var(--black);
-    font-size: 0.85rem;
-    padding: 0.25em 0.3em;
-  }
-.tiptap pre {
-    background: var(--black);
-    border-radius: 0.5rem;
-    color: var(--white);
-    font-family: "JetBrainsMono", monospace;
-    margin: 1.5rem 0;
-    padding: 0.75rem 1rem;
-  }
-.tiptap pre code {
-      background: none;
-      color: inherit;
-      font-size: 0.8rem;
-      padding: 0;
-    }
-.courier-variable-chip {
-  position: relative;
-  margin-left: 0.125rem;
-  margin-right: 0.125rem;
-  display: inline-flex;
-  max-width: 100%;
-  align-items: center;
-  padding-right: 0.375rem;
-  padding-left: 1.5rem;
-
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-}
-/* Default state - yellow/warning (no value) */
-.courier-variable-chip:before {
-    content: "";
-  }
-.courier-variable-chip:before {
-  position: absolute;
-}
-.courier-variable-chip:before {
-  left: 0px;
-}
-.courier-variable-chip:before {
-  top: 1px;
-}
-.courier-variable-chip:before {
-  height: 100%;
-}
-.courier-variable-chip:before {
-  width: 100%;
-}
-.courier-variable-chip:before {
-  border-radius: 0.25rem;
-}
-.courier-variable-chip:before {
-  border-width: 1px;
-}
-.courier-variable-chip:before {
-    background-color: #fffbeb;
-    border-color: #fde68a;
-  }
-/* Icon container - absolutely positioned */
-.courier-variable-chip > span:first-child {
-  position: absolute;
-}
-.courier-variable-chip > span:first-child {
-  left: 0.25rem;
-}
-.courier-variable-chip > span:first-child {
-  top: 50%;
-}
-.courier-variable-chip > span:first-child {
-  z-index: 10;
-}
-.courier-variable-chip > span:first-child {
-  --tw-translate-y: -50%;
-  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));
-}
-/* Text span */
-.courier-variable-chip > span:last-child {
-  position: relative;
-}
-.courier-variable-chip > span:last-child {
-  z-index: 10;
-}
-.courier-variable-chip > span:last-child {
-    color: #92400e;
-  }
-/* Has value state - blue */
-.courier-variable-chip.courier-variable-chip-has-value:before {
-      background-color: #eff6ff;
-      border-color: #bfdbfe;
-    }
-.courier-variable-chip.courier-variable-chip-has-value > span:last-child {
-      color: #1e40af;
-    }
-/* Invalid state - reddish */
-.courier-variable-chip.courier-variable-chip-invalid:before {
-      background-color: #fef2f2;
-      border-color: #fecaca;
-    }
-.courier-variable-chip.courier-variable-chip-invalid > span:last-child {
-      color: #991b1b;
-    }
-/* Variable Textarea placeholder styles */
-.variable-textarea-placeholder {
-  cursor: text;
-}
-.variable-textarea-placeholder .ProseMirror p.is-editor-empty:first-child::before,
-    .variable-textarea-placeholder .ProseMirror p.is-empty:first-child::before {
-      content: attr(data-placeholder);
-      float: left;
-      color: var(--muted-foreground);
-      pointer-events: none;
-      height: 0;
-    }
-/* Variable Input placeholder styles */
-.variable-input-placeholder {
-  position: relative;
-  cursor: text;
-  padding-left: 1px;
-
-  /* Position placeholder absolutely so cursor appears at start */
-}
-.variable-input-placeholder .ProseMirror {
-  width: 100%;
-}
-.variable-input-placeholder .ProseMirror {
-  padding: 0px;
-}
-.variable-input-placeholder .ProseMirror p {
-  margin: 0px;
-}
-.variable-input-placeholder .ProseMirror p {
-  cursor: text;
-}
-.variable-input-placeholder .ProseMirror p {
-  border-style: none;
-}
-.variable-input-placeholder .ProseMirror p {
-  padding: 0px;
-}
-.variable-input-placeholder .ProseMirror p {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.variable-input-placeholder .ProseMirror p.is-editor-empty:first-child::before,
-  .variable-input-placeholder .ProseMirror p.is-empty:first-child::before {
-    content: attr(data-placeholder);
-    color: var(--muted-foreground);
-    pointer-events: none;
-    position: absolute;
-    left: 1px; /* Match the padding */
-    top: 50%;
-    transform: translateY(-50%);
-  }
-/* Hide scrollbar for variable input while keeping scroll functionality */
-.variable-input-no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
 .file\:courier-border-0::file-selector-button {
   border-width: 0px;
 }