EmbeddedStatus: listen for embed.js iframe events and autosize height

app/application.ts

@@ -1,5 +1,8 @@
 import loadPolyfills from './soapbox/load_polyfills';
 
+// Load iframe event listener
+require('./soapbox/iframe');
+
 // @ts-ignore
 require.context('./images/', true);
 

app/soapbox/features/embedded-status/index.tsx

@@ -6,6 +6,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
 import Status from 'soapbox/components/status';
 import { Spinner } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { iframeId } from 'soapbox/iframe';
 import { makeGetStatus } from 'soapbox/selectors';
 
 interface IEmbeddedStatus {
@@ -34,6 +35,14 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
       .catch(() => setLoading(false));
   }, []);
 
+  useEffect(() => {
+    window.parent.postMessage({
+      type: 'setHeight',
+      id: iframeId,
+      height: document.getElementsByTagName('html')[0].scrollHeight,
+    }, '*');
+  }, [status, loading]);
+
   const renderInner = () => {
     if (loading) {
       return <Spinner />;

app/soapbox/iframe.ts

@@ -0,0 +1,14 @@
+/** ID of this iframe (given by embed.js) when embedded on a page. */
+let iframeId: any;
+
+/** Receive iframe messages. */
+// https://github.com/mastodon/mastodon/pull/4853
+const handleMessage = (e: MessageEvent) => {
+  if (e.data?.type === 'setHeight') {
+    iframeId = e.data?.id;
+  }
+};
+
+window.addEventListener('message', handleMessage);
+
+export { iframeId };