@cntrl-site/sdk-nextjs 0.2.13 → 0.4.0

package/lib/index.js

@@ -14,10 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomItems = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = void 0;
-const defaultContext_1 = require("./provider/defaultContext");
+exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = exports.cntrlSdkContext = void 0;
+var defaultContext_1 = require("./provider/defaultContext");
+Object.defineProperty(exports, "cntrlSdkContext", { enumerable: true, get: function () { return defaultContext_1.cntrlSdkContext; } });
 __exportStar(require("@cntrl-site/sdk"), exports);
-var RichTextConverter_1 = require("./utils/RichTextConverter");
+var RichTextConverter_1 = require("./utils/RichTextConverter/RichTextConverter");
 Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
 var Page_1 = require("./components/Page");
 Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return Page_1.Page; } });
@@ -46,4 +47,3 @@ Object.defineProperty(exports, "YoutubeEmbedItem", { enumerable: true, get: func
 // custom items
 var CntrlProvider_1 = require("./provider/CntrlProvider");
 Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
-exports.CustomItems = defaultContext_1.cntrlSdkContext.customItems;

package/lib/provider/ArticleRectContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleRectContext = void 0;
+const react_1 = require("react");
+exports.ArticleRectContext = (0, react_1.createContext)(null);

package/lib/provider/CntrlSdkContext.js

@@ -4,6 +4,19 @@ exports.CntrlSdkContext = void 0;
 class CntrlSdkContext {
     constructor(customItems) {
         this.customItems = customItems;
+        this._layouts = [];
+    }
+    setTypePresets(typePresets) {
+        this._typePresets = typePresets;
+    }
+    setLayouts(layouts) {
+        this._layouts = layouts;
+    }
+    get layouts() {
+        return this._layouts;
+    }
+    get typePresets() {
+        return this._typePresets;
     }
 }
 exports.CntrlSdkContext = CntrlSdkContext;

package/lib/provider/Keyframes.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Keyframes = void 0;
+class Keyframes {
+    constructor(keyframes = []) {
+        this.keyframes = keyframes;
+    }
+    getItemKeyframes(itemId) {
+        return this.keyframes.filter(kf => kf.itemId === itemId);
+    }
+}
+exports.Keyframes = Keyframes;

package/lib/provider/KeyframesContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframesContext = void 0;
+const react_1 = require("react");
+const Keyframes_1 = require("./Keyframes");
+exports.KeyframesContext = (0, react_1.createContext)(new Keyframes_1.Keyframes());

package/lib/utils/Animator/Animator.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Animator = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const binSearchInsertAt_1 = require("../binSearchInsertAt");
+const compare = (lhs, rhs) => lhs.position - rhs.position;
+const insertBin = (0, binSearchInsertAt_1.createInsert)(binSearchInsertAt_1.binSearchInsertAt, compare);
+class Animator {
+    constructor(keyframes) {
+        this.keyframes = keyframes;
+        this.keyframesMap = createKeyframesMap();
+        this.fillKeyframesMap();
+    }
+    static pushKeyframeToMap(keyframe, map) {
+        insertBin(map[keyframe.type], keyframe);
+    }
+    getDimensions(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Dimensions];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                width: keyframe.value.width,
+                height: keyframe.value.height
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            width: rangeMap(pos, start.position, end.position, start.value.width, end.value.width, true),
+            height: rangeMap(pos, start.position, end.position, start.value.height, end.value.height, true)
+        };
+    }
+    getPositions(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Position];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                left: keyframe.value.left,
+                top: keyframe.value.top
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            left: rangeMap(pos, start.position, end.position, start.value.left, end.value.left, true),
+            top: rangeMap(pos, start.position, end.position, start.value.top, end.value.top, true)
+        };
+    }
+    getColor(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Color];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                color: keyframe.value.color
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            color: this.getRgba(start, end, pos)
+        };
+    }
+    getRadius(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderRadius];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                radius: keyframe.value.radius
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            radius: rangeMap(pos, start.position, end.position, start.value.radius, end.value.radius, true)
+        };
+    }
+    getBorderWidth(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderWidth];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                borderWidth: keyframe.value.borderWidth
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            borderWidth: rangeMap(pos, start.position, end.position, start.value.borderWidth, end.value.borderWidth, true)
+        };
+    }
+    getRotation(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Rotation];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                angle: keyframe.value.angle
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            angle: rangeMap(pos, start.position, end.position, start.value.angle, end.value.angle, true)
+        };
+    }
+    getStartEnd(position, keyframes) {
+        const index = (0, binSearchInsertAt_1.binSearchInsertAt)(keyframes, { position }, compare);
+        const end = index === keyframes.length ? index - 1 : index;
+        const start = end === 0 ? end : end - 1;
+        return { start: keyframes[start], end: keyframes[end] };
+    }
+    fillKeyframesMap() {
+        this.keyframesMap = createKeyframesMap();
+        for (const keyframe of this.keyframes) {
+            Animator.pushKeyframeToMap(keyframe, this.keyframesMap);
+        }
+    }
+    getRgba(start, end, position) {
+        const [startR, startG, startB, startA] = parseRgba(start.value.color);
+        const [endR, endG, endB, endA] = parseRgba(end.value.color);
+        const r = rangeMap(position, start.position, end.position, startR, endR, true);
+        const g = rangeMap(position, start.position, end.position, startG, endG, true);
+        const b = rangeMap(position, start.position, end.position, startB, endB, true);
+        const a = rangeMap(position, start.position, end.position, startA, endA, true);
+        return `rgba(${r},${g},${b},${a})`;
+    }
+}
+exports.Animator = Animator;
+const reRgba = /^rgba?\( *(\d+) *, *(\d+) *, *(\d+)(?: *, *(\d+(?:\.\d+)?))? *\)$/i;
+function parseRgba(color) {
+    const match = reRgba.exec(color);
+    if (!match)
+        return [0, 0, 0, 1];
+    const [, r, g, b, a] = match;
+    return [parseInt(r, 10), parseInt(g, 10), parseInt(b, 10), a ? parseFloat(a) : NaN];
+}
+function createKeyframesMap() {
+    return {
+        [sdk_1.KeyframeType.Dimensions]: [],
+        [sdk_1.KeyframeType.Position]: [],
+        [sdk_1.KeyframeType.BorderWidth]: [],
+        [sdk_1.KeyframeType.BorderRadius]: [],
+        [sdk_1.KeyframeType.Color]: [],
+        [sdk_1.KeyframeType.Rotation]: []
+    };
+}
+function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {
+    const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+    if (withinBounds && n < start1)
+        return start2;
+    if (withinBounds && n > stop1)
+        return stop2;
+    return mapped;
+}

