@cntrl-site/sdk-nextjs 0.8.3 → 0.8.5

package/lib/common/useKeyframeValue.js

@@ -19,7 +19,7 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDe
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
-    const keyframes = keyframesRepo.getItemKeyframes(item.id);
+    const keyframes = (0, react_1.useMemo)(() => keyframesRepo.getItemKeyframes(item.id), [item.id, keyframesRepo]);
     const paramValue = (0, react_1.useMemo)(() => {
         return itemParamsGetterRef.current(item, layoutId);
     }, [item, layoutId, ...deps]);
@@ -38,29 +38,39 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDe
         }));
         return new Animator_1.Animator(animationData);
     }, [keyframes, layoutId]);
+    const handleKeyframeValue = (0, react_1.useCallback)((scroll) => {
+        if (!animator)
+            return;
+        const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+        if (!(0, lodash_isequal_1.default)(newValue, adjustedValueRef.current)) {
+            setAdjustedValue(newValue);
+        }
+    }, [animator, paramValue]);
     (0, react_1.useEffect)(() => {
         setAdjustedValue(paramValue);
     }, [paramValue]);
     (0, react_1.useEffect)(() => {
-        if (!animator || !articleRectObserver)
+        if (!articleRectObserver)
+            return;
+        const scroll = articleRectObserver.scroll;
+        handleKeyframeValue(scroll);
+    }, [articleRectObserver, handleKeyframeValue]);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver)
             return;
         return articleRectObserver.on('resize', () => {
             const scroll = articleRectObserver.scroll;
-            const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-            setAdjustedValue(newValue);
+            handleKeyframeValue(scroll);
         });
-    }, [animator, articleRectObserver]);
+    }, [handleKeyframeValue, articleRectObserver]);
     (0, react_1.useEffect)(() => {
-        if (!animator || !articleRectObserver)
+        if (!articleRectObserver)
             return;
         return articleRectObserver.on('scroll', () => {
             const scroll = articleRectObserver.scroll;
-            const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-            if (!(0, lodash_isequal_1.default)(newValue, adjustedValueRef.current)) {
-                setAdjustedValue(newValue);
-            }
+            handleKeyframeValue(scroll);
         });
-    }, [animator, articleRectObserver]);
+    }, [handleKeyframeValue, articleRectObserver]);
     return adjustedValue;
 };
 exports.useKeyframeValue = useKeyframeValue;

package/lib/components/items/useItemSticky.js

@@ -18,8 +18,10 @@ const useItemSticky = (top, parentOffsetTop, item) => {
         setAdjustedTop(stickyManager.getPosition(scroll, top, parentOffsetTop));
     }, [top, stickyManager, parentOffsetTop]);
     (0, react_1.useEffect)(() => {
-        setAdjustedTop(top);
-    }, [top]);
+        if (!articleRectObserver)
+            return;
+        handleSticky(articleRectObserver.scroll);
+    }, [handleSticky, articleRectObserver]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !sticky)
             return;

package/lib/utils/ArticleRectManager/ArticleRectObserver.js

@@ -19,6 +19,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
             if (!(element instanceof HTMLElement))
                 return;
             this.notify(element);
