@trycourier/react-designer 0.5.0 → 0.6.0

package/dist/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/types/elemental.types.d.ts

@@ -25,10 +25,6 @@ export interface ElementalListNode extends IsElementalNode {
     /** Allows bullets to be rendered using an image */
     imgSrc?: string;
     imgHref?: string;
-    /** Border/marker color for list bullets or numbers */
-    border_color?: string;
-    /** Border width in pixels (e.g., "2px" or "2") */
-    border_size?: string;
     /** Padding (e.g., "10px" or "10px 20px") */
     padding?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-designer",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "React-based rich text designer component",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -90,12 +90,14 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-v8": "^0.34.6",
     "autoprefixer": "^10.4.20",
     "dotenv": "^16.4.7",
     "esbuild": "^0.19.0",
     "esbuild-plugin-d.ts": "^1.3.1",
     "esbuild-style-plugin": "^1.6.3",
     "jsdom": "^22.1.0",
+    "nyc": "^17.1.0",
     "postcss": "^8.4.49",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^7.0.2",
@@ -146,7 +148,10 @@
     "typecheck:src": "tsc --noEmit -p tsconfig.build.json",
     "test": "vitest run",
     "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:coverage:watch": "vitest --coverage",
     "test:e2e": "playwright test --workers=4",
+    "test:e2e:fullcycle": "playwright test --config=playwright.fullcycle.config.ts",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "analyze": "node build.js --analyze",
     "release": "node scripts/publish.js",