Merge pull request #102 from prezly/feature/dev-20984-implement-support-for-text-justify-in-emails-site-renderers

kudlajz · web-flow · commit 2f6811981650 · 2025-07-09T15:34:58.000+02:00
[DEV-20984] Feature - Implement support for text align justify
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "dependencies": {
         "@prezly/linear-partition": "^1.0.2",
         "@prezly/sdk": "^23.10.0",
-        "@prezly/story-content-format": "^0.68.0",
+        "@prezly/story-content-format": "^0.69.0",
         "@prezly/uploadcare": "^2.5.0",
         "@react-hookz/web": "^12.0.0",
         "classnames": "^2.2.6",
diff --git a/src/elements/Callout/Callout.scss b/src/elements/Callout/Callout.scss
@@ -38,6 +38,11 @@
         flex-direction: row-reverse;
     }
 
+    &--align-justify {
+        text-align: justify;
+        flex-direction: row;
+    }
+
     > p {
         margin: 0;
     }
diff --git a/src/elements/Callout/Callout.tsx b/src/elements/Callout/Callout.tsx
@@ -24,6 +24,7 @@ export function Callout({ children, className, node, ...props }: Props) {
                 'prezly-slate-callout--align-left': node.align === CalloutNode.Alignment.LEFT,
                 'prezly-slate-callout--align-center': node.align === CalloutNode.Alignment.CENTER,
                 'prezly-slate-callout--align-right': node.align === CalloutNode.Alignment.RIGHT,
+                'prezly-slate-callout--align-justify': node.align === CalloutNode.Alignment.JUSTIFY,
             })}
             data-icon={node.icon || undefined}
             {...props}
diff --git a/src/elements/Heading/Heading.scss b/src/elements/Heading/Heading.scss
@@ -27,4 +27,8 @@
     &--align-right {
         text-align: right;
     }
+
+    &--align-justify {
+        text-align: justify;
+    }
 }
diff --git a/src/elements/Heading/Heading.tsx b/src/elements/Heading/Heading.tsx
@@ -19,6 +19,7 @@ export function Heading({ children, className, node, ...props }: Props) {
                 'prezly-slate-heading--align-left': node.align === HeadingNode.Alignment.LEFT,
                 'prezly-slate-heading--align-center': node.align === HeadingNode.Alignment.CENTER,
                 'prezly-slate-heading--align-right': node.align === HeadingNode.Alignment.RIGHT,
+                'prezly-slate-heading--align-justify': node.align === HeadingNode.Alignment.JUSTIFY,
             })}
             {...props}
         >
diff --git a/src/elements/Lists/List.scss b/src/elements/Lists/List.scss
@@ -10,7 +10,8 @@
 
     &--align-left,
     &--align-right,
-    &--align-center {
+    &--align-center,
+    &--align-justify {
         list-style-position: inside;
     }
 
@@ -26,6 +27,10 @@
         text-align: right;
     }
 
+    &--align-justify {
+        text-align: justify;
+    }
+
     .prezly-slate-list {
         margin: 0;
     }
diff --git a/src/elements/Lists/List.tsx b/src/elements/Lists/List.tsx
@@ -19,6 +19,7 @@ export function List({ node, children, className, ...props }: Props) {
                 'prezly-slate-list--align-left': node.align === ListNode.Alignment.LEFT,
                 'prezly-slate-list--align-center': node.align === ListNode.Alignment.CENTER,
                 'prezly-slate-list--align-right': node.align === ListNode.Alignment.RIGHT,
+                'prezly-slate-list--align-justify': node.align === ListNode.Alignment.JUSTIFY,
             })}
             {...props}
         >
diff --git a/src/elements/Paragraph/Paragraph.scss b/src/elements/Paragraph/Paragraph.scss
@@ -18,4 +18,8 @@
     &--align-right {
         text-align: right;
     }
+
+    &--align-justify {
+        text-align: justify;
+    }
 }
diff --git a/src/elements/Paragraph/Paragraph.tsx b/src/elements/Paragraph/Paragraph.tsx
@@ -17,6 +17,8 @@ export function Paragraph({ children, className, node, ...props }: Props) {
                 'prezly-slate-paragraph--align-center':
                     node.align === ParagraphNode.Alignment.CENTER,
                 'prezly-slate-paragraph--align-right': node.align === ParagraphNode.Alignment.RIGHT,
+                'prezly-slate-paragraph--align-justify':
+                    node.align === ParagraphNode.Alignment.JUSTIFY,
             })}
             {...props}
         >
diff --git a/src/elements/Quote/Quote.scss b/src/elements/Quote/Quote.scss
@@ -20,4 +20,8 @@
     &--align-right {
         text-align: right;
     }
