Merge pull request #4314 from serlo/plugin-edusharing-use-open-iframe…

…-resizer fix(plugin-edusharing): use open-iframe-resizer
serlo · Nov 28, 2024 · 35d91de · 35d91de
2 parents e6fee9b + a595636
commit 35d91de
Show file tree

Hide file tree

Showing 18 changed files with 37 additions and 151 deletions.
diff --git a/.yarn/cache/@babel-helper-annotate-as-pure-npm-7.25.9-a0f89e14a0-41edda10df.zip b/.yarn/cache/@babel-helper-annotate-as-pure-npm-7.25.9-a0f89e14a0-41edda10df.zip
diff --git a/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.25.9-1efda825e9-91dd5f203e.zip b/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.25.9-1efda825e9-91dd5f203e.zip
diff --git a/...n/cache/@babel-helper-member-expression-to-functions-npm-7.25.9-761e6fec27-8e2f1979b6.zip b/...n/cache/@babel-helper-member-expression-to-functions-npm-7.25.9-761e6fec27-8e2f1979b6.zip
diff --git a/.yarn/cache/@babel-helper-optimise-call-expression-npm-7.25.9-d8006fbada-f09d0ad60c.zip b/.yarn/cache/@babel-helper-optimise-call-expression-npm-7.25.9-d8006fbada-f09d0ad60c.zip
diff --git a/.yarn/cache/@babel-helper-replace-supers-npm-7.25.9-664068b76b-84f40e1252.zip b/.yarn/cache/@babel-helper-replace-supers-npm-7.25.9-664068b76b-84f40e1252.zip
diff --git a/...e/@babel-helper-skip-transparent-expression-wrappers-npm-7.25.9-215072fae0-fdbb524893.zip b/...e/@babel-helper-skip-transparent-expression-wrappers-npm-7.25.9-215072fae0-fdbb524893.zip
diff --git a/...e/@babel-plugin-proposal-private-property-in-object-npm-7.21.11-d474c5e67a-1b880543bc.zip b/...e/@babel-plugin-proposal-private-property-in-object-npm-7.21.11-d474c5e67a-1b880543bc.zip
diff --git a/.yarn/cache/@open-iframe-resizer-core-npm-1.2.1-521060cbad-611919d099.zip b/.yarn/cache/@open-iframe-resizer-core-npm-1.2.1-521060cbad-611919d099.zip
diff --git a/.yarn/cache/@open-iframe-resizer-react-npm-1.2.1-cbd37663b7-a21ea5a890.zip b/.yarn/cache/@open-iframe-resizer-react-npm-1.2.1-cbd37663b7-a21ea5a890.zip
diff --git a/.yarn/cache/iframe-resizer-react-npm-1.1.1-bdc4fb4c8f-fd3db2dfd3.zip b/.yarn/cache/iframe-resizer-react-npm-1.1.1-bdc4fb4c8f-fd3db2dfd3.zip
diff --git a/.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip b/.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip
diff --git a/apps/web/src/components/content/iframe-resizer.tsx b/apps/web/src/components/content/iframe-resizer.tsx
diff --git a/apps/web/src/components/content/lazy-iframe-resizer.tsx b/apps/web/src/components/content/lazy-iframe-resizer.tsx
diff --git a/apps/web/src/pages/content-only/[...slug].tsx b/apps/web/src/pages/content-only/[...slug].tsx
@@ -1,6 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
+import Script from 'next/script'
 
-import { LazyIframeResizer } from '@/components/content/lazy-iframe-resizer'
 import { Entity } from '@/components/entity/entity'
 import { FrontendClientBase } from '@/components/frontend-client-base/frontend-client-base'
 import { HeadTags } from '@/components/head-tags'
