@cntrl-site/sdk-nextjs 0.1.5 → 0.1.7

package/lib/components/items/ImageItem.js

@@ -8,6 +8,7 @@ const ImageItem = ({ item, layouts }) => ((0, jsx_runtime_1.jsx)(LinkWrapper_1.L
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
            .image-wrapper-${item.id} {
               position: absolute;
+              overflow: hidden;
               width: 100%;
               height: 100%;
               border-style: solid;

package/lib/components/items/RichTextItem.js

@@ -11,6 +11,6 @@ const RichTextConverter_1 = require("../../utils/RichTextConverter");
 const richTextConv = new RichTextConverter_1.RichTextConverter();
 const RichTextItem = ({ item, layouts }) => {
     const [content, styles] = richTextConv.toHtml(item, layouts);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "rich-text", style: { whiteSpace: 'pre-wrap' }, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "rich-text", children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/components/items/VideoItem.js

@@ -8,6 +8,7 @@ const VideoItem = ({ item, layouts }) => ((0, jsx_runtime_1.jsx)(LinkWrapper_1.L
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
            .video-wrapper-${item.id} {
               position: absolute;
+              overflow: hidden;
               width: 100%;
               height: 100%;
               border-style: solid;

package/lib/utils/RichTextConverter.js

@@ -53,11 +53,14 @@ class RichTextConverter {
                 const blockClass = `rt_${richText.id}-b${blockIndex}_${layouts.map(l => group.some(g => g.layout === l.id) ? '1' : '0').join('')}`;
                 const kids = [];
                 layouts.forEach(l => {
+                    const ta = (0, sdk_1.getClosestLayoutValue)(richText.layoutParams, layouts, l.id).textAlign;
+                    const whiteSpace = ta === sdk_1.TextAlign.Justify || ta === sdk_1.TextAlign.Right ? 'normal' : 'pre-wrap';
                     styleRules[l.id].push(`
             .${blockClass} {
               display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
-              text-align: ${(0, sdk_1.getClosestLayoutValue)(richText.layoutParams, layouts, l.id).textAlign};
+              text-align: ${ta};
               line-height: 0;
+              white-space: ${whiteSpace};
             }
           `);
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",

package/src/components/items/ImageItem.tsx

@@ -13,6 +13,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, layouts }) => (
         ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
            .image-wrapper-${item.id} {
               position: absolute;
+              overflow: hidden;
               width: 100%;
               height: 100%;
               border-style: solid;

package/src/components/items/RichTextItem.tsx

@@ -11,7 +11,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, layouts }) =>
   const [content, styles] = richTextConv.toHtml(item, layouts);
   return (
     <>
-      <div className="rich-text" style={{ whiteSpace: 'pre-wrap' }}>{content}</div>
+      <div className="rich-text">{content}</div>
       <JSXStyle id={item.id}>
         {styles}
       </JSXStyle>

package/src/components/items/VideoItem.tsx

@@ -16,6 +16,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, layouts }) => (
         ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
            .video-wrapper-${item.id} {
               position: absolute;
+              overflow: hidden;
               width: 100%;
               height: 100%;
               border-style: solid;

package/src/utils/RichTextConverter.tsx

@@ -1,12 +1,13 @@
 import { ReactElement, ReactNode } from 'react';
 import {
-  TLayout,
+  getClosestLayoutValue,
+  getLayoutMediaQuery,
   RichText,
-  TRichTextItem,
+  TextAlign,
   TextTransform,
-  VerticalAlign,
-  getClosestLayoutValue,
-  getLayoutMediaQuery
+  TLayout,
+  TRichTextItem,
+  VerticalAlign
 } from '@cntrl-site/sdk';
 import { LinkWrapper } from '../components/LinkWrapper';
 
@@ -82,11 +83,14 @@ export class RichTextConverter {
         const blockClass = `rt_${richText.id}-b${blockIndex}_${layouts.map(l => group.some(g => g.layout === l.id) ? '1' : '0').join('')}`;
         const kids: ReactNode[] = [];
         layouts.forEach(l => {
+          const ta = getClosestLayoutValue(richText.layoutParams, layouts, l.id).textAlign;
+          const whiteSpace = ta === TextAlign.Justify || ta === TextAlign.Right ? 'normal' : 'pre-wrap';
           styleRules[l.id].push(`
             .${blockClass} {
               display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
-              text-align: ${getClosestLayoutValue(richText.layoutParams, layouts, l.id).textAlign};
+              text-align: ${ta};
               line-height: 0;
+              white-space: ${whiteSpace};
             }
           `);
         });