+
+    &--align-justify {
+        text-align: justify;
+    }
 }
diff --git a/src/elements/Quote/Quote.tsx b/src/elements/Quote/Quote.tsx
@@ -16,6 +16,7 @@ export function Quote({ children, className, node, ...props }: Props) {
                 'prezly-slate-quote--align-left': node.align === QuoteNode.Alignment.LEFT,
                 'prezly-slate-quote--align-center': node.align === QuoteNode.Alignment.CENTER,
                 'prezly-slate-quote--align-right': node.align === QuoteNode.Alignment.RIGHT,
+                'prezly-slate-quote--align-justify': node.align === QuoteNode.Alignment.JUSTIFY,
             })}
             {...props}
         >

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,11 @@`
`38`	`38`	`flex-direction: row-reverse;`
`39`	`39`	`}`
`40`	`40`
	`41`	`+ &--align-justify {`
	`42`	`+ text-align: justify;`
	`43`	`+ flex-direction: row;`
	`44`	`+ }`
	`45`	`+`
`41`	`46`	`> p {`
`42`	`47`	`margin: 0;`
`43`	`48`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,4 +27,8 @@`
`27`	`27`	`&--align-right {`
`28`	`28`	`text-align: right;`
`29`	`29`	`}`
	`30`	`+`
	`31`	`+ &--align-justify {`
	`32`	`+ text-align: justify;`
	`33`	`+ }`
`30`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export function Heading({ children, className, node, ...props }: Props) {`
`19`	`19`	`'prezly-slate-heading--align-left': node.align === HeadingNode.Alignment.LEFT,`
`20`	`20`	`'prezly-slate-heading--align-center': node.align === HeadingNode.Alignment.CENTER,`
`21`	`21`	`'prezly-slate-heading--align-right': node.align === HeadingNode.Alignment.RIGHT,`
	`22`	`+ 'prezly-slate-heading--align-justify': node.align === HeadingNode.Alignment.JUSTIFY,`
`22`	`23`	`})}`
`23`	`24`	`{...props}`
`24`	`25`	`>`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,8 @@`
`10`	`10`
`11`	`11`	`&--align-left,`
`12`	`12`	`&--align-right,`
`13`		`- &--align-center {`
	`13`	`+ &--align-center,`
	`14`	`+ &--align-justify {`
`14`	`15`	`list-style-position: inside;`
`15`	`16`	`}`
`16`	`17`
`@@ -26,6 +27,10 @@`
`26`	`27`	`text-align: right;`
`27`	`28`	`}`
`28`	`29`
	`30`	`+ &--align-justify {`
	`31`	`+ text-align: justify;`
	`32`	`+ }`
	`33`	`+`
`29`	`34`	`.prezly-slate-list {`
`30`	`35`	`margin: 0;`
`31`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export function List({ node, children, className, ...props }: Props) {`
`19`	`19`	`'prezly-slate-list--align-left': node.align === ListNode.Alignment.LEFT,`
`20`	`20`	`'prezly-slate-list--align-center': node.align === ListNode.Alignment.CENTER,`
`21`	`21`	`'prezly-slate-list--align-right': node.align === ListNode.Alignment.RIGHT,`
	`22`	`+ 'prezly-slate-list--align-justify': node.align === ListNode.Alignment.JUSTIFY,`
`22`	`23`	`})}`
`23`	`24`	`{...props}`
`24`	`25`	`>`
Original file line number	Diff line number	Diff line change
`@@ -18,4 +18,8 @@`
`18`	`18`	`&--align-right {`
`19`	`19`	`text-align: right;`
`20`	`20`	`}`
	`21`	`+`
	`22`	`+ &--align-justify {`
	`23`	`+ text-align: justify;`
	`24`	`+ }`
`21`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,8 @@ export function Paragraph({ children, className, node, ...props }: Props) {`
`17`	`17`	`'prezly-slate-paragraph--align-center':`
`18`	`18`	`node.align === ParagraphNode.Alignment.CENTER,`
`19`	`19`	`'prezly-slate-paragraph--align-right': node.align === ParagraphNode.Alignment.RIGHT,`
	`20`	`+ 'prezly-slate-paragraph--align-justify':`
	`21`	`+ node.align === ParagraphNode.Alignment.JUSTIFY,`
`20`	`22`	`})}`
`21`	`23`	`{...props}`
`22`	`24`	`>`
Original file line number	Diff line number	Diff line change
`@@ -20,4 +20,8 @@`
`20`	`20`	`&--align-right {`
`21`	`21`	`text-align: right;`
`22`	`22`	`}`
	`23`	`+`
	`24`	`+ &--align-justify {`
	`25`	`+ text-align: justify;`
	`26`	`+ }`
`23`	`27`	`}`