codehike - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/mdx/1.1.remark-list-to-section.js

@@ -134,3 +134,4 @@ import { highlight } from "../code/highlight.js";
             (c.type === "text" && c.value.trim().startsWith("!")) ||
-            (c.type === "text" && c.value.trim() === ""));
+            (c.type === "text" && c.value.trim() === "") ||
+            c.type === "break");
     });
@@ -137,0 +138,0 @@ }

dist/utils/scroller.d.ts

 import React from "react";
+export type MarginConfig = string | {
+    top: number;
+    height: number;
+};
 export declare function Scroller({ onIndexChange, triggerPosition, rootMargin, children, }: {
     onIndexChange: (index: number) => void;
     triggerPosition?: TriggerPosition;
-    rootMargin?: string;
+    rootMargin?: MarginConfig;
     children: React.ReactNode;
@@ -7,0 +11,0 @@ }): import("react/jsx-runtime").JSX.Element;

dist/utils/scroller.js

@@ -8,14 +8,35 @@ import { jsx as _jsx } from "react/jsx-runtime";
     const vh = useWindowHeight();
+    const ratios = React.useRef({});
     useIsomorphicLayoutEffect(() => {
         const windowHeight = vh || 0;
         const handleIntersect = (entries) => {
+            let enteringIndex = -1;
             entries.forEach((entry) => {
+                const index = +entry.target.getAttribute("data-index");
+                ratios.current[index] = entry.intersectionRatio;
                 if (entry.intersectionRatio > 0) {
-                    // get entry.target index
-                    const index = entry.target.getAttribute("data-index");
+                    enteringIndex = index;
+                }
+            });
+            if (enteringIndex >= 0) {
+                // on enter
+                onIndexChange(enteringIndex);
+            }
+            else {
+                // on exit (go tos the higher intersection)
+                const sorted = Object.entries(ratios.current).sort(([, a], [, b]) => b - a);
+                const [index] = sorted[0];
+                if (ratios.current[+index] > 0) {
                     onIndexChange(+index);
                 }
-            });
+            }
         };
-        const observer = newIntersectionObserver(handleIntersect, rootMargin || defaultRootMargin(windowHeight, triggerPosition));
+        const rm = !rootMargin
+            ? defaultRootMargin(windowHeight, triggerPosition)
+            : typeof rootMargin === "string"
+                ? rootMargin
+                : `${-rootMargin.top}px 0px ${-(windowHeight -
+                    rootMargin.top -
+                    rootMargin.height)}px`;
+        const observer = newIntersectionObserver(handleIntersect, rm);
         setObserver(observer);
@@ -27,7 +48,13 @@ return () => observer.disconnect();
 function newIntersectionObserver(handleIntersect, rootMargin) {
-    return new IntersectionObserver(handleIntersect, {
-        rootMargin,
-        threshold: 0.000001,
-        root: null,
-    });
+    try {
+        return new IntersectionObserver(handleIntersect, {
+            rootMargin,
+            threshold: 0.000001,
+            root: null,
+        });
+    }
+    catch (e) {
+        // console.error({ rootMargin })
+        throw e;
+    }
 }
@@ -34,0 +61,0 @@ export function ObservedDiv({ index, ...props }) {

dist/utils/selection.d.ts

 import React from "react";
+import { MarginConfig } from "./scroller.js";
 export declare function SelectionProvider({ children, rootMargin, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
-    rootMargin?: string;
+    rootMargin?: MarginConfig;
 }): import("react/jsx-runtime").JSX.Element;
@@ -5,0 +6,0 @@ export declare function Selectable({ index, selectOn, ...rest }: {

package.json

 {
   "name": "codehike",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Build rich content websites with Markdown and React",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

119029

1.05%

Lines of code

2562

1.3%

No dependency changes