fix: fix iframe styles and height adjustments

Author: Spring3

render/components/Iframe.tsx

@@ -1,7 +1,8 @@
 import React, {
-  useEffect, forwardRef, useCallback, MouseEventHandler
+  useEffect, useCallback, MouseEventHandler, useState
 } from 'react';
 import { css } from '@emotion/react';
+import throttle from 'lodash/throttle';
 import { useOvermindEffects } from '../store';
 
 type IframeProps = {
@@ -10,7 +11,7 @@ type IframeProps = {
   html: string;
   width?: string;
   cssCode?: string;
-  onResize?: () => void;
+  onResize?: (iframe: HTMLIFrameElement | null) => void;
 }
 
 const styles = {
@@ -20,27 +21,43 @@ const styles = {
   `
 };
 
-const Iframe = forwardRef<HTMLIFrameElement, IframeProps>(({
+const Iframe = ({
   className, html, cssCode, onResize, name, width
-}: IframeProps, ref) => {
+}: IframeProps) => {
   const effects = useOvermindEffects();
+  const [iframe, setIframe] = useState<HTMLIFrameElement | null>(null);
+  const [isLoaded, setLoaded] = useState(false);
 
-  const handleResize = useCallback(() => {
-    if (ref.current) {
-      ref.current.height = ref.current.contentDocument.body.scrollHeight || 0;
-      ref.current.width = width ? width : ref.current.contentDocument.body.scrollWidth || 0;
+  const handleResize = useCallback(throttle(() => {
+    if (iframe) {
+      iframe.height = iframe.contentDocument.body.scrollHeight + 30;
+      iframe.width = width ? width : iframe.contentDocument.body.scrollWidth || 0;
     }
 
     if (onResize) {
-      onResize();
+      onResize(iframe);
     }
-  }, [onResize, width]);
+  }, 300), [onResize, width, html, iframe]);
 
-  useEffect(() => () => {
-    window.removeEventListener('resize', handleResize);
-  }, [handleResize]);
+  const handleFocus = useCallback(() => {
+    if (iframe) {
+      iframe.contentWindow?.getSelection()?.empty();
+    }
+  }, [iframe]);
+
+  useEffect(() => {
+    if (isLoaded) {
+      handleResize();
+      window.addEventListener('resize', handleResize);
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [isLoaded, handleResize]);
 
   const onLoad = useCallback(() => {
+    setLoaded(true);
     const interceptIframeInternalRedirect: MouseEventHandler<HTMLElement> = (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -57,37 +74,41 @@ const Iframe = forwardRef<HTMLIFrameElement, IframeProps>(({
       }
     };
 
-    if (ref.current) {
-      for (const elem of ref.current.contentDocument?.body.querySelectorAll(['a', 'img', 'button', 'input']) ?? []) {
+    if (iframe) {
+      for (const elem of iframe.contentDocument?.body.querySelectorAll(['a', 'img', 'button', 'input']) ?? []) {
         elem.removeEventListener('click', interceptIframeInternalRedirect);
         elem.addEventListener('click', interceptIframeInternalRedirect);
       }
 
+      iframe.contentWindow?.addEventListener('blur', handleFocus);
+      iframe.contentWindow?.onbeforeunload = () => {
+        iframe.contentWindow?.removeEventListener('blur', handleFocus);
+      };
+
       if (cssCode) {
         const cssContainer = document.createElement('style');
         // styles.type = 'text/css';
         cssContainer.innerText = cssCode;
-        ref.current.contentDocument?.head.appendChild(cssContainer);
+        iframe.contentDocument?.head.appendChild(cssContainer);
       }
+
       handleResize();
-      window.addEventListener('resize', handleResize);
     }
-  }, [cssCode, handleResize]);
+  }, [cssCode, setLoaded, handleResize, handleFocus]);
 
   return (
     <iframe
       css={styles.iframe}
       title={name}
       frameBorder="0"
       width={width}
-      height={html ? undefined : 20}
-      ref={ref}
+      ref={setIframe}
       className={className}
       srcDoc={html}
       onLoad={onLoad}
     />
   );
-});
+};
 
 export {
   Iframe

render/components/MarkdownEditor.tsx

@@ -342,21 +342,20 @@ type MarkdownTextProps = {
 }
 
 const MarkdownText = ({ markdownText, name, className }: MarkdownTextProps) => {
-  const iframeRef = createRef<HTMLIFrameElement>();
   const theme = useTheme() as typeof Theme;
 
   const genericIframeStyles = `
       body {
         margin: 0;
         font-family: Roboto,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,sans-serif;
-        font-size: 1rem;
+        font-size: 14px;
         font-weight: 500;
         color: ${theme.normalText};
       }
 
       a {
         color: ${theme.main};
-        font-size: 1rem;
+        font-size: 14px;
         padding: 2px;
         cursor: pointer;
       }
@@ -387,26 +386,15 @@ const MarkdownText = ({ markdownText, name, className }: MarkdownTextProps) => {
       }
     `;
 
-  const adjustIframeSize = () => {
-    const iframe = iframeRef.current;
-    if (iframe) {
-      iframe.height = `${iframe.contentDocument?.body.scrollHeight || 0 + 35}`;
-    }
-  };
-
-  const throttledAdjustIframeSize = useCallback(throttle(adjustIframeSize, 300), []);
-
   const markdown = xss(converter.makeHtml(markdownText));
 
   return (
     <Iframe
-      ref={iframeRef}
       className={className}
       width="100%"
       name={name}
       html={markdown}
       cssCode={genericIframeStyles}
-      onResize={throttledAdjustIframeSize}
     />
   );
 };

render/views/IssueDetailsPage.tsx

@@ -123,8 +123,6 @@ const IssueDetailsPage = () => {
     );
   }
 
-  console.log('currentIssue', JSON.stringify(currentIssue, null, 2));
-
   return (
     <div
       css={styles.pageWrapper}

render/views/__tests__/IssueDetailsPage.spec.jsx

@@ -11,7 +11,7 @@ import {
 import '@testing-library/jest-dom/extend-expect';
 
 import { theme } from '../../theme';
-import IssueDetailsPage from '../IssueDetailsPage';
+import { IssueDetailsPage } from '../IssueDetailsPage';
 import { getInstance, reset, initialize } from '../../../common/request';
 
 const mockStore = configureStore([thunk]);