@trycourier/react-designer 0.0.0-canary-20251202152218 → 0.0.0-canary-20251205100831

package/dist/esm/styles.css

@@ -259,15 +259,15 @@
     pointer-events: none;
     width: 100%;
   } */
-.ProseMirror>*:first-child:first-child,
-  .ProseMirror [data-type="column"]>*:first-child {
+.ProseMirror > *:first-child:first-child,
+  .ProseMirror [data-type="column"] > *:first-child {
   margin-top: 0px;
 }
-.ProseMirror>*:first-child:last-child,
-  .ProseMirror [data-type="column"]>*:last-child {
+.ProseMirror > *:first-child:last-child,
+  .ProseMirror [data-type="column"] > *:last-child {
   margin-bottom: 0px;
 }
-.ProseMirror>*+* {
+.ProseMirror > * + * {
     margin-top: 0.75em;
   }
 .ProseMirror .node-imageUpload {
@@ -375,9 +375,6 @@
 .ProseMirror .node-imageBlock img {
   overflow: hidden;
 }
-.ProseMirror .node-imageBlock img {
-  border-radius: 0.75rem;
-}
 .ProseMirror .node-imageBlock img {
   border-width: 2px;
 }
@@ -409,45 +406,45 @@
   --tw-border-opacity: 1;
   border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>* {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > * {
   border-radius: var(--radius);
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>* {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > * {
   --tw-shadow: 0 0 0 2px;
   --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>* {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > * {
   --tw-shadow-color: rgb(0 0 0 / 0.3);
   --tw-shadow: var(--tw-shadow-colored);
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>* {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > * {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*:is(.courier-dark *), .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*:is(.courier-dark *), .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>*:is(.courier-dark *) {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *:is(.courier-dark *), .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *:is(.courier-dark *), .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > *:is(.courier-dark *) {
   --tw-shadow-color: rgb(255 255 255 / 0.3);
   --tw-shadow: var(--tw-shadow-colored);
 }
-.ProseMirror .ProseMirror-gapcursor+.node-imageBlock,
-  .ProseMirror .ProseMirror-gapcursor+.node-imageUpload,
-  .ProseMirror .ProseMirror-gapcursor+.node-blockquote {
+.ProseMirror .ProseMirror-gapcursor + .node-imageBlock,
+  .ProseMirror .ProseMirror-gapcursor + .node-imageUpload,
+  .ProseMirror .ProseMirror-gapcursor + .node-blockquote {
   outline-color: #404040;
 }
-.ProseMirror .ProseMirror-gapcursor+.node-imageBlock:hover,
-  .ProseMirror .ProseMirror-gapcursor+.node-imageUpload:hover,
-  .ProseMirror .ProseMirror-gapcursor+.node-blockquote:hover {
+.ProseMirror .ProseMirror-gapcursor + .node-imageBlock:hover,
+  .ProseMirror .ProseMirror-gapcursor + .node-imageUpload:hover,
+  .ProseMirror .ProseMirror-gapcursor + .node-blockquote:hover {
   outline-color: #525252;
 }
-.ProseMirror .ProseMirror-gapcursor+.node-imageBlock:is(.courier-dark *),
-  .ProseMirror .ProseMirror-gapcursor+.node-imageUpload:is(.courier-dark *),
-  .ProseMirror .ProseMirror-gapcursor+.node-blockquote:is(.courier-dark *) {
+.ProseMirror .ProseMirror-gapcursor + .node-imageBlock:is(.courier-dark *),
+  .ProseMirror .ProseMirror-gapcursor + .node-imageUpload:is(.courier-dark *),
+  .ProseMirror .ProseMirror-gapcursor + .node-blockquote:is(.courier-dark *) {
   outline-color: #d4d4d4;
 }
-.ProseMirror .ProseMirror-gapcursor+.node-imageBlock:hover:is(.courier-dark *),
-  .ProseMirror .ProseMirror-gapcursor+.node-imageUpload:hover:is(.courier-dark *),
-  .ProseMirror .ProseMirror-gapcursor+.node-blockquote:hover:is(.courier-dark *) {
+.ProseMirror .ProseMirror-gapcursor + .node-imageBlock:hover:is(.courier-dark *),
+  .ProseMirror .ProseMirror-gapcursor + .node-imageUpload:hover:is(.courier-dark *),
+  .ProseMirror .ProseMirror-gapcursor + .node-blockquote:hover:is(.courier-dark *) {
   outline-color: #a3a3a3;
 }
 *, ::before, ::after {
@@ -1626,9 +1623,6 @@ body {
 .courier-rounded-sm {
   border-radius: calc(var(--radius) - 4px);
 }
-.courier-rounded-xl {
-  border-radius: 0.75rem;
-}
 .courier-rounded-b-none {
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -2193,6 +2187,9 @@ body {
 .courier-leading-relaxed {
   line-height: 1.625;
 }
+.courier-leading-tight {
+  line-height: 1.25;
+}
 .courier-tracking-\[0\.64px\] {
   letter-spacing: 0.64px;
 }
@@ -2711,6 +2708,10 @@ body {
 .courier-sms-editor .ProseMirror > .react-renderer .draggable-item > div {
   padding-left: 0px;
 }
+.courier-sms-editor .ProseMirror > .react-renderer.node-paragraph p {
+          overflow-wrap: break-word;
+          word-break: break-word;
+        }
 .courier-sms-editor .ProseMirror > .react-renderer.node-paragraph .selected-element .node-element::before {
   display: none;
 }

package/dist/lib/utils/image.d.ts

@@ -1,5 +1,10 @@
 export declare const MAX_IMAGE_DIMENSION = 800;
 export declare const MAX_FILE_SIZE: number;
+export declare const BLANK_IMAGE_PLACEHOLDER = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+/**
+ * Check if an image source is effectively blank (empty or placeholder)
+ */
+export declare function isBlankImageSrc(src: string | undefined | null): boolean;
 export declare const resizeImage: (file: File, maxDimension: number) => Promise<{
     dataUrl: string;
     width: number;

package/dist/styles.css

@@ -259,15 +259,15 @@
     pointer-events: none;
     width: 100%;
   } */
-.ProseMirror>*:first-child:first-child,
-  .ProseMirror [data-type="column"]>*:first-child {
+.ProseMirror > *:first-child:first-child,
+  .ProseMirror [data-type="column"] > *:first-child {
   margin-top: 0px;
 }
-.ProseMirror>*:first-child:last-child,
-  .ProseMirror [data-type="column"]>*:last-child {
+.ProseMirror > *:first-child:last-child,
+  .ProseMirror [data-type="column"] > *:last-child {
   margin-bottom: 0px;
 }
-.ProseMirror>*+* {
+.ProseMirror > * + * {
     margin-top: 0.75em;
   }
 .ProseMirror .node-imageUpload {
@@ -375,9 +375,6 @@
 .ProseMirror .node-imageBlock img {
   overflow: hidden;
 }
-.ProseMirror .node-imageBlock img {
-  border-radius: 0.75rem;
-}
 .ProseMirror .node-imageBlock img {
   border-width: 2px;
 }
@@ -409,45 +406,45 @@
   --tw-border-opacity: 1;
   border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>* {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > * {
   border-radius: var(--radius);
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>* {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > * {
   --tw-shadow: 0 0 0 2px;
   --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>* {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > * {
   --tw-shadow-color: rgb(0 0 0 / 0.3);
   --tw-shadow: var(--tw-shadow-colored);
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>* {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *, .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > * {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper]>*:is(.courier-dark *), .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper]>*:is(.courier-dark *), .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper]>*:is(.courier-dark *) {
+.ProseMirror .node-aiWriter.has-focus [data-node-view-wrapper] > *:is(.courier-dark *), .ProseMirror .node-aiImage.has-focus [data-node-view-wrapper] > *:is(.courier-dark *), .ProseMirror .node-tableOfContentsNode.has-focus [data-node-view-wrapper] > *:is(.courier-dark *) {
   --tw-shadow-color: rgb(255 255 255 / 0.3);
   --tw-shadow: var(--tw-shadow-colored);
 }
-.ProseMirror .ProseMirror-gapcursor+.node-imageBlock,
-  .ProseMirror .ProseMirror-gapcursor+.node-imageUpload,
-  .ProseMirror .ProseMirror-gapcursor+.node-blockquote {
+.ProseMirror .ProseMirror-gapcursor + .node-imageBlock,
+  .ProseMirror .ProseMirror-gapcursor + .node-imageUpload,
+  .ProseMirror .ProseMirror-gapcursor + .node-blockquote {
   outline-color: #404040;
 }
-.ProseMirror .ProseMirror-gapcursor+.node-imageBlock:hover,
-  .ProseMirror .ProseMirror-gapcursor+.node-imageUpload:hover,
-  .ProseMirror .ProseMirror-gapcursor+.node-blockquote:hover {
+.ProseMirror .ProseMirror-gapcursor + .node-imageBlock:hover,
+  .ProseMirror .ProseMirror-gapcursor + .node-imageUpload:hover,
+  .ProseMirror .ProseMirror-gapcursor + .node-blockquote:hover {
   outline-color: #525252;
 }
-.ProseMirror .ProseMirror-gapcursor+.node-imageBlock:is(.courier-dark *),
-  .ProseMirror .ProseMirror-gapcursor+.node-imageUpload:is(.courier-dark *),
-  .ProseMirror .ProseMirror-gapcursor+.node-blockquote:is(.courier-dark *) {
+.ProseMirror .ProseMirror-gapcursor + .node-imageBlock:is(.courier-dark *),
+  .ProseMirror .ProseMirror-gapcursor + .node-imageUpload:is(.courier-dark *),
+  .ProseMirror .ProseMirror-gapcursor + .node-blockquote:is(.courier-dark *) {
   outline-color: #d4d4d4;
 }
-.ProseMirror .ProseMirror-gapcursor+.node-imageBlock:hover:is(.courier-dark *),
-  .ProseMirror .ProseMirror-gapcursor+.node-imageUpload:hover:is(.courier-dark *),
-  .ProseMirror .ProseMirror-gapcursor+.node-blockquote:hover:is(.courier-dark *) {
+.ProseMirror .ProseMirror-gapcursor + .node-imageBlock:hover:is(.courier-dark *),
+  .ProseMirror .ProseMirror-gapcursor + .node-imageUpload:hover:is(.courier-dark *),
+  .ProseMirror .ProseMirror-gapcursor + .node-blockquote:hover:is(.courier-dark *) {
   outline-color: #a3a3a3;
 }
 *, ::before, ::after {
@@ -1626,9 +1623,6 @@ body {
 .courier-rounded-sm {
   border-radius: calc(var(--radius) - 4px);
 }
-.courier-rounded-xl {
-  border-radius: 0.75rem;
-}
 .courier-rounded-b-none {
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -2193,6 +2187,9 @@ body {
 .courier-leading-relaxed {
   line-height: 1.625;
 }
+.courier-leading-tight {
+  line-height: 1.25;
+}
 .courier-tracking-\[0\.64px\] {
   letter-spacing: 0.64px;
 }
@@ -2711,6 +2708,10 @@ body {
 .courier-sms-editor .ProseMirror > .react-renderer .draggable-item > div {
   padding-left: 0px;
 }
+.courier-sms-editor .ProseMirror > .react-renderer.node-paragraph p {
+          overflow-wrap: break-word;
+          word-break: break-word;
+        }
 .courier-sms-editor .ProseMirror > .react-renderer.node-paragraph .selected-element .node-element::before {
   display: none;
 }

package/dist/types/elemental.types.d.ts

@@ -45,8 +45,13 @@ export interface IsElementalTextNode extends IsElementalNode {
     background_color?: string;
     format?: "markdown";
     padding?: string;
-    color?: string;
-    border?: BorderConfig;
+    border_color?: string;
+    border_size?: string;
+    /**
+     * @deprecated Legacy nested border format. Use flat `border_color` and `border_size` instead.
+     * Kept for backward compatibility when reading old templates.
+     */
+    border?: IBorderConfig;
     locales?: ElementalLocales<{
         content?: string;
     }>;
@@ -113,7 +118,16 @@ export interface ElementalImageNode extends IsElementalNode {
     href?: string;
     align?: Align;
     alt_text?: string;
+    /** Width in pixels (e.g., "50px") - MJML only supports pixel values */
     width?: string;
+    /** Natural width of the image in pixels - used to convert between percentage (UI) and pixels (storage) */
+    image_natural_width?: number;
+    border_color?: string;
+    border_size?: string;
+    /**
+     * @deprecated Legacy nested border format. Use flat `border_color` and `border_size` instead.
+     * Kept for backward compatibility when reading old templates.
+     */
     border?: IBorderConfig;
     locales?: ElementalLocales<{
         href?: string;
@@ -128,10 +142,22 @@ export interface ElementalActionNode extends IsElementalNode {
     style?: IActionButtonStyle;
     align?: Align;
     background_color?: string;
-    color?: string;
-    border?: BorderConfig;
+    /** Border radius in pixels */
+    border_radius?: string;
+    /** Border size in pixels (e.g., "1px") */
+    border_size?: string;
     padding?: string;
     disable_tracking?: boolean;
+    /**
+     * @deprecated Legacy text color. Not supported by Elemental.
+     * Kept for backward compatibility when reading old templates.
+     */
+    color?: string;
+    /**
+     * @deprecated Legacy nested border format. Use flat `border_radius` and `border_size` instead.
+     * Kept for backward compatibility when reading old templates.
+     */
+    border?: BorderConfig;
     locales?: ElementalLocales<{
         content?: string;
         href?: string;
@@ -140,6 +166,12 @@ export interface ElementalActionNode extends IsElementalNode {
 export interface ElementalDividerNode extends IsElementalNode {
     type: "divider";
     color?: string;
+    /** Border width in pixels (e.g., "15px") */
+    border_width?: string;
+    /**
+     * @deprecated Legacy width property. Use `border_width` instead.
+     * Kept for backward compatibility when reading old templates.
+     */
     width?: string;
     padding?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-designer",
-  "version": "0.0.0-canary-20251202152218",
+  "version": "0.0.0-canary-20251205100831",
   "description": "React-based rich text designer component",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",