+            this.setScroll(window.scrollY / this.articleWidth);
             this.emit('resize', undefined);
         };
         this.resizeObserver = new ResizeObserver(this.handleResize);

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -11,8 +11,7 @@ exports.FontStyles = {
 };
 class RichTextConverter {
     toHtml(richText, layouts, hasPreset) {
-        const { text: rawText, blocks = [] } = richText.commonParams;
-        const text = Array.from(rawText); // because of emoji
+        const { text, blocks = [] } = richText.commonParams;
         const root = [];
         const styleRules = layouts.reduce((rec, layout) => {
             rec[layout.id] = [];
@@ -71,18 +70,18 @@ class RichTextConverter {
                 for (const entity of entitiesGroups) {
                     const entityKids = [];
                     if (offset < entity.start) {
-                        kids.push(content.slice(offset, entity.start).join(''));
+                        kids.push(sliceSymbols(content, offset, entity.start));
                         offset = entity.start;
                     }
                     for (const style of entity.stylesGroup) {
                         if (offset < style.start) {
-                            entityKids.push(content.slice(offset, style.start).join(''));
+                            entityKids.push(sliceSymbols(content, offset, style.start));
                         }
-                        entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: content.slice(style.start, style.end).join('') }, style.start));
+                        entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: sliceSymbols(content, style.start, style.end) }, style.start));
                         offset = style.end;
                     }
                     if (offset < entity.end) {
-                        entityKids.push(content.slice(offset, entity.end).join(''));
+                        entityKids.push(sliceSymbols(content, offset, entity.end));
                         offset = entity.end;
                     }
                     if (entity.link) {
@@ -91,8 +90,8 @@ class RichTextConverter {
                     }
                     kids.push(...entityKids);
                 }
-                if (offset < content.length) {
-                    kids.push(content.slice(offset).join(''));
+                if (offset < getSymbolsCount(content)) {
+                    kids.push(sliceSymbols(content, offset));
                 }
                 for (const item of group) {
                     const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
@@ -224,3 +223,28 @@ function getResolvedValue(value, name) {
         return value;
     return value ? sdk_1.CntrlColor.parse(value).toCss() : value;
 }
+function sliceSymbols(text, start, end = NaN) {
+    let startOffset = NaN;
+    let endOffset = 0;
+    let count = -1;
+    for (const ch of text) {
+        count += 1;
+        if (count === start) {
+            startOffset = endOffset;
+        }
+        if (count === end)
+            break;
+        endOffset += ch.length;
+    }
+    if (isNaN(startOffset))
+        return '';
+    return text.slice(startOffset, endOffset + 1);
+}
+function getSymbolsCount(input) {
+    let count = 0;
+    let ch;
+    for (ch of input) {
+        count += 1;
+    }
+    return count;
+}

package/package.json

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

package/src/common/useKeyframeValue.ts

@@ -25,7 +25,7 @@ export const useKeyframeValue = <T>(
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutId = useCurrentLayout();
   const keyframesRepo = useContext(KeyframesContext);
-  const keyframes = keyframesRepo.getItemKeyframes(item.id);
+  const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id), [item.id, keyframesRepo]);
   const paramValue = useMemo<T>(() => {
     return itemParamsGetterRef.current(item, layoutId);
   }, [item, layoutId, ...deps]);
@@ -46,29 +46,39 @@ export const useKeyframeValue = <T>(
     return new Animator(animationData);
   }, [keyframes, layoutId]);
 
+  const handleKeyframeValue = useCallback((scroll: number) => {
+    if (!animator) return;
+    const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+    if (!isEqual(newValue, adjustedValueRef.current)) {
+      setAdjustedValue(newValue);
+    }
+  }, [animator, paramValue]);
+
   useEffect(() => {
     setAdjustedValue(paramValue);
   }, [paramValue]);
 
   useEffect(() => {
-    if (!animator || !articleRectObserver) return;
+    if (!articleRectObserver) return;
+    const scroll = articleRectObserver.scroll;
+    handleKeyframeValue(scroll);
+  }, [articleRectObserver, handleKeyframeValue])
+
+  useEffect(() => {
+    if (!articleRectObserver) return;
     return articleRectObserver.on('resize', () => {
       const scroll = articleRectObserver.scroll;
-      const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-      setAdjustedValue(newValue);
+      handleKeyframeValue(scroll);
     });
-  }, [animator, articleRectObserver]);
+  }, [handleKeyframeValue, articleRectObserver]);
 
   useEffect(() => {
-    if (!animator || !articleRectObserver) return;
+    if (!articleRectObserver) return;
     return articleRectObserver.on('scroll', () => {
       const scroll = articleRectObserver.scroll;
-      const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-      if (!isEqual(newValue, adjustedValueRef.current)) {
-        setAdjustedValue(newValue);
-      }
+      handleKeyframeValue(scroll);
     });
-  }, [animator, articleRectObserver]);
+  }, [handleKeyframeValue, articleRectObserver]);
   return adjustedValue;
 };
 

