Merge pull request #4356 from serlo/feat/iframe-demo

feat(editor): add iframed demo
serlo · Dec 17, 2024 · f3e4897 · f3e4897
2 parents 6aed62c + 729f39a
commit f3e4897
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/packages/editor/demo/react-iframe/index.html b/packages/editor/demo/react-iframe/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>editor react | in iframe</title>
+    <style>
+      body {
+        background-color: #faf5f0;
+        text-align: center;
+        padding: 0;
+        margin: 0;
+      }
+      iframe {
+        border: none;
+        width: calc(100vw - 7rem);
+        height: calc(100vh - 5rem);
+        margin-inline: auto;
+        background-color: white;
+        padding: 2rem;
+        max-width: 800px;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe
+      allow="clipboard-read *; clipboard-write *; fullscreen *"
+      src="/demo/react/"
+    ></iframe>
+  </body>
+</html>
diff --git a/packages/editor/index.html b/packages/editor/index.html
@@ -47,7 +47,8 @@ <h1>🐦 ✏️ 🚀</h1>
 
       <h4>hot-reloads the editor:</h4>
       <a href="/demo/react/">react</a> (edit only)<br />
-      <a href="/demo/react-preview/">react</a> (with preview)
+      <a href="/demo/react-preview/">react</a> (with preview)<br />
+      <a href="/demo/react-iframe/">iframed react</a> (edit only)
 
       <h4>hot-reloads the component (but not the editor):</h4>
       <a href="/demo/web-component/">web component</a> (edit only)<br />