package/lib/utils/ArticleRectManager/ArticleRectObserver.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleRectObserver = void 0;
+const EventEmitter_1 = require("../EventEmitter");
+class ArticleRectObserver extends EventEmitter_1.EventEmitter {
+    constructor() {
+        super();
+        this.articleWidth = 0;
+        this.scrollPos = window.scrollY;
+        this.animationFrame = NaN;
+        this.handleScroll = (scroll) => {
+            this.setScroll(scroll / this.articleWidth);
+        };
+        this.handleResize = (entries) => {
+            const [entry] = entries;
+            if (!entry)
+                return;
+            const element = entry.target;
+            if (!(element instanceof HTMLElement))
+                return;
+            this.notify(element);
+            this.emit('resize', undefined);
+        };
+        this.resizeObserver = new ResizeObserver(this.handleResize);
+    }
+    get scroll() {
+        return this.scrollPos;
+    }
+    get width() {
+        return this.articleWidth;
+    }
+    setScroll(scroll) {
+        this.scrollPos = scroll;
+    }
+    start(el) {
+        this.resizeObserver.observe(el);
+        const onScroll = () => {
+            this.handleScroll(window.scrollY);
+            if (!isNaN(this.animationFrame))
+                return;
+            this.animationFrame = window.requestAnimationFrame(() => {
+                this.animationFrame = NaN;
+                this.emit('scroll', undefined);
+            });
+        };
+        window.addEventListener('scroll', onScroll);
+        return () => {
+            this.resizeObserver.unobserve(el);
+            window.removeEventListener('scroll', onScroll);
+            if (!isNaN(this.animationFrame)) {
+                window.cancelAnimationFrame(this.animationFrame);
+                this.animationFrame = NaN;
+            }
+        };
+    }
+    notify(el) {
+        const elBoundary = el.getBoundingClientRect();
+        this.articleWidth = elBoundary.width;
+    }
+}
+exports.ArticleRectObserver = ArticleRectObserver;

