@trycourier/react-designer 0.5.1 → 0.6.0

package/dist/cjs/styles.css

@@ -447,6 +447,23 @@
   .ProseMirror .ProseMirror-gapcursor + .node-blockquote:hover:is(.courier-dark *) {
   outline-color: #a3a3a3;
 }
+/* Hard break wrapper for cursor positioning */
+.ProseMirror .hard-break-wrapper {
+    display: inline;
+    white-space: pre;
+  }
+/* Ensure cursor is visible before inline nodes after line breaks */
+.ProseMirror .hard-break-wrapper + [data-node-view-wrapper] {
+    display: inline;
+  }
+/* Custom cursor indicator for positions where browser can't render native cursor */
+.ProseMirror .variable-cursor-indicator {
+    pointer-events: none;
+  }
+@keyframes cursor-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+  }
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -1000,15 +1017,18 @@ body {
 .courier-z-50 {
   z-index: 50;
 }
+.courier-z-\[40\] {
+  z-index: 40;
+}
+.courier-z-\[50\] {
+  z-index: 50;
+}
 .courier-z-\[9999\] {
   z-index: 9999;
 }
 .courier-z-\[999\] {
   z-index: 999;
 }
-.courier-z-\[9\] {
-  z-index: 9;
-}
 .\!courier-m-0 {
   margin: 0px !important;
 }
@@ -1033,6 +1053,10 @@ body {
   margin-left: -1rem;
   margin-right: -1rem;
 }
+.courier-mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
+}
 .courier-mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1049,10 +1073,6 @@ body {
   margin-left: auto;
   margin-right: auto;
 }
