chore: simulate cross-origin iframe in editor demo page

serlo · Feb 5, 2025 · 4c83cd3 · 4c83cd3
1 parent 244c7fb
commit 4c83cd3
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 37 deletions.
diff --git a/packages/editor/demo/iframed-editor-and-preview/index.html b/packages/editor/demo/iframed-editor-and-preview/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en" style="height: 100%">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Editor & Preview (iframed)</title>
+  </head>
+  <body style="margin: 0; height: 100%">
+    <div id="root" style="height: 100%"></div>
+    <script
+      type="module"
+      src="/src/___dev-demo/iframed-editor-and-preview.tsx"
+    ></script>
+  </body>
+</html>
diff --git a/packages/editor/demo/react-iframe/index.html b/packages/editor/demo/react-iframe/index.html
diff --git a/packages/editor/index.html b/packages/editor/index.html
@@ -44,13 +44,18 @@
   <body>
     <main>
       <h1>🐦 ✏️ 🚀</h1>
+      Test the editor code with hot reload
 
-      <h4>hot-reloads the editor:</h4>
-      <a href="/demo/react/">react</a> (edit only)<br />
-      <a href="/demo/react-preview/">react</a> (with preview)<br />
-      <a href="/demo/react-iframe/">iframed react</a> (edit only)
+      <h4>React component (hot-reloads the editor)</h4>
+      <a href="/demo/iframed-editor-and-preview/">editor & preview (iframed)</a
+      ><br />
+      In the LTI integration the editor can be in a cross-origin iframe limiting
+      what it can do. Please check if your changes work here.<br />
+      <br />
+      <a href="/demo/react/">only editor</a><br />
+      <a href="/demo/react-preview/">editor & preview</a><br />
 
-      <h4>hot-reloads the component (but not the editor):</h4>
+      <h4>Web component (hot-reloads the component but not the editor)</h4>
       <a href="/demo/web-component/">web component</a> (edit only)<br />
       <a href="/demo/lit/">lit</a> (with preview)
     </main>

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -31,7 +31,8 @@
   "scripts": {
     "_eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "_prettier": "prettier .",
-    "dev": "vite",
+    "dev": "echo 'Demo page ready under \n\nhttp://localhost:3000/\n\nDo not open the demo page on port 3001!' && npm-run-all --parallel 'vite --port 3000' 'vite --port 3001'",
+    "vite": "vite",
     "build": "vite build",
     "format": "npm-run-all --continue-on-error \"format:*\"",
     "format:eslint": "yarn _eslint --fix",

diff --git a/packages/editor/src/___dev-demo/iframed-editor-and-preview.tsx b/packages/editor/src/___dev-demo/iframed-editor-and-preview.tsx
@@ -0,0 +1,26 @@
+import { createRoot } from 'react-dom/client'
+
+createRoot(document.getElementById('root')!).render(
+  <iframe
+    style={{ width: '100%', height: '100%', borderWidth: '0' }}
+    // Embedding localhost:3001 on host page localhost:3000 simulates cross-origin. Important because a lot of iframe, cookie, CSP security measures are only in effect for cross-origin iframes.
+    src="http://localhost:3001/demo/react-preview/"
+    sandbox={`
+      allow-downloads
+      allow-forms
+      allow-modals
+      allow-popups
+      allow-popups-to-escape-sandbox
+      allow-presentation
+      allow-same-origin
+      allow-scripts
+      allow-storage-access-by-user-activation
+    `}
+    allow={`
+      clipboard-read https://editor.serlo.org https://staging.editor.serlo.org https://dev.editor.serlo.org https://editor.serlo-staging.dev;
+      clipboard-write https://editor.serlo.org https://staging.editor.serlo.org https://dev.editor.serlo.org https://editor.serlo-staging.dev;
+      fullscreen https://editor.serlo.org https://staging.editor.serlo.org https://dev.editor.serlo.org https://editor.serlo-staging.dev;
+      autoplay https://editor.serlo.org https://staging.editor.serlo.org https://dev.editor.serlo.org https://editor.serlo-staging.dev
+    `}
+  ></iframe>
+)