package/src/components/items/useItemSticky.ts

@@ -22,8 +22,9 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
   }, [top, stickyManager, parentOffsetTop]);
 
   useEffect(() => {
-    setAdjustedTop(top);
-  }, [top]);
+    if (!articleRectObserver) return;
+      handleSticky(articleRectObserver.scroll);
+  }, [handleSticky, articleRectObserver]);
 
   useEffect(() => {
     if (!articleRectObserver || !sticky) return;

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -59,6 +59,7 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     const element = entry.target;
     if (!(element instanceof HTMLElement)) return;
     this.notify(element);
+    this.setScroll(window.scrollY / this.articleWidth);
     this.emit('resize', undefined);
   };
 

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -41,8 +41,7 @@ export class RichTextConverter {
     layouts: TLayout[],
     hasPreset: boolean
   ): [ReactNode[], string] {
-    const { text: rawText, blocks = [] } = richText.commonParams;
-    const text = Array.from(rawText); // because of emoji
+    const { text, blocks = [] } = richText.commonParams;
     const root: ReactElement[] = [];
     const styleRules = layouts.reduce<Record<string, string[]>>((rec, layout) => {
       rec[layout.id] = [];
@@ -102,18 +101,18 @@ export class RichTextConverter {
         for (const entity of entitiesGroups) {
           const entityKids: ReactNode[] = [];
           if (offset < entity.start) {
-            kids.push(content.slice(offset, entity.start).join(''));
+            kids.push(sliceSymbols(content, offset, entity.start));
             offset = entity.start;
           }
           for (const style of entity.stylesGroup) {
             if (offset < style.start) {
-              entityKids.push(content.slice(offset, style.start).join(''));
+              entityKids.push(sliceSymbols(content, offset, style.start));
             }
-            entityKids.push(<span key={style.start} className={`s-${style.start}-${style.end}`}>{content.slice(style.start, style.end).join('')}</span>);
+            entityKids.push(<span key={style.start} className={`s-${style.start}-${style.end}`}>{sliceSymbols(content, style.start, style.end)}</span>);
             offset = style.end;
           }
           if (offset < entity.end) {
-            entityKids.push(content.slice(offset, entity.end).join(''));
+            entityKids.push(sliceSymbols(content, offset, entity.end));
             offset = entity.end;
           }
           if (entity.link) {
@@ -122,8 +121,8 @@ export class RichTextConverter {
           }
           kids.push(...entityKids);
         }
-        if (offset < content.length) {
-          kids.push(content.slice(offset).join(''));
+        if (offset < getSymbolsCount(content)) {
+          kids.push(sliceSymbols(content, offset));
         }
         for (const item of group) {
           const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
@@ -258,3 +257,28 @@ function getResolvedValue(value: string | undefined, name: string) {
   if (name !== 'COLOR') return value;
   return value ? CntrlColor.parse(value).toCss() : value;
 }
+
+function sliceSymbols(text: string, start: number, end: number = NaN): string {
+  let startOffset = NaN;
+  let endOffset = 0;
+  let count = -1;
+  for (const ch of text) {
+    count += 1;
+    if (count === start) {
+      startOffset = endOffset;
+    }
+    if (count === end) break;
+    endOffset += ch.length;
+  }
+  if (isNaN(startOffset)) return '';
+  return text.slice(startOffset, endOffset + 1);
+}
+
+function getSymbolsCount(input: string): number {
+  let count = 0;
+  let ch: string;
+  for (ch of input) {
+    count += 1;
+  }
+  return count;
+}