package/lib/utils/ArticleRectManager/useArticleRectObserver.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useArticleRectObserver = void 0;
+const react_1 = require("react");
+const ArticleRectObserver_1 = require("./ArticleRectObserver");
+const useArticleRectObserver = (el) => {
+    const [articleRectObserver, setArticleRectObserver] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        setArticleRectObserver(new ArticleRectObserver_1.ArticleRectObserver());
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!el || !articleRectObserver)
+            return;
+        return articleRectObserver.start(el);
+    }, [el, articleRectObserver]);
+    return articleRectObserver;
+};
+exports.useArticleRectObserver = useArticleRectObserver;

package/lib/utils/EventEmitter.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventEmitter = void 0;
+class EventEmitter {
+    constructor() {
+        this.listeners = {};
+    }
+    on(event, listener) {
+        if (!Array.isArray(this.listeners[event])) {
+            this.listeners[event] = [];
+        }
+        this.listeners[event]?.push(listener);
+        return () => {
+            this.off(event, listener);
+        };
+    }
+    off(event, listener) {
+        const filtered = this.listeners[event]?.filter(l => l !== listener);
+        this.listeners[event] = filtered && filtered.length > 0 ? filtered : undefined;
+    }
+    emit(event, payload) {
+        const listeners = this.listeners[event];
+        if (!Array.isArray(listeners))
+            return;
+        for (const listener of listeners) {
+            try {
+                listener(payload);
+            }
+            catch (error) {
+                console.error(error instanceof Error ? error.stack : error);
+            }
+        }
+    }
+}
+exports.EventEmitter = EventEmitter;

