@cntrl-site/sdk-nextjs 0.17.0 → 0.17.2

package/lib/common/useRegisterResize.js

@@ -12,7 +12,7 @@ const useRegisterResize = (ref, onResize) => {
             return;
         const observer = new resize_observer_polyfill_1.default((entries) => {
             const [entry] = entries;
-            onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+            onResize(entry.target.clientHeight / window.innerWidth);
         });
         observer.observe(ref);
         return () => {

package/lib/components/Item.js

@@ -71,8 +71,6 @@ const Item = ({ item, sectionId, articleHeight }) => {
     const ItemComponent = itemsMap[item.type] || noop;
     const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
     const handleItemResize = (height) => {
-        var _a, _b;
-        const itemSectionTop = (_b = (_a = itemWrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0;
         if (!layout)
             return;
         const sticky = item.sticky[layout];
@@ -80,7 +78,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
             setWrapperHeight(undefined);
             return;
         }
-        const itemArticleOffset = (sectionTop + itemSectionTop) / window.innerWidth;
+        const itemArticleOffset = sectionTop / window.innerWidth + stickyTop;
         const maxStickyTo = articleHeight - itemArticleOffset - height;
         const end = sticky.to
             ? Math.min(maxStickyTo, sticky.to)
@@ -93,8 +91,10 @@ const Item = ({ item, sectionId, articleHeight }) => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
+    if (!layout)
+        return null;
     const styles = {
-        top: stickyTop,
+        top: `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight[layout], item.area[layout].anchorSide)}`,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { 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)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {

package/lib/components/items/useStickyItemTop.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStickyItemTop = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
-const getAnchoredItemTop_1 = require("../../utils/getAnchoredItemTop");
 const useLayoutContext_1 = require("../useLayoutContext");
 function useStickyItemTop(item, sectionHeightMap, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -13,8 +11,6 @@ function useStickyItemTop(item, sectionHeightMap, sectionId) {
         return item.area[layoutId];
     }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
     const sticky = layoutId ? item.sticky[layoutId] : undefined;
-    const sectionHeight = layoutId ? sectionHeightMap[layoutId] : '0vh';
-    const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
-    return sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(top - sticky.from, sectionHeight, anchorSide)}` : 0;
+    return sticky ? top - sticky.from : 0;
 }
 exports.useStickyItemTop = useStickyItemTop;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -169,8 +169,24 @@ class RichTextConverter {
     }
     groupEntities(entities, styleGroups) {
         const entitiesGroups = [];
-        if (!styleGroups || styleGroups.length === 0)
+        if (!entities.length && !styleGroups)
             return;
+        if (!styleGroups || styleGroups.length === 0) {
+            const dividersSet = entities.reduce((ds, s) => {
+                ds.add(s.start);
+                ds.add(s.end);
+                return ds;
+            }, new Set([entities[0].start, entities[entities.length - 1].end]));
+            const dividers = Array.from(dividersSet).sort((a, b) => a - b);
+            for (let i = 0; i < dividers.length - 1; i += 1) {
+                const start = dividers[i];
+                const end = dividers[i + 1];
+                const entity = entities.find(e => e.start === start);
+                entitiesGroups.push(Object.assign({ stylesGroup: [], start,
+                    end }, (entity && { link: entity.data.url })));
+            }
+            return entitiesGroups;
+        }
         if (entities.length === 0) {
             entitiesGroups.push({
                 stylesGroup: styleGroups,

package/package.json

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

package/src/common/useRegisterResize.ts

@@ -6,7 +6,7 @@ export const useRegisterResize = (ref: HTMLElement | null, onResize?: (height: n
     if (!ref || !onResize) return;
     const observer = new ResizeObserver((entries) => {
       const [entry] = entries;
-      onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+      onResize(entry.target.clientHeight / window.innerWidth);
     });
     observer.observe(ref);
     return () => {

package/src/components/Item.tsx

@@ -5,7 +5,6 @@ import {
   ArticleItemType,
   getLayoutStyles,
   TArticleItem,
-  TStickyParams,
   TArticleItemAny,
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
@@ -94,14 +93,13 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
   const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
 
   const handleItemResize = (height: number) => {
-    const itemSectionTop = itemWrapperRef.current?.offsetTop ?? 0;
     if (!layout) return;
     const sticky = item.sticky[layout];
     if (!sticky) {
       setWrapperHeight(undefined);
       return;
     }
-    const itemArticleOffset = (sectionTop + itemSectionTop) / window.innerWidth;
+    const itemArticleOffset = sectionTop / window.innerWidth + stickyTop;
     const maxStickyTo = articleHeight - itemArticleOffset - height;
     const end = sticky.to
       ? Math.min(maxStickyTo, sticky.to)
@@ -117,8 +115,10 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
 
+  if (!layout) return null;
+
   const styles = {
-    top: stickyTop,
+    top: `${getAnchoredItemTop(stickyTop, sectionHeight[layout], item.area[layout].anchorSide)}`,
     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
   };
 

package/src/components/items/useStickyItemTop.ts

@@ -1,6 +1,5 @@
-import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
+import { TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
 import { useLayoutContext } from '../useLayoutContext';
 
 export function useStickyItemTop(item: TArticleItemAny, sectionHeightMap: Record<string, string>, sectionId: string) {
@@ -16,7 +15,5 @@ export function useStickyItemTop(item: TArticleItemAny, sectionHeightMap: Record
     [layoutId]
   );
   const sticky = layoutId ? item.sticky[layoutId] : undefined;
-  const sectionHeight = layoutId ? sectionHeightMap[layoutId] : '0vh';
-  const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
-  return sticky ? `${getAnchoredItemTop(top - sticky.from, sectionHeight, anchorSide)}` : 0
+  return sticky ? top - sticky.from : 0
 }

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -201,7 +201,27 @@ export class RichTextConverter {
 
   private groupEntities(entities: RichText.Entity[], styleGroups?: StyleGroup[]): EntitiesGroup[] | undefined {
     const entitiesGroups: EntitiesGroup[] = [];
-    if (!styleGroups || styleGroups.length === 0) return;
+    if (!entities.length && !styleGroups) return;
+    if (!styleGroups || styleGroups.length === 0) {
+      const dividersSet = entities.reduce((ds, s) => {
+        ds.add(s.start);
+        ds.add(s.end);
+        return ds;
+      }, new Set<number>([entities[0].start, entities[entities.length - 1].end]));
+      const dividers = Array.from(dividersSet).sort((a, b) => a - b);
+      for (let i = 0; i < dividers.length - 1; i += 1) {
+        const start = dividers[i];
+        const end = dividers[i + 1];
+        const entity = entities.find(e => e.start === start);
+        entitiesGroups.push({
+          stylesGroup: [],
+          start,
+          end,
+          ...(entity && { link: entity.data.url })
+        });
+      }
+      return entitiesGroups;
+    }
     if (entities.length === 0) {
       entitiesGroups.push({
         stylesGroup: styleGroups,