feat: use old mechanism

spaenleh · spaenleh · commit 2d235aec3a68 · 2022-11-18T05:14:46.000+01:00
diff --git a/public/index.html b/public/index.html
@@ -29,6 +29,12 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Code Capsule App</title>
+    <script>
+      document.domain = '%REACT_APP_GRAASP_DOMAIN%';
+      if (window.frameElement) {
+        window.frameElement.style['min-height'] = '70vh';
+      }
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/components/diffView/DiffView.tsx b/src/components/diffView/DiffView.tsx
@@ -1,6 +1,8 @@
-import { FC } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import ReactDiffViewer from 'react-diff-viewer';
 
+import { useLocalContext } from '@graasp/apps-query-client';
+
 import { Stack } from '@mui/material';
 
 import { DIFF_VIEW_SETTINGS_NAME } from '../../config/appSettingsTypes';
@@ -9,13 +11,57 @@ import { DEFAULT_DIFF_VIEW_SETTINGS } from '../../config/settings';
 import { DiffViewSettingsKeys } from '../../interfaces/settings';
 import { useSettings } from '../context/SettingsContext';
 
+const ADAPT_HEIGHT_TIMEOUT = 50;
+
 const DiffView: FC = () => {
   const {
     [DIFF_VIEW_SETTINGS_NAME]: diffViewSettings = DEFAULT_DIFF_VIEW_SETTINGS,
   } = useSettings();
+  const context = useLocalContext();
+  const rootRef = useRef();
+  const [height, setHeight] = useState(0);
+
+  const adaptHeight = (): void => {
+    // set timeout to leave time for the height to be set
+    setTimeout(() => {
+      // adapt height when not in standalone (so when in an iframe)
+      if (!context?.get('standalone')) {
+        // get height from the root element and add a small margin
+        // @ts-ignore
+        const clientRect = rootRef?.current?.getBoundingClientRect();
+        if (window.frameElement && clientRect) {
+          const newHeight = clientRect.height;
+          if (height !== newHeight) {
+            setHeight(newHeight);
+            // @ts-ignore
+            window.frameElement.style['min-height'] = `${newHeight}px`;
+            // @ts-ignore
+            window.frameElement.style.overflowY = 'hidden';
+            // @ts-ignore
+            window.frameElement.scrolling = 'no';
+            // @ts-ignore
+            window.frameElement.style.height = `${newHeight}px`;
+          }
+        }
+      }
+    }, ADAPT_HEIGHT_TIMEOUT);
+  };
+
+  useEffect(
+    () => {
+      adaptHeight();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
   return (
-    <Stack data-cy={DIFF_VIEW_CONTAINER_CY} direction="column" m={2}>
+    <Stack
+      data-cy={DIFF_VIEW_CONTAINER_CY}
+      direction="column"
+      m={2}
+      ref={rootRef}
+    >
       <ReactDiffViewer
         linesOffset={diffViewSettings[DiffViewSettingsKeys.LinesOffset]}
         oldValue={diffViewSettings[DiffViewSettingsKeys.OldCode]}
