@cntrl-site/sdk-nextjs 1.9.104 → 1.9.106

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -20,6 +20,7 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useCurrentLayout_1 = require("../../../common/useCurrentLayout");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const RichTextGeometryController_1 = require("../../../ItemGeometry/RichTextGeometryController");
+const RichTextConverter_1 = require("../../../utils/RichTextConverter/RichTextConverter");
 const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d;
     const reactId = (0, react_1.useId)();
@@ -58,7 +59,7 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}${layoutId ? '' : ` ${RichTextConverter_1.RICH_TEXT_LAYOUT_PENDING_CLASS}`}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
                         return (`
             .rich-text-wrapper-${item.id} {

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextConverter = exports.FontStyles = void 0;
+exports.RichTextConverter = exports.RICH_TEXT_LAYOUT_PENDING_CLASS = exports.FontStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
@@ -11,6 +11,8 @@ exports.FontStyles = {
     bold: { 'font-weight': 'bold' },
     italic: { 'font-style': 'italic' }
 };
+exports.RICH_TEXT_LAYOUT_PENDING_CLASS = 'rich-text-layout-pending';
+const SCALING_STYLES = new Set(['FONTSIZE', 'LINEHEIGHT', 'LETTERSPACING', 'WORDSPACING']);
 class RichTextConverter {
     toHtml(richText, layouts) {
         var _a, _b, _c;
@@ -37,11 +39,11 @@ class RichTextConverter {
                     const lhForLayout = currentLineHeight[l.id];
                     if (lhForLayout === undefined)
                         return;
-                    const lh = RichTextConverter.fromRangeStylesToInline({
-                        name: 'LINEHEIGHT',
-                        value: lhForLayout
-                    }, l.exemplary);
+                    const lineHeightStyle = { name: 'LINEHEIGHT', value: lhForLayout };
+                    const lh = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, true);
+                    const lhPending = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, false);
                     styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
+                    styleRules[l.id].push(`.${exports.RICH_TEXT_LAYOUT_PENDING_CLASS} .rt_${richText.id}_br_${blockIndex} {${lhPending}}`);
                 });
                 continue;
             }
@@ -113,9 +115,17 @@ class RichTextConverter {
                             }
                             styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
+                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, true)).join('\n')}
                 }
               `);
