@cntrl-site/sdk-nextjs 0.15.5-0 → 0.15.5-2

package/lib/components/Item.js

@@ -79,7 +79,7 @@ const Item = ({ item, sectionId }) => {
         ? { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }
         : {};
     const styles = Object.assign(Object.assign({}, scaleIfRichText), { top: stickyTop });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
                         width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
                             ? isRichText
                                 ? `${width * exemplary}px`
@@ -103,6 +103,8 @@ const Item = ({ item, sectionId }) => {
               --webkit-backface-visibility: hidden;
               cursor: ${hoverParams ? 'pointer' : 'default'};
               visibility: ${hidden ? 'hidden' : 'visible'};
+            }
+            .item-${item.id}-inner {
               transition: ${(0, HoverStyles_1.getTransitions)(['width', 'height', 'scale'], hoverParams)};
             }
             .item-wrapper-${item.id} {
@@ -116,7 +118,7 @@ const Item = ({ item, sectionId }) => {
               height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height) * 100}vw` : 'unset'};
               transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
             }
-            .item-${item.id}:hover {
+            .item-${item.id}-inner:hover {
               ${(0, HoverStyles_1.getHoverStyles)(['width', 'height', 'scale'], hoverParams)}
             }
             .item-wrapper-${item.id}:hover {

package/lib/components/items/RichTextItem.js

@@ -35,10 +35,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `${className} rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
-                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rich-text-scale", style: {
-                    // transformOrigin: 'top left',
-                    // transform: 'scale(var(--layout-deviation))'
-                    } }, { children: content })) })), (0, jsx_runtime_1.jsxs)(style_1.default, Object.assign({ id: id }, { children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                } }, { children: content })), (0, jsx_runtime_1.jsxs)(style_1.default, Object.assign({ id: id }, { children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`
             .rich-text-wrapper-${item.id} {
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur'], hoverParams)};

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -62,6 +62,7 @@ class RichTextConverter {
               text-align: ${ta};
               white-space: ${whiteSpace};
               overflow-wrap: break-word;
+              line-height: 0;
             }
           `);
                 });

package/package.json

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

package/src/components/Item.tsx

@@ -107,16 +107,19 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
         className={`item-${item.id}`}
         style={isInitialRef.current ? {} : styles }
       >
-        <div style={{
-          width: `${sizingAxis.x === SizingType.Manual
-            ? isRichText
-              ? `${width * exemplary}px`
-              : `${width * 100}vw`
-            : 'max-content'}`,
-          height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
-          transform: `scale(${scale})`,
-          transformOrigin: ScaleAnchorMap[scaleAnchor]
-        }}>
+        <div
+          className={`item-${item.id}-inner`}
+          style={{
+            width: `${sizingAxis.x === SizingType.Manual
+              ? isRichText
+                ? `${width * exemplary}px`
+                : `${width * 100}vw`
+              : 'max-content'}`,
+            height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+            transform: `scale(${scale})`,
+            transformOrigin: ScaleAnchorMap[scaleAnchor]
+          }}
+        >
           <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
         </div>
       </div>
@@ -135,6 +138,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
               --webkit-backface-visibility: hidden;
               cursor: ${hoverParams ? 'pointer' : 'default'};
               visibility: ${hidden ? 'hidden' : 'visible'};
+            }
+            .item-${item.id}-inner {
               transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
             }
             .item-wrapper-${item.id} {
@@ -148,7 +153,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
               height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height) * 100}vw` : 'unset'};
               transition: ${getTransitions(['left', 'top'], hoverParams)};
             }
-            .item-${item.id}:hover {
+            .item-${item.id}-inner:hover {
               ${getHoverStyles(['width', 'height', 'scale'], hoverParams)}
             }
             .item-wrapper-${item.id}:hover {

package/src/components/items/RichTextItem.tsx

@@ -38,12 +38,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
           filter: `blur(${blur * 100}vw)`
         }}
       >
-        <div className="rich-text-scale" style={{
-          // transformOrigin: 'top left',
-          // transform: 'scale(var(--layout-deviation))'
-        }}>
-          {content}
-        </div>
+        {content}
       </div>
       <JSXStyle id={id}>
         {styles}

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -90,6 +90,7 @@ export class RichTextConverter {
               text-align: ${ta};
               white-space: ${whiteSpace};
               overflow-wrap: break-word;
+              line-height: 0;
             }
           `);
         });