@@ -52,7 +52,10 @@ export default renderedPageNoHooks<SlugProps>(({ pageData }) => {
       serloEntityData={{ entityId }}
       authorization={pageData.authorization}
     >
-      <LazyIframeResizer />
+      <Script
+        src="https://cdn.jsdelivr.net/npm/@open-iframe-resizer/[email protected]/dist/index.min.js"
+        strategy="lazyOnload"
+      />
       {pageData.metaData ? (
         <HeadTags
           data={pageData.metaData}

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -47,6 +47,7 @@
     "@serlo/katex-styles": "1.0.1"
   },
   "dependencies": {
+    "@open-iframe-resizer/react": "1.2.1",
     "@serlo/katex-styles": "1.0.1",
     "@vidstack/react": "next",
     "dompurify": "^3.2.0",
@@ -91,8 +92,6 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "fp-ts": "^2.16.9",
-    "iframe-resizer": "^4.4.5",
-    "iframe-resizer-react": "^1.1.1",
     "io-ts": "^2.2.21",
     "is-hotkey": "0.2.0",
     "jest": "^29.7.0",

diff --git a/packages/editor/src/plugins/edusharing-asset/renderer.tsx b/packages/editor/src/plugins/edusharing-asset/renderer.tsx
@@ -1,5 +1,5 @@
 import EdusharingIcon from '@editor/editor-ui/assets/edusharing.svg'
-import IframeResizer from 'iframe-resizer-react'
+import { IframeResizer } from '@open-iframe-resizer/react'
 import * as t from 'io-ts'
 import { memo, useEffect, useState } from 'react'
 
@@ -32,7 +32,7 @@ const EmbedJson = t.type({
 })
 
 const iframeResizerHtml =
-  '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.js"></script>'
+  '<script type="module" src="https://cdn.jsdelivr.net/npm/@open-iframe-resizer/[email protected]/dist/index.min.js"></script>'
 
 const cssReset = 'padding: 0; margin: 0; border: 0;'
 
@@ -109,12 +109,15 @@ export function EdusharingAssetRenderer(props: {
   )
 
   function buildHtml(htmlSnippet: string, defineContainerHeight: boolean) {
-    // Hack: Some learning apps size themselves to be a little bit too tall and a scroll bar appears -> 97% height to prevent this
+    // Hack: height: 97% -> Some learning apps size themselves to be a little bit too tall and a scroll bar appears -> 97% height to prevent this
+    // Hack: overflow-y: hidden -> Sometimes after setting the correct iframe height the vertical scroll bar does not disappear.
     return `
-      <html style="${cssReset}${defineContainerHeight ? 'height: 97%;' : ''}">
+      <html style="${cssReset}${defineContainerHeight ? 'height: 97%;' : 'overflow-y: hidden;'}">
+        <head>
+          ${defineContainerHeight ? '' : iframeResizerHtml}
+        </head>
         <body style="${cssReset}${defineContainerHeight ? 'height: 100%;' : ''}">
           ${htmlSnippet}
-          ${defineContainerHeight ? '' : iframeResizerHtml}
         </body>
       </html> 
     `
@@ -311,10 +314,8 @@ export function EdusharingAssetRenderer(props: {
     if (embedHtml === null) return
 
     // IframeResizer properties:
-    // - `heightCalculationMethod="lowestElement"` -> Documentation says its the most accurate (however worse performance than others)
     // - `srcDoc` -> Sets the iframe content
     // - `checkOrigin={false}` -> Necessary when using srcDoc
-    // - `style={{ width: '1px', minWidth: '100%' }}` -> Makes Iframe have width 100% and take as much height as it needs. Recommended by documentation.
     // - Missing `sandbox` -> Should put no restrictions on what the iframe can do: A) Make iframe send the same cookies as the host. B) Allow it to execute scripts. Both important to be able to fetch video.
     return (
       <div
@@ -335,13 +336,9 @@ export function EdusharingAssetRenderer(props: {
           />
         ) : (
           <MemoizedIframeResizer
-            heightCalculationMethod="lowestElement"
             checkOrigin={false}
             srcDoc={embedHtml}
-            style={{
-              width: '1px',
-              minWidth: '100%',
-            }}
+            style={{ width: '100%' }}
           />
         )}
       </div>

diff --git a/packages/editor/src/plugins/serlo-injection/renderer.tsx b/packages/editor/src/plugins/serlo-injection/renderer.tsx
@@ -1,4 +1,4 @@
-import IframeResizer from 'iframe-resizer-react'
+import { IframeResizer } from '@open-iframe-resizer/react'
 
 export function SerloInjectionRenderer(props: {
   contentId: string | undefined
@@ -10,8 +10,6 @@ export function SerloInjectionRenderer(props: {
       key={url}
       src={url}
       checkOrigin={false}
-      heightCalculationMethod="lowestElement"
-      sizeHeight
       style={{
         width: '1px',
         minWidth: '100%',

diff --git a/yarn.lock b/yarn.lock
@@ -225,15 +225,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-annotate-as-pure@npm:7.25.9"
-  dependencies:
-    "@babel/types": ^7.25.9
-  checksum: 41edda10df1ae106a9b4fe617bf7c6df77db992992afd46192534f5cff29f9e49a303231733782dd65c5f9409714a529f215325569f14282046e9d3b7a1ffb6c
-  languageName: node
-  linkType: hard
-
 "@babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -310,23 +301,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.21.0":
-  version: 7.25.9
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.25.9"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.25.9
-    "@babel/helper-member-expression-to-functions": ^7.25.9
-    "@babel/helper-optimise-call-expression": ^7.25.9
-    "@babel/helper-replace-supers": ^7.25.9
-    "@babel/helper-skip-transparent-expression-wrappers": ^7.25.9
-    "@babel/traverse": ^7.25.9
-    semver: ^6.3.1
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 91dd5f203ed04568c70b052e2f26dfaac7c146447196c00b8ecbb6d3d2f3b517abadb985d3321a19d143adaed6fe17f7f79f8f50e0c20e9d8ad83e1027b42424
-  languageName: node
-  linkType: hard
-
 "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15"
@@ -390,16 +364,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-member-expression-to-functions@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-member-expression-to-functions@npm:7.25.9"
-  dependencies:
-    "@babel/traverse": ^7.25.9
-    "@babel/types": ^7.25.9
-  checksum: 8e2f1979b6d596ac2a8cbf17f2cf709180fefc274ac3331408b48203fe19134ed87800774ef18838d0275c3965130bae22980d90caed756b7493631d4b2cf961
-  languageName: node
-  linkType: hard
-
 "@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/helper-module-imports@npm:7.22.15"
@@ -480,15 +444,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-optimise-call-expression@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-optimise-call-expression@npm:7.25.9"
-  dependencies:
-    "@babel/types": ^7.25.9
-  checksum: f09d0ad60c0715b9a60c31841b3246b47d67650c512ce85bbe24a3124f1a4d66377df793af393273bc6e1015b0a9c799626c48e53747581c1582b99167cc65dc
-  languageName: node
-  linkType: hard
-
 "@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
   version: 7.22.5
   resolution: "@babel/helper-plugin-utils@npm:7.22.5"
@@ -536,19 +491,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-replace-supers@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-replace-supers@npm:7.25.9"
-  dependencies:
-    "@babel/helper-member-expression-to-functions": ^7.25.9
-    "@babel/helper-optimise-call-expression": ^7.25.9
-    "@babel/traverse": ^7.25.9
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 84f40e12520b7023e52d289bf9d569a06284879fe23bbbacad86bec5d978b2669769f11b073fcfeb1567d8c547168323005fda88607a4681ecaeb4a5cdd48bb9
-  languageName: node
-  linkType: hard
-
 "@babel/helper-simple-access@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-simple-access@npm:7.22.5"
@@ -577,16 +519,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-skip-transparent-expression-wrappers@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.25.9"
-  dependencies:
-    "@babel/traverse": ^7.25.9
-    "@babel/types": ^7.25.9
-  checksum: fdbb5248932198bc26daa6abf0d2ac42cab9c2dbb75b7e9f40d425c8f28f09620b886d40e7f9e4e08ffc7aaa2cefe6fc2c44be7c20e81f7526634702fb615bdc
-  languageName: node
-  linkType: hard
-
 "@babel/helper-split-export-declaration@npm:^7.22.6":
   version: 7.22.6
   resolution: "@babel/helper-split-export-declaration@npm:7.22.6"
@@ -836,20 +768,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-private-property-in-object@npm:^7.21.11":
-  version: 7.21.11
-  resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.21.11"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.18.6
-    "@babel/helper-create-class-features-plugin": ^7.21.0
-    "@babel/helper-plugin-utils": ^7.20.2
-    "@babel/plugin-syntax-private-property-in-object": ^7.14.5
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 1b880543bc5f525b360b53d97dd30807302bb82615cd42bf931968f59003cac75629563d6b104868db50abd22235b3271fdf679fea5db59a267181a99cc0c265
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-async-generators@npm:^7.8.4":
   version: 7.8.4
   resolution: "@babel/plugin-syntax-async-generators@npm:7.8.4"
@@ -4278,6 +4196,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@open-iframe-resizer/core@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@open-iframe-resizer/core@npm:1.2.1"
+  checksum: 611919d099b9490da2a469ac598cbaddeea03df5a139ade27246c719cc32629645cf94d288592ac4bf2cb188b11e8c46b40f5db1df4feed146bd3ab4cf492b0a
+  languageName: node
+  linkType: hard
+
+"@open-iframe-resizer/react@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@open-iframe-resizer/react@npm:1.2.1"
+  dependencies:
+    "@open-iframe-resizer/core": 1.2.1
+  peerDependencies:
+    react: ">=17.0.0"
+    react-dom: ">=17.0.0"
+  checksum: a21ea5a890320b6d55e86d984d772da4ab27052a3196e95cc4f1a082f69ef860605d380d3a168d9b653518b4aafc938fc2edaa9c44dbc336fcc432161e121565
+  languageName: node
+  linkType: hard
+
 "@ory/client@npm:^1.15.10":
   version: 1.15.10
   resolution: "@ory/client@npm:1.15.10"
@@ -5837,6 +5774,7 @@ __metadata:
     "@fortawesome/free-regular-svg-icons": 6.6.0
     "@fortawesome/free-solid-svg-icons": 6.6.0
     "@fortawesome/react-fontawesome": ^0.2.2
+    "@open-iframe-resizer/react": 1.2.1
     "@prezly/slate-lists": 0.116.0
     "@radix-ui/react-dialog": ^1.1.2
     "@radix-ui/react-navigation-menu": ^1.2.1
@@ -5867,8 +5805,6 @@ __metadata:
     eslint-plugin-react: ^7.37.2
     eslint-plugin-react-hooks: ^5.0.0
     fp-ts: ^2.16.9
-    iframe-resizer: ^4.4.5
-    iframe-resizer-react: ^1.1.1
     io-ts: ^2.2.21
     is-hotkey: 0.2.0
     jest: ^29.7.0
@@ -11663,22 +11599,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iframe-resizer-react@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "iframe-resizer-react@npm:1.1.1"
-  dependencies:
-    "@babel/plugin-proposal-private-property-in-object": ^7.21.11
-    iframe-resizer: ^4.4.4
-    warning: ^4.0.3
-  peerDependencies:
-    prop-types: ^15.7.2
-    react: ^16.13.1 || ^18.0.0
-    react-dom: ^16.13.1 || ^18.0.0
-  checksum: fd3db2dfd3e1455e2f8150ed0cc4068b8970389eca478d13e2ca6408e1fe0a85425f7b2cb004e5a8eee0e7d4ed304774cad4b1b40d9a7467c2db3ed4851c4572
-  languageName: node
-  linkType: hard
-
-"iframe-resizer@npm:^4.4.4, iframe-resizer@npm:^4.4.5":
+"iframe-resizer@npm:^4.4.5":
   version: 4.4.5
   resolution: "iframe-resizer@npm:4.4.5"
   checksum: fa2493daba2df7578866aeb5fceabcf2129da9327abd7d26b4f16e9e7109eddcb97a8ba7ea6e94b043705f13bcbe6ae307e67cc48c24f7bd9d948d491a150163
@@ -19432,15 +19353,6 @@ react-mathquill@Entkenntnis/tmp-react-mathquill:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "warning@npm:4.0.3"
-  dependencies:
-    loose-envify: ^1.0.0
-  checksum: 4f2cb6a9575e4faf71ddad9ad1ae7a00d0a75d24521c193fa464f30e6b04027bd97aa5d9546b0e13d3a150ab402eda216d59c1d0f2d6ca60124d96cd40dfa35c
-  languageName: node
-  linkType: hard
-
 "watchpack@npm:2.4.0":
   version: 2.4.0
   resolution: "watchpack@npm:2.4.0"