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

package/lib/common/useCurrentLayout.js

@@ -15,6 +15,7 @@ const useCurrentLayout = () => {
                 ...acc,
                 {
                     layoutId: layout.id,
+                    exemplary: layout.exemplary,
                     start: layout.startsWith,
                     end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
                 }
@@ -22,18 +23,21 @@ const useCurrentLayout = () => {
         }, []);
     }, [layouts]);
     const getCurrentLayout = (0, react_1.useCallback)((articleWidth) => {
-        var _a;
-        return (_a = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end)) === null || _a === void 0 ? void 0 : _a.layoutId;
+        const range = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end);
+        return range;
     }, [layoutRanges]);
     const [layoutId, setLayoutId] = (0, react_1.useState)(undefined);
+    const [deviation, setDeviation] = (0, react_1.useState)(1);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver)
             return;
         return articleRectObserver.on('resize', () => {
             const articleWidth = articleRectObserver.width;
-            setLayoutId(getCurrentLayout(articleWidth));
+            const { layoutId, exemplary } = getCurrentLayout(articleWidth);
+            setLayoutId(layoutId);
+            setDeviation(articleWidth / exemplary);
         });
     }, [articleRectObserver, getCurrentLayout]);
-    return layoutId;
+    return { layoutId, layoutDeviation: deviation };
 };
 exports.useCurrentLayout = useCurrentLayout;

package/lib/components/ArticleWrapper.js

