Merge pull request #1062 from RaspberryPiFoundation/fix-skulpt-external-files

Fix Skulpt External Files

Author: sra405

.env.webcomponent.example

@@ -2,7 +2,7 @@ REACT_APP_AUTHENTICATION_URL='http://localhost:9001'
 REACT_APP_SENTRY_DSN=''
 REACT_APP_SENTRY_ENV='local'
 # NB This is the URL of react-ui, rather than the web component
-PUBLIC_URL=http://localhost:3010
+PUBLIC_URL=http://localhost:3012
 REACT_APP_IDENTITY_URL='http://localhost:3011'
 REACT_APP_API_ENDPOINT='http://localhost:3009'
-ASSETS_URL='http://localhost:3010'
+ASSETS_URL='http://localhost:3011'

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- Attach Skulpt files to the `document.body` to avoid issues with the shadow DOM (#1062)
 - Small fix to ensure webpack is using the correct webSocketURL for live reloading\
 - Only register `editor-wc` once (#1052)
 

src/components/EmbeddedViewer/__snapshots__/EmbeddedViewer.test.js.snap

@@ -5,10 +5,6 @@ exports[`Renders without crashing 1`] = `
   <div
     class="embedded-viewer"
   >
-    <div
-      hidden=""
-      id="file-content"
-    />
     <div
       class="proj-runner-container"
       data-testid="output"

src/components/ExternalFiles/ExternalFiles.jsx

@@ -1,10 +1,16 @@
 import React from "react";
 import { useSelector } from "react-redux";
+import { createPortal } from "react-dom";
 
 const ExternalFiles = () => {
   const project = useSelector((state) => state.editor.project);
+  const hostElement = document.body;
 
-  return (
+  if (!hostElement) {
+    return null;
+  }
+
+  return createPortal(
     <div id="file-content" hidden>
       {project.components?.map((file, i) => {
         if (["csv", "txt"].includes(file.extension)) {
@@ -16,7 +22,8 @@ const ExternalFiles = () => {
         }
         return null;
       })}
-    </div>
+    </div>,
+    hostElement,
   );
 };
 

webpack.component.config.js

@@ -77,6 +77,12 @@ module.exports = {
     static: {
       directory: path.join(__dirname, "public"),
     },
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+      "Access-Control-Allow-Headers":
+        "X-Requested-With, content-type, Authorization",
+    },
   },
   plugins: [
     new Dotenv({