+                            const lengthStyles = styleGroup.styles.filter(s => SCALING_STYLES.has(s.name));
+                            if (lengthStyles.length !== 0) {
+                                styleRules[item.layout].push(`
+                .${exports.RICH_TEXT_LAYOUT_PENDING_CLASS} .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                  ${lengthStyles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, false)).join('\n')}
+                }
+              `);
+                            }
                             if (color) {
                                 styleRules[item.layout].push(`
                 @supports not (color: oklch(42% 0.3 90 / 1)) {
@@ -220,17 +230,17 @@ class RichTextConverter {
         }
         return entitiesGroups;
     }
-    static fromRangeStylesToInline(draftStyle, exemplary) {
+    static fromRangeStylesToInline(draftStyle, exemplary, isLayoutDefined) {
         const { value, name } = draftStyle;
         const map = {
             COLOR: { color: getResolvedValue(value, name) },
             TYPEFACE: { 'font-family': `${(0, getFontFamilyValue_1.getFontFamilyValue)(value)}` },
             FONTSTYLE: value ? Object.assign({}, exports.FontStyles[value]) : {},
             FONTWEIGHT: { 'font-weight': value },
-            FONTSIZE: { 'font-size': `${Number.parseFloat(value) * exemplary}px` },
-            LINEHEIGHT: { 'line-height': `${Number.parseFloat(value) * exemplary}px` },
-            LETTERSPACING: { 'letter-spacing': `${Number.parseFloat(value) * exemplary}px` },
-            WORDSPACING: { 'word-spacing': `${Number.parseFloat(value) * exemplary}px` },
+            FONTSIZE: { 'font-size': getScaledValue(value, exemplary, isLayoutDefined) },
+            LINEHEIGHT: { 'line-height': getScaledValue(value, exemplary, isLayoutDefined) },
+            LETTERSPACING: { 'letter-spacing': getScaledValue(value, exemplary, isLayoutDefined) },
+            WORDSPACING: { 'word-spacing': getScaledValue(value, exemplary, isLayoutDefined) },
             TEXTTRANSFORM: value ? { 'text-transform': value } : { 'text-transform': sdk_1.TextTransform.None },
             VERTICALALIGN: value ? { 'vertical-align': value } : { 'vertical-align': sdk_1.VerticalAlign.Unset },
             TEXTDECORATION: { 'text-decoration': value },
@@ -255,6 +265,10 @@ function groupBy(items, getKey) {
     }
     return groups;
 }
+function getScaledValue(value, exemplary, isLayoutDefined) {
+    const ratio = Number.parseFloat(value);
+    return !isLayoutDefined ? `${ratio * 100}vw` : `${ratio * exemplary}px`;
+}
 function getResolvedValue(value, name) {
     if (name !== 'COLOR')
         return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.104",
+  "version": "1.9.106",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^1.0.51",
+    "@cntrl-site/components": "^1.0.52",
     "@cntrl-site/effects": "^1.4.2",
     "@cntrl-site/sdk": "^1.28.4",
     "@types/vimeo__player": "^2.18.0",

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -14,6 +14,7 @@ import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemS
 import { useCurrentLayout } from '../../../common/useCurrentLayout';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { RichTextGeometryController } from '../../../ItemGeometry/RichTextGeometryController';
+import { RICH_TEXT_LAYOUT_PENDING_CLASS } from '../../../utils/RichTextConverter/RichTextConverter';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const reactId = useId();
@@ -64,7 +65,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
     <>
       <div
         ref={setRef}
-        className={`rich-text-wrapper-${item.id}`}
+        className={`rich-text-wrapper-${item.id}${layoutId ? '' : ` ${RICH_TEXT_LAYOUT_PENDING_CLASS}`}`}
         style={{
           ...(blur !== undefined ? { filter: `blur(${blur as number * 100}vw)` } : {}),
           ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -37,6 +37,10 @@ export const FontStyles: Record<string, Record<string, string>> = {
   italic: { 'font-style': 'italic' }
 };
 
+export const RICH_TEXT_LAYOUT_PENDING_CLASS = 'rich-text-layout-pending';
+
+const SCALING_STYLES = new Set(['FONTSIZE', 'LINEHEIGHT', 'LETTERSPACING', 'WORDSPACING']);
+
 export class RichTextConverter {
   toHtml(
     richText: RichTextItem,
@@ -64,11 +68,11 @@ export class RichTextConverter {
         layouts.forEach(l => {
           const lhForLayout = currentLineHeight[l.id];
           if (lhForLayout === undefined) return;
-          const lh = RichTextConverter.fromRangeStylesToInline({
-            name: 'LINEHEIGHT',
-            value: lhForLayout
-          }, l.exemplary);
+          const lineHeightStyle = { name: 'LINEHEIGHT', value: lhForLayout };
+          const lh = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, true);
+          const lhPending = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, false);
           styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
+          styleRules[l.id].push(`.${RICH_TEXT_LAYOUT_PENDING_CLASS} .rt_${richText.id}_br_${blockIndex} {${lhPending}}`);
         });
         continue;
       }
@@ -159,9 +163,17 @@ export class RichTextConverter {
               }
               styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
+                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, true)).join('\n')}
+                }
+              `);
+              const lengthStyles = styleGroup.styles.filter(s => SCALING_STYLES.has(s.name));
+              if (lengthStyles.length !== 0) {
+                styleRules[item.layout].push(`
+                .${RICH_TEXT_LAYOUT_PENDING_CLASS} .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                  ${lengthStyles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, false)).join('\n')}
                 }
               `);
+              }
               if (color) {
                 styleRules[item.layout].push(`
                 @supports not (color: oklch(42% 0.3 90 / 1)) {
@@ -275,17 +287,17 @@ export class RichTextConverter {
     return entitiesGroups;
   }
 
-  private static fromRangeStylesToInline(draftStyle: Style, exemplary: number): string {
+  private static fromRangeStylesToInline(draftStyle: Style, exemplary: number, isLayoutDefined: boolean): string {
     const { value, name } = draftStyle;
     const map: Record<string, Record<string, string | undefined>> = {
       COLOR: { color: getResolvedValue(value, name) },
       TYPEFACE: { 'font-family': `${getFontFamilyValue(value!)}` },
       FONTSTYLE: value ? { ...FontStyles[value] } : {},
       FONTWEIGHT: { 'font-weight': value },
-      FONTSIZE: { 'font-size': `${Number.parseFloat(value!) * exemplary}px` },
-      LINEHEIGHT: { 'line-height': `${Number.parseFloat(value!) * exemplary}px` },
-      LETTERSPACING: { 'letter-spacing': `${Number.parseFloat(value!) * exemplary}px` },
-      WORDSPACING: { 'word-spacing': `${Number.parseFloat(value!) * exemplary}px` },
+      FONTSIZE: { 'font-size': getScaledValue(value, exemplary, isLayoutDefined) },
+      LINEHEIGHT: { 'line-height': getScaledValue(value, exemplary, isLayoutDefined) },
+      LETTERSPACING: { 'letter-spacing': getScaledValue(value, exemplary, isLayoutDefined) },
+      WORDSPACING: { 'word-spacing': getScaledValue(value, exemplary, isLayoutDefined) },
       TEXTTRANSFORM: value ? { 'text-transform': value as TextTransform } : { 'text-transform': TextTransform.None },
       VERTICALALIGN: value ? { 'vertical-align': value as VerticalAlign } : { 'vertical-align': VerticalAlign.Unset },
       TEXTDECORATION: { 'text-decoration': value },
@@ -311,6 +323,11 @@ function groupBy<I>(items: I[], getKey: (item: I) => PropertyKey): Record<Proper
   return groups;
 }
 
+function getScaledValue(value: string | undefined, exemplary: number, isLayoutDefined: boolean): string {
+  const ratio = Number.parseFloat(value!);
+  return !isLayoutDefined ? `${ratio * 100}vw` : `${ratio * exemplary}px`;
+}
+
 function getResolvedValue(value: string | undefined, name: string) {
   if (name !== 'COLOR') return value;
   return value ? CntrlColor.parse(value).toCss() : value;