@@ -12,20 +12,21 @@ const LayoutContext_1 = require("../provider/LayoutContext");
 const ArticleWrapper = ({ children }) => {
     const id = (0, react_1.useId)();
     const [isPageLoaded, setIsPageLoaded] = (0, react_1.useState)(false);
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const { layoutId, layoutDeviation } = (0, useCurrentLayout_1.useCurrentLayout)();
     (0, react_1.useEffect)(() => {
         const onPageLoad = () => {
             setIsPageLoaded(true);
         };
-        if (document.readyState === 'complete') {
-            onPageLoad();
+        if (document.readyState === 'loading') {
+            window.addEventListener('DOMContentLoaded', onPageLoad);
+            return () => window.removeEventListener('DOMContentLoaded', onPageLoad);
         }
         else {
-            window.addEventListener('load', onPageLoad);
-            return () => window.removeEventListener('load', onPageLoad);
+            onPageLoad();
         }
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(LayoutContext_1.LayoutContext.Provider, Object.assign({ value: layoutId }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "article-wrapper", style: { opacity: layoutId && isPageLoaded ? 1 : 0 } }, { children: children })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+    const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
+    return ((0, jsx_runtime_1.jsxs)(LayoutContext_1.LayoutContext.Provider, Object.assign({ value: layoutId }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "article-wrapper", style: Object.assign({ opacity: layoutId && isPageLoaded ? 1 : 0 }, layoutDeviationStyle) }, { children: children })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         .article-wrapper {
           opacity: 1;
           transition: opacity 0.2s ease; 

package/lib/components/Item.js

@@ -37,9 +37,11 @@ const itemsMap = {
 };
 const noop = () => null;
 const Item = ({ item, sectionId }) => {
+    var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const exemplary = (_b = (_a = layouts.find(l => l.id === layout)) === null || _a === void 0 ? void 0 : _a.exemplary) !== null && _b !== void 0 ? _b : 1;
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
     const { top, left } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
@@ -72,14 +74,21 @@ const Item = ({ item, sectionId }) => {
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
-    const styles = {
-        transform: `scale(${scale})`,
-        transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor],
-        width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
-        height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
-        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)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+    const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
+    const scaleIfRichText = isRichText
+        ? { 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: {
+                        width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
+                            ? isRichText
+                                ? `${width * exemplary}px`
+                                : `${width * 100}vw`
+                            : 'max-content'}`,
+                        height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+                        transform: `scale(${scale})`,
+                        transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]
+                    } }, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`

package/lib/components/items/RichTextItem.js

@@ -35,7 +35,10 @@ 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: 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: (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]) => {
                         return (`
             .rich-text-wrapper-${item.id} {
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur'], hoverParams)};

package/lib/components/items/useRichTextItem.js

@@ -13,7 +13,7 @@ const useRichTextItem = (item) => {
     const preset = presetId
         ? (_a = typePresets === null || typePresets === void 0 ? void 0 : typePresets.presets.find(p => p.id === presetId)) !== null && _a !== void 0 ? _a : null
         : null;
-    const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
+    const [content, styles] = richTextConv.toHtml(item, layouts);
     return [content, styles, preset];
 };
 exports.useRichTextItem = useRichTextItem;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -10,7 +10,7 @@ exports.FontStyles = {
     'italic': { 'font-style': 'italic' }
 };
 class RichTextConverter {
-    toHtml(richText, layouts, hasPreset) {
+    toHtml(richText, layouts) {
         var _a, _b, _c;
         const { text, blocks = [] } = richText.commonParams;
         const root = [];
@@ -34,7 +34,7 @@ class RichTextConverter {
                     const lh = RichTextConverter.fromDraftToInline({
                         name: 'LINEHEIGHT',
                         value: currentLineHeight[l.id]
-                    });
+                    }, l.exemplary);
                     styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
                 });
                 continue;
@@ -62,7 +62,6 @@ class RichTextConverter {
               text-align: ${ta};
               white-space: ${whiteSpace};
               overflow-wrap: break-word;
-              ${!hasPreset ? 'line-height: 0;' : ''}
             }
           `);
                 });
@@ -96,6 +95,7 @@ class RichTextConverter {
                     kids.push(sliceSymbols(content, offset));
                 }
                 for (const item of group) {
+                    const { exemplary } = layouts.find(l => l.id === item.layout);
                     const entitiesGroups = (_c = this.groupEntities(entities, item.styles)) !== null && _c !== void 0 ? _c : [];
                     for (const entitiesGroup of entitiesGroups) {
                         if (!entitiesGroup.stylesGroup)
@@ -108,7 +108,7 @@ class RichTextConverter {
                             }
                             styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
+                  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s, exemplary)).join('\n')}
                 }
               `);
                             if (color) {
@@ -192,17 +192,17 @@ class RichTextConverter {
         }
         return entitiesGroups;
     }
-    static fromDraftToInline(draftStyle) {
+    static fromDraftToInline(draftStyle, exemplary) {
         const { value, name } = draftStyle;
         const map = {
             'COLOR': { 'color': getResolvedValue(value, name) },
             'TYPEFACE': { 'font-family': `${value}` },
             'FONTSTYLE': value ? Object.assign({}, exports.FontStyles[value]) : {},
             'FONTWEIGHT': { 'font-weight': value },
-            'FONTSIZE': { 'font-size': `${parseFloat(value) * 100}vw` },
-            'LINEHEIGHT': { 'line-height': `${parseFloat(value) * 100}vw` },
-            'LETTERSPACING': { 'letter-spacing': `${parseFloat(value) * 100}vw` },
-            'WORDSPACING': { 'word-spacing': `${parseFloat(value) * 100}vw` },
+            'FONTSIZE': { 'font-size': `${parseFloat(value) * exemplary}px` },
+            'LINEHEIGHT': { 'line-height': `${parseFloat(value) * exemplary}px` },
+            'LETTERSPACING': { 'letter-spacing': `${parseFloat(value) * exemplary}px` },
+            'WORDSPACING': { 'word-spacing': `${parseFloat(value) * exemplary}px` },
             '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 }

package/package.json

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

package/src/common/useCurrentLayout.ts

@@ -4,11 +4,17 @@ import { ArticleRectContext } from '../provider/ArticleRectContext';
 
 interface LayoutData {
   layoutId: string;
+  exemplary: number;
   start: number;
   end: number;
 }
 
-export const useCurrentLayout = (): string | undefined => {
+type UseCurrentLayoutReturn = {
+  layoutId: string | undefined;
+  layoutDeviation: number;
+};
+
+export const useCurrentLayout = (): UseCurrentLayoutReturn => {
   const { layouts } = useCntrlContext();
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutRanges = useMemo(() => {
@@ -19,6 +25,7 @@ export const useCurrentLayout = (): string | undefined => {
         ...acc,
         {
           layoutId: layout.id,
+          exemplary: layout.exemplary,
           start: layout.startsWith,
           end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
         }
@@ -26,16 +33,20 @@ export const useCurrentLayout = (): string | undefined => {
     }, []);
   }, [layouts]);
   const getCurrentLayout = useCallback((articleWidth: number) => {
-    return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end)?.layoutId;
+    const range = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end);
+    return range;
   }, [layoutRanges]);
   const [layoutId, setLayoutId] = useState<string | undefined>(undefined);
+  const [deviation, setDeviation] = useState(1);
   useEffect(() => {
     if (!articleRectObserver) return;
     return articleRectObserver.on('resize', () => {
       const articleWidth = articleRectObserver.width;
-      setLayoutId(getCurrentLayout(articleWidth));
+      const { layoutId, exemplary } = getCurrentLayout(articleWidth)!;
+      setLayoutId(layoutId);
+      setDeviation(articleWidth / exemplary);
     });
   }, [articleRectObserver, getCurrentLayout]);
 
-  return layoutId;
+  return { layoutId, layoutDeviation: deviation };
 };

package/src/components/ArticleWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useEffect, useId, useState } from 'react';
+import React, { CSSProperties, FC, PropsWithChildren, useEffect, useId, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 import { LayoutContext } from '../provider/LayoutContext';
@@ -6,23 +6,30 @@ import { LayoutContext } from '../provider/LayoutContext';
 export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
   const id = useId();
   const [isPageLoaded, setIsPageLoaded] = useState(false);
-  const layoutId = useCurrentLayout();
+  const { layoutId, layoutDeviation } = useCurrentLayout();
 
   useEffect(() => {
     const onPageLoad = () => {
       setIsPageLoaded(true);
     };
-    if (document.readyState === 'complete') {
-      onPageLoad();
+    if (document.readyState === 'loading') {
+      window.addEventListener('DOMContentLoaded', onPageLoad);
+      return () => window.removeEventListener('DOMContentLoaded', onPageLoad);
     } else {
-      window.addEventListener('load', onPageLoad);
-      return () => window.removeEventListener('load', onPageLoad);
+      onPageLoad();
     }
   }, []);
+  const layoutDeviationStyle = {'--layout-deviation': layoutDeviation} as CSSProperties;
 
   return (
     <LayoutContext.Provider value={layoutId}>
-      <div className="article-wrapper" style={{ opacity: layoutId && isPageLoaded ? 1 : 0 }}>
+      <div
+        className="article-wrapper"
+        style={{
+          opacity: layoutId && isPageLoaded ? 1 : 0,
+          ...layoutDeviationStyle
+        }}
+      >
         {children}
       </div>
       <JSXStyle id={id}>{`

package/src/components/Item.tsx

@@ -51,6 +51,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
+  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
   const { top, left } = useItemPosition(item, sectionId);
@@ -86,11 +87,13 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
     isInitialRef.current = false;
   }, []);
 
+  const isRichText = isItemType(item, ArticleItemType.RichText);
+  const scaleIfRichText = isRichText
+    ? { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }
+    : {};
+
   const styles = {
-    transform: `scale(${scale})`,
-    transformOrigin: ScaleAnchorMap[scaleAnchor],
-    width: `${sizingAxis.x === SizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
-    height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+    ...scaleIfRichText,
     top: stickyTop
   };
 
@@ -104,7 +107,18 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
         className={`item-${item.id}`}
         style={isInitialRef.current ? {} : styles }
       >
-        <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
+        <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]
+        }}>
+          <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
+        </div>
       </div>
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {

package/src/components/items/RichTextItem.tsx

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

package/src/components/items/useRichTextItem.ts

@@ -13,6 +13,6 @@ export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTyp
   const preset = presetId
     ? typePresets?.presets.find(p => p.id === presetId) ?? null
     : null;
-  const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
+  const [content, styles] = richTextConv.toHtml(item, layouts);
   return [content, styles, preset];
 };

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -38,8 +38,7 @@ export const FontStyles: Record<string, Record<string, string>> = {
 export class RichTextConverter {
   toHtml(
     richText: TRichTextItem,
-    layouts: TLayout[],
-    hasPreset: boolean
+    layouts: TLayout[]
   ): [ReactNode[], string] {
     const { text, blocks = [] } = richText.commonParams;
     const root: ReactElement[] = [];
@@ -63,7 +62,7 @@ export class RichTextConverter {
           const lh = RichTextConverter.fromDraftToInline({
             name: 'LINEHEIGHT',
             value: currentLineHeight[l.id]
-          });
+          }, l.exemplary);
           styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
         });
         continue;
@@ -91,7 +90,6 @@ export class RichTextConverter {
               text-align: ${ta};
               white-space: ${whiteSpace};
               overflow-wrap: break-word;
-              ${!hasPreset ? 'line-height: 0;' : ''}
             }
           `);
         });
