docs: AFCL examples report their height again once the docs page hydrates, so charts opened by a link or a reload are no longer cut to 100px AdminForth/2005

Author: ivictbor

documentation/afcl-preview/main.ts

@@ -29,7 +29,9 @@ app.use(createRouter({ history: createMemoryHistory(), routes: [{ path: '/:path(
 initI18n(app);
 app.mount('#app');
 
-// the docs page sizes the iframe to the example
-new ResizeObserver(() => {
+// the docs page sizes the iframe to the example, and asks for the height again once it listens
+function postHeight() {
   window.parent.postMessage({ afclPreview: id, height: document.body.offsetHeight }, '*');
-}).observe(document.body);
+}
+new ResizeObserver(postHeight).observe(document.body);
+window.addEventListener('message', (e) => e.data === 'afclPreviewHeight' && postHeight());

documentation/src/components/AfclPreview/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, type ReactNode } from 'react';
+import React, { useEffect, useRef, useState, type ReactNode } from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 
@@ -10,6 +10,7 @@ const INITIAL_HEIGHT = 100;
 export default function AfclPreview({ id, minHeight = 0, children }: { id: string; minHeight?: number; children: ReactNode }) {
   const src = useBaseUrl(`/afcl-preview/index.html#${id}`);
   const [height, setHeight] = useState(minHeight || INITIAL_HEIGHT);
+  const frame = useRef<HTMLIFrameElement>(null);
 
   useEffect(() => {
     function onMessage(e: MessageEvent) {
@@ -18,12 +19,14 @@ export default function AfclPreview({ id, minHeight = 0, children }: { id: strin
       }
     }
     window.addEventListener('message', onMessage);
+    // an example opened before the page hydrated has already reported its height, nobody listened then
+    frame.current.contentWindow.postMessage('afclPreviewHeight', '*');
     return () => window.removeEventListener('message', onMessage);
   }, [id, minHeight]);
 
   return (
     <div className={styles.preview}>
-      <iframe src={src} title={`${id} example`} loading="lazy" style={{ height }} />
+      <iframe ref={frame} src={src} title={`${id} example`} loading="lazy" style={{ height }} />
       {children}
     </div>
   );