-.courier-my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
 .courier-my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -1252,9 +1272,6 @@ body {
 .courier-h-\[25px\] {
   height: 25px;
 }
-.courier-h-\[28px\] {
-  height: 28px;
-}
 .courier-h-\[48px\] {
   height: 48px;
 }
@@ -1372,8 +1389,8 @@ body {
 .courier-w-\[360px\] {
   width: 360px;
 }
-.courier-w-\[80vw\] {
-  width: 80vw;
+.courier-w-\[85\%\] {
+  width: 85%;
 }
 .courier-w-auto {
   width: auto;
@@ -1536,6 +1553,9 @@ body {
 .courier-flex-wrap {
   flex-wrap: wrap;
 }
+.courier-flex-nowrap {
+  flex-wrap: nowrap;
+}
 .courier-content-center {
   align-content: center;
 }
@@ -1609,9 +1629,15 @@ body {
 .courier-overflow-hidden {
   overflow: hidden;
 }
+.courier-overflow-x-auto {
+  overflow-x: auto;
+}
 .courier-overflow-y-auto {
   overflow-y: auto;
 }
+.courier-overflow-y-clip {
+  overflow-y: clip;
+}
 .courier-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1620,6 +1646,9 @@ body {
 .courier-text-ellipsis {
   text-overflow: ellipsis;
 }
+.\!courier-whitespace-nowrap {
+  white-space: nowrap !important;
+}
 .courier-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2226,9 +2255,6 @@ body {
 .courier-uppercase {
   text-transform: uppercase;
 }
-.courier-leading-\[28px\] {
-  line-height: 28px;
-}
 .courier-leading-none {
   line-height: 1;
 }
@@ -2266,6 +2292,10 @@ body {
 .courier-text-accent-foreground {
   color: var(--accent-foreground);
 }
+.courier-text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
 .courier-text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity, 1));
@@ -2342,6 +2372,9 @@ body {
 .courier-underline {
   text-decoration-line: underline;
 }
+.courier-no-underline {
+  text-decoration-line: none;
+}
 .courier-antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2754,6 +2787,19 @@ body {
 .courier-editor-preview-mode .ProseMirror, .courier-editor-readonly .ProseMirror {
   pointer-events: none;
 }
+/* Re-enable pointer events for clickable elements in preview mode */
+.courier-editor-preview-mode .ProseMirror a.link, .courier-editor-readonly .ProseMirror a.link {
+      pointer-events: auto !important;
+      cursor: pointer !important;
+    }
+/* Button link wrapper in preview mode */
+.courier-editor-preview-mode .ProseMirror a.button-link-wrapper, .courier-editor-readonly .ProseMirror a.button-link-wrapper {
+      pointer-events: auto !important;
+      cursor: pointer !important;
+      text-decoration: none;
+      color: inherit;
+      display: block;
+    }
 .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 * {
   pointer-events: none;
 }
@@ -2772,7 +2818,10 @@ body {
 .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"] {
   display: none;
 }
-.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 {
+.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 {
+  display: none;
+}
+.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 {
   display: none;
 }
 .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 {
@@ -3083,10 +3132,6 @@ body {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.ProseMirror > .react-renderer .node-variable {
-  margin-left: 0.25rem !important;
-  margin-right: 0.25rem !important;
-}
 .ProseMirror > .react-renderer .node-variable {
   display: inline-block;
 }
@@ -4736,6 +4781,8 @@ body {
     }
 .courier-variable-chip {
   position: relative;
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
   display: inline-flex;
   max-width: 100%;
   align-items: center;
@@ -4832,7 +4879,11 @@ body {
     }
 /* 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%;
@@ -4843,12 +4894,6 @@ body {
 .variable-input-placeholder .ProseMirror p {
   margin: 0px;
 }
-.variable-input-placeholder .ProseMirror p {
-  height: 28px;
-}
-.variable-input-placeholder .ProseMirror p {
-  width: 100%;
-}
 .variable-input-placeholder .ProseMirror p {
   cursor: text;
 }
@@ -4858,21 +4903,24 @@ body {
 .variable-input-placeholder .ProseMirror p {
   padding: 0px;
 }
-.variable-input-placeholder .ProseMirror p {
-  line-height: 28px;
-}
 .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);
-        float: left;
-        color: var(--muted-foreground);
-        pointer-events: none;
-        height: 0;
-      }
+  .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;
 }
@@ -5407,9 +5455,18 @@ body {
 .\[\&\>svg\]\:courier-shrink-0>svg {
   flex-shrink: 0;
 }
+.\[\&_\.ProseMirror\]\:courier-inline-flex .ProseMirror {
+  display: inline-flex;
+}
 .\[\&_\.ProseMirror\]\:courier-min-h-\[20px\] .ProseMirror {
   min-height: 20px;
 }
+.\[\&_\.ProseMirror\]\:courier-flex-nowrap .ProseMirror {
+  flex-wrap: nowrap;
+}
+.\[\&_\.ProseMirror\]\:courier-items-center .ProseMirror {
+  align-items: center;
+}
 .\[\&_\.ProseMirror\]\:courier-border-none .ProseMirror {
   border-style: none;
 }
@@ -5420,6 +5477,18 @@ body {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.\[\&_\.tiptap\]\:courier-inline-flex .tiptap {
+  display: inline-flex;
+}
+.\[\&_\.tiptap\]\:courier-flex-nowrap .tiptap {
+  flex-wrap: nowrap;
+}
+.\[\&_\.tiptap\]\:courier-items-center .tiptap {
+  align-items: center;
+}
+.\[\&_\.tiptap\]\:courier-whitespace-nowrap .tiptap {
+  white-space: nowrap;
+}
 .\[\&_\.tiptap\]\:courier-border-none .tiptap {
   border-style: none;
 }

package/dist/components/Providers/TemplateProvider.d.ts

@@ -14,6 +14,8 @@ export declare const useUploadImage: () => UploadImageFunction | null;
 type TemplateProviderProps = BasicProviderProps & {
     templateId: string;
     uploadImage?: UploadImageFunction;
+    variables?: Record<string, unknown>;
+    disableVariablesAutocomplete?: boolean;
 };
 export declare const TemplateProvider: import("react").NamedExoticComponent<TemplateProviderProps>;
 export {};

package/dist/components/TemplateEditor/Channels/Email/EmailEditor.d.ts

@@ -1,3 +1,4 @@
+import { type VariableViewMode } from "@/components/TemplateEditor/store";
 import type { TiptapDoc } from "@/types";
 import type { Editor } from "@tiptap/core";
 export interface EmailEditorProps {
@@ -6,8 +7,9 @@ export interface EmailEditorProps {
     subject?: string | null;
     variables?: Record<string, unknown>;
     disableVariablesAutocomplete?: boolean;
+    variableViewMode?: VariableViewMode;
     onDestroy?: () => void;
     onUpdate?: (editor: Editor) => void;
 }
-declare const EmailEditor: ({ value, readOnly, onDestroy, onUpdate, subject: propSubject, variables, disableVariablesAutocomplete, }: EmailEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const EmailEditor: ({ value, readOnly, onDestroy, onUpdate, subject: propSubject, variables, disableVariablesAutocomplete, variableViewMode, }: EmailEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default EmailEditor;

package/dist/components/TemplateEditor/Channels/Inbox/InboxEditor.d.ts

@@ -1,5 +1,7 @@
 import type { InboxRenderProps } from "./Inbox";
+import { type VariableViewMode } from "../../store";
 export interface InboxEditorProps extends InboxRenderProps {
     readOnly?: boolean;
+    variableViewMode?: VariableViewMode;
 }
-export declare const InboxEditor: ({ content, extensions, editable, autofocus, onUpdate, readOnly, }: InboxEditorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const InboxEditor: ({ content, extensions, editable, autofocus, onUpdate, readOnly, variableViewMode, }: InboxEditorProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TemplateEditor/Channels/MSTeams/MSTeams.d.ts

@@ -27,6 +27,7 @@ export interface MSTeamsRenderProps {
     };
     selectedNode: Node | null;
     msteamsEditor: Editor | null;
+    textMenuConfig: TextMenuConfig;
 }
 export interface MSTeamsProps extends Pick<TemplateEditorProps, "hidePublish" | "theme" | "variables" | "disableVariablesAutocomplete" | "channels" | "routing" | "value" | "colorScheme">, Omit<HTMLAttributes<HTMLDivElement>, "value" | "onChange"> {
     readOnly?: boolean;
@@ -37,6 +38,10 @@ export interface MSTeamsProps extends Pick<TemplateEditorProps, "hidePublish" |
     }) => React.ReactNode;
     render?: (props: MSTeamsRenderProps) => React.ReactNode;
 }
-export declare const MSTeamsConfig: TextMenuConfig;
+/**
+ * Get text menu configuration for an MS Teams node based on selection state
+ * This function applies MS Teams-specific constraints while respecting text selection
+ */
+export declare const getTextMenuConfigForMSTeamsNode: (nodeName: string, hasTextSelection?: boolean) => TextMenuConfig;
 export declare const MSTeams: React.MemoExoticComponent<React.ForwardRefExoticComponent<MSTeamsProps & React.RefAttributes<HTMLDivElement>>>;
 export {};

package/dist/components/TemplateEditor/Channels/MSTeams/MSTeamsEditor.d.ts

@@ -1,5 +1,7 @@
 import type { MSTeamsRenderProps } from "./MSTeams";
+import { type VariableViewMode } from "../../store";
 export interface MSTeamsEditorProps extends MSTeamsRenderProps {
     readOnly?: boolean;
+    variableViewMode?: VariableViewMode;
 }
-export declare const MSTeamsEditor: ({ content, extensions, editable, autofocus, onUpdate, readOnly, }: MSTeamsEditorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MSTeamsEditor: ({ content, extensions, editable, autofocus, onUpdate, readOnly, variableViewMode, textMenuConfig, }: MSTeamsEditorProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TemplateEditor/Channels/MSTeams/SideBar/MSTeamsSideBarItemDetails.d.ts

@@ -0,0 +1,8 @@
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/react";
+export interface MSTeamsSideBarItemDetailsProps {
+    element: ProseMirrorNode | null;
+    editor: Editor | null;
+    defaultElement: React.ReactNode;
+}
+export declare const MSTeamsSideBarItemDetails: ({ element, editor, defaultElement, }: MSTeamsSideBarItemDetailsProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/components/TemplateEditor/Channels/MSTeams/SideBar/index.d.ts

@@ -1 +1,2 @@
 export * from "./SideBar";
+export * from "./MSTeamsSideBarItemDetails";

package/dist/components/TemplateEditor/Channels/MSTeams/index.d.ts

@@ -2,4 +2,4 @@ export * from "./MSTeams";
 export * from "./MSTeamsEditor";
 export * from "./MSTeamsFrame";
 export * from "./MSTeamsLayout";
-export { MSTeamsSideBar } from "./SideBar";
+export * from "./SideBar";

package/dist/components/TemplateEditor/Channels/Push/PushEditor.d.ts

@@ -1,6 +1,8 @@
 import type { HTMLAttributes } from "react";
 import { type PushRenderProps } from "./Push";
+import { type VariableViewMode } from "../../store";
 export interface PushEditorProps extends PushRenderProps, Omit<HTMLAttributes<HTMLDivElement>, "content"> {
     readOnly?: boolean;
+    variableViewMode?: VariableViewMode;
 }
-export declare const PushEditor: ({ content, extensions, editable, autofocus, onUpdate, className, readOnly, }: PushEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PushEditor: ({ content, extensions, editable, autofocus, onUpdate, className, readOnly, variableViewMode, }: PushEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TemplateEditor/Channels/SMS/SMSEditor.d.ts

@@ -1,6 +1,8 @@
 import type { HTMLAttributes } from "react";
 import type { SMSRenderProps } from "./SMS";
+import { type VariableViewMode } from "../../store";
 export interface SMSEditorProps extends SMSRenderProps, Omit<HTMLAttributes<HTMLDivElement>, "content"> {
     readOnly?: boolean;
+    variableViewMode?: VariableViewMode;
 }
-export declare const SMSEditor: ({ content, extensions, editable, autofocus, onUpdate, className, readOnly, }: SMSEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SMSEditor: ({ content, extensions, editable, autofocus, onUpdate, className, readOnly, variableViewMode, }: SMSEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TemplateEditor/Channels/Slack/Slack.d.ts

@@ -27,6 +27,7 @@ export interface SlackRenderProps {
     };
     selectedNode: Node | null;
     slackEditor: Editor | null;
+    textMenuConfig: TextMenuConfig;
 }
 export interface SlackProps extends Pick<TemplateEditorProps, "hidePublish" | "theme" | "variables" | "disableVariablesAutocomplete" | "channels" | "routing" | "value" | "colorScheme">, Omit<HTMLAttributes<HTMLDivElement>, "value" | "onChange"> {
     readOnly?: boolean;
@@ -37,6 +38,10 @@ export interface SlackProps extends Pick<TemplateEditorProps, "hidePublish" | "t
     }) => React.ReactNode;
     render?: (props: SlackRenderProps) => React.ReactNode;
 }
-export declare const SlackConfig: TextMenuConfig;
+/**
+ * Get text menu configuration for a Slack node based on selection state
+ * This function applies Slack-specific constraints while respecting text selection
+ */
+export declare const getTextMenuConfigForSlackNode: (nodeName: string, hasTextSelection?: boolean) => TextMenuConfig;
 export declare const Slack: React.MemoExoticComponent<React.ForwardRefExoticComponent<SlackProps & React.RefAttributes<HTMLDivElement>>>;
 export {};

package/dist/components/TemplateEditor/Channels/Slack/SlackEditor.d.ts

@@ -1,5 +1,7 @@
 import type { SlackRenderProps } from "./Slack";
+import { type VariableViewMode } from "../../store";
 export interface SlackEditorProps extends SlackRenderProps {
     readOnly?: boolean;
+    variableViewMode?: VariableViewMode;
 }
-export declare const SlackEditor: ({ content, extensions, editable, autofocus, onUpdate, readOnly, }: SlackEditorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SlackEditor: ({ content, extensions, editable, autofocus, onUpdate, readOnly, variableViewMode, textMenuConfig, }: SlackEditorProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TemplateEditor/VariableViewModeSync.d.ts

@@ -0,0 +1,24 @@
+import { type VariableViewMode } from "./store";
+import { getVariableViewMode } from "../extensions/Variable/variable-storage.utils";
+interface VariableViewModeSyncProps {
+    variableViewMode: VariableViewMode;
+}
+/**
+ * Syncs the variableViewMode prop to editor storage and dispatches a transaction
+ * to notify VariableView components to re-render.
+ *
+ * This component should be placed inside an EditorProvider.
+ */
+export declare const VariableViewModeSync: ({ variableViewMode }: VariableViewModeSyncProps) => null;
+/**
+ * Hook to get the current variable view mode from the editor.
+ * Useful for reading the variable view mode outside of VariableView components.
+ *
+ * @example
+ * ```typescript
+ * const { editor } = useCurrentEditor();
+ * const viewMode = useVariableViewMode(editor);
+ * ```
+ */
+export declare function useVariableViewMode(editor: Parameters<typeof getVariableViewMode>[0]): VariableViewMode;
+export {};

package/dist/components/TemplateEditor/index.d.ts

@@ -4,7 +4,7 @@ export { default as EmailEditor } from "./Channels/Email/EmailEditor";
 export * from "./TemplateEditor";
 export { SideBar as EmailSideBar, SideBarItemDetails as EmailSideBarItemDetails, } from "./Channels/Email/SideBar";
 export { SideBar as InboxSideBar } from "./Channels/Inbox/SideBar";
-export { MSTeamsSideBar } from "./Channels/MSTeams/SideBar";
+export { MSTeamsSideBar, MSTeamsSideBarItemDetails } from "./Channels/MSTeams/SideBar";
 export { SlackSideBar, SlackSideBarItemDetails } from "./Channels/Slack/SideBar";
 export { EmailEditorContainer, EmailEditorMain, type EmailEditorProps, type InboxEditorProps, type MSTeamsEditorProps, type PushEditorProps, type SlackEditorProps, type SMSEditorProps, } from "./Channels";
 export declare const EmailChannel: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Channels").EmailProps & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/components/TemplateEditor/store.d.ts

@@ -39,9 +39,24 @@ export declare const disableVariablesAutocompleteAtom: import("jotai").Primitive
 export declare const variableValidationAtom: import("jotai").PrimitiveAtom<VariableValidationConfig | undefined> & {
     init: VariableValidationConfig | undefined;
 };
+export type VariableViewMode = "show-variables" | "wysiwyg";
 export declare const isDraggingAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
+/**
+ * Increments or decrements the form updating counter.
+ * When true, increments the counter (starting an update).
+ * When false, decrements the counter (ending an update).
+ */
+export declare const setFormUpdating: (value: boolean) => void;
+/**
+ * Returns true if any form update is in progress (counter > 0)
+ */
+export declare const getFormUpdating: () => boolean;
+/**
+ * Resets the form updating counter to 0 (for cleanup/testing)
+ */
+export declare const resetFormUpdating: () => void;
 export declare const pendingAutoSaveAtom: import("jotai").PrimitiveAtom<ElementalContent | null> & {
     init: ElementalContent | null;
 };
@@ -58,7 +73,7 @@ export declare const flushAllPendingUpdates: (flushFunctions: Map<string, FlushF
 /**
  * Available block element types that can be used in the sidebar
  */
-export type BlockElementType = "heading" | "text" | "image" | "spacer" | "divider" | "button" | "customCode" | "column" | "blockquote";
+export type BlockElementType = "heading" | "text" | "image" | "spacer" | "divider" | "button" | "customCode" | "column" | "blockquote" | "list";
 /**
  * Attributes that can be set as defaults or in presets for blocks.
  * Types match the actual TipTap node attribute types for each extension.

package/dist/components/extensions/Button/Button.d.ts

@@ -4,9 +4,6 @@ declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         button: {
             setButton: (props: Partial<ButtonProps>) => ReturnType;
-            toggleBold: () => ReturnType;
-            toggleItalic: () => ReturnType;
-            toggleUnderline: () => ReturnType;
         };
     }
 }

package/dist/components/extensions/Button/ButtonComponent.d.ts

@@ -4,9 +4,8 @@ import type { ButtonProps } from "./Button.types";
 export declare const ButtonComponent: React.FC<ButtonProps & {
     nodeKey?: string;
     selected?: boolean;
-    fontWeight?: string;
-    isUnderline?: boolean;
-    isStrike?: boolean;
     children?: React.ReactNode;
+    isPreviewMode?: boolean;
+    link?: string;
 }>;
 export declare const ButtonComponentNode: (props: NodeViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/extensions/Button/buttonUtils.d.ts

@@ -0,0 +1,13 @@
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { EditorState, Transaction } from "@tiptap/pm/state";
+export declare function findButtonNodeById(doc: ProseMirrorNode, id: string): {
+    pos: number;
+    node: ProseMirrorNode;
+} | null;
+export declare function findButtonNodeAtPosition(doc: ProseMirrorNode, position: number): {
+    pos: number;
+    node: ProseMirrorNode;
+} | null;
+export declare function extractButtonTextContent(node: ProseMirrorNode): string;
+export declare function syncButtonContentToLabelAttr(state: EditorState): Transaction | null;
+export declare function updateButtonLabelAndContent(tr: Transaction, buttonPos: number, newLabel: string): boolean;