@cntrl-site/sdk-nextjs 0.15.1 → 0.15.2-beta.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,17 +23,21 @@ const useCurrentLayout = () => {
         }, []);
     }, [layouts]);
     const getCurrentLayout = (0, react_1.useCallback)((articleWidth) => {
-        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] = (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,7 +12,7 @@ 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);
@@ -25,7 +25,11 @@ const ArticleWrapper = ({ children }) => {
             return () => window.removeEventListener('load', onPageLoad);
         }
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(LayoutContext_1.LayoutContext.Provider, { value: layoutId, children: [(0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: { opacity: layoutId && isPageLoaded ? 1 : 0 }, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
+    return ((0, jsx_runtime_1.jsxs)(LayoutContext_1.LayoutContext.Provider, { value: layoutId, children: [(0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: {
+                    opacity: layoutId && isPageLoaded ? 1 : 0,
+                    ...layoutDeviationStyle
+                }, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .article-wrapper {
           opacity: 1;
           transition: opacity 0.2s ease; 

package/lib/components/Item.js

@@ -40,6 +40,7 @@ const Item = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 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,10 +73,15 @@ const Item = ({ item, sectionId }) => {
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
+    const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
     const styles = {
         transform: `scale(${scale})`,
         transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor],
-        width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
+        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'}`,
         top: stickyTop
     };

package/lib/components/items/RichTextItem.js

@@ -34,7 +34,10 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { 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, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: "rich-text-scale", style: {
+                        transformOrigin: 'top left',
+                        transform: 'scale(var(--layout-deviation))'
+                    }, children: content }) }), (0, jsx_runtime_1.jsxs)(style_1.default, { 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

@@ -12,7 +12,7 @@ const useRichTextItem = (item) => {
     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];
 };
 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) {
         const { text, blocks = [] } = richText.commonParams;
         const root = [];
         const styleRules = layouts.reduce((rec, layout) => {
@@ -32,7 +32,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;
@@ -60,7 +60,6 @@ class RichTextConverter {
               text-align: ${ta};
               white-space: ${whiteSpace};
               overflow-wrap: break-word;
-              ${!hasPreset ? 'line-height: 0;' : ''}
             }
           `);
                 });
@@ -94,6 +93,7 @@ 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)
@@ -106,7 +106,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) {
@@ -194,17 +194,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 ? { ...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.1",
+  "version": "0.15.2-beta.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,7 +6,7 @@ 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 = () => {
@@ -19,10 +19,17 @@ export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
       return () => window.removeEventListener('load', 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,10 +87,16 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
     isInitialRef.current = false;
   }, []);
 
+  const isRichText = isItemType(item, ArticleItemType.RichText);
+
   const styles = {
     transform: `scale(${scale})`,
     transformOrigin: ScaleAnchorMap[scaleAnchor],
-    width: `${sizingAxis.x === SizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
+    width: `${sizingAxis.x === SizingType.Manual
+      ? isRichText
+        ? `${width * exemplary}px`
+        : `${width * 100}vw`
+      : 'max-content'}`,
     height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
     top: stickyTop
   };

package/src/components/items/RichTextItem.tsx

@@ -37,7 +37,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 }