package/lib/utils/{RichTextConverter.js → RichTextConverter/RichTextConverter.js}

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextConverter = exports.FontStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
-const LinkWrapper_1 = require("../components/LinkWrapper");
+const LinkWrapper_1 = require("../../components/LinkWrapper");
 exports.FontStyles = {
     'normal': {},
     'bold': { 'font-weight': 'bold' },
     'italic': { 'font-style': 'italic' }
 };
 class RichTextConverter {
-    toHtml(richText, layouts) {
+    toHtml(richText, layouts, hasPreset) {
         const { text: rawText, blocks = [] } = richText.commonParams;
         const text = Array.from(rawText); // because of emoji
         const root = [];
@@ -58,7 +58,7 @@ class RichTextConverter {
             .${blockClass} {
               display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
               text-align: ${ta};
-              line-height: 0;
+              ${hasPreset ? '' : 'line-height: 0;'}
               white-space: normal;
               overflow-wrap: break-word;
             }

package/lib/utils/binSearchInsertAt.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInsert = exports.binSearchInsertAt = void 0;
+function binSearchInsertAt(list, item, compare) {
+    switch (list.length) {
+        case 0: return 0;
+        case 1: return compare(item, list[0]) < 0 ? 0 : 1;
+    }
+    let start = 0;
+    let end = list.length;
+    let pivot;
+    let cmpResult;
+    while (start < end) {
+        pivot = start + Math.floor((end - start) / 2);
+        cmpResult = compare(item, list[pivot]);
+        if (cmpResult === 0)
+            return pivot + 1;
+        if (cmpResult < 0) {
+            end = pivot;
+        }
+        if (cmpResult > 0) {
+            start = pivot + 1;
+        }
+    }
+    if (start >= list.length)
+        return list.length;
+    return compare(item, list[start]) < 0 ? start : start + 1;
+}
+exports.binSearchInsertAt = binSearchInsertAt;
+function createInsert(start, compare) {
+    return (list, item) => {
+        const pos = start(list, item, compare);
+        list.splice(pos, 0, item);
+    };
+}
+exports.createInsert = createInsert;

package/lib/utils/generateTypePresetStyles/generateTypePresetStyles.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateTypePresetStyles = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const reEmptyLines = /^\s*\n/gm;
+function generateTypePresetStyles(preset, layouts) {
+    const sorted = layouts.slice().sort((a, b) => a.startsWith - b.startsWith);
+    const stylesStr = (`
+    ${preset.presets.map(p => (`
+.cntrl-preset-${p.id} {
+  font-family: ${p.fontFamily};
+  ${p.fontStyle.length > 0 ? `font-style: ${p.fontStyle};` : ''}
+  font-weight: ${p.fontWeight};
+}
+  ${sorted.map(l => (`
+${(0, sdk_1.getLayoutMediaQuery)(l.id, sorted)} {
+  .cntrl-preset-${p.id} {
+    font-size: ${p.layoutParams[l.id].fontSize * 100}vw;
+    line-height: ${p.layoutParams[l.id].lineHeight * 100}vw;
+    letter-spacing: ${p.layoutParams[l.id].letterSpacing * 100}vw;
+    word-spacing: ${p.layoutParams[l.id].wordSpacing * 100}vw;
+    color: ${p.layoutParams[l.id].color};
+  }
+}`)).join('\n')}`)).join('\n')}`);
+    return stylesStr.replace(reEmptyLines, '');
+}
+exports.generateTypePresetStyles = generateTypePresetStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.2.13",
+  "version": "0.4.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,20 +21,25 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.2.13",
+    "@cntrl-site/sdk": "^0.4.1",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },
   "peerDependencies": {
     "next": "^12.2.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "lodash.isequal": "^4.5.0"
   },
   "devDependencies": {
     "@tsconfig/node16": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
+    "@types/lodash.isequal": "^4.5.6",
+    "@types/jest": "^29.2.5",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
+    "jest": "^29.3.1",
+    "ts-jest": "^29.0.3",
     "typescript": "^4.7.4"
   },
   "directories": {

package/src/common/useCurrentLayout.ts

@@ -0,0 +1,47 @@
+import { useCntrlContext } from '../provider/useCntrlContext';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+
+interface LayoutData {
+  layoutId: string;
+  start: number;
+  end: number;
+}
+
+export const useCurrentLayout = () => {
+  const { layouts } = useCntrlContext();
+  const [initialLayout] = layouts;
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutRanges = useMemo(() => {
+    const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
+    return sorted.reduce<LayoutData[]>((acc, layout, i, layouts) => {
+      const next = layouts[i + 1];
+      return [
+        ...acc,
+        {
+          layoutId: layout.id,
+          start: layout.startsWith,
+          end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
+        }
+      ];
+    }, []);
+  }, [layouts]);
+  const getCurrentLayout = useCallback((articleWidth: number) => {
+    return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end)!.layoutId;
+  }, [layoutRanges]);
+  const [layoutId, setLayoutId] = useState<string>(getCurrentLayout(isServer() ? 0 : window.innerWidth));
+
+  useEffect(() => {
+    if (!articleRectObserver) return;
+    return articleRectObserver.on('resize', () => {
+      const articleWidth = articleRectObserver.width;
+      setLayoutId(getCurrentLayout(articleWidth));
+    });
+  }, [articleRectObserver, getCurrentLayout]);
+
+  return layoutId;
+};
+
+function isServer(): boolean {
+  return typeof window === 'undefined';
+}

package/src/common/useKeyframeValue.ts

@@ -0,0 +1,74 @@
+import { KeyframeType, TArticleItemAny } from '@cntrl-site/sdk';
+import isEqual from 'lodash.isequal';
+import { DependencyList, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { useCurrentLayout } from './useCurrentLayout';
+import { KeyframesContext } from '../provider/KeyframesContext';
+import { AnimationData, Animator } from '../utils/Animator/Animator';
+
+export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
+type ItemParamGetter<T> = (item: TArticleItemAny, layoutId: string) => T;
+const emptyDeps: DependencyList = [];
+
+export const useKeyframeValue = <T>(
+  item: TArticleItemAny,
+  itemParamsGetter: ItemParamGetter<T>,
+  animatorGetter: AnimatorGetter<T>,
+  deps: DependencyList = emptyDeps
+) => {
+  const animatorGetterRef = useRef(animatorGetter);
+  const itemParamsGetterRef = useRef(itemParamsGetter);
+
+  animatorGetterRef.current = animatorGetter;
+  itemParamsGetterRef.current = itemParamsGetter;
+
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutId = useCurrentLayout();
+  const keyframesRepo = useContext(KeyframesContext);
+  const keyframes = keyframesRepo.getItemKeyframes(item.id);
+  const paramValue = useMemo<T>(() => {
+    return itemParamsGetterRef.current(item, layoutId);
+  }, [item, layoutId, ...deps]);
+
+  const [adjustedValue, setAdjustedValue] = useState<T>(paramValue);
+  const adjustedValueRef = useRef<T>(adjustedValue);
+  adjustedValueRef.current = adjustedValue;
+
+  const animator = useMemo(() => {
+    if (!layoutId || !keyframes.length) return;
+    const animationData = keyframes
+      .filter(k => k.layoutId === layoutId)
+      .map<AnimationData<KeyframeType>>(({ position, type, value }) => ({
+        position,
+        type,
+        value
+      }));
+    return new Animator(animationData);
+  }, [keyframes, layoutId]);
+
+  useEffect(() => {
+    setAdjustedValue(paramValue);
+  }, [paramValue]);
+
+  useEffect(() => {
+    if (!animator || !articleRectObserver) return;
+    return articleRectObserver.on('resize', () => {
+      const scroll = articleRectObserver.scroll;
+      const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+      setAdjustedValue(newValue);
+    });
+  }, [animator, articleRectObserver]);
+
+  useEffect(() => {
+    if (!animator || !articleRectObserver) return;
+    return articleRectObserver.on('scroll', () => {
+      const scroll = articleRectObserver.scroll;
+      const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+      if (!isEqual(newValue, adjustedValueRef.current)) {
+        setAdjustedValue(newValue);
+      }
+    });
+  }, [animator, articleRectObserver]);
+  return adjustedValue;
+};
+

package/src/components/Article.tsx

@@ -1,21 +1,25 @@
-import { FC } from 'react';
-import { TArticle, TLayout, getLayoutStyles } from '@cntrl-site/sdk';
+import { FC, useRef } from 'react';
+import { TArticle } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
+import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
 
 interface Props {
   article: TArticle;
-  layouts: TLayout[];
 }
 
-export const Article: FC<Props> = ({ article, layouts }) => {
+export const Article: FC<Props> = ({ article }) => {
+  const articleRef = useRef<HTMLDivElement | null>(null);
+  const articleRectObserver = useArticleRectObserver(articleRef.current);
+
   return (
-    <>
-      <div className="article">
+    <ArticleRectContext.Provider value={articleRectObserver}>
+      <div className="article" ref={articleRef}>
         {article.sections.map((section, i) => (
-          <Section section={section} key={section.id} layouts={layouts}>
+          <Section section={section} key={section.id}>
             {article.sections[i].items.map(item => (
-              <Item layouts={layouts} item={item} key={item.id} />
+              <Item item={item} key={item.id} />
             ))}
           </Section>
         ))}
@@ -26,6 +30,6 @@ export const Article: FC<Props> = ({ article, layouts }) => {
             overflow: hidden;
           }
       `}</style>
-    </>
+    </ArticleRectContext.Provider>
   );
 };