Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(plugin-edusharing): use open-iframe-resizer #4314

Merged
merged 6 commits into from
Nov 28, 2024
Merged

fix(plugin-edusharing): use open-iframe-resizer #4314

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
61c10d4
fix(plugin-edusharing): use `open-iframe-resizer`
LarsTheGlidingSquirrel Nov 25, 2024
f6ebb5b
Merge remote-tracking branch 'origin/staging' into plugin-edusharing-…
LarsTheGlidingSquirrel Nov 25, 2024
64976f7
fix(plugin-edusharing): prevent lingering scroll bar
LarsTheGlidingSquirrel Nov 25, 2024
89e707a
refactor(plugin-injection): use open-iframe-resizer
hejtful Nov 25, 2024
e2c1aed
Merge pull request #4315 from serlo/refactor/serlo-injection-open-ifr…
LarsTheGlidingSquirrel Nov 25, 2024
a595636
refactor: replace `iframe-resizer` fully with `open-iframe-resizer`
LarsTheGlidingSquirrel Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .yarn/cache/@open-iframe-resizer-core-npm-1.2.1-521060cbad-611919d099.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/@open-iframe-resizer-react-npm-1.2.1-cbd37663b7-a21ea5a890.zip
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions packages/editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
21 changes: 9 additions & 12 deletions packages/editor/src/plugins/edusharing-asset/renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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/core@1.2.1/dist/index.min.js"></script>'

const cssReset = 'padding: 0; margin: 0; border: 0;'

Expand Down Expand Up @@ -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>
`
Expand Down Expand Up @@ -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
Expand All @@ -335,13 +336,9 @@ export function EdusharingAssetRenderer(props: {
/>
) : (
<MemoizedIframeResizer
heightCalculationMethod="lowestElement"
checkOrigin={false}
srcDoc={embedHtml}
style={{
width: '1px',
minWidth: '100%',
}}
style={{ width: '100%' }}
/>
)}
</div>
Expand Down
20 changes: 20 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4278,6 +4278,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"
Expand Down Expand Up @@ -5837,6 +5856,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
Expand Down