@tellescope/react-components 1.187.0 → 1.188.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.187.0",
+  "version": "1.188.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.187.0",
-    "@tellescope/sdk": "^1.187.0",
-    "@tellescope/types-client": "^1.187.0",
-    "@tellescope/types-models": "^1.187.0",
-    "@tellescope/types-utilities": "^1.187.0",
-    "@tellescope/utilities": "^1.187.0",
-    "@tellescope/validation": "^1.187.0",
+    "@tellescope/constants": "^1.188.0",
+    "@tellescope/sdk": "^1.188.0",
+    "@tellescope/types-client": "^1.188.0",
+    "@tellescope/types-models": "^1.188.0",
+    "@tellescope/types-utilities": "^1.188.0",
+    "@tellescope/utilities": "^1.188.0",
+    "@tellescope/validation": "^1.188.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "fbb905922b74dd70b690751a272ede269ef9fcb1",
+  "gitHead": "53980cf431ca6a0961fe95d3e6ec24115e31c136",
   "publishConfig": {
     "access": "public"
   }

package/src/CMS/ContentViewer.tsx

@@ -6,6 +6,90 @@ import { PDFBlockUI } from "./components"
 import { css } from "@emotion/css"
 import { useManagedContentRecords } from "../state"
 
+interface UseContentHeightOptions {
+  /**
+   * Debounce time in milliseconds for resize observation
+   * @default 100
+   */
+  debounceTime?: number;
+  
+  /**
+   * CSS selector for the element to observe
+   * @default 'body'
+   */
+  targetSelector?: string;
+}
+
+/**
+ * A hook that tracks the height of page content and updates when content changes.
+ * @param options - Configuration options
+ * @returns Current content height in pixels
+ */
+export const usePageContentHeight = (options: UseContentHeightOptions = {}): number => {
+  const { 
+    debounceTime = 100,
+    targetSelector = 'body'
+  } = options;
+  
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const observerRef = useRef<MutationObserver | null>(null);
+  
+  useEffect(() => {
+    // Function to measure content height
+    const updateContentHeight = (): void => {
+      const targetElement = document.querySelector(targetSelector);
+      
+      if (targetElement) {
+        // Use scrollHeight to get the total height including overflow content
+        const height = targetElement.scrollHeight;
+        setContentHeight(height);
+      }
+    };
+    
+    // Debounced update function
+    const debouncedUpdate = (): void => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      
+      debounceTimerRef.current = setTimeout(() => {
+        updateContentHeight();
+      }, debounceTime);
+    };
+    
+    // Initial measurement
+    updateContentHeight();
+    
+    // Set up mutation observer to detect content changes
+    observerRef.current = new MutationObserver(debouncedUpdate);
+    
+    const targetElement = document.querySelector(targetSelector);
+    if (targetElement) {
+      observerRef.current.observe(targetElement, {
+        childList: true,     // Watch for changes in direct children
+        subtree: true,       // Watch for changes in the entire subtree
+        characterData: true, // Watch for changes in text content
+        attributes: true     // Watch for changes in attributes (may affect layout)
+      });
+    }
+    
+    // Cleanup
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [debounceTime, targetSelector]);
+  
+  return contentHeight;
+}
+
+
 export const usePageHeight = () => {
   const [height, setHeight] = useState(window.innerHeight)
 

package/src/state.tsx

@@ -597,7 +597,7 @@ export const useDataSync____internal = () => {
       }
 
       // ensure we don't miss updates due to latency
-      const from = new Date(lastFetch.current.getTime() - 1000) // large leeway could result in same data being fetched twice, but helps ensure nothing is dropped
+      const from = new Date(lastFetch.current.getTime() - 3000) // large leeway could result in same data being fetched twice, but helps ensure nothing is dropped
       lastFetch.current = new Date() // update before syncing, not after it returns
 
       session