Merge pull request #31 from NearSocial/dev

Release 1.2.0

CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 1.2.0
+
+- Added support for using [Iframe Resizer](https://github.com/davidjbradshaw/iframe-resizer) for rendering responsive iframes. This library automatically resizes the iframe to match the child content size to avoid scrollbars on the iframe itself. You can use the library by adding an `iframeResizer` prop to an `<iframe>` tag:
+
+```jsx
+return (
+  <div>
+    <iframe
+      iframeResizer
+      src="https://davidjbradshaw.com/iframe-resizer/example/frame.content.html"
+    />
+  </div>
+);
+```
+
+You can pass in Iframe Resizer options as an object:
+
+```jsx
+return (
+  <div>
+    <iframe
+      iframeResizer={{ log: true }}
+      src="https://davidjbradshaw.com/iframe-resizer/example/frame.content.html"
+    />
+  </div>
+);
+```
+
+It's important to note that the child page rendered by the iframe must include this script in order for the resizing to work:
+
+```html
+<script
+  type="text/javascript"
+  src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.js"
+></script>
+```
+
 ## 1.1.0
 
 - Add `polygon` tag.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "near-social-vm",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Near Social VM",
   "main": "dist/index.js",
   "files": [
@@ -45,6 +45,7 @@
     "deep-equal": "^2.2.0",
     "elliptic": "^6.5.4",
     "idb": "^7.1.1",
+    "iframe-resizer-react": "^1.1.0",
     "local-storage": "^2.0.0",
     "mdast-util-find-and-replace": "^2.0.0",
     "nanoid": "^4.0.1",

src/lib/components/SecureIframe.js

@@ -1,14 +1,66 @@
 import React, { useCallback, useEffect, useState } from "react";
+import IframeResizer from "iframe-resizer-react";
 import { deepCopy, deepEqual } from "../data/utils";
 
 export default function SecureIframe(allProps) {
-  const { className, style, src, srcDoc, title, message, onMessage } = allProps;
-  const usedProps = { className, style, src, srcDoc, title };
+  const {
+    className,
+    id,
+    style,
+    src,
+    srcDoc,
+    title,
+    message,
+    onMessage,
+    iframeResizer,
+  } = allProps;
+
+  const usedProps = { className, id, style, src, srcDoc, title };
 
   const [loaded, setLoaded] = useState(false);
   const [prevMessage, setPrevMessage] = useState(undefined);
   const ref = React.useRef();
 
+  const returnIframeResizerProps = () => {
+    const result = {
+      ...usedProps,
+      style: style ?? { width: "1px", minWidth: "100%" },
+      checkOrigin: false,
+    };
+
+    const allIframeResizerProps =
+      typeof iframeResizer === "object" ? iframeResizer : {};
+
+    const allowedIframeResizerProps = [
+      "log",
+      "autoResize",
+      "bodyBackground",
+      "bodyMargin",
+      "bodyPadding",
+      "inPageLinks",
+      "heightCalculationMethod",
+      "maxHeight",
+      "maxWidth",
+      "minHeight",
+      "minWidth",
+      "minWidth",
+      "resizeFrom",
+      "scrolling",
+      "sizeHeight",
+      "sizeWidth",
+      "tolerance",
+      "widthCalculationMethod",
+    ];
+
+    Object.keys(allIframeResizerProps).forEach((key) => {
+      if (allowedIframeResizerProps.includes(key)) {
+        result[key] = allIframeResizerProps[key];
+      }
+    });
+
+    return result;
+  };
+
   const onMessageEvent = useCallback(
     (event) => {
       if (event.source !== ref.current.contentWindow) {
@@ -37,6 +89,17 @@ export default function SecureIframe(allProps) {
     setLoaded(false);
   }, [src, srcDoc]);
 
+  if (iframeResizer) {
+    return (
+      <IframeResizer
+        {...returnIframeResizerProps()}
+        forwardRef={ref}
+        sandbox="allow-scripts"
+        onLoad={() => setLoaded(true)}
+      />
+    );
+  }
+
   return (
     <iframe
       {...usedProps}

yarn.lock

@@ -4488,6 +4488,19 @@ ieee754@^1.2.1:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+iframe-resizer-react@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/iframe-resizer-react/-/iframe-resizer-react-1.1.0.tgz#5009e019b7a5c7f1c009bff5bcdf0dbf33557465"
+  integrity sha512-FrytSq91AIJaDgE+6uK/Vdd6IR8CrwLoZ6eGmL2qQMPTzF0xlSV2jaSzRRUh5V2fttD7vzl21jvBl97bV40eBw==
+  dependencies:
+    iframe-resizer "^4.3.0"
+    warning "^4.0.3"
+
+iframe-resizer@^4.3.0:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.3.6.tgz#61d92c1adefe5d416bff4fbf80c7f1f74be70ec0"
+  integrity sha512-wz0WodRIF6eP0oGQa5NIP1yrITAZ59ZJvVaVJqJRjaeCtfm461vy2C3us6CKx0e7pooqpIGLpVMSTzrfAjX9Sg==
+
 ignore@^5.2.0:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"