@@ -129,6 +127,7 @@ export class RichTextConverter {
           kids.push(sliceSymbols(content, offset));
         }
         for (const item of group) {
+          const { exemplary } = layouts.find(l => l.id === item.layout)!;
           const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
           for (const entitiesGroup of entitiesGroups) {
             if (!entitiesGroup.stylesGroup) continue;
@@ -140,7 +139,7 @@ export class RichTextConverter {
               }
               styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
+                  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s, exemplary)).join('\n')}
                 }
               `);
               if (color) {
@@ -232,17 +231,17 @@ export class RichTextConverter {
     return entitiesGroups;
   }
 
-  private static fromDraftToInline(draftStyle: Style): string {
+  private static fromDraftToInline(draftStyle: Style, exemplary: number): string {
     const { value, name } = draftStyle;
     const map: Record<string, Record<string, string | undefined>> = {
       'COLOR': { 'color': getResolvedValue(value, name) },
       'TYPEFACE': { 'font-family': `${value}` },
       'FONTSTYLE': value ? { ...FontStyles[value] } : {},
       'FONTWEIGHT': { 'font-weight': value },
-      'FONTSIZE': { 'font-size': `${parseFloat(value!) * 100}vw` },
-      'LINEHEIGHT': { 'line-height': `${parseFloat(value!) * 100}vw` },
-      'LETTERSPACING': { 'letter-spacing': `${parseFloat(value!) * 100}vw` },
-      'WORDSPACING': { 'word-spacing': `${parseFloat(value!) * 100}vw` },
+      'FONTSIZE': { 'font-size': `${parseFloat(value!) * exemplary}px` },
+      'LINEHEIGHT': { 'line-height': `${parseFloat(value!) * exemplary}px` },
+      'LETTERSPACING': { 'letter-spacing': `${parseFloat(value!) * exemplary}px` },
+      'WORDSPACING': { 'word-spacing': `${parseFloat(value!) * exemplary}px` },
       '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 }