diff --git a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx index 9c85b8d36c..accff00d5a 100644 --- a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx +++ b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx @@ -22,6 +22,7 @@ const ArticleBody: React.FC<{heading: string, image: string|undefined, excerpt: const site = useBrowseSite(); const siteData = site.data?.site; const iframeRef = useRef(null); + const [iframeHeight, setIframeHeight] = useState('0px'); const cssContent = articleBodyStyles(siteData?.url.replace(/\/$/, '')); @@ -29,6 +30,22 @@ const ArticleBody: React.FC<{heading: string, image: string|undefined, excerpt: ${cssContent} + +
@@ -53,20 +70,35 @@ const ArticleBody: React.FC<{heading: string, image: string|undefined, excerpt: const iframe = iframeRef.current; if (iframe) { iframe.srcdoc = htmlContent; + + const handleMessage = (event: MessageEvent) => { + if (event.data.type === 'resize') { + setIframeHeight(`${event.data.height}px`); + iframe.style.height = `${event.data.height}px`; + } + }; + + window.addEventListener('message', handleMessage); + + return () => { + window.removeEventListener('message', handleMessage); + }; } }, [htmlContent]); return ( -
+
+ />
); }; @@ -140,34 +172,38 @@ const ArticleModal: React.FC = ({object, actor, comments, foc size='bleed' width={modalSize} > -
-
- {canNavigateBack && ( -
-
+ )} +
+
+
+ {/*
- )} -
-
-
- {/*
-
-
- {object.type === 'Note' && ( -
- { - setReplyBoxFocused(true); - }} - /> +
+
+ {object.type === 'Note' && ( + { + setReplyBoxFocused(true); + }} + />)} + {object.type === 'Article' && ( + + )} @@ -214,10 +250,7 @@ const ArticleModal: React.FC = ({object, actor, comments, foc ); })}
- )} - {object.type === 'Article' && ( - - )} +
);