From 268c6f66eb48d4bd5671f804b62e9556f48afd19 Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Tue, 7 Jan 2025 09:01:29 +0000
Subject: [PATCH 01/18] Support output tabs in pyodide (#1157)

---
 CHANGELOG.md                                  |  4 +
 .../PyodideRunner/PyodideRunner.jsx           | 75 +++++++++++--------
 .../PyodideRunner/PyodideRunner.test.js       | 49 +++++++++++-
 .../Runners/PythonRunner/PythonRunner.jsx     |  5 +-
 4 files changed, 101 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec1db3ed5..e087a85cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Added
+
+- Support for the `outputPanels` attribute in the `PyodideRunner` (#1157)
+
 ## [0.28.14] - 2025-01-06
 
 ### Fixed
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 157451968..c2f3a9d86 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -31,7 +31,7 @@ const getWorkerURL = (url) => {
   return URL.createObjectURL(blob);
 };
 
-const PyodideRunner = ({ active }) => {
+const PyodideRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const [pyodideWorker, setPyodideWorker] = useState(null);
 
   useEffect(() => {
@@ -65,6 +65,9 @@ const PyodideRunner = ({ active }) => {
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const senseHatAlways = useSelector((s) => s.editor.senseHatAlwaysEnabled);
   const queryParams = new URLSearchParams(window.location.search);
+  const singleOutputPanel = outputPanels.length === 1;
+  const showVisualOutputPanel = outputPanels.includes("visual");
+  const showTextOutputPanel = outputPanels.includes("text");
   const showVisualTab = queryParams.get("show_visual_tab") === "true";
   const [hasVisual, setHasVisual] = useState(showVisualTab || senseHatAlways);
   const [visuals, setVisuals] = useState([]);
@@ -195,8 +198,10 @@ const PyodideRunner = ({ active }) => {
   };
 
   const handleVisual = (origin, content) => {
-    setHasVisual(true);
-    setVisuals((array) => [...array, { origin, content }]);
+    if (showVisualOutputPanel) {
+      setHasVisual(true);
+      setVisuals((array) => [...array, { origin, content }]);
+    }
   };
 
   const handleSenseHatEvent = (type) => {
@@ -326,12 +331,16 @@ const PyodideRunner = ({ active }) => {
         "pyodiderunner--active": active,
       })}
     >
-      {isSplitView ? (
+      {isSplitView || singleOutputPanel ? (
         <>
-          {hasVisual && (
+          {hasVisual && showVisualOutputPanel && (
             <div className="output-panel output-panel--visual">
               <Tabs forceRenderTabPanel={true}>
-                <div className="react-tabs__tab-container">
+                <div
+                  className={classNames("react-tabs__tab-container", {
+                    "react-tabs__tab-container--hidden": singleOutputPanel,
+                  })}
+                >
                   <TabList>
                     <Tab key={0}>
                       <span className="react-tabs__tab-text">
@@ -348,30 +357,36 @@ const PyodideRunner = ({ active }) => {
               </Tabs>
             </div>
           )}
-          <div className="output-panel output-panel--text">
-            <Tabs forceRenderTabPanel={true}>
-              <div className="react-tabs__tab-container">
-                <TabList>
-                  <Tab key={0}>
-                    <span className="react-tabs__tab-text">
-                      {t("output.textOutput")}
-                    </span>
-                  </Tab>
-                </TabList>
-                {!hasVisual && !isEmbedded && isMobile && (
-                  <RunnerControls skinny />
-                )}
-              </div>
-              <ErrorMessage />
-              <TabPanel key={0}>
-                <pre
-                  className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
-                  onClick={shiftFocusToInput}
-                  ref={output}
-                ></pre>
-              </TabPanel>
-            </Tabs>
-          </div>
+          {showTextOutputPanel && (
+            <div className="output-panel output-panel--text">
+              <Tabs forceRenderTabPanel={true}>
+                <div
+                  className={classNames("react-tabs__tab-container", {
+                    "react-tabs__tab-container--hidden": singleOutputPanel,
+                  })}
+                >
+                  <TabList>
+                    <Tab key={0}>
+                      <span className="react-tabs__tab-text">
+                        {t("output.textOutput")}
+                      </span>
+                    </Tab>
+                  </TabList>
+                  {!hasVisual && !isEmbedded && isMobile && (
+                    <RunnerControls skinny />
+                  )}
+                </div>
+                <ErrorMessage />
+                <TabPanel key={0}>
+                  <pre
+                    className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
+                    onClick={shiftFocusToInput}
+                    ref={output}
+                  ></pre>
+                </TabPanel>
+              </Tabs>
+            </div>
+          )}
         </>
       ) : (
         <Tabs forceRenderTabPanel={true} defaultIndex={hasVisual ? 0 : 1}>
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
index c8bd31f40..25401d731 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
@@ -17,6 +17,7 @@ import {
   setProject,
   setLoadedRunner,
   stopCodeRun,
+  setSenseHatAlwaysEnabled,
 } from "../../../../../redux/EditorSlice.js";
 import store from "../../../../../app/store";
 
@@ -26,7 +27,11 @@ global.fetch = jest.fn();
 const project = {
   components: [
     { name: "a", extension: "py", content: "print('a')" },
-    { name: "main", extension: "py", content: "print('hello')" },
+    {
+      name: "main",
+      extension: "py",
+      content: "print('hello')",
+    },
   ],
   image_list: [
     { filename: "image1.jpg", url: "http://example.com/image1.jpg" },
@@ -368,3 +373,45 @@ describe("When not active and code run triggered", () => {
     expect(postMessage).not.toHaveBeenCalled();
   });
 });
+
+describe("When there is visual output", () => {
+  beforeEach(() => {
+    act(() => {
+      store.dispatch(setSenseHatAlwaysEnabled(true));
+    });
+  });
+
+  test("displays both text and visual tabs by default", () => {
+    render(
+      <Provider store={store}>
+        <PyodideRunner />
+      </Provider>,
+    );
+    expect(screen.queryByText("output.textOutput")).toBeInTheDocument();
+    expect(screen.queryByText("output.visualOutput")).toBeInTheDocument();
+  });
+
+  test("only displays text tab when outputPanels is set to just text", () => {
+    render(
+      <Provider store={store}>
+        <PyodideRunner outputPanels={["text"]} />
+      </Provider>,
+    );
+    expect(screen.queryByText("output.textOutput")).toBeInTheDocument();
+    expect(screen.queryByText("output.visualOutput")).not.toBeInTheDocument();
+  });
+
+  test("only displays visual tab when outputPanels is set to just visual", () => {
+    render(
+      <Provider store={store}>
+        <PyodideRunner outputPanels={["visual"]} />
+      </Provider>,
+    );
+    expect(screen.queryByText("output.textOutput")).not.toBeInTheDocument();
+    expect(screen.queryByText("output.visualOutput")).toBeInTheDocument();
+  });
+
+  afterEach(() => {
+    store.dispatch(setSenseHatAlwaysEnabled(false));
+  });
+});
diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
index 48babc88b..85baefbbf 100644
--- a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
@@ -92,7 +92,10 @@ const PythonRunner = ({ outputPanels = ["text", "visual"] }) => {
   }, [project, codeRunTriggered, senseHatAlwaysEnabled, skulptFallback, t]);
   return (
     <>
-      <PyodideRunner active={activeRunner === "pyodide"} />
+      <PyodideRunner
+        active={activeRunner === "pyodide"}
+        outputPanels={outputPanels}
+      />
       <SkulptRunner
         active={activeRunner === "skulpt"}
         outputPanels={outputPanels}

From b0a0a7f6720d2d780912ac49f8a7bf49b9862aec Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Fri, 10 Jan 2025 16:12:03 +0000
Subject: [PATCH 02/18] Downloading the instructions (#1160)

## What's Changed?

- Includes instructions in the project download if there are any
- Adds a list of reserved file names which includes `INSTRUCTIONS.md` to
prevent clashes

Closes
https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/374
---
 CHANGELOG.md                                  |  5 ++
 .../DownloadButton/DownloadButton.jsx         |  4 ++
 .../DownloadButton/DownloadButton.test.js     | 58 +++++++++++++++++++
 src/components/Modals/NewFileModal.test.js    | 11 ++++
 src/components/Modals/RenameFileModal.test.js | 11 ++++
 src/utils/componentNameValidation.js          |  7 +++
 src/utils/i18n.js                             |  2 +
 7 files changed, 98 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e087a85cb..37d7d0a17 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Support for the `outputPanels` attribute in the `PyodideRunner` (#1157)
+- Downloading project instructions (#1160)
+
+### Changed
+
+- Made `INSTRUCTIONS.md` a reserved file name (#1160)
 
 ## [0.28.14] - 2025-01-06
 
diff --git a/src/components/DownloadButton/DownloadButton.jsx b/src/components/DownloadButton/DownloadButton.jsx
index eb9c15b8d..b37342633 100644
--- a/src/components/DownloadButton/DownloadButton.jsx
+++ b/src/components/DownloadButton/DownloadButton.jsx
@@ -39,6 +39,10 @@ const DownloadButton = (props) => {
 
     const zip = new JSZip();
 
+    if (project.instructions) {
+      zip.file("INSTRUCTIONS.md", project.instructions);
+    }
+
     project.components.forEach((file) => {
       zip.file(`${file.name}.${file.extension}`, file.content);
     });
diff --git a/src/components/DownloadButton/DownloadButton.test.js b/src/components/DownloadButton/DownloadButton.test.js
index ef9e38253..1d8a5a655 100644
--- a/src/components/DownloadButton/DownloadButton.test.js
+++ b/src/components/DownloadButton/DownloadButton.test.js
@@ -25,6 +25,7 @@ describe("Downloading project with name set", () => {
         project: {
           name: "My epic project",
           identifier: "hello-world-project",
+          instructions: "print hello world to the console",
           components: [
             {
               name: "main",
@@ -53,6 +54,18 @@ describe("Downloading project with name set", () => {
     expect(downloadButton).toBeInTheDocument();
   });
 
+  test("Clicking download zips instructions", async () => {
+    fireEvent.click(downloadButton);
+    const JSZipInstance = JSZip.mock.instances[0];
+    const mockFile = JSZipInstance.file;
+    await waitFor(() =>
+      expect(mockFile).toHaveBeenCalledWith(
+        "INSTRUCTIONS.md",
+        "print hello world to the console",
+      ),
+    );
+  });
+
   test("Clicking download zips project file content", async () => {
     fireEvent.click(downloadButton);
     const JSZipInstance = JSZip.mock.instances[0];
@@ -123,3 +136,48 @@ describe("Downloading project with no name set", () => {
     );
   });
 });
+
+describe("Downloading project with no instructions set", () => {
+  let downloadButton;
+
+  beforeEach(() => {
+    JSZip.mockClear();
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          name: "My epic project",
+          identifier: "hello-world-project",
+          components: [
+            {
+              name: "main",
+              extension: "py",
+              content: "",
+            },
+          ],
+          image_list: [],
+        },
+      },
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <DownloadButton buttonText="Download" Icon={() => {}} />
+      </Provider>,
+    );
+    downloadButton = screen.queryByText("Download").parentElement;
+  });
+
+  test("Clicking download button does not zip instructions", async () => {
+    fireEvent.click(downloadButton);
+    const JSZipInstance = JSZip.mock.instances[0];
+    const mockFile = JSZipInstance.file;
+    await waitFor(() =>
+      expect(mockFile).not.toHaveBeenCalledWith(
+        "INSTRUCTIONS.md",
+        expect.anything(),
+      ),
+    );
+  });
+});
diff --git a/src/components/Modals/NewFileModal.test.js b/src/components/Modals/NewFileModal.test.js
index 69eb5a39d..8b0035fbf 100644
--- a/src/components/Modals/NewFileModal.test.js
+++ b/src/components/Modals/NewFileModal.test.js
@@ -81,6 +81,17 @@ describe("Testing the new file modal", () => {
     expect(store.getActions()).toEqual(expectedActions);
   });
 
+  test("Reserved file name throws error", () => {
+    fireEvent.change(inputBox, { target: { value: "INSTRUCTIONS.md" } });
+    fireEvent.click(saveButton);
+    const expectedActions = [
+      setNameError("filePanel.errors.reservedFileName", {
+        fileName: "INSTRUCTIONS.md",
+      }),
+    ];
+    expect(store.getActions()).toEqual(expectedActions);
+  });
+
   test("Unsupported extension throws error", () => {
     fireEvent.change(inputBox, { target: { value: "file1.js" } });
     fireEvent.click(saveButton);
diff --git a/src/components/Modals/RenameFileModal.test.js b/src/components/Modals/RenameFileModal.test.js
index be2df5ac6..112f9b16a 100644
--- a/src/components/Modals/RenameFileModal.test.js
+++ b/src/components/Modals/RenameFileModal.test.js
@@ -91,6 +91,17 @@ describe("Testing the rename file modal", () => {
     expect(store.getActions()).toEqual(expectedActions);
   });
 
+  test("Reserved file name throws error", () => {
+    fireEvent.change(inputBox, { target: { value: "INSTRUCTIONS.md" } });
+    fireEvent.click(saveButton);
+    const expectedActions = [
+      setNameError("filePanel.errors.reservedFileName", {
+        fileName: "INSTRUCTIONS.md",
+      }),
+    ];
+    expect(store.getActions()).toEqual(expectedActions);
+  });
+
   test("Unchanged file name does not throw error", () => {
     fireEvent.click(saveButton);
     const expectedActions = [
diff --git a/src/utils/componentNameValidation.js b/src/utils/componentNameValidation.js
index 003c6c562..26ce6c689 100644
--- a/src/utils/componentNameValidation.js
+++ b/src/utils/componentNameValidation.js
@@ -5,6 +5,8 @@ const allowedExtensions = {
   html: ["html", "css", "js"],
 };
 
+const reservedFileNames = ["INSTRUCTIONS.md"];
+
 const allowedExtensionsString = (projectType, t) => {
   const extensionsList = allowedExtensions[projectType];
   if (extensionsList.length === 1) {
@@ -19,6 +21,7 @@ const allowedExtensionsString = (projectType, t) => {
 const isValidFileName = (fileName, projectType, componentNames) => {
   const extension = fileName.split(".").slice(1).join(".");
   if (
+    !reservedFileNames.includes(fileName) &&
     allowedExtensions[projectType].includes(extension) &&
     !componentNames.includes(fileName) &&
     fileName.split(" ").length === 1
@@ -44,6 +47,10 @@ export const validateFileName = (
     (currentFileName && fileName === currentFileName)
   ) {
     callback();
+  } else if (reservedFileNames.includes(fileName)) {
+    dispatch(
+      setNameError(t("filePanel.errors.reservedFileName", { fileName })),
+    );
   } else if (componentNames.includes(fileName)) {
     dispatch(setNameError(t("filePanel.errors.notUnique")));
   } else if (fileName.split(" ").length > 1) {
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index b61ab4d92..eeab05286 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -130,6 +130,8 @@ i18n
           },
           filePanel: {
             errors: {
+              reservedFileName:
+                "{{fileName}} is a reserved file name. Please choose a different name.",
               containsSpaces: "File names must not contain spaces.",
               generalError: "Error",
               notUnique: "File names must be unique.",

From 1eae407c8253fd8618fcb2f4527ad64533a8472f Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Thu, 16 Jan 2025 15:34:39 +0000
Subject: [PATCH 03/18] Hack open function to write files in main thread
 (#1146)

## Things that need doing

- [x] Support `w` mode
- [x] Support `a` mode
- [x] Support `x` mode
- [x] Support creating files when the specified file name does not match
an existing file
- [x] Support `with open(filename) as f` pattern (currently returning
`CustomFile does not support the context manager protocol`)
- [x] Re-enable `pyodide-http` patch
- [x] Think about limiting the number of files the user can create to
avoid overloading the server
- [x] Ensure that file size limit applies to generated files
---
 CHANGELOG.md                                  |   1 +
 cypress/e2e/spec-wc-pyodide.cy.js             |  52 +++++++
 src/PyodideWorker.js                          |  86 +++++++++--
 .../Editor/EditorPanel/EditorPanel.jsx        |  37 ++++-
 src/components/Editor/Output/Output.test.js   |   2 +
 .../PyodideRunner/PyodideRunner.jsx           |  47 ++++++-
 .../PyodideRunner/PyodideRunner.test.js       | 133 +++++++++++++++++-
 .../PyodideRunner/PyodideWorker.test.js       |  33 +++--
 .../PyodideRunner/VisualOutputPane.jsx        | 111 ++++++++-------
 src/redux/EditorSlice.js                      |  19 ++-
 src/redux/EditorSlice.test.js                 |  79 +++++++++++
 11 files changed, 509 insertions(+), 91 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 37d7d0a17..6795ef2bb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Ability to write to files in `python` (#1146)
 - Support for the `outputPanels` attribute in the `PyodideRunner` (#1157)
 - Downloading project instructions (#1160)
 
diff --git a/cypress/e2e/spec-wc-pyodide.cy.js b/cypress/e2e/spec-wc-pyodide.cy.js
index 858c308a9..73bcbd314 100644
--- a/cypress/e2e/spec-wc-pyodide.cy.js
+++ b/cypress/e2e/spec-wc-pyodide.cy.js
@@ -91,6 +91,58 @@ describe("Running the code with pyodide", () => {
       .should("contain", "Hello Lois");
   });
 
+  it("runs a simple program to write to a file", () => {
+    runCode('with open("output.txt", "w") as f:\n\tf.write("Hello world")');
+    cy.get("editor-wc")
+      .shadow()
+      .contains(".files-list-item", "output.txt")
+      .click();
+    cy.get("editor-wc")
+      .shadow()
+      .find(".cm-editor")
+      .should("contain", "Hello world");
+  });
+
+  it("errors when trying to write to an existing file in 'x' mode", () => {
+    runCode('with open("output.txt", "w") as f:\n\tf.write("Hello world")');
+    cy.get("editor-wc")
+      .shadow()
+      .find(".files-list-item")
+      .should("contain", "output.txt");
+    runCode('with open("output.txt", "x") as f:\n\tf.write("Something else")');
+    cy.get("editor-wc")
+      .shadow()
+      .find(".error-message__content")
+      .should(
+        "contain",
+        "FileExistsError: File 'output.txt' already exists on line 1 of main.py",
+      );
+  });
+
+  it("updates the file in the editor when the content is updated programatically", () => {
+    runCode('with open("output.txt", "w") as f:\n\tf.write("Hello world")');
+    cy.get("editor-wc")
+      .shadow()
+      .find("div[class=cm-content]")
+      .invoke(
+        "text",
+        'with open("output.txt", "a") as f:\n\tf.write("Hello again world")',
+      );
+    cy.get("editor-wc")
+      .shadow()
+      .contains(".files-list-item", "output.txt")
+      .click();
+    cy.get("editor-wc")
+      .shadow()
+      .find(".btn--run")
+      .should("not.be.disabled")
+      .click();
+    cy.get("editor-wc")
+      .shadow()
+      .find(".cm-editor")
+      .should("contain", "Hello again world");
+  });
+
   it("runs a simple program with a built-in python module", () => {
     runCode("from math import floor, pi\nprint(floor(pi))");
     cy.get("editor-wc")
diff --git a/src/PyodideWorker.js b/src/PyodideWorker.js
index b50981742..200c742b0 100644
--- a/src/PyodideWorker.js
+++ b/src/PyodideWorker.js
@@ -60,12 +60,6 @@ const PyodideWorker = () => {
 
   const runPython = async (python) => {
     stopped = false;
-    await pyodide.loadPackage("pyodide_http");
-
-    await pyodide.runPythonAsync(`
-    import pyodide_http
-    pyodide_http.patch_all()
-  `);
 
     try {
       await withSupportForPackages(python, async () => {
@@ -98,6 +92,52 @@ const PyodideWorker = () => {
     await pyodide.loadPackagesFromImports(python);
 
     checkIfStopped();
+    await pyodide.runPythonAsync(
+      `
+      import basthon
+      import builtins
+      import os
+
+      MAX_FILES = 100
+      MAX_FILE_SIZE = 8500000
+
+      def _custom_open(filename, mode="r", *args, **kwargs):
+          if "x" in mode and os.path.exists(filename):
+              raise FileExistsError(f"File '{filename}' already exists")
+          if ("w" in mode or "a" in mode or "x" in mode) and "b" not in mode:
+              if len(os.listdir()) > MAX_FILES and not os.path.exists(filename):
+                  raise OSError(f"File system limit reached, no more than {MAX_FILES} files allowed")
+              class CustomFile:
+                  def __init__(self, filename):
+                      self.filename = filename
+                      self.content = ""
+
+                  def write(self, content):
+                      self.content += content
+                      if len(self.content) > MAX_FILE_SIZE:
+                          raise OSError(f"File '{self.filename}' exceeds maximum file size of {MAX_FILE_SIZE} bytes")
+                      with _original_open(self.filename, "w") as f:
+                          f.write(self.content)
+                      basthon.kernel.write_file({ "filename": self.filename, "content": self.content, "mode": mode })
+
+                  def close(self):
+                      pass
+
+                  def __enter__(self):
+                      return self
+
+                  def __exit__(self, exc_type, exc_val, exc_tb):
+                      self.close()
+
+              return CustomFile(filename)
+          else:
+              return _original_open(filename, mode, *args, **kwargs)
+
+      # Override the built-in open function
+      builtins.open = _custom_open
+      `,
+      { filename: "__custom_open__.py" },
+    );
     await runPythonFn();
 
     for (let name of imports) {
@@ -337,6 +377,12 @@ const PyodideWorker = () => {
 
         postMessage({ method: "handleVisual", origin, content });
       },
+      write_file: (event) => {
+        const filename = event.toJs().get("filename");
+        const content = event.toJs().get("content");
+        const mode = event.toJs().get("mode");
+        postMessage({ method: "handleFileWrite", filename, content, mode });
+      },
       locals: () => pyodide.runPython("globals()"),
     },
   };
@@ -346,7 +392,7 @@ const PyodideWorker = () => {
     await pyodide.runPythonAsync(`
         # Clear all user-defined variables and modules
         for name in dir():
-            if not name.startswith('_'):
+            if not name.startswith('_') and not name=='basthon':
                 del globals()[name]
       `);
     postMessage({ method: "handleLoaded", stdinBuffer, interruptBuffer });
@@ -364,6 +410,8 @@ const PyodideWorker = () => {
 
     pyodide = await pyodidePromise;
 
+    pyodide.registerJsModule("basthon", fakeBasthonPackage);
+
     await pyodide.runPythonAsync(`
     __old_input__ = input
     def __patched_input__(prompt=False):
@@ -373,6 +421,18 @@ const PyodideWorker = () => {
     __builtins__.input = __patched_input__
     `);
 
+    await pyodide.runPythonAsync(`
+    import builtins
+    # Save the original open function
+    _original_open = builtins.open
+    `);
+
+    await pyodide.loadPackage("pyodide-http");
+    await pyodide.runPythonAsync(`
+        import pyodide_http
+        pyodide_http.patch_all()
+      `);
+
     if (supportsAllFeatures) {
       stdinBuffer =
         stdinBuffer || new Int32Array(new SharedArrayBuffer(1024 * 1024)); // 1 MiB
@@ -416,6 +476,14 @@ const PyodideWorker = () => {
 
     const lines = trace.split("\n");
 
+    // if the third from last line matches /File "__custom_open__\.py", line (\d+)/g then strip off the last three lines
+    if (
+      lines.length > 3 &&
+      /File "__custom_open__\.py", line (\d+)/g.test(lines[lines.length - 3])
+    ) {
+      lines.splice(-3, 3);
+    }
+
     const snippetLine = lines[lines.length - 2]; //    print("hi")invalid
     const caretLine = lines[lines.length - 1]; //                 ^^^^^^^
 
@@ -424,7 +492,9 @@ const PyodideWorker = () => {
       ? [snippetLine.slice(4), caretLine.slice(4)].join("\n")
       : "";
 
-    const matches = [...trace.matchAll(/File "(.*)", line (\d+)/g)];
+    const matches = [
+      ...trace.matchAll(/File "(?!__custom_open__\.py)(.*)", line (\d+)/g),
+    ];
     const match = matches[matches.length - 1];
 
     const path = match ? match[1] : "";
diff --git a/src/components/Editor/EditorPanel/EditorPanel.jsx b/src/components/Editor/EditorPanel/EditorPanel.jsx
index 951cfb70b..21a930736 100644
--- a/src/components/Editor/EditorPanel/EditorPanel.jsx
+++ b/src/components/Editor/EditorPanel/EditorPanel.jsx
@@ -2,7 +2,10 @@
 import "../../../assets/stylesheets/EditorPanel.scss";
 import React, { useRef, useEffect, useContext, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { updateProjectComponent } from "../../../redux/EditorSlice";
+import {
+  setCascadeUpdate,
+  updateProjectComponent,
+} from "../../../redux/EditorSlice";
 import { useCookies } from "react-cookie";
 import { useTranslation } from "react-i18next";
 import { basicSetup } from "codemirror";
@@ -27,8 +30,10 @@ const MAX_CHARACTERS = 8500000;
 
 const EditorPanel = ({ extension = "html", fileName = "index" }) => {
   const editor = useRef();
+  const editorViewRef = useRef();
   const project = useSelector((state) => state.editor.project);
   const readOnly = useSelector((state) => state.editor.readOnly);
+  const cascadeUpdate = useSelector((state) => state.editor.cascadeUpdate);
   const [cookies] = useCookies(["theme", "fontSize"]);
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -40,7 +45,8 @@ const EditorPanel = ({ extension = "html", fileName = "index" }) => {
       updateProjectComponent({
         extension: extension,
         name: fileName,
-        code: content,
+        content,
+        cascadeUpdate: false,
       }),
     );
   };
@@ -74,11 +80,11 @@ const EditorPanel = ({ extension = "html", fileName = "index" }) => {
       window.matchMedia("(prefers-color-scheme:dark)").matches);
   const editorTheme = isDarkMode ? editorDarkTheme : editorLightTheme;
 
-  useEffect(() => {
-    const file = project.components.find(
-      (item) => item.extension === extension && item.name === fileName,
-    );
+  const file = project.components.find(
+    (item) => item.extension === extension && item.name === fileName,
+  );
 
+  useEffect(() => {
     if (!file) {
       return;
     }
@@ -123,6 +129,8 @@ const EditorPanel = ({ extension = "html", fileName = "index" }) => {
       parent: editor.current,
     });
 
+    editorViewRef.current = view;
+
     // 'aria-hidden' to fix keyboard access accessibility error
     view.scrollDOM.setAttribute("aria-hidden", "true");
 
@@ -138,6 +146,23 @@ const EditorPanel = ({ extension = "html", fileName = "index" }) => {
     };
   }, [cookies]);
 
+  useEffect(() => {
+    if (
+      cascadeUpdate &&
+      editorViewRef.current &&
+      file.content !== editorViewRef.current.state.doc.toString()
+    ) {
+      editorViewRef.current.dispatch({
+        changes: {
+          from: 0,
+          to: editorViewRef.current.state.doc.length,
+          insert: file.content,
+        },
+      });
+      dispatch(setCascadeUpdate(false));
+    }
+  }, [file, cascadeUpdate, editorViewRef]);
+
   return (
     <>
       <div className={`editor editor--${settings.fontSize}`} ref={editor}></div>
diff --git a/src/components/Editor/Output/Output.test.js b/src/components/Editor/Output/Output.test.js
index 0c23a4c37..2b736ac1f 100644
--- a/src/components/Editor/Output/Output.test.js
+++ b/src/components/Editor/Output/Output.test.js
@@ -26,6 +26,8 @@ describe("Output component", () => {
         project: {
           components: [],
         },
+        focussedFileIndices: [0],
+        openFiles: [["main.py"]],
       },
       auth: {
         user,
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index c2f3a9d86..50594e250 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -8,6 +8,8 @@ import {
   setError,
   codeRunHandled,
   setLoadedRunner,
+  updateProjectComponent,
+  addProjectComponent,
 } from "../../../../../redux/EditorSlice";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useMediaQuery } from "react-responsive";
@@ -51,6 +53,10 @@ const PyodideRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const projectImages = useSelector((s) => s.editor.project.image_list);
   const projectCode = useSelector((s) => s.editor.project.components);
   const projectIdentifier = useSelector((s) => s.editor.project.identifier);
+  const focussedFileIndex = useSelector(
+    (state) => state.editor.focussedFileIndices,
+  )[0];
+  const openFiles = useSelector((state) => state.editor.openFiles)[0];
   const user = useSelector((s) => s.auth.user);
   const userId = user?.profile?.user;
   const isSplitView = useSelector((s) => s.editor.isSplitView);
@@ -97,6 +103,16 @@ const PyodideRunner = ({ active, outputPanels = ["text", "visual"] }) => {
               data.info,
             );
             break;
+          case "handleFileWrite":
+            const cascadeUpdate =
+              openFiles[focussedFileIndex] === data.filename;
+            handleFileWrite(
+              data.filename,
+              data.content,
+              data.mode,
+              cascadeUpdate,
+            );
+            break;
           case "handleVisual":
             handleVisual(data.origin, data.content);
             break;
@@ -108,7 +124,7 @@ const PyodideRunner = ({ active, outputPanels = ["text", "visual"] }) => {
         }
       };
     }
-  }, [pyodideWorker]);
+  }, [pyodideWorker, projectCode, openFiles, focussedFileIndex]);
 
   useEffect(() => {
     if (codeRunTriggered && active && output.current) {
@@ -197,6 +213,35 @@ const PyodideRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     disableInput();
   };
 
+  const handleFileWrite = (filename, content, mode, cascadeUpdate) => {
+    const [name, extension] = filename.split(".");
+    const componentToUpdate = projectCode.find(
+      (item) => item.extension === extension && item.name === name,
+    );
+    let updatedContent;
+    if (mode === "w" || mode === "x") {
+      updatedContent = content;
+    } else if (mode === "a") {
+      updatedContent =
+        (componentToUpdate ? componentToUpdate.content + "\n" : "") + content;
+    }
+
+    if (componentToUpdate) {
+      dispatch(
+        updateProjectComponent({
+          extension,
+          name,
+          content: updatedContent,
+          cascadeUpdate,
+        }),
+      );
+    } else {
+      dispatch(
+        addProjectComponent({ name, extension, content: updatedContent }),
+      );
+    }
+  };
+
   const handleVisual = (origin, content) => {
     if (showVisualOutputPanel) {
       setHasVisual(true);
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
index 25401d731..bea6c9264 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
@@ -18,6 +18,8 @@ import {
   setLoadedRunner,
   stopCodeRun,
   setSenseHatAlwaysEnabled,
+  openFile,
+  setFocussedFileIndex,
 } from "../../../../../redux/EditorSlice.js";
 import store from "../../../../../app/store";
 
@@ -27,11 +29,8 @@ global.fetch = jest.fn();
 const project = {
   components: [
     { name: "a", extension: "py", content: "print('a')" },
-    {
-      name: "main",
-      extension: "py",
-      content: "print('hello')",
-    },
+    { name: "main", extension: "py", content: "print('hello')" },
+    { name: "existing_file", extension: "txt", content: "hello" },
   ],
   image_list: [
     { filename: "image1.jpg", url: "http://example.com/image1.jpg" },
@@ -256,6 +255,130 @@ describe("When output is received", () => {
   });
 });
 
+describe("When file write event is received", () => {
+  let worker;
+  beforeEach(() => {
+    render(
+      <Provider store={store}>
+        <PyodideRunner active={true} />,
+      </Provider>,
+    );
+    updateRunner({ project });
+    worker = PyodideWorker.getLastInstance();
+  });
+
+  test("it overwrites existing files in 'w' mode", () => {
+    worker.postMessageFromWorker({
+      method: "handleFileWrite",
+      filename: "existing_file.txt",
+      content: "new content",
+      mode: "w",
+    });
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: "editor/updateProjectComponent",
+      payload: {
+        name: "existing_file",
+        extension: "txt",
+        content: "new content",
+        cascadeUpdate: false,
+      },
+    });
+  });
+
+  test("it creates new file if not already existing in 'w' mode", () => {
+    worker.postMessageFromWorker({
+      method: "handleFileWrite",
+      filename: "new_file.txt",
+      content: "new content",
+      mode: "w",
+    });
+
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: "editor/addProjectComponent",
+      payload: {
+        name: "new_file",
+        extension: "txt",
+        content: "new content",
+      },
+    });
+  });
+
+  test("it appends to existing files in 'a' mode", () => {
+    worker.postMessageFromWorker({
+      method: "handleFileWrite",
+      filename: "existing_file.txt",
+      content: "new content",
+      mode: "a",
+    });
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: "editor/updateProjectComponent",
+      payload: {
+        name: "existing_file",
+        extension: "txt",
+        content: "hello\nnew content",
+        cascadeUpdate: false,
+      },
+    });
+  });
+
+  test("it creates new file if not already existing in 'a' mode", () => {
+    worker.postMessageFromWorker({
+      method: "handleFileWrite",
+      filename: "new_file.txt",
+      content: "new content",
+      mode: "a",
+    });
+
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: "editor/addProjectComponent",
+      payload: {
+        name: "new_file",
+        extension: "txt",
+        content: "new content",
+      },
+    });
+  });
+
+  test("it creates new file if not already existing in 'x' mode", () => {
+    worker.postMessageFromWorker({
+      method: "handleFileWrite",
+      filename: "new_file.txt",
+      content: "new content",
+      mode: "x",
+    });
+
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: "editor/addProjectComponent",
+      payload: {
+        name: "new_file",
+        extension: "txt",
+        content: "new content",
+      },
+    });
+  });
+
+  test("it cascades updates if the file is open and focused", () => {
+    store.dispatch(openFile({ name: "existing_file", extension: "txt" }));
+    store.dispatch(setFocussedFileIndex({ panelIndex: 0, fileIndex: 1 }));
+
+    worker.postMessageFromWorker({
+      method: "handleFileWrite",
+      filename: "existing_file.txt",
+      content: "new content",
+      mode: "a",
+    });
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: "editor/updateProjectComponent",
+      payload: {
+        name: "existing_file",
+        extension: "txt",
+        content: "hello\nnew content",
+        cascadeUpdate: false,
+      },
+    });
+  });
+});
+
 describe("When visual output is received", () => {
   beforeEach(() => {
     render(
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.test.js
index f54b07734..702cc4223 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.test.js
@@ -89,29 +89,23 @@ describe("PyodideWorker", () => {
   });
 
   test("it patches the input function", async () => {
-    await worker.onmessage({
-      data: {
-        method: "runPython",
-        python: "print('hello')",
-      },
-    });
     expect(pyodide.runPythonAsync).toHaveBeenCalledWith(
       expect.stringMatching(/__builtins__.input = __patched_input__/),
     );
   });
 
   test("it patches urllib and requests modules", async () => {
-    await worker.onmessage({
-      data: {
-        method: "runPython",
-        python: "print('hello')",
-      },
-    });
     expect(pyodide.runPythonAsync).toHaveBeenCalledWith(
       expect.stringMatching(/pyodide_http.patch_all()/),
     );
   });
 
+  test("it saves original open function", async () => {
+    expect(pyodide.runPythonAsync).toHaveBeenCalledWith(
+      expect.stringMatching(/_original_open = builtins.open/),
+    );
+  });
+
   test("it tries to load package from file system", async () => {
     pyodide._api.pyodide_code.find_imports = () => new MockPythonArray("numpy");
     await worker.onmessage({
@@ -178,6 +172,21 @@ describe("PyodideWorker", () => {
     });
   });
 
+  test("it patches the open function", async () => {
+    await worker.onmessage({
+      data: {
+        method: "runPython",
+        python: "print('hello')",
+      },
+    });
+    await waitFor(() =>
+      expect(pyodide.runPythonAsync).toHaveBeenCalledWith(
+        expect.stringMatching(/builtins.open = _custom_open/),
+        { filename: "__custom_open__.py" },
+      ),
+    );
+  });
+
   test("it runs the python code", async () => {
     await worker.onmessage({
       data: {
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.jsx
index 339da793c..dadb12c6f 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import AstroPiModel from "../../../../AstroPiModel/AstroPiModel";
 import Highcharts from "highcharts";
@@ -8,13 +8,68 @@ const VisualOutputPane = ({ visuals, setVisuals }) => {
   const senseHatAlways = useSelector((s) => s.editor.senseHatAlwaysEnabled);
   const output = useRef();
 
+  const showVisual = useCallback((visual, output) => {
+    switch (visual.origin) {
+      case "sense_hat":
+        output.current.textContent = JSON.stringify(visual.content);
+        break;
+      case "pygal":
+        const chartContent = {
+          ...visual.content,
+          chart: {
+            ...visual.content.chart,
+            events: {
+              ...visual.content.chart.events,
+              load: function () {
+                this.renderTo.style.overflow = "visible";
+              },
+            },
+          },
+          tooltip: {
+            ...visual.content.tooltip,
+            formatter:
+              visual.content.chart.type === "pie"
+                ? function () {
+                    return this.key + ": " + this.y;
+                  }
+                : null,
+          },
+        };
+        Highcharts.chart(output.current, chartContent);
+        break;
+      case "turtle":
+        output.current.innerHTML = elementFromProps(visual.content).outerHTML;
+        break;
+      case "matplotlib":
+        // convert visual.content from Uint8Array to jpg
+        const img = document.createElement("img");
+        img.style = "max-width: 100%; max-height: 100%;";
+        img.src = `data:image/jpg;base64,${window.btoa(
+          String.fromCharCode(...new Uint8Array(visual.content)),
+        )}`;
+        output.current.innerHTML = img.outerHTML;
+        break;
+      default:
+        throw new Error(`Unsupported origin: ${visual.origin}`);
+    }
+
+    visual.showing = true;
+    return visual;
+  }, []);
+
+  const showVisuals = useCallback(
+    (visuals, output) =>
+      visuals.map((v) => (v.showing ? v : showVisual(v, output))),
+    [showVisual],
+  );
+
   useEffect(() => {
     if (visuals.length === 0) {
       output.current.innerHTML = "";
     } else if (visuals.some((v) => !v.showing)) {
       setVisuals((visuals) => showVisuals(visuals, output));
     }
-  }, [visuals, setVisuals]);
+  }, [visuals, setVisuals, showVisuals]);
 
   return (
     <div className="visual-output">
@@ -24,58 +79,6 @@ const VisualOutputPane = ({ visuals, setVisuals }) => {
   );
 };
 
-const showVisuals = (visuals, output) =>
-  visuals.map((v) => (v.showing ? v : showVisual(v, output)));
-
-const showVisual = (visual, output) => {
-  switch (visual.origin) {
-    case "sense_hat":
-      output.current.textContent = JSON.stringify(visual.content);
-      break;
-    case "pygal":
-      const chartContent = {
-        ...visual.content,
-        chart: {
-          ...visual.content.chart,
-          events: {
-            ...visual.content.chart.events,
-            load: function () {
-              this.renderTo.style.overflow = "visible";
-            },
-          },
-        },
-        tooltip: {
-          ...visual.content.tooltip,
-          formatter:
-            visual.content.chart.type === "pie"
-              ? function () {
-                  return this.key + ": " + this.y;
-                }
-              : null,
-        },
-      };
-      Highcharts.chart(output.current, chartContent);
-      break;
-    case "turtle":
-      output.current.innerHTML = elementFromProps(visual.content).outerHTML;
-      break;
-    case "matplotlib":
-      // convert visual.content from Uint8Array to jpg
-      const img = document.createElement("img");
-      img.style = "max-width: 100%; max-height: 100%;";
-      img.src = `data:image/jpg;base64,${window.btoa(
-        String.fromCharCode(...new Uint8Array(visual.content)),
-      )}`;
-      output.current.innerHTML = img.outerHTML;
-      break;
-    default:
-      throw new Error(`Unsupported origin: ${visual.origin}`);
-  }
-
-  visual.showing = true;
-  return visual;
-};
-
 const elementFromProps = (map) => {
   const tag = map.get("tag");
   if (!tag) {
diff --git a/src/redux/EditorSlice.js b/src/redux/EditorSlice.js
index ec5119c87..624ef3dd2 100644
--- a/src/redux/EditorSlice.js
+++ b/src/redux/EditorSlice.js
@@ -95,6 +95,7 @@ export const loadProjectList = createAsyncThunk(
 
 const initialState = {
   project: {},
+  cascadeUpdate: false,
   readOnly: false,
   saveTriggered: false,
   saving: "idle",
@@ -197,7 +198,7 @@ export const EditorSlice = createSlice({
       state.project.components.push({
         name: action.payload.name,
         extension: action.payload.extension,
-        content: "",
+        content: action.payload.content || "",
       });
       state.saving = "idle";
     },
@@ -262,18 +263,22 @@ export const EditorSlice = createSlice({
       state.saveTriggered = true;
     },
     updateProjectComponent: (state, action) => {
-      const extension = action.payload.extension;
-      const fileName = action.payload.name;
-      const code = action.payload.code;
+      const {
+        extension,
+        name: fileName,
+        content,
+        cascadeUpdate,
+      } = action.payload;
 
       const mapped = state.project.components.map((item) => {
         if (item.extension !== extension || item.name !== fileName) {
           return item;
         }
 
-        return { ...item, ...{ content: code } };
+        return { ...item, ...{ content } };
       });
       state.project.components = mapped;
+      state.cascadeUpdate = cascadeUpdate;
     },
     updateProjectName: (state, action) => {
       state.project.name = action.payload;
@@ -295,6 +300,9 @@ export const EditorSlice = createSlice({
       }
       state.saving = "idle";
     },
+    setCascadeUpdate: (state, action) => {
+      state.cascadeUpdate = action.payload;
+    },
     setError: (state, action) => {
       state.error = action.payload;
     },
@@ -454,6 +462,7 @@ export const {
   setEmbedded,
   setIsOutputOnly,
   setBrowserPreview,
+  setCascadeUpdate,
   setError,
   setIsSplitView,
   setNameError,
diff --git a/src/redux/EditorSlice.test.js b/src/redux/EditorSlice.test.js
index 186dac7a8..7c7baf6e2 100644
--- a/src/redux/EditorSlice.test.js
+++ b/src/redux/EditorSlice.test.js
@@ -11,6 +11,9 @@ import reducer, {
   setIsOutputOnly,
   setErrorDetails,
   setReadOnly,
+  addProjectComponent,
+  updateProjectComponent,
+  setCascadeUpdate,
 } from "./EditorSlice";
 
 const mockCreateRemix = jest.fn();
@@ -104,6 +107,82 @@ test("Action setReadOnly correctly sets readOnly", () => {
   expect(reducer(previousState, setReadOnly(true))).toEqual(expectedState);
 });
 
+test("Action addProjectComponent adds component to project with correct content", () => {
+  const previousState = {
+    project: {
+      components: [],
+    },
+  };
+  const expectedState = {
+    project: {
+      components: [
+        {
+          name: "main",
+          extension: "py",
+          content: "print('hello world')",
+        },
+      ],
+    },
+    saving: "idle",
+  };
+  expect(
+    reducer(
+      previousState,
+      addProjectComponent({
+        name: "main",
+        extension: "py",
+        content: "print('hello world')",
+      }),
+    ),
+  ).toEqual(expectedState);
+});
+
+test("Action updateProjectComponent updates component in project with correct content", () => {
+  const previousState = {
+    project: {
+      components: [
+        {
+          name: "main",
+          extension: "py",
+          content: "print('hello world')",
+        },
+      ],
+    },
+    cascadeUpdate: false,
+  };
+  const expectedState = {
+    project: {
+      components: [
+        {
+          name: "main",
+          extension: "py",
+          content: "print('hello there world!')",
+        },
+      ],
+    },
+    cascadeUpdate: true,
+  };
+  expect(
+    reducer(
+      previousState,
+      updateProjectComponent({
+        name: "main",
+        extension: "py",
+        content: "print('hello there world!')",
+        cascadeUpdate: true,
+      }),
+    ),
+  ).toEqual(expectedState);
+});
+
+test("Action setCascadeUpdate sets cascadeUpdate correctly", () => {
+  const previousState = { cascadeUpdate: true };
+  const expectedState = { cascadeUpdate: false };
+  expect(reducer(previousState, setCascadeUpdate(false))).toEqual(
+    expectedState,
+  );
+});
+
 test("Showing rename modal sets file state and showing status", () => {
   const previousState = {
     renameFileModalShowing: false,

From 5d0c69caf145ffe5a9587ac2851a720b3a405f83 Mon Sep 17 00:00:00 2001
From: Dan Halson <danhalson@users.noreply.github.com>
Date: Wed, 29 Jan 2025 09:13:22 +0000
Subject: [PATCH 04/18] Try pinning previous ubuntu version to avoid cloudflare
 issue (#1178)

Test deployment to try out a potential workaround for cloudflare issue:

```
Update - We are continuing to work on a fix for native CRC32 checksum handling in R2 APIs. If you run into an issue, please see the documentation for workarounds based on the SDK that you are using: https://developers.cloudflare.com/r2/examples/aws/
Jan 22, 2025 - 16:33 UTC
Update - We are continuing to work on a fix for this issue.
Jan 17, 2025 - 11:23 UTC
Identified - AWS recently updated their SDKs to enable CRC32 checksums on multiple object operations by default.
R2 does not currently support CRC32 checksums, and the default configurations will return header related errors such as Header 'x-amz-checksum-algorithm' with value 'CRC32' not implemented.

Impacted users can either pin AWS SDKs to a prior version or modify the configuration to restore the prior default behavior of not checking checksums on upload.

For more details, see the examples section of the R2 Docs for the relevant SDK:
https://developers.cloudflare.com/r2/examples/aws/
Jan 17, 2025 - 03:20 UTC
```

---------

Co-authored-by: Conor <conor.riches@raspberrypi.org>
---
 .github/workflows/changelog.yml | 34 ++++++++++++++++-----------------
 .github/workflows/deploy.yml    |  6 ++++++
 CHANGELOG.md                    |  4 ++++
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index 82567be5c..6f34a5ca5 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -3,26 +3,26 @@ name: Changelog
 on:
   pull_request:
     branches:
-      - '**'
+      - "**"
 
 jobs:
   changelog-updated:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-    - name: Check if changelog updated
-      id: changed-files-specific
-      uses: tj-actions/changed-files@v29.0.4
-      with:
-        base_sha: ${{ github.event.pull_request.base.sha }}
-        files: |
-          CHANGELOG.md
-      env:
-        GITHUB_TOKEN: ${{ github.token }}
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Check if changelog updated
+        id: changed-files-specific
+        uses: tj-actions/changed-files@v29.0.4
+        with:
+          base_sha: ${{ github.event.pull_request.base.sha }}
+          files: |
+            CHANGELOG.md
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
 
-    - name: Fail job if changelog not updated
-      if: steps.changed-files-specific.outputs.any_changed == 'false'
-      run: |
-        exit 1
+      - name: Fail job if changelog not updated
+        if: steps.changed-files-specific.outputs.any_changed == 'false'
+        run: |
+          exit 1
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index de3b9fe93..db09ef1b3 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -123,6 +123,12 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Install AWS CLI v2.22.35
+        run: |
+          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64-2.22.35.zip" -o "awscliv2.zip"
+          unzip awscliv2.zip
+          sudo ./aws/install --update
+
       - name: Build WC bundle
         run: |
           # TODO: Reinitialise when storybook build is fixed
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6795ef2bb..43cbee96f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Fixed
+
+- Fix AWS CLI in deploy script to 2.22.35 to workaround cloudflare issue (See https://developers.cloudflare.com/r2/examples/aws/aws-cli/) (#1158)
+
 ### Added
 
 - Ability to write to files in `python` (#1146)

From d554021a89f008ca01f80a5a2b61b2af2fdc5400 Mon Sep 17 00:00:00 2001
From: "create-issue-branch[bot]"
 <53036503+create-issue-branch[bot]@users.noreply.github.com>
Date: Wed, 29 Jan 2025 10:00:28 +0000
Subject: [PATCH 05/18] Integration: Save / Login functionality not as expected
 (#1162)

'Login to save' button now automatically saves after logging in.

Closes #843

---------

Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com>
Co-authored-by: Dan Halson <dan.halson@raspberrypi.org>
Co-authored-by: Dan Halson <danhalson@users.noreply.github.com>
Co-authored-by: Conor <conor.riches@raspberrypi.org>
---
 .devcontainer/devcontainer.json         |  8 +-------
 CHANGELOG.md                            |  3 ++-
 src/hooks/useProjectPersistence.js      | 18 +++++++++++++-----
 src/hooks/useProjectPersistence.test.js | 20 ++++++++++++++++++++
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index e8f310d6f..a4ce7d334 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -39,8 +39,6 @@
     "vscode": {
       "extensions": [
         "ms-azuretools.vscode-docker",
-        "ninoseki.vscode-gem-lens",
-        "rebornix.ruby",
         "eamodio.gitlens",
         "github.vscode-pull-request-github",
         "wmaurer.change-case",
@@ -53,7 +51,6 @@
         "pkosta2005.heroku-command",
         "yzhang.markdown-all-in-one",
         "mikestead.dotenv",
-        "wingrunr21.vscode-ruby",
         "ms-vscode.remote-repositories",
         "github.remotehub",
         "circleci.circleci",
@@ -68,10 +65,7 @@
       ],
       "settings": {
         "terminal.integrated.defaultProfile.linux": "zsh",
-        "jest.autoRun": {
-          "watch": false,
-          "onSave": "test-src-file"
-        }
+        "jest.jestCommandLine": "yarn test"
       }
     }
   },
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43cbee96f..c6145d4c6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
-- Fix AWS CLI in deploy script to 2.22.35 to workaround cloudflare issue (See https://developers.cloudflare.com/r2/examples/aws/aws-cli/) (#1158)
+- Fix AWS CLI in deploy script to 2.22.35 to workaround cloudflare issue (See https://developers.cloudflare.com/r2/examples/aws/aws-cli/) (#1178)
 
 ### Added
 
@@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - Made `INSTRUCTIONS.md` a reserved file name (#1160)
+- Login to save now logs in and automatically saves (#1162)
 
 ## [0.28.14] - 2025-01-06
 
diff --git a/src/hooks/useProjectPersistence.js b/src/hooks/useProjectPersistence.js
index 115d9a0f2..f5bc2ca65 100644
--- a/src/hooks/useProjectPersistence.js
+++ b/src/hooks/useProjectPersistence.js
@@ -42,17 +42,26 @@ export const useProjectPersistence = ({
         const accessToken = user?.access_token;
         const params = { reactAppApiEndpoint, accessToken };
 
-        if (saveTriggered) {
+        if (saveTriggered || localStorage.getItem("awaitingSave")) {
           if (isOwner(user, project)) {
             await dispatch(
               syncProject("save")({ ...params, project, autosave: false }),
             );
+            localStorage.removeItem("awaitingSave");
           } else if (user && identifier) {
-            await dispatch(syncProject("remix")({ ...params, project }));
+            await dispatch(
+              syncProject("remix")({
+                ...params,
+                project,
+              }),
+            );
             if (loadRemix) {
               // Ensure the remixed project is loaded, otherwise we'll get in a mess
               await dispatch(
-                syncProject("loadRemix")({ ...params, identifier }),
+                syncProject("loadRemix")({
+                  ...params,
+                  identifier,
+                }),
               );
             }
           }
@@ -81,13 +90,12 @@ export const useProjectPersistence = ({
           if (justLoaded) {
             dispatch(expireJustLoaded());
           } else {
-            saveToLocalStorage(project);
-
             if (!hasShownSavePrompt) {
               user ? showSavePrompt() : showLoginPrompt();
               dispatch(setHasShownSavePrompt());
             }
           }
+          saveToLocalStorage(project);
         }
       }
     }, autoSaveInterval);
diff --git a/src/hooks/useProjectPersistence.test.js b/src/hooks/useProjectPersistence.test.js
index 0ec078cbc..212710f2c 100644
--- a/src/hooks/useProjectPersistence.test.js
+++ b/src/hooks/useProjectPersistence.test.js
@@ -342,5 +342,25 @@ describe("When logged in", () => {
         autosave: false,
       });
     });
+
+    test("Saves project to database if awaitingSave is set", async () => {
+      localStorage.setItem("awaitingSave", "true");
+
+      renderHook(() =>
+        useProjectPersistence({
+          user: user1,
+          project: project,
+          saveTriggered: false,
+        }),
+      );
+      jest.runAllTimers();
+      expect(saveProject).toHaveBeenCalledWith({
+        project,
+        accessToken: user1.access_token,
+        autosave: false,
+      });
+
+      localStorage.removeItem("awaitingSave");
+    });
   });
 });

From 784e86ab7a36a800622ae716576d2399716ddf89 Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Thu, 30 Jan 2025 09:15:52 +0000
Subject: [PATCH 06/18] HTML audio video support (#1179)

## What's Changed?

- `HtmlRunner` now looks for media in `editor.project.videos` and
`editor.project.audio` as well as `editor.project.image_list`
- Upgraded React Testing Library to reduce test warnings
---
 CHANGELOG.md                                  |  1 +
 package.json                                  |  2 +-
 .../Editor/Runners/HtmlRunner/HtmlRunner.jsx  | 34 +++++----
 .../Runners/HtmlRunner/HtmlRunner.test.js     | 71 +++++++++++++++++++
 yarn.lock                                     | 50 ++++++++-----
 5 files changed, 127 insertions(+), 31 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c6145d4c6..391380a3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Ability to write to files in `python` (#1146)
 - Support for the `outputPanels` attribute in the `PyodideRunner` (#1157)
 - Downloading project instructions (#1160)
+- Support for audio and video files in HTML projects (#1179)
 
 ### Changed
 
diff --git a/package.json b/package.json
index bbda89f88..9ddc62e48 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
     "@react-three/test-renderer": "8.2.1",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.2.0",
+    "@testing-library/react": "14.3.1",
     "@testing-library/user-event": "^12.1.10",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
diff --git a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
index f5bcbd13e..ae8a47720 100644
--- a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
+++ b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
@@ -31,7 +31,11 @@ import { MOBILE_MEDIA_QUERY } from "../../../../utils/mediaQueryBreakpoints";
 function HtmlRunner() {
   const project = useSelector((state) => state.editor.project);
   const projectCode = project.components;
-  const projectImages = project.image_list;
+  const projectMedia = [
+    ...(project.image_list || []),
+    ...(project.audio || []),
+    ...(project.videos || []),
+  ];
 
   const firstPanelIndex = 0;
   const focussedFileIndex = useSelector(
@@ -114,9 +118,9 @@ function HtmlRunner() {
   const cssProjectImgs = (projectFile) => {
     var updatedProjectFile = { ...projectFile };
     if (projectFile.extension === "css") {
-      projectImages.forEach((image) => {
-        const find = new RegExp(`['"]${image.filename}['"]`, "g"); // prevent substring matches
-        const replace = `"${image.url}"`;
+      projectMedia.forEach((media_file) => {
+        const find = new RegExp(`['"]${media_file.filename}['"]`, "g"); // prevent substring matches
+        const replace = `"${media_file.url}"`;
         updatedProjectFile.content = updatedProjectFile.content.replaceAll(
           find,
           replace,
@@ -264,27 +268,29 @@ function HtmlRunner() {
 
   const replaceSrcNodes = (
     indexPage,
-    projectImages,
+    projectMedia,
     projectCode,
     attr = "src",
   ) => {
     const srcNodes = indexPage.querySelectorAll(`[${attr}]`);
 
     srcNodes.forEach((srcNode) => {
-      const projectImage = projectImages.find(
+      const projectMediaFile = projectMedia.find(
         (component) => component.filename === srcNode.attrs[attr],
       );
-      const projectFile = projectCode.find(
+      const projectTextFile = projectCode.find(
         (file) => `${file.name}.${file.extension}` === srcNode.attrs[attr],
       );
 
       let src = "";
-      if (!!projectImage) {
-        src = projectImage.url;
-      } else if (!!projectFile) {
+      if (!!projectMediaFile) {
+        src = projectMediaFile.url;
+      } else if (!!projectTextFile) {
         src = getBlobURL(
-          projectFile.content,
-          mimeTypes.lookup(`${projectFile.name}.${projectFile.extension}`),
+          projectTextFile.content,
+          mimeTypes.lookup(
+            `${projectTextFile.name}.${projectTextFile.extension}`,
+          ),
         );
       } else if (matchingRegexes(allowedExternalLinks, srcNode.attrs[attr])) {
         src = srcNode.attrs[attr];
@@ -351,8 +357,8 @@ function HtmlRunner() {
       body.insertAdjacentHTML("afterbegin", disableLocalStorageScript);
 
       replaceHrefNodes(indexPage, projectCode);
-      replaceSrcNodes(indexPage, projectImages, projectCode);
-      replaceSrcNodes(indexPage, projectImages, projectCode, "data-src");
+      replaceSrcNodes(indexPage, projectMedia, projectCode);
+      replaceSrcNodes(indexPage, projectMedia, projectCode, "data-src");
 
       body.appendChild(parse(`<meta filename="${previewFile}" />`));
 
diff --git a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.test.js b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.test.js
index 98fac8be5..40ad19de9 100644
--- a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.test.js
+++ b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.test.js
@@ -499,6 +499,77 @@ describe("When an allowed external link is rendered", () => {
   });
 });
 
+describe("When media is rendered", () => {
+  const mediaHTML =
+    '<head></head><body><img src="https://github.com/image.jpeg" /><video src="https://github.com/video.mp4" /><audio src="https://github.com/audio.mp3" /></body>';
+  let generatedHtml;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            { name: "index", extension: "html", content: mediaHTML },
+          ],
+          image_list: [
+            {
+              filename: "image.jpeg",
+              url: "https://example.com/image.jpeg",
+            },
+          ],
+          videos: [
+            {
+              filename: "video.mp4",
+              url: "https://example.com/video.mp4",
+            },
+          ],
+          audio: [
+            {
+              filename: "audio.mp3",
+              url: "https://example.com/audio.mp3",
+            },
+          ],
+        },
+        focussedFileIndices: [0],
+        openFiles: [["index.html"]],
+        codeRunTriggered: true,
+        codeHasBeenRun: true,
+        errorModalShowing: false,
+      },
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <div id="app">
+            <HtmlRunner />
+          </div>
+        </MemoryRouter>
+      </Provider>,
+    );
+    [generatedHtml] = Blob.mock.calls[0][0];
+  });
+
+  test("Transforms image sources", () => {
+    expect(generatedHtml).toContain(
+      '<img src="https://example.com/image.jpeg"',
+    );
+  });
+
+  test("Transforms video sources", () => {
+    expect(generatedHtml).toContain(
+      '<video src="https://example.com/video.mp4"',
+    );
+  });
+
+  test("Transforms audio sources", () => {
+    expect(generatedHtml).toContain(
+      '<audio src="https://example.com/audio.mp3"',
+    );
+  });
+});
+
 describe("When on desktop", () => {
   let store;
 
diff --git a/yarn.lock b/yarn.lock
index ab941ab3b..b74de68c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -113,7 +113,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.25.7, @babel/code-frame@npm:^7.5.5":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.25.7, @babel/code-frame@npm:^7.5.5":
   version: 7.25.7
   resolution: "@babel/code-frame@npm:7.25.7"
   dependencies:
@@ -123,6 +123,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.10.4":
+  version: 7.26.2
+  resolution: "@babel/code-frame@npm:7.26.2"
+  dependencies:
+    "@babel/helper-validator-identifier": ^7.25.9
+    js-tokens: ^4.0.0
+    picocolors: ^1.0.0
+  checksum: db13f5c42d54b76c1480916485e6900748bbcb0014a8aca87f50a091f70ff4e0d0a6db63cade75eb41fcc3d2b6ba0a7f89e343def4f96f00269b41b8ab8dd7b8
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.25.7, @babel/compat-data@npm:^7.25.8":
   version: 7.25.8
   resolution: "@babel/compat-data@npm:7.25.8"
@@ -352,6 +363,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-validator-identifier@npm:7.25.9"
+  checksum: 5b85918cb1a92a7f3f508ea02699e8d2422fe17ea8e82acd445006c0ef7520fbf48e3dbcdaf7b0a1d571fc3a2715a29719e5226636cb6042e15fe6ed2a590944
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.25.7":
   version: 7.25.7
   resolution: "@babel/helper-validator-option@npm:7.25.7"
@@ -2753,7 +2771,7 @@ __metadata:
     "@svgr/webpack": 5.5.0
     "@szhsin/react-menu": ^3.2.0
     "@testing-library/jest-dom": ^5.16.5
-    "@testing-library/react": ^13.2.0
+    "@testing-library/react": 14.3.1
     "@testing-library/user-event": ^12.1.10
     "@typescript-eslint/eslint-plugin": ^4.5.0
     "@typescript-eslint/parser": ^4.5.0
@@ -3494,9 +3512,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.5.0":
-  version: 8.20.1
-  resolution: "@testing-library/dom@npm:8.20.1"
+"@testing-library/dom@npm:^9.0.0":
+  version: 9.3.4
+  resolution: "@testing-library/dom@npm:9.3.4"
   dependencies:
     "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
@@ -3506,7 +3524,7 @@ __metadata:
     dom-accessibility-api: ^0.5.9
     lz-string: ^1.5.0
     pretty-format: ^27.0.2
-  checksum: 06fc8dc67849aadb726cbbad0e7546afdf8923bd39acb64c576d706249bd7d0d05f08e08a31913fb621162e3b9c2bd0dce15964437f030f9fa4476326fdd3007
+  checksum: dfd6fb0d6c7b4dd716ba3c47309bc9541b4a55772cb61758b4f396b3785efe2dbc75dc63423545c039078c7ffcc5e4b8c67c2db1b6af4799580466036f70026f
   languageName: node
   linkType: hard
 
@@ -3527,17 +3545,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^13.2.0":
-  version: 13.4.0
-  resolution: "@testing-library/react@npm:13.4.0"
+"@testing-library/react@npm:14.3.1":
+  version: 14.3.1
+  resolution: "@testing-library/react@npm:14.3.1"
   dependencies:
     "@babel/runtime": ^7.12.5
-    "@testing-library/dom": ^8.5.0
+    "@testing-library/dom": ^9.0.0
     "@types/react-dom": ^18.0.0
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 51ec548c1fdb1271089a5c63e0908f0166f2c7fcd9cacd3108ebbe0ce64cb4351812d885892020dc37608418cfb15698514856502b3cab0e5cc58d6cc1bd4a3e
+  checksum: b057d4c9db5a523acfc24d7bc4665a924ab8d6f252c7f51eecf7dd30f1239413e1134925fd5cc9cbdef80496af64c04e6719b2081f89fe05ba87e8c6305bcc16
   languageName: node
   linkType: hard
 
@@ -3936,11 +3954,11 @@ __metadata:
   linkType: hard
 
 "@types/react-dom@npm:^18.0.0":
-  version: 18.3.1
-  resolution: "@types/react-dom@npm:18.3.1"
-  dependencies:
-    "@types/react": "*"
-  checksum: ad28ecce3915d30dc76adc2a1373fda1745ba429cea290e16c6628df9a05fd80b6403c8e87d78b45e6c60e51df7a67add389ab62b90070fbfdc9bda8307d9953
+  version: 18.3.5
+  resolution: "@types/react-dom@npm:18.3.5"
+  peerDependencies:
+    "@types/react": ^18.0.0
+  checksum: 95c757684f71e761515c5a11299e5feec550c72bb52975487f360e6f0d359b26454c26eaf2ce45dd22748205aa9b2c2fe0abe7005ebcbd233a7615283ac39a7d
   languageName: node
   linkType: hard
 

From 522394ab020fe26e6990443162091f9081367bdf Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Thu, 30 Jan 2025 10:55:32 +0000
Subject: [PATCH 07/18] Feat/editable instructions (#1166)

Co-authored-by: Conor <905676+conorriches@users.noreply.github.com>
Co-authored-by: Jamie Benstead <jamie.benstead@gmail.com>
---
 .github/workflows/ci-cd.yml                   |   2 +-
 CHANGELOG.md                                  |   9 +
 README.md                                     |   1 +
 package.json                                  |   2 +
 src/assets/markdown/demoInstructions.md       |  20 +
 src/assets/stylesheets/Instructions.scss      |  78 +++-
 .../InstructionsPanel/InstructionsPanel.jsx   | 126 +++++-
 .../InstructionsPanel.test.js                 | 385 +++++++++++++-----
 .../ProgressBar/ProgressBar.jsx               |   1 +
 .../ProgressBar/ProgressBar.test.js           |  12 +-
 src/components/Menus/Sidebar/Sidebar.jsx      |  17 +-
 src/components/Menus/Sidebar/Sidebar.test.js  |  66 +++
 .../WebComponentProject.jsx                   |  32 +-
 .../WebComponentProject.test.js               | 291 ++++++-------
 src/containers/WebComponentLoader.jsx         |   4 +-
 src/containers/WebComponentLoader.test.js     |   6 +-
 src/redux/EditorSlice.js                      |  14 +-
 src/redux/InstructionsSlice.js                |  11 +-
 src/redux/RootSlice.js                        |  33 ++
 src/redux/RootSlice.test.js                   |  57 +++
 src/redux/WebComponentAuthSlice.js            |   4 +-
 src/redux/stores/WebComponentStore.js         |  11 +-
 src/utils/i18n.js                             |  12 +
 src/utils/setupTests.js                       |   5 +
 src/web-component.js                          |   4 +
 webpack.config.js                             |   4 +
 yarn.lock                                     |  23 ++
 27 files changed, 922 insertions(+), 308 deletions(-)
 create mode 100644 src/assets/markdown/demoInstructions.md
 create mode 100644 src/redux/RootSlice.js
 create mode 100644 src/redux/RootSlice.test.js

diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
index bb741e939..66d19cbdc 100644
--- a/.github/workflows/ci-cd.yml
+++ b/.github/workflows/ci-cd.yml
@@ -104,7 +104,7 @@ jobs:
           REACT_APP_PLAUSIBLE_SOURCE: ""
 
       - name: Archive cypress artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4.6.0
         if: failure()
         with:
           name: cypress-artifacts
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 391380a3a..2de093277 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,14 +12,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Autosave instructions (#1163)
+- Editable instructions (#1161)
 - Ability to write to files in `python` (#1146)
 - Support for the `outputPanels` attribute in the `PyodideRunner` (#1157)
 - Downloading project instructions (#1160)
 - Support for audio and video files in HTML projects (#1179)
+- Show instructions option in sidebar if instructions are editable (#1164)
+- Open instructions panel by default if instructions are editable (#1164)
+- Instructions empty state to show when instructions are editable (#1165, #1168)
+- Allow `instructions` attribute to override instructions attached to the project (#1169)
+- Instructions tabs for edit and viewing (#1167)
+
 
 ### Changed
 
 - Made `INSTRUCTIONS.md` a reserved file name (#1160)
+- Clear the redux store when the component unmounts (#1169)
 - Login to save now logs in and automatically saves (#1162)
 
 ## [0.28.14] - 2025-01-06
diff --git a/README.md b/README.md
index 54281f396..652313d25 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,7 @@ The `editor-wc` tag accepts the following attributes, which must be provided as
 - `assets_identifier`: Load assets (not code) from this project identifier
 - `auth_key`: Authenticate the user to allow them to make API requests such as saving their work
 - `code`: A preset blob of code to show in the editor pane (overrides content of `main.py`/`index.html`)
+- `editable_instructions`: Boolean whether to show edit panel for instructions
 - `embedded`: Enable embedded mode which hides some functionality (defaults to `false`)
 - `host_styles`: Styles passed into the web component from the host page
 - `identifier`: Load the project with this identifier from the database
diff --git a/package.json b/package.json
index 9ddc62e48..c2bf8d40b 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "js-convert-case": "^4.2.0",
     "jszip": "^3.10.1",
     "jszip-utils": "^0.1.0",
+    "marked": "^15.0.6",
     "material-symbols": "^0.27.0",
     "mime-types": "^2.1.35",
     "node-html-parser": "^6.1.5",
@@ -53,6 +54,7 @@
     "prismjs": "^1.29.0",
     "prompts": "2.4.0",
     "prop-types": "^15.8.1",
+    "raw-loader": "^4.0.2",
     "rc-resize-observer": "^1.3.1",
     "re-resizable": "6.9.9",
     "react": "^18.1.0",
diff --git a/src/assets/markdown/demoInstructions.md b/src/assets/markdown/demoInstructions.md
new file mode 100644
index 000000000..0aaa55945
--- /dev/null
+++ b/src/assets/markdown/demoInstructions.md
@@ -0,0 +1,20 @@
+# How instructions work
+
+## Enabling instructions
+
+Any text written here will be visible to students in the sidebar
+
+If you decide you do not want instructions, simply leave this panel blank.
+
+## Writing instructions
+
+Write your instructions using [Markdown](https://www.markdownguide.org/)
+### What you can do
+
+Lists:
+
+- Bullet points
+- Bullet points
+
+1. numbered steps
+2. numbered steps
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index e32b73253..c3bab4c8a 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -1,10 +1,14 @@
-@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/squiggle.scss" as *;
+@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/squiggle.scss"
+  as *;
+@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/mixins/typography";
 @use "./rpf_design_system/colours" as *;
 @use "./rpf_design_system/spacing" as *;
-@use './rpf_design_system/font-size' as *;
+@use "./rpf_design_system/font-size" as *;
 @use "./rpf_design_system/font-weight" as *;
 
 .project-instructions {
+  block-size: 100%;
+
   h2 {
     @include font-size-1-25(bold);
     margin: 0;
@@ -72,14 +76,11 @@
     border-block-end: 1px solid $rpf-grey-600;
   }
 
-
-
   .line-numbers {
     padding-inline-start: $space-3;
     padding-inline-end: $space-1;
   }
 
-
   .line-numbers-rows {
     border-color: $rpf-text-secondary-dark;
 
@@ -97,13 +98,16 @@
   }
 
   .language-python {
-    .number, .boolean, .function {
+    .number,
+    .boolean,
+    .function {
       color: $rpf-syntax-1;
     }
     .keyword {
       color: $rpf-syntax-4;
     }
-    .string, .char {
+    .string,
+    .char {
       color: $rpf-syntax-2;
     }
     .comment {
@@ -129,7 +133,8 @@
       color: $rpf-syntax-4;
     }
 
-    .property, .punctuation {
+    .property,
+    .punctuation {
       color: $rpf-white;
     }
   }
@@ -137,7 +142,8 @@
   .language-html {
     .tag {
       color: $rpf-syntax-4;
-      .punctuation, .attr-name {
+      .punctuation,
+      .attr-name {
         color: $rpf-white;
       }
 
@@ -255,4 +261,58 @@
       white-space: pre-wrap;
     }
   }
+
+  .project-instructions__empty {
+    background-color: $rpf-teal-100;
+    border-radius: $space-0-5;
+    display: flex;
+    flex-direction: column;
+    gap: $space-1-5;
+    padding: $space-1;
+  }
+
+  .project-instructions__empty-text {
+    margin: 0;
+  }
+}
+
+#app,
+#wc {
+  .c-instruction-tabs {
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+
+    .react-tabs {
+      border: 1px solid var(--editor-color-outline);
+
+      .react-tabs__tab-list {
+        border-block-end: 1px solid var(--editor-color-outline);
+      }
+    }
+
+    .react-tabs__tab {
+      background: var(--rpf-off-white);
+      padding-inline: var(--space-1-5);
+
+      &--selected {
+        background: var(--rpf-white);
+      }
+    }
+
+    .react-tabs__tab-panel {
+      .project-instructions {
+        padding-inline: var(--space-1);
+      }
+    }
+
+    textarea {
+      @include typography.style-1();
+
+      border: none;
+      block-size: 100%;
+      overflow-block: scroll;
+      padding: var(--space-1);
+    }
+  }
 }
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
index 03b711a99..d57e6cf98 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
@@ -1,7 +1,10 @@
 import React, { useEffect, useRef, useMemo, useState } from "react";
 import SidebarPanel from "../SidebarPanel";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { useSelector, useDispatch } from "react-redux";
+import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
+import { Link } from "react-router-dom";
+
 import ProgressBar from "./ProgressBar/ProgressBar";
 import "../../../../assets/stylesheets/Instructions.scss";
 import "prismjs/plugins/highlight-keywords/prism-highlight-keywords.js";
@@ -10,8 +13,15 @@ import "prismjs/plugins/line-numbers/prism-line-numbers.css";
 import "prismjs/plugins/line-highlight/prism-line-highlight.css";
 import { quizReadyEvent } from "../../../../events/WebComponentCustomEvents";
 import { setCurrentStepPosition } from "../../../../redux/InstructionsSlice";
+import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
+import { setProjectInstructions } from "../../../../redux/EditorSlice";
+import demoInstructions from "../../../../assets/markdown/demoInstructions.md";
 
 const InstructionsPanel = () => {
+  const instructionsEditable = useSelector(
+    (state) => state.editor?.instructionsEditable,
+  );
+  const project = useSelector((state) => state.editor?.project);
   const steps = useSelector((state) => state.instructions.project?.steps);
   const quiz = useSelector((state) => state.instructions?.quiz);
   const dispatch = useDispatch();
@@ -22,15 +32,19 @@ const InstructionsPanel = () => {
   const stepContent = useRef();
 
   const [isQuiz, setIsQuiz] = useState(false);
+  const [instructionsTab, setInstructionsTab] = useState(0);
 
   const quizCompleted = useMemo(() => {
     return quiz?.currentQuestion === quiz?.questionCount;
   }, [quiz]);
 
   const numberOfSteps = useSelector(
-    (state) => state.instructions.project.steps.length,
+    (state) => state.instructions.project?.steps?.length || 0,
   );
 
+  const hasInstructions = steps && steps.length > 0;
+  const hasMultipleSteps = numberOfSteps > 1;
+
   const applySyntaxHighlighting = (container) => {
     const codeElements = container.querySelectorAll(
       ".language-python, .language-html, .language-css",
@@ -54,17 +68,27 @@ const InstructionsPanel = () => {
 
   useEffect(() => {
     const setStepContent = (content) => {
-      stepContent.current.parentElement.scrollTo({ top: 0 });
-      stepContent.current.innerHTML = content;
-      applySyntaxHighlighting(stepContent.current);
+      if (stepContent.current) {
+        stepContent.current?.parentElement.scrollTo({ top: 0 });
+        stepContent.current.innerHTML = content;
+        applySyntaxHighlighting(stepContent.current);
+      }
     };
     if (isQuiz && !quizCompleted) {
       setStepContent(quiz.questions[quiz.currentQuestion]);
       document.dispatchEvent(quizReadyEvent);
-    } else if (steps[currentStepPosition]) {
+    } else if (hasInstructions && steps[currentStepPosition]) {
       setStepContent(steps[currentStepPosition].content);
     }
-  }, [steps, currentStepPosition, quiz, quizCompleted, isQuiz]);
+  }, [
+    hasInstructions,
+    steps,
+    currentStepPosition,
+    quiz,
+    quizCompleted,
+    isQuiz,
+    instructionsTab,
+  ]);
 
   useEffect(() => {
     if (quizCompleted && isQuiz) {
@@ -76,13 +100,97 @@ const InstructionsPanel = () => {
     }
   }, [quizCompleted, currentStepPosition, numberOfSteps, dispatch, isQuiz]);
 
+  const addInstructions = () => {
+    dispatch(setProjectInstructions(demoInstructions));
+  };
+
+  const AddInstructionsButton = () => {
+    return (
+      <DesignSystemButton
+        className="btn--primary"
+        icon="add"
+        text={t("instructionsPanel.emptyState.addInstructions")}
+        onClick={addInstructions}
+        fill
+        textAlways
+        small
+      />
+    );
+  };
+
+  const onChange = (e) => {
+    dispatch(setProjectInstructions(e.target.value));
+  };
+
   return (
     <SidebarPanel
       defaultWidth="30vw"
       heading={t("instructionsPanel.projectSteps")}
-      Footer={ProgressBar}
+      Button={instructionsEditable && !hasInstructions && AddInstructionsButton}
+      {...{ Footer: hasMultipleSteps && ProgressBar }}
     >
-      <div className="project-instructions" ref={stepContent}></div>
+      <div className="project-instructions">
+        {instructionsEditable ? (
+          hasInstructions ? (
+            <div className="c-instruction-tabs">
+              <Tabs
+                onSelect={(index) => {
+                  setInstructionsTab(index);
+                }}
+              >
+                <TabList>
+                  <Tab>{t("instructionsPanel.edit")}</Tab>
+                  <Tab>{t("instructionsPanel.view")}</Tab>
+                </TabList>
+                <TabPanel>
+                  <textarea
+                    data-testid="instructionTextarea"
+                    value={project.instructions}
+                    onChange={onChange}
+                  ></textarea>
+                </TabPanel>
+                <TabPanel>
+                  <>
+                    <div
+                      className="project-instructions"
+                      ref={stepContent}
+                    ></div>
+                  </>
+                </TabPanel>
+              </Tabs>
+            </div>
+          ) : (
+            <div className="project-instructions__empty">
+              <p className="project-instructions__empty-text">
+                {t("instructionsPanel.emptyState.purpose")}
+              </p>
+              <p className="project-instructions__empty-text">
+                {t("instructionsPanel.emptyState.location")}
+              </p>
+              <p className="project-instructions__empty-text">
+                <Trans
+                  i18nKey="instructionsPanel.emptyState.markdown"
+                  components={[
+                    <Link
+                      href="https://commonmark.org/help/"
+                      target="_blank"
+                      rel="noreferrer"
+                    />,
+                  ]}
+                />
+              </p>
+              <p className="project-instructions__empty-text">
+                {t("instructionsPanel.emptyState.edits")}
+              </p>
+            </div>
+          )
+        ) : (
+          <div
+            className="project-instructions__content"
+            ref={stepContent}
+          ></div>
+        )}
+      </div>
     </SidebarPanel>
   );
 };
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
index 890cc3e2c..54c443aae 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
@@ -1,126 +1,329 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import InstructionsPanel from "./InstructionsPanel";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
+import { setProjectInstructions } from "../../../../redux/EditorSlice";
+import { act } from "react";
 
 window.HTMLElement.prototype.scrollTo = jest.fn();
 window.Prism = {
   highlightElement: jest.fn(),
 };
 
-describe("It renders project steps when there is no quiz", () => {
-  beforeEach(() => {
-    const mockStore = configureStore([]);
-    const initialState = {
-      instructions: {
-        project: {
-          steps: [
-            { content: "<p>step 0</p>" },
-            {
-              content: `<p>step 1</p>
-                <code class='language-python'>print('hello')</code>
-                <code class='language-html'><p>Hello world</p></code>
-                <code class='language-css'>.hello { color: purple }</code>
-                `,
-            },
-          ],
+describe("When instructionsEditable is true", () => {
+  describe("When there are instructions", () => {
+    let store;
+
+    beforeEach(() => {
+      const mockStore = configureStore([]);
+      const initialState = {
+        editor: {
+          project: {},
+          instructionsEditable: true,
         },
-        quiz: {},
-        currentStepPosition: 1,
-      },
-    };
-    const store = mockStore(initialState);
-    render(
-      <Provider store={store}>
-        <InstructionsPanel />
-      </Provider>,
-    );
-  });
+        instructions: {
+          project: {
+            steps: [{ content: "instructions" }],
+          },
+          quiz: {},
+          currentStepPosition: 1,
+        },
+      };
+      store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+    });
 
-  test("Renders with correct instruction step content", () => {
-    expect(screen.queryByText("step 1")).toBeInTheDocument();
-  });
+    test("Renders two tab titles", () => {
+      expect(screen.getAllByRole("tab")).toHaveLength(2);
+    });
 
-  test("Scrolls instructions to the top", () => {
-    expect(window.HTMLElement.prototype.scrollTo).toHaveBeenCalledWith({
-      top: 0,
+    test("Renders two tab panels", () => {
+      expect(screen.getAllByRole("tabpanel")).toHaveLength(2);
     });
-  });
 
-  test("Renders the progress bar", () => {
-    expect(screen.queryByRole("progressbar")).toBeInTheDocument();
-  });
+    test("Renders the edit panel", () => {
+      expect(screen.getByTestId("instructionTextarea")).toBeInTheDocument();
+    });
 
-  test("Applies syntax highlighting to python code", () => {
-    const codeElement = document.getElementsByClassName("language-python")[0];
-    expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
-  });
+    test("saves content", async () => {
+      const textarea = screen.getByTestId("instructionTextarea");
+      const testString = "SomeInstructions";
+
+      fireEvent.change(textarea, { target: { value: testString } });
 
-  test("Applies syntax highlighting to HTML code", () => {
-    const codeElement = document.getElementsByClassName("language-html")[0];
-    expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+      await waitFor(() => {
+        expect(store.getActions()).toEqual(
+          expect.arrayContaining([setProjectInstructions(testString)]),
+        );
+      });
+    });
+
+    test("Does not render the add instructions button", () => {
+      expect(
+        screen.queryByText("instructionsPanel.emptyState.addInstructions"),
+      ).not.toBeInTheDocument();
+    });
   });
 
-  test("Applies syntax highlighting to CSS code", () => {
-    const codeElement = document.getElementsByClassName("language-css")[0];
-    expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+  describe("When there are no instructions", () => {
+    let store;
+
+    beforeEach(() => {
+      const mockStore = configureStore([]);
+      const initialState = {
+        editor: {
+          project: {},
+          instructionsEditable: true,
+        },
+        instructions: {
+          project: {
+            steps: [],
+          },
+          quiz: {},
+          currentStepPosition: 1,
+        },
+      };
+      store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+    });
+
+    test("Renders the add instrucitons button", () => {
+      expect(
+        screen.queryByText("instructionsPanel.emptyState.addInstructions"),
+      ).toBeInTheDocument();
+    });
+
+    test("Clicking the add instructions button adds the demo instructions", () => {
+      const addInstructionsButton = screen.getByText(
+        "instructionsPanel.emptyState.addInstructions",
+      );
+      act(() => {
+        fireEvent.click(addInstructionsButton);
+      });
+
+      expect(store.getActions()).toEqual(
+        expect.arrayContaining([setProjectInstructions("demoInstructions.md")]),
+      );
+    });
+
+    test("Renders the instructions explanation", () => {
+      expect(
+        screen.queryByText("instructionsPanel.emptyState.purpose"),
+      ).toBeInTheDocument();
+    });
   });
 });
 
-describe("It renders a quiz when it has one", () => {
-  const quizHandler = jest.fn();
+describe("When instructions are not editable", () => {
+  describe("When there are no instructions", () => {
+    beforeEach(() => {
+      const mockStore = configureStore([]);
+      const initialState = {
+        editor: {
+          project: {},
+          instructionsEditable: false,
+        },
+        instructions: {
+          project: {
+            steps: [],
+          },
+          quiz: {},
+          currentStepPosition: 1,
+        },
+      };
+      const store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+    });
+
+    test("Does not render the add instructions button", () => {
+      expect(
+        screen.queryByText("instructionsPanel.emptyState.addInstructions"),
+      ).not.toBeInTheDocument();
+    });
+
+    test("Does not render the instructions explanation", () => {
+      expect(
+        screen.queryByText("instructionsPanel.emptyState.purpose"),
+      ).not.toBeInTheDocument();
+    });
 
-  beforeAll(() => {
-    document.addEventListener("editor-quizReady", quizHandler);
+    test("It renders without crashing", () => {
+      expect(
+        screen.queryByText("instructionsPanel.projectSteps"),
+      ).toBeInTheDocument();
+    });
+
+    test("Does not render the progress bar", () => {
+      expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
+    });
   });
-  beforeEach(() => {
-    const mockStore = configureStore([]);
-    const initialState = {
-      instructions: {
-        project: {
-          steps: [
-            { content: "<p>step 0</p>" },
-            { content: "<p>step 1</p>", knowledgeQuiz: "quizPath" },
-          ],
+
+  describe("When there are instructions", () => {
+    beforeEach(() => {
+      const mockStore = configureStore([]);
+      const initialState = {
+        editor: {
+          project: {},
+          instructionsEditable: false,
         },
-        quiz: {
-          questions: [
-            "<h2>Test quiz</h2><p>step 1</p><code class='language-python'>print('hello')</code>",
-          ],
-          questionCount: 1,
-          currentQuestion: 0,
+        instructions: {
+          project: {
+            steps: [
+              { content: "<p>step 0</p>" },
+              {
+                content: `<p>step 1</p>
+                  <code class='language-python'>print('hello')</code>
+                  <code class='language-html'><p>Hello world</p></code>
+                  <code class='language-css'>.hello { color: purple }</code>
+                  `,
+              },
+            ],
+          },
+          quiz: {},
+          currentStepPosition: 1,
         },
-        currentStepPosition: 1,
-      },
-    };
-    const store = mockStore(initialState);
-    render(
-      <Provider store={store}>
-        <InstructionsPanel />
-      </Provider>,
-    );
-  });
+      };
+      const store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+    });
 
-  test("Renders the quiz content", () => {
-    expect(screen.queryByText("Test quiz")).toBeInTheDocument();
-  });
+    test("Renders no tab titles", () => {
+      expect(screen.queryAllByRole("tab")).toHaveLength(0);
+    });
 
-  test("Scrolls instructions to the top", () => {
-    expect(window.HTMLElement.prototype.scrollTo).toHaveBeenCalledWith({
-      top: 0,
+    test("Renders no tab panels", () => {
+      expect(screen.queryAllByRole("tabpanel")).toHaveLength(0);
+    });
+
+    test("Renders with correct instruction step content", () => {
+      expect(screen.queryByText("step 1")).toBeInTheDocument();
+    });
+
+    test("Scrolls instructions to the top", () => {
+      expect(window.HTMLElement.prototype.scrollTo).toHaveBeenCalledWith({
+        top: 0,
+      });
     });
-  });
 
-  test("Retains the progress bar", () => {
-    expect(screen.queryByRole("progressbar")).toBeInTheDocument();
+    test("Renders the progress bar", () => {
+      expect(screen.queryByRole("progressbar")).toBeInTheDocument();
+    });
+
+    test("Applies syntax highlighting to python code", () => {
+      const codeElement = document.getElementsByClassName("language-python")[0];
+      expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+    });
+
+    test("Applies syntax highlighting to HTML code", () => {
+      const codeElement = document.getElementsByClassName("language-html")[0];
+      expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+    });
+
+    test("Applies syntax highlighting to CSS code", () => {
+      const codeElement = document.getElementsByClassName("language-css")[0];
+      expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+    });
   });
 
-  test("Applies syntax highlighting", () => {
-    const codeElement = document.getElementsByClassName("language-python")[0];
-    expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+  describe("When there is only one step", () => {
+    beforeEach(() => {
+      const mockStore = configureStore([]);
+      const initialState = {
+        editor: {
+          instructionsEditable: false,
+        },
+        instructions: {
+          project: {
+            steps: [{ content: "<p>step 0</p>" }],
+          },
+          quiz: {},
+          currentStepPosition: 0,
+        },
+      };
+      const store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+    });
+
+    test("Does not render the progress bar", () => {
+      expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
+    });
   });
 
-  test("Fires a quizIsReady event", () => {
-    expect(quizHandler).toHaveBeenCalled();
+  describe("When there is a quiz", () => {
+    const quizHandler = jest.fn();
+
+    beforeAll(() => {
+      document.addEventListener("editor-quizReady", quizHandler);
+    });
+    beforeEach(() => {
+      const mockStore = configureStore([]);
+      const initialState = {
+        instructions: {
+          project: {
+            steps: [
+              { content: "<p>step 0</p>" },
+              { content: "<p>step 1</p>", knowledgeQuiz: "quizPath" },
+            ],
+          },
+          quiz: {
+            questions: [
+              "<h2>Test quiz</h2><p>step 1</p><code class='language-python'>print('hello')</code>",
+            ],
+            questionCount: 1,
+            currentQuestion: 0,
+          },
+          currentStepPosition: 1,
+        },
+      };
+      const store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+    });
+
+    test("Renders the quiz content", () => {
+      expect(screen.queryByText("Test quiz")).toBeInTheDocument();
+    });
+
+    test("Scrolls instructions to the top", () => {
+      expect(window.HTMLElement.prototype.scrollTo).toHaveBeenCalledWith({
+        top: 0,
+      });
+    });
+
+    test("Retains the progress bar", () => {
+      expect(screen.queryByRole("progressbar")).toBeInTheDocument();
+    });
+
+    test("Applies syntax highlighting", () => {
+      const codeElement = document.getElementsByClassName("language-python")[0];
+      expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+    });
+
+    test("Fires a quizIsReady event", () => {
+      expect(quizHandler).toHaveBeenCalled();
+    });
   });
 });
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
index 01487a7da..27d4993ed 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
@@ -30,6 +30,7 @@ const ProgressBar = () => {
   const goToPreviousStep = () => {
     dispatch(setCurrentStepPosition(Math.max(currentStepPosition - 1, 0)));
   };
+
   return (
     <div className="progress-bar">
       <Button
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.test.js b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.test.js
index 79d6212c4..4d0a20560 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.test.js
+++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.test.js
@@ -6,16 +6,16 @@ import { setCurrentStepPosition } from "../../../../../redux/InstructionsSlice";
 
 let store;
 
-const renderProgressBarOnStep = (stepNumber) => {
+const renderProgressBarOnStep = (stepNumber, numberOfSteps = 3) => {
   const mockStore = configureStore([]);
+  const steps = new Array(numberOfSteps).fill(0).map((i) => ({
+    content: `<p>step ${i + 1}</p>`,
+  }));
+
   const initialState = {
     instructions: {
       project: {
-        steps: [
-          { content: "<p>step 0</p>" },
-          { content: "<p>step 1</p>" },
-          { content: "<p>step 2</p>" },
-        ],
+        steps,
       },
       currentStepPosition: stepNumber,
     },
diff --git a/src/components/Menus/Sidebar/Sidebar.jsx b/src/components/Menus/Sidebar/Sidebar.jsx
index 4292d19a1..18205614f 100644
--- a/src/components/Menus/Sidebar/Sidebar.jsx
+++ b/src/components/Menus/Sidebar/Sidebar.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { useSelector } from "react-redux";
@@ -84,6 +84,9 @@ const Sidebar = ({ options = [] }) => {
   const instructionsSteps = useSelector(
     (state) => state.instructions?.project?.steps,
   );
+  const instructionsEditable = useSelector(
+    (state) => state.editor.instructionsEditable,
+  );
 
   const removeOption = (optionName, depArray = []) => {
     if ((!depArray || depArray.length === 0) && options.includes(optionName)) {
@@ -96,12 +99,20 @@ const Sidebar = ({ options = [] }) => {
 
   // Remove panels if dependency arrays are empty
   removeOption("images", projectImages);
-  removeOption("instructions", instructionsSteps);
+  if (!instructionsEditable) {
+    removeOption("instructions", instructionsSteps);
+  }
 
   const [option, setOption] = useState(
-    instructionsSteps ? "instructions" : "file",
+    instructionsEditable || instructionsSteps ? "instructions" : "file",
   );
 
+  useEffect(() => {
+    if (instructionsEditable || instructionsSteps) {
+      setOption("instructions");
+    }
+  }, [instructionsEditable, instructionsSteps]);
+
   const toggleOption = (newOption) => {
     if (option !== newOption) {
       setOption(newOption);
diff --git a/src/components/Menus/Sidebar/Sidebar.test.js b/src/components/Menus/Sidebar/Sidebar.test.js
index 6852ba038..0cbbc2e56 100644
--- a/src/components/Menus/Sidebar/Sidebar.test.js
+++ b/src/components/Menus/Sidebar/Sidebar.test.js
@@ -250,3 +250,69 @@ describe("When the project has instructions", () => {
     expect(screen.queryByTitle("sidebar.instructions")).toBeInTheDocument();
   });
 });
+
+describe("When the project has no instructions", () => {
+  describe("When instructions are not editable", () => {
+    beforeEach(() => {
+      const mockStore = configureStore([]);
+      const initialState = {
+        editor: {
+          project: {
+            components: [],
+            image_list: [],
+          },
+          instructionsEditable: false,
+        },
+        instructions: {},
+      };
+      const store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <div id="app">
+            <Sidebar options={options} />
+          </div>
+        </Provider>,
+      );
+    });
+
+    test("Does not show instructions icon", () => {
+      expect(
+        screen.queryByTitle("sidebar.instructions"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("When instructions are editable", () => {
+    beforeEach(() => {
+      const mockStore = configureStore([]);
+      const initialState = {
+        editor: {
+          project: {
+            components: [],
+            image_list: [],
+          },
+          instructionsEditable: true,
+        },
+        instructions: {},
+      };
+      const store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <div id="app">
+            <Sidebar options={options} />
+          </div>
+        </Provider>,
+      );
+    });
+
+    test("Show instructions icon", () => {
+      expect(screen.queryByTitle("sidebar.instructions")).toBeInTheDocument();
+    });
+
+    test("Renders instructions panel open by default", () => {
+      expect(
+        screen.queryByText("instructionsPanel.projectSteps"),
+      ).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/WebComponentProject/WebComponentProject.jsx b/src/components/WebComponentProject/WebComponentProject.jsx
index 08fa2eb55..92156014f 100644
--- a/src/components/WebComponentProject/WebComponentProject.jsx
+++ b/src/components/WebComponentProject/WebComponentProject.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useMediaQuery } from "react-responsive";
+import { marked } from "marked";
 
 import "../../assets/stylesheets/Project.scss";
 import "../../assets/stylesheets/EmbeddedViewer.scss";
@@ -13,7 +14,9 @@ import {
   setIsSplitView,
   setWebComponent,
   setIsOutputOnly,
+  setInstructionsEditable,
 } from "../../redux/EditorSlice";
+import { setInstructions } from "../../redux/InstructionsSlice";
 import { MOBILE_MEDIA_QUERY } from "../../utils/mediaQueryBreakpoints";
 import {
   codeChangedEvent,
@@ -26,6 +29,7 @@ import {
 const WebComponentProject = ({
   withProjectbar = false,
   nameEditable = false,
+  editableInstructions = false,
   withSidebar = false,
   sidebarOptions = [],
   outputOnly = false,
@@ -44,9 +48,15 @@ const WebComponentProject = ({
   const error = useSelector((state) => state.editor.error);
   const errorDetails = useSelector((state) => state.editor.errorDetails);
   const codeHasBeenRun = useSelector((state) => state.editor.codeHasBeenRun);
+  const projectInstructions = useSelector(
+    (state) => state.editor.project.instructions,
+  );
   const currentStepPosition = useSelector(
     (state) => state.instructions.currentStepPosition,
   );
+  const permitInstructionsOverride = useSelector(
+    (state) => state.instructions.permitOverride,
+  );
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const [codeHasRun, setCodeHasRun] = useState(codeHasBeenRun);
   const dispatch = useDispatch();
@@ -54,8 +64,9 @@ const WebComponentProject = ({
   useEffect(() => {
     dispatch(setIsSplitView(outputSplitView));
     dispatch(setWebComponent(true));
+    dispatch(setInstructionsEditable(editableInstructions));
     dispatch(setIsOutputOnly(outputOnly));
-  }, [outputSplitView, outputOnly, dispatch]);
+  }, [editableInstructions, outputSplitView, outputOnly, dispatch]);
 
   useEffect(() => {
     setCodeHasRun(false);
@@ -71,6 +82,25 @@ const WebComponentProject = ({
     }
   }, [projectIdentifier]);
 
+  useEffect(() => {
+    if (!projectInstructions || !permitInstructionsOverride) return;
+
+    dispatch(
+      setInstructions({
+        project: {
+          steps: [
+            {
+              quiz: false,
+              title: "",
+              content: marked.parse(projectInstructions),
+            },
+          ],
+        },
+        permitOverride: true,
+      }),
+    );
+  }, [dispatch, projectInstructions, permitInstructionsOverride]);
+
   useEffect(() => {
     if (codeRunTriggered) {
       document.dispatchEvent(runStartedEvent);
diff --git a/src/components/WebComponentProject/WebComponentProject.test.js b/src/components/WebComponentProject/WebComponentProject.test.js
index 4a303121b..2141c095d 100644
--- a/src/components/WebComponentProject/WebComponentProject.test.js
+++ b/src/components/WebComponentProject/WebComponentProject.test.js
@@ -20,34 +20,52 @@ jest.useFakeTimers();
 
 let store;
 
+const renderWebComponentProject = ({
+  instructions,
+  permitOverride = true,
+  loading,
+  codeRunTriggered = false,
+  codeHasBeenRun = false,
+  props = {},
+}) => {
+  const middlewares = [];
+  const mockStore = configureStore(middlewares);
+  const initialState = {
+    editor: {
+      project: {
+        components: [
+          { name: "main", extension: "py", content: "print('hello')" },
+        ],
+        image_list: [],
+        instructions,
+      },
+      loading,
+      openFiles: [],
+      focussedFileIndices: [],
+      codeRunTriggered,
+      codeHasBeenRun,
+    },
+    instructions: {
+      currentStepPosition: 3,
+      permitOverride,
+    },
+    auth: {},
+  };
+  store = mockStore(initialState);
+
+  render(
+    <Provider store={store}>
+      <WebComponentProject {...props} />
+    </Provider>,
+  );
+};
+
 describe("When state set", () => {
   beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            { name: "main", extension: "py", content: "print('hello')" },
-          ],
-          image_list: [],
-        },
-        openFiles: [],
-        focussedFileIndices: [],
-        codeRunTriggered: true,
-      },
-      instructions: {
-        currentStepPosition: 3,
-      },
-      auth: {},
-    };
-    store = mockStore(initialState);
-
-    render(
-      <Provider store={store}>
-        <WebComponentProject />
-      </Provider>,
-    );
+    renderWebComponentProject({
+      instructions: "My amazing instructions",
+      codeRunTriggered: true,
+    });
   });
 
   test("Triggers codeChanged event", () => {
@@ -72,40 +90,70 @@ describe("When state set", () => {
   test("Defaults to not showing the projectbar", () => {
     expect(screen.queryByText("header.newProject")).not.toBeInTheDocument();
   });
+
+  test("Dispatches action to set instructions", () => {
+    expect(store.getActions()).toEqual(
+      expect.arrayContaining([
+        {
+          type: "instructions/setInstructions",
+          payload: {
+            permitOverride: true,
+            project: {
+              steps: [
+                {
+                  title: "",
+                  content: "<p>My amazing instructions</p>\n",
+                  quiz: false,
+                },
+              ],
+            },
+          },
+        },
+      ]),
+    );
+  });
 });
 
-describe("When code run finishes", () => {
-  let store;
+describe("When there are no instructions", () => {
+  beforeEach(() => {
+    renderWebComponentProject({});
+  });
 
+  test("Does not dispatch action to set instructions", () => {
+    expect(store.getActions()).not.toEqual(
+      expect.arrayContaining([
+        {
+          type: "instructions/setInstructions",
+          payload: expect.any(Object),
+        },
+      ]),
+    );
+  });
+});
+
+describe("When overriding instructions is not permitted", () => {
   beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            { name: "main", extension: "py", content: "print('hello')" },
-          ],
-          image_list: [],
+    renderWebComponentProject({
+      instructions: "My amazing instructions",
+      permitOverride: false,
+    });
+  });
+
+  test("Does not dispatch action to set instructions", () => {
+    expect(store.getActions()).not.toEqual(
+      expect.arrayContaining([
+        {
+          type: "instructions/setInstructions",
+          payload: expect.any(Object),
         },
-        openFiles: [],
-        focussedFileIndices: [],
-        codeRunTriggered: false,
-        codeHasBeenRun: true,
-      },
-      instructions: {},
-      auth: {},
-    };
-    store = mockStore(initialState);
-
-    render(
-      <Provider store={store}>
-        <WebComponentProject />
-      </Provider>,
+      ]),
     );
   });
+});
 
+describe("When code run finishes", () => {
   test("Triggers runCompletedEvent", () => {
+    renderWebComponentProject({ codeHasBeenRun: true });
     expect(runCompletedHandler).toHaveBeenCalled();
     expect(runCompletedHandler.mock.lastCall[0].detail).toHaveProperty(
       "isErrorFree",
@@ -113,11 +161,10 @@ describe("When code run finishes", () => {
   });
 
   test("Triggers runCompletedEvent with error details when outputOnly is true", () => {
-    render(
-      <Provider store={store}>
-        <WebComponentProject outputOnly={true} />
-      </Provider>,
-    );
+    renderWebComponentProject({
+      codeHasBeenRun: true,
+      props: { outputOnly: true },
+    });
     expect(runCompletedHandler).toHaveBeenCalled();
     expect(runCompletedHandler.mock.lastCall[0].detail).toHaveProperty(
       "errorDetails",
@@ -127,29 +174,9 @@ describe("When code run finishes", () => {
 
 describe("When withSidebar is true", () => {
   beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            { name: "main", extension: "py", content: "print('hello')" },
-          ],
-          image_list: [],
-        },
-        openFiles: [],
-        focussedFileIndices: [],
-      },
-      instructions: {},
-      auth: {},
-    };
-    store = mockStore(initialState);
-
-    render(
-      <Provider store={store}>
-        <WebComponentProject withSidebar={true} sidebarOptions={["settings"]} />
-      </Provider>,
-    );
+    renderWebComponentProject({
+      props: { withSidebar: true, sidebarOptions: ["settings"] },
+    });
   });
 
   test("Renders the sidebar", () => {
@@ -163,30 +190,10 @@ describe("When withSidebar is true", () => {
 
 describe("When withProjectbar is true", () => {
   beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            { name: "main", extension: "py", content: "print('hello')" },
-          ],
-          image_list: [],
-        },
-        openFiles: [],
-        focussedFileIndices: [],
-        loading: "success",
-      },
-      instructions: {},
-      auth: {},
-    };
-    store = mockStore(initialState);
-
-    render(
-      <Provider store={store}>
-        <WebComponentProject withProjectbar={true} />
-      </Provider>,
-    );
+    renderWebComponentProject({
+      loading: "success",
+      props: { withProjectbar: true },
+    });
   });
 
   test("Renders the projectbar", () => {
@@ -195,35 +202,12 @@ describe("When withProjectbar is true", () => {
 });
 
 describe("When output_only is true", () => {
-  let mockStore;
-  let initialState;
-
-  beforeEach(() => {
-    const middlewares = [];
-    mockStore = configureStore(middlewares);
-    initialState = {
-      editor: {
-        project: {
-          components: [],
-        },
-        openFiles: [],
-        focussedFileIndices: [],
-      },
-      instructions: {},
-      auth: {},
-    };
-  });
-
   describe("when loading is pending", () => {
     beforeEach(() => {
-      initialState.editor.loading = "pending";
-      store = mockStore(initialState);
-
-      render(
-        <Provider store={store}>
-          <WebComponentProject outputOnly={true} />
-        </Provider>,
-      );
+      renderWebComponentProject({
+        loading: "pending",
+        props: { outputOnly: true },
+      });
     });
 
     test("sets isOutputOnly state to true", () => {
@@ -241,14 +225,10 @@ describe("When output_only is true", () => {
 
   describe("when loading is success", () => {
     beforeEach(() => {
-      initialState.editor.loading = "success";
-      store = mockStore(initialState);
-
-      render(
-        <Provider store={store}>
-          <WebComponentProject outputOnly={true} />
-        </Provider>,
-      );
+      renderWebComponentProject({
+        loading: "success",
+        props: { outputOnly: true },
+      });
     });
 
     test("only renders the output", () => {
@@ -264,30 +244,9 @@ describe("When output_only is true", () => {
 });
 
 describe("outputSplitView property", () => {
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [],
-        },
-        openFiles: [],
-        focussedFileIndices: [],
-      },
-      instructions: {},
-      auth: {},
-    };
-    store = mockStore(initialState);
-  });
-
   describe("when property is not set", () => {
     beforeEach(() => {
-      render(
-        <Provider store={store}>
-          <WebComponentProject />
-        </Provider>,
-      );
+      renderWebComponentProject({});
     });
 
     test("sets isSplitView state to false by default", () => {
@@ -301,11 +260,7 @@ describe("outputSplitView property", () => {
 
   describe("when property is false", () => {
     beforeEach(() => {
-      render(
-        <Provider store={store}>
-          <WebComponentProject outputSplitView={false} />
-        </Provider>,
-      );
+      renderWebComponentProject({ props: { outputSplitView: false } });
     });
 
     test("sets isSplitView state to false", () => {
@@ -319,11 +274,7 @@ describe("outputSplitView property", () => {
 
   describe("when property is true", () => {
     beforeEach(() => {
-      render(
-        <Provider store={store}>
-          <WebComponentProject outputSplitView={true} />
-        </Provider>,
-      );
+      renderWebComponentProject({ props: { outputSplitView: true } });
     });
 
     test("sets isSplitView state to true", () => {
diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx
index 204ebdc5a..353b5ac41 100644
--- a/src/containers/WebComponentLoader.jsx
+++ b/src/containers/WebComponentLoader.jsx
@@ -34,6 +34,7 @@ const WebComponentLoader = (props) => {
     authKey,
     code,
     embedded = false,
+    editableInstructions,
     hostStyles, // Pass in styles from the host
     identifier,
     instructions,
@@ -152,7 +153,7 @@ const WebComponentLoader = (props) => {
 
   useEffect(() => {
     if (instructions) {
-      dispatch(setInstructions(instructions));
+      dispatch(setInstructions({ ...instructions, permitOverride: false }));
     }
   }, [instructions, dispatch]);
 
@@ -189,6 +190,7 @@ const WebComponentLoader = (props) => {
               outputOnly={outputOnly}
               outputPanels={outputPanels}
               outputSplitView={outputSplitView}
+              editableInstructions={editableInstructions}
             />
             {errorModalShowing && <ErrorModal />}
             {newFileModalShowing && <NewFileModal />}
diff --git a/src/containers/WebComponentLoader.test.js b/src/containers/WebComponentLoader.test.js
index 34c5bac4f..b82bcd9f5 100644
--- a/src/containers/WebComponentLoader.test.js
+++ b/src/containers/WebComponentLoader.test.js
@@ -29,7 +29,11 @@ let cookies;
 const code = "print('This project is amazing')";
 const identifier = "My amazing project";
 const steps = [{ quiz: false, title: "Step 1", content: "Do something" }];
-const instructions = { currentStepPosition: 3, project: { steps: steps } };
+const instructions = {
+  currentStepPosition: 3,
+  project: { steps: steps },
+  permitOverride: false,
+};
 const authKey = "my_key";
 const user = { access_token: "my_token" };
 
diff --git a/src/redux/EditorSlice.js b/src/redux/EditorSlice.js
index 624ef3dd2..be193b1f1 100644
--- a/src/redux/EditorSlice.js
+++ b/src/redux/EditorSlice.js
@@ -93,7 +93,7 @@ export const loadProjectList = createAsyncThunk(
   },
 );
 
-const initialState = {
+export const editorInitialState = {
   project: {},
   cascadeUpdate: false,
   readOnly: false,
@@ -144,9 +144,9 @@ const initialState = {
 
 export const EditorSlice = createSlice({
   name: "editor",
-  initialState,
+  initialState: editorInitialState,
   reducers: {
-    resetState: () => initialState,
+    resetState: () => editorInitialState,
     closeFile: (state, action) => {
       const panelIndex = state.openFiles
         .map((fileNames) => fileNames.includes(action.payload))
@@ -238,12 +238,18 @@ export const EditorSlice = createSlice({
       }
       state.justLoaded = true;
     },
+    setProjectInstructions: (state, action) => {
+      state.project.instructions = action.payload;
+    },
     expireJustLoaded: (state) => {
       state.justLoaded = false;
     },
     setReadOnly: (state, action) => {
       state.readOnly = action.payload;
     },
+    setInstructionsEditable: (state, action) => {
+      state.instructionsEditable = action.payload;
+    },
     setSenseHatAlwaysEnabled: (state, action) => {
       state.senseHatAlwaysEnabled = action.payload;
     },
@@ -469,7 +475,9 @@ export const {
   setHasShownSavePrompt,
   setWebComponent,
   setProject,
+  setProjectInstructions,
   setReadOnly,
+  setInstructionsEditable,
   setSenseHatAlwaysEnabled,
   setSenseHatEnabled,
   setLoadRemixDisabled,
diff --git a/src/redux/InstructionsSlice.js b/src/redux/InstructionsSlice.js
index d9c639db9..d3ac28165 100644
--- a/src/redux/InstructionsSlice.js
+++ b/src/redux/InstructionsSlice.js
@@ -1,12 +1,15 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { reducers } from "./reducers/instructionsReducers";
 
+export const instructionsInitialState = {
+  currentStepPosition: 0,
+  project: {},
+  permitOverride: true,
+};
+
 export const InstructionsSlice = createSlice({
   name: "instructions",
-  initialState: {
-    currentStepPosition: 0,
-    project: {},
-  },
+  initialState: instructionsInitialState,
   reducers,
 });
 
diff --git a/src/redux/RootSlice.js b/src/redux/RootSlice.js
new file mode 100644
index 000000000..3ef2e6ed3
--- /dev/null
+++ b/src/redux/RootSlice.js
@@ -0,0 +1,33 @@
+import { createSlice } from "@reduxjs/toolkit";
+import editorReducer, { editorInitialState } from "./EditorSlice.js";
+import instructionsReducer, {
+  instructionsInitialState,
+} from "./InstructionsSlice.js";
+import authReducer, { authInitialState } from "./WebComponentAuthSlice.js";
+
+const initialState = {
+  editor: editorInitialState,
+  instructions: instructionsInitialState,
+  auth: authInitialState,
+};
+
+const RootSlice = createSlice({
+  name: "root",
+  initialState,
+  reducers: {
+    resetStore: (state) => {
+      state.editor = editorInitialState;
+      state.instructions = instructionsInitialState;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addDefaultCase((state, action) => {
+      state.editor = editorReducer(state.editor, action);
+      state.instructions = instructionsReducer(state.instructions, action);
+      state.auth = authReducer(state.auth, action);
+    });
+  },
+});
+
+export const { resetStore } = RootSlice.actions;
+export default RootSlice.reducer;
diff --git a/src/redux/RootSlice.test.js b/src/redux/RootSlice.test.js
new file mode 100644
index 000000000..acab31650
--- /dev/null
+++ b/src/redux/RootSlice.test.js
@@ -0,0 +1,57 @@
+import reducer, { resetStore } from "./RootSlice";
+import { editorInitialState } from "./EditorSlice";
+import { instructionsInitialState } from "./InstructionsSlice";
+
+test("Action reset store clears the project data", () => {
+  const previousState = {
+    editor: {
+      ...editorInitialState,
+      project: {
+        components: [
+          { name: "main", extension: "py", content: "print('hello world')" },
+        ],
+      },
+    },
+    instructions: instructionsInitialState,
+  };
+
+  expect(reducer(previousState, resetStore())).toEqual({
+    editor: editorInitialState,
+    instructions: instructionsInitialState,
+  });
+});
+
+test("Action reset store clears the instructions data", () => {
+  const previousState = {
+    editor: editorInitialState,
+    instructions: {
+      ...instructionsInitialState,
+      project: {
+        steps: [{ content: "<p>step 0</p>" }],
+      },
+    },
+  };
+
+  expect(reducer(previousState, resetStore())).toEqual({
+    editor: editorInitialState,
+    instructions: instructionsInitialState,
+  });
+});
+
+test("Action reset store does not clear the auth data", () => {
+  const previousState = {
+    editor: editorInitialState,
+    instructions: instructionsInitialState,
+    auth: {
+      user: { access_token: "1234" },
+    },
+  };
+
+  expect(reducer(previousState, resetStore())).toEqual({
+    editor: editorInitialState,
+    instructions: instructionsInitialState,
+    auth: {
+      user: { access_token: "1234" },
+    },
+  });
+});
diff --git a/src/redux/WebComponentAuthSlice.js b/src/redux/WebComponentAuthSlice.js
index 43579db30..cfc77788a 100644
--- a/src/redux/WebComponentAuthSlice.js
+++ b/src/redux/WebComponentAuthSlice.js
@@ -1,9 +1,11 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { reducers } from "./reducers/webComponentAuthReducers";
 
+export const authInitialState = {};
+
 export const WebComponentAuthSlice = createSlice({
   name: "auth",
-  initialState: {},
+  initialState: authInitialState,
   reducers,
 });
 
diff --git a/src/redux/stores/WebComponentStore.js b/src/redux/stores/WebComponentStore.js
index 4de6eb83f..a2f1e3aa1 100644
--- a/src/redux/stores/WebComponentStore.js
+++ b/src/redux/stores/WebComponentStore.js
@@ -1,15 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
-import EditorReducer from "../EditorSlice";
-import InstructionsReducer from "../InstructionsSlice";
-import WebComponentAuthReducer, { setUser } from "../WebComponentAuthSlice";
+import { setUser } from "../WebComponentAuthSlice";
+import rootReducer from "../RootSlice";
 import userMiddleWare from "../middlewares/localStorageUserMiddleware";
 
 const store = configureStore({
-  reducer: {
-    editor: EditorReducer,
-    instructions: InstructionsReducer,
-    auth: WebComponentAuthReducer,
-  },
+  reducer: rootReducer,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: {
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index eeab05286..c69e5a40c 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -206,9 +206,21 @@ i18n
             info: "Information",
           },
           instructionsPanel: {
+            emptyState: {
+              addInstructions: "Add instructions",
+              edits:
+                "Like project code, students will not see any edits you make to the instructions after they have saved their version of the project.",
+              location:
+                "These instructions will be shown to students in their project sidebar and will be view-only.",
+              markdown: "Instructions are written in <0>markdown</0>.",
+              purpose:
+                "Instructions can be added to your project to guide students.",
+            },
             nextStep: "Next step",
             previousStep: "Previous step",
             projectSteps: "Project steps",
+            edit: "Edit",
+            view: "View",
           },
           projectsPanel: {
             projects: "Projects",
diff --git a/src/utils/setupTests.js b/src/utils/setupTests.js
index d0025dcd8..201443727 100644
--- a/src/utils/setupTests.js
+++ b/src/utils/setupTests.js
@@ -36,12 +36,17 @@ jest.mock("react-i18next", () => ({
       },
     };
   },
+  Trans: ({ children, i18nKey }) => children || i18nKey,
 }));
 
 jest.mock("./i18n", () => ({
   t: (string) => string,
 }));
 
+jest.mock("../assets/markdown/demoInstructions.md", () => {
+  return "demoInstructions.md";
+});
+
 global.Blob = jest.fn();
 window.URL.createObjectURL = jest.fn();
 window.Worker = PyodideWorker;
diff --git a/src/web-component.js b/src/web-component.js
index 885bbd96f..cb65ea397 100644
--- a/src/web-component.js
+++ b/src/web-component.js
@@ -9,6 +9,7 @@ import "./utils/i18n";
 import camelCase from "camelcase";
 import { stopCodeRun, stopDraw, triggerCodeRun } from "./redux/EditorSlice";
 import { BrowserRouter } from "react-router-dom";
+import { resetStore } from "./redux/RootSlice";
 
 Sentry.init({
   dsn: process.env.REACT_APP_SENTRY_DSN,
@@ -42,6 +43,7 @@ class WebComponent extends HTMLElement {
       console.log("Unmounted web-component...");
       this.root.unmount();
     }
+    store.dispatch(resetStore());
   }
 
   static get observedAttributes() {
@@ -49,6 +51,7 @@ class WebComponent extends HTMLElement {
       "assets_identifier",
       "auth_key",
       "code",
+      "editable_instructions",
       "embedded",
       "host_styles",
       "identifier",
@@ -77,6 +80,7 @@ class WebComponent extends HTMLElement {
     if (
       [
         "embedded",
+        "editable_instructions",
         "load_remix_disabled",
         "output_only",
         "output_split_view",
diff --git a/webpack.config.js b/webpack.config.js
index 0666b78f8..536abd2a4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -43,6 +43,10 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.md$/,
+        use: ["raw-loader"],
+      },
       {
         test: /\/src\/assets\/icons\/.*\.svg$/,
         use: [
diff --git a/yarn.lock b/yarn.lock
index b74de68c5..f800fb29e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2834,6 +2834,7 @@ __metadata:
     js-convert-case: ^4.2.0
     jszip: ^3.10.1
     jszip-utils: ^0.1.0
+    marked: ^15.0.6
     material-symbols: ^0.27.0
     mime-types: ^2.1.35
     mini-css-extract-plugin: 0.11.3
@@ -2853,6 +2854,7 @@ __metadata:
     prismjs: ^1.29.0
     prompts: 2.4.0
     prop-types: ^15.8.1
+    raw-loader: ^4.0.2
     rc-resize-observer: ^1.3.1
     re-resizable: 6.9.9
     react: ^18.1.0
@@ -12519,6 +12521,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"marked@npm:^15.0.6":
+  version: 15.0.6
+  resolution: "marked@npm:15.0.6"
+  bin:
+    marked: bin/marked.js
+  checksum: 5218363ac4f6cd1893318ad8b1efacdc8a416f87da28cbcffb419d97602168935249351a3fbe2c59221e7e9955862c6a038ec00f19bf4a6d7e8e0e2e9643d154
+  languageName: node
+  linkType: hard
+
 "matchmediaquery@npm:^0.3.0":
   version: 0.3.1
   resolution: "matchmediaquery@npm:0.3.1"
@@ -15056,6 +15067,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"raw-loader@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "raw-loader@npm:4.0.2"
+  dependencies:
+    loader-utils: ^2.0.0
+    schema-utils: ^3.0.0
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: 51cc1b0d0e8c37c4336b5318f3b2c9c51d6998ad6f56ea09612afcfefc9c1f596341309e934a744ae907177f28efc9f1654eacd62151e82853fcc6d37450e795
+  languageName: node
+  linkType: hard
+
 "rc-resize-observer@npm:^1.3.1":
   version: 1.4.0
   resolution: "rc-resize-observer@npm:1.4.0"

From a339606759edb788cfc08b52841a333135c03770 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <57325966+jamiebenstead@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:54:46 +0000
Subject: [PATCH 08/18] Add remove instructions button modal (#1176)

Work for
[this](https://github.com/orgs/RaspberryPiFoundation/projects/51?pane=issue&itemId=92785863&issue=RaspberryPiFoundation%7Cdigital-editor-issues%7C373)
ticket.

---------

Co-authored-by: Conor <905676+conorriches@users.noreply.github.com>
Co-authored-by: Lois Wells <88904316+loiswells97@users.noreply.github.com>
---
 CHANGELOG.md                                  |  2 +-
 .../InstructionsPanel/InstructionsPanel.jsx   | 52 +++++++++++++++-
 .../InstructionsPanel.test.js                 | 35 +++++++++++
 src/components/Menus/Sidebar/Sidebar.jsx      |  6 +-
 .../Modals/RemoveInstructionsModal.jsx        | 60 +++++++++++++++++++
 .../WebComponentProject.jsx                   | 18 +++---
 .../WebComponentProject.test.js               |  9 ++-
 src/utils/i18n.js                             | 16 +++++
 8 files changed, 184 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Modals/RemoveInstructionsModal.jsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2de093277..9a43235a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,7 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Instructions empty state to show when instructions are editable (#1165, #1168)
 - Allow `instructions` attribute to override instructions attached to the project (#1169)
 - Instructions tabs for edit and viewing (#1167)
-
+- Add remove instructions button modal (#1176)
 
 ### Changed
 
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
index d57e6cf98..2371ec5a9 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
@@ -16,8 +16,10 @@ import { setCurrentStepPosition } from "../../../../redux/InstructionsSlice";
 import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 import { setProjectInstructions } from "../../../../redux/EditorSlice";
 import demoInstructions from "../../../../assets/markdown/demoInstructions.md";
+import RemoveInstructionsModal from "../../../Modals/RemoveInstructionsModal";
 
 const InstructionsPanel = () => {
+  const [showModal, setShowModal] = useState(false);
   const instructionsEditable = useSelector(
     (state) => state.editor?.instructionsEditable,
   );
@@ -104,6 +106,11 @@ const InstructionsPanel = () => {
     dispatch(setProjectInstructions(demoInstructions));
   };
 
+  const removeInstructions = () => {
+    dispatch(setProjectInstructions(null));
+    setShowModal(false);
+  };
+
   const AddInstructionsButton = () => {
     return (
       <DesignSystemButton
@@ -118,6 +125,20 @@ const InstructionsPanel = () => {
     );
   };
 
+  const RemoveInstructionsButton = () => {
+    return (
+      <DesignSystemButton
+        className="btn--secondary"
+        text={t("instructionsPanel.removeInstructions")}
+        onClick={() => {
+          setShowModal(true);
+        }}
+        fill
+        textAlways
+        small
+      />
+    );
+  };
   const onChange = (e) => {
     dispatch(setProjectInstructions(e.target.value));
   };
@@ -126,7 +147,13 @@ const InstructionsPanel = () => {
     <SidebarPanel
       defaultWidth="30vw"
       heading={t("instructionsPanel.projectSteps")}
-      Button={instructionsEditable && !hasInstructions && AddInstructionsButton}
+      Button={
+        instructionsEditable
+          ? hasInstructions
+            ? RemoveInstructionsButton
+            : AddInstructionsButton
+          : null
+      }
       {...{ Footer: hasMultipleSteps && ProgressBar }}
     >
       <div className="project-instructions">
@@ -191,6 +218,29 @@ const InstructionsPanel = () => {
           ></div>
         )}
       </div>
+      {showModal && (
+        <RemoveInstructionsModal
+          buttons={[
+            <DesignSystemButton
+              type="primary"
+              key="remove"
+              variant="danger"
+              text={t(
+                "instructionsPanel.removeInstructionsModal.removeInstructions",
+              )}
+              onClick={removeInstructions}
+            />,
+            <DesignSystemButton
+              type="secondary"
+              key="close"
+              text={t("instructionsPanel.removeInstructionsModal.close")}
+              onClick={() => setShowModal(false)}
+            />,
+          ]}
+          isOpen={showModal}
+          setShowModal={setShowModal}
+        />
+      )}
     </SidebarPanel>
   );
 };
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
index 54c443aae..167af5152 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
@@ -4,6 +4,7 @@ import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { setProjectInstructions } from "../../../../redux/EditorSlice";
 import { act } from "react";
+import Modal from "react-modal";
 
 window.HTMLElement.prototype.scrollTo = jest.fn();
 window.Prism = {
@@ -14,6 +15,13 @@ describe("When instructionsEditable is true", () => {
   describe("When there are instructions", () => {
     let store;
 
+    beforeAll(() => {
+      const root = global.document.createElement("div");
+      root.setAttribute("id", "app");
+      global.document.body.appendChild(root);
+      Modal.setAppElement("#app");
+    });
+
     beforeEach(() => {
       const mockStore = configureStore([]);
       const initialState = {
@@ -67,6 +75,21 @@ describe("When instructionsEditable is true", () => {
         screen.queryByText("instructionsPanel.emptyState.addInstructions"),
       ).not.toBeInTheDocument();
     });
+
+    test("Renders the remove instructions button", () => {
+      expect(
+        screen.queryByText("instructionsPanel.removeInstructions"),
+      ).toBeInTheDocument();
+    });
+
+    test("Remove instructions modal is opened", () => {
+      const button = screen.queryByText("instructionsPanel.removeInstructions");
+      fireEvent.click(button);
+
+      expect(
+        screen.queryByText("instructionsPanel.removeInstructionsModal.heading"),
+      ).toBeInTheDocument();
+    });
   });
 
   describe("When there are no instructions", () => {
@@ -101,6 +124,12 @@ describe("When instructionsEditable is true", () => {
       ).toBeInTheDocument();
     });
 
+    test("Does not render the remove instructions button", () => {
+      expect(
+        screen.queryByText("instructionsPanel.removeInstructions"),
+      ).not.toBeInTheDocument();
+    });
+
     test("Clicking the add instructions button adds the demo instructions", () => {
       const addInstructionsButton = screen.getByText(
         "instructionsPanel.emptyState.addInstructions",
@@ -153,6 +182,12 @@ describe("When instructions are not editable", () => {
       ).not.toBeInTheDocument();
     });
 
+    test("Does not render the remove instructions button", () => {
+      expect(
+        screen.queryByText("instructionsPanel.removeInstructions"),
+      ).not.toBeInTheDocument();
+    });
+
     test("Does not render the instructions explanation", () => {
       expect(
         screen.queryByText("instructionsPanel.emptyState.purpose"),
diff --git a/src/components/Menus/Sidebar/Sidebar.jsx b/src/components/Menus/Sidebar/Sidebar.jsx
index 18205614f..86987a52b 100644
--- a/src/components/Menus/Sidebar/Sidebar.jsx
+++ b/src/components/Menus/Sidebar/Sidebar.jsx
@@ -107,11 +107,13 @@ const Sidebar = ({ options = [] }) => {
     instructionsEditable || instructionsSteps ? "instructions" : "file",
   );
 
+  const hasInstructions = instructionsSteps && instructionsSteps.length > 0;
+
   useEffect(() => {
-    if (instructionsEditable || instructionsSteps) {
+    if (instructionsEditable || hasInstructions) {
       setOption("instructions");
     }
-  }, [instructionsEditable, instructionsSteps]);
+  }, [instructionsEditable, hasInstructions]);
 
   const toggleOption = (newOption) => {
     if (option !== newOption) {
diff --git a/src/components/Modals/RemoveInstructionsModal.jsx b/src/components/Modals/RemoveInstructionsModal.jsx
new file mode 100644
index 000000000..cb1422d6b
--- /dev/null
+++ b/src/components/Modals/RemoveInstructionsModal.jsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import GeneralModal from "./GeneralModal";
+
+const RemoveInstructionsModal = (props) => {
+  const {
+    buttons = null,
+    isOpen = false,
+    withCloseButton = false,
+    setShowModal = null,
+  } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <GeneralModal
+      heading={t("instructionsPanel.removeInstructionsModal.heading")}
+      text={[
+        {
+          type: "paragraph",
+          content: t(
+            "instructionsPanel.removeInstructionsModal.removeInstuctionsWarning",
+          ),
+        },
+      ]}
+      buttons={buttons}
+      isOpen={isOpen}
+      closeModal={() => setShowModal(false)}
+      withCloseButton={withCloseButton}
+    >
+      <div>
+        <p>
+          {t(
+            "instructionsPanel.removeInstructionsModal.resultRemovingInstructions",
+          )}
+        </p>
+        <ul>
+          <li>
+            {t(
+              "instructionsPanel.removeInstructionsModal.instructionsWillBeDeleted",
+            )}
+          </li>
+          <li>
+            {t(
+              "instructionsPanel.removeInstructionsModal.studentsWorkingProjectNotRecievedInstructions",
+            )}
+          </li>
+          <li>
+            {t(
+              "instructionsPanel.removeInstructionsModal.studentsStartedWillSeeInstructions",
+            )}
+          </li>
+        </ul>
+      </div>
+    </GeneralModal>
+  );
+};
+
+export default RemoveInstructionsModal;
diff --git a/src/components/WebComponentProject/WebComponentProject.jsx b/src/components/WebComponentProject/WebComponentProject.jsx
index 92156014f..1a17274cb 100644
--- a/src/components/WebComponentProject/WebComponentProject.jsx
+++ b/src/components/WebComponentProject/WebComponentProject.jsx
@@ -83,18 +83,20 @@ const WebComponentProject = ({
   }, [projectIdentifier]);
 
   useEffect(() => {
-    if (!projectInstructions || !permitInstructionsOverride) return;
+    if (!permitInstructionsOverride) return;
 
     dispatch(
       setInstructions({
         project: {
-          steps: [
-            {
-              quiz: false,
-              title: "",
-              content: marked.parse(projectInstructions),
-            },
-          ],
+          steps: projectInstructions
+            ? [
+                {
+                  quiz: false,
+                  title: "",
+                  content: marked.parse(projectInstructions),
+                },
+              ]
+            : [],
         },
         permitOverride: true,
       }),
diff --git a/src/components/WebComponentProject/WebComponentProject.test.js b/src/components/WebComponentProject/WebComponentProject.test.js
index 2141c095d..7aaad7e45 100644
--- a/src/components/WebComponentProject/WebComponentProject.test.js
+++ b/src/components/WebComponentProject/WebComponentProject.test.js
@@ -120,11 +120,16 @@ describe("When there are no instructions", () => {
   });
 
   test("Does not dispatch action to set instructions", () => {
-    expect(store.getActions()).not.toEqual(
+    expect(store.getActions()).toEqual(
       expect.arrayContaining([
         {
           type: "instructions/setInstructions",
-          payload: expect.any(Object),
+          payload: {
+            permitOverride: true,
+            project: {
+              steps: [],
+            },
+          },
         },
       ]),
     );
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index c69e5a40c..554844233 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -216,11 +216,27 @@ i18n
               purpose:
                 "Instructions can be added to your project to guide students.",
             },
+            removeInstructions: "Remove instructions",
             nextStep: "Next step",
             previousStep: "Previous step",
             projectSteps: "Project steps",
             edit: "Edit",
             view: "View",
+            removeInstructionsModal: {
+              removeInstructions: "Remove instructions",
+              close: "Close",
+              heading: "Remove project instructions?",
+              removeInstuctionsWarning:
+                "You are about to remove the instructions from the project.",
+              resultRemovingInstructions:
+                "As a result of removing these instructions:",
+              instructionsWillBeDeleted:
+                "Instructions content will be deleted.",
+              studentsWorkingProjectNotRecievedInstructions:
+                "Students who start working on this project will not receive instructions.",
+              studentsStartedWillSeeInstructions:
+                "Students who have already started working on this project will still be able to see the instructions as they were when they started.",
+            },
           },
           projectsPanel: {
             projects: "Projects",

From e072598caac020166f283887e069c066fa9f15cb Mon Sep 17 00:00:00 2001
From: Conor <905676+conorriches@users.noreply.github.com>
Date: Thu, 30 Jan 2025 16:42:05 +0000
Subject: [PATCH 09/18] fix dark mode colours (#1182)

![image](https://github.com/user-attachments/assets/f12a0c37-df4e-4bb2-b9e0-9611ec3fc5bd)
---
 CHANGELOG.md                               |  1 +
 src/assets/stylesheets/Instructions.scss   | 12 +++++++++---
 src/assets/stylesheets/InternalStyles.scss |  2 ++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a43235a0..ebcec60c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Allow `instructions` attribute to override instructions attached to the project (#1169)
 - Instructions tabs for edit and viewing (#1167)
 - Add remove instructions button modal (#1176)
+- Dark mode colours (#1182)
 
 ### Changed
 
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index c3bab4c8a..a21bc4e4f 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -14,6 +14,10 @@
     margin: 0;
   }
 
+  a {
+    color: var(--editor-color-theme-secondary);
+  }
+
   strong {
     font-weight: $font-weight-bold;
   }
@@ -263,7 +267,7 @@
   }
 
   .project-instructions__empty {
-    background-color: $rpf-teal-100;
+    background-color: var(--editor-color-layer-1);
     border-radius: $space-0-5;
     display: flex;
     flex-direction: column;
@@ -292,11 +296,11 @@
     }
 
     .react-tabs__tab {
-      background: var(--rpf-off-white);
+      background: var(--editor-color-tab-background);
       padding-inline: var(--space-1-5);
 
       &--selected {
-        background: var(--rpf-white);
+        background: var(--editor-color-layer-3);
       }
     }
 
@@ -309,6 +313,8 @@
     textarea {
       @include typography.style-1();
 
+      background: var(--editor-color-layer-3);
+      color: var(--editor-color-text);
       border: none;
       block-size: 100%;
       overflow-block: scroll;
diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 2f24fccd6..189405bf0 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -103,6 +103,7 @@ button:focus-visible {
   --editor-color-theme-tertiary: #{$rpf-teal-100};
   --editor-color-text: #{$rpf-text-primary};
   --editor-color-text-secondary: #{$rpf-text-secondary};
+  --editor-color-tab-background: #{$rpf-off-white};
 }
 
 .--dark {
@@ -116,6 +117,7 @@ button:focus-visible {
   --editor-color-text: #{$rpf-white};
   --editor-color-text-secondary: #{$rpf-text-secondary-darkmode};
   --rpf-button-secondary-text-color: #{$rpf-white};
+  --editor-color-tab-background: #{$rpf-grey-700};
 
   .rpf-button--secondary {
     border-color: $rpf-navy-800;}

From 54fb00cf18570bae942d6499412985a06ee042cc Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:10:35 +0000
Subject: [PATCH 10/18] Copy change: Project steps to Project instructions
 (#1183)

closes
https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/413
---
 CHANGELOG.md      | 1 +
 src/utils/i18n.js | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ebcec60c9..ee1c858c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Made `INSTRUCTIONS.md` a reserved file name (#1160)
 - Clear the redux store when the component unmounts (#1169)
 - Login to save now logs in and automatically saves (#1162)
+- Instructions panel heading (#1183)
 
 ## [0.28.14] - 2025-01-06
 
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index 554844233..d040edb77 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -219,7 +219,7 @@ i18n
             removeInstructions: "Remove instructions",
             nextStep: "Next step",
             previousStep: "Previous step",
-            projectSteps: "Project steps",
+            projectSteps: "Project instructions",
             edit: "Edit",
             view: "View",
             removeInstructionsModal: {
@@ -387,7 +387,7 @@ i18n
             information: "Information",
             information_text:
               "Our Code Editor is a tool to help young people learn to code. We have only included functions that are simple and safe to use. That's why, for example, links to other websites are not allowed.",
-            instructions: "Project steps",
+            instructions: "Project instructions",
             feedback: "Feedback",
             help: "Help",
             privacy: "Privacy",

From c085612a36c973589d63de26a539aa5672cdbc43 Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:20:10 +0000
Subject: [PATCH 11/18] Fixing padding for first line of code block (#1184)

## Screenshot

### Before

![Screenshot 2025-01-31 at 15 58
41](https://github.com/user-attachments/assets/6a2c60a3-2a7a-4069-94b3-6330fe4750ad)

### After

![Screenshot 2025-01-31 at 15 55
33](https://github.com/user-attachments/assets/db5cf927-54cb-4e59-a243-ab40312facf0)

closes
https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/414
---
 CHANGELOG.md                             | 9 +++++----
 src/assets/stylesheets/Instructions.scss | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee1c858c1..a4f878b51 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,10 +6,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
-### Fixed
-
-- Fix AWS CLI in deploy script to 2.22.35 to workaround cloudflare issue (See https://developers.cloudflare.com/r2/examples/aws/aws-cli/) (#1178)
-
 ### Added
 
 - Autosave instructions (#1163)
@@ -33,6 +29,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Login to save now logs in and automatically saves (#1162)
 - Instructions panel heading (#1183)
 
+### Fixed
+
+- Fix AWS CLI in deploy script to 2.22.35 to workaround cloudflare issue (See https://developers.cloudflare.com/r2/examples/aws/aws-cli/) (#1178)
+- Padding on instructions code block (#1184)
+
 ## [0.28.14] - 2025-01-06
 
 ### Fixed
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index a21bc4e4f..461efb162 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -43,7 +43,7 @@
   pre {
     background-color: $rpf-grey-700;
     border-radius: 8px;
-    padding: $space-0-5;
+    padding: $space-0-5 $space-1;
     overflow: auto;
     margin: $space-1 0;
   }
@@ -52,7 +52,7 @@
     color: $rpf-white;
     background-color: $rpf-grey-700;
     border-radius: 8px;
-    padding: calc(0.75 * $space-0-125) $space-0-5;
+    padding-block: calc(0.75 * $space-0-125);
   }
 
   .c-project-code {

From 3f5baa75d2a86fded7047707f0809ea56997f639 Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Mon, 3 Feb 2025 11:24:29 +0000
Subject: [PATCH 12/18] Fix contrast on dark mode instructions code block
 (#1187)

closes
https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/416
---
 CHANGELOG.md                             |  1 +
 src/assets/stylesheets/Instructions.scss | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4f878b51..3b5c50f5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Instructions tabs for edit and viewing (#1167)
 - Add remove instructions button modal (#1176)
 - Dark mode colours (#1182)
+- Dark mode for instuctions code block (#1187)
 
 ### Changed
 
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index 461efb162..a2bad17f3 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -42,6 +42,7 @@
 
   pre {
     background-color: $rpf-grey-700;
+    border: 1px solid $rpf-grey-600;
     border-radius: 8px;
     padding: $space-0-5 $space-1;
     overflow: auto;
@@ -56,11 +57,12 @@
   }
 
   .c-project-code {
-    margin: $space-1 0 $space-1-5 0;
-    border-radius: 8px;
     background-color: $rpf-grey-700;
+    border-radius: 8px;
+    margin: $space-1 0 $space-1-5 0;
 
     pre {
+      border: none;
       margin: 0;
     }
 
@@ -280,6 +282,15 @@
   }
 }
 
+.--dark .project-instructions {
+  pre {
+    background-color: $rpf-grey-850;
+  }
+  code {
+    background-color: $rpf-grey-850;
+  }
+}
+
 #app,
 #wc {
   .c-instruction-tabs {

From dad34fbd83bac45d1e8e494e9a5e3a09d6eb935b Mon Sep 17 00:00:00 2001
From: Jamie Benstead <57325966+jamiebenstead@users.noreply.github.com>
Date: Tue, 4 Feb 2025 15:01:30 +0000
Subject: [PATCH 13/18] Markdown changes (#1188)

[closes](https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/412)
---
 CHANGELOG.md                                  |  1 +
 .../InstructionsPanel/InstructionsPanel.jsx   |  7 ++++---
 .../WebComponentProject.jsx                   | 10 +++++++++
 .../WebComponentProject.test.js               | 21 +++++++++++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b5c50f5d..8ed41366b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Add remove instructions button modal (#1176)
 - Dark mode colours (#1182)
 - Dark mode for instuctions code block (#1187)
+- Change markdown links to open in new tab (#1188)
 
 ### Changed
 
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
index 2371ec5a9..0d3403fce 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
@@ -1,9 +1,10 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+// This is disabled because the empty anchor tag is used for translation and will have content when rendered.
 import React, { useEffect, useRef, useMemo, useState } from "react";
 import SidebarPanel from "../SidebarPanel";
 import { Trans, useTranslation } from "react-i18next";
 import { useSelector, useDispatch } from "react-redux";
 import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
-import { Link } from "react-router-dom";
 
 import ProgressBar from "./ProgressBar/ProgressBar";
 import "../../../../assets/stylesheets/Instructions.scss";
@@ -198,8 +199,8 @@ const InstructionsPanel = () => {
                 <Trans
                   i18nKey="instructionsPanel.emptyState.markdown"
                   components={[
-                    <Link
-                      href="https://commonmark.org/help/"
+                    <a
+                      href="https://www.markdownguide.org/cheat-sheet/"
                       target="_blank"
                       rel="noreferrer"
                     />,
diff --git a/src/components/WebComponentProject/WebComponentProject.jsx b/src/components/WebComponentProject/WebComponentProject.jsx
index 1a17274cb..137bf9bda 100644
--- a/src/components/WebComponentProject/WebComponentProject.jsx
+++ b/src/components/WebComponentProject/WebComponentProject.jsx
@@ -60,6 +60,7 @@ const WebComponentProject = ({
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const [codeHasRun, setCodeHasRun] = useState(codeHasBeenRun);
   const dispatch = useDispatch();
+  const renderer = new marked.Renderer();
 
   useEffect(() => {
     dispatch(setIsSplitView(outputSplitView));
@@ -82,6 +83,15 @@ const WebComponentProject = ({
     }
   }, [projectIdentifier]);
 
+  renderer.link = function (data) {
+    return `<a href="https://github.com/$%7Bdata.href%7D" target="_blank" rel="noreferrer"
+    }">${data.text}</a>`;
+  };
+
+  marked.setOptions({
+    renderer: renderer,
+  });
+
   useEffect(() => {
     if (!permitInstructionsOverride) return;
 
diff --git a/src/components/WebComponentProject/WebComponentProject.test.js b/src/components/WebComponentProject/WebComponentProject.test.js
index 7aaad7e45..c6e3d7c80 100644
--- a/src/components/WebComponentProject/WebComponentProject.test.js
+++ b/src/components/WebComponentProject/WebComponentProject.test.js
@@ -114,6 +114,27 @@ describe("When state set", () => {
   });
 });
 
+describe("When there are instructions", () => {
+  beforeEach(() => {
+    renderWebComponentProject({
+      instructions: "[Link](https://example.com)",
+      codeRunTriggered: true,
+    });
+  });
+
+  test("Renders a tag with target _blank", () => {
+    const instructions = store
+      .getActions()
+      .find((e) => e.type === "instructions/setInstructions");
+
+    const content = instructions.payload.project.steps[0].content;
+
+    expect(content).toEqual(
+      '<p><a href="https://example.com/" target="_blank" rel="noreferrer"\n    }">Link</a></p>\n',
+    );
+  });
+});
+
 describe("When there are no instructions", () => {
   beforeEach(() => {
     renderWebComponentProject({});

From 41724de209c6ad47cd1be9d59afd42fe7db65d65 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <57325966+jamiebenstead@users.noreply.github.com>
Date: Tue, 4 Feb 2025 15:11:58 +0000
Subject: [PATCH 14/18] Remove line from demoInstructions (#1189)

---
 CHANGELOG.md                            | 1 +
 src/assets/markdown/demoInstructions.md | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ed41366b..74e4db0cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Dark mode colours (#1182)
 - Dark mode for instuctions code block (#1187)
 - Change markdown links to open in new tab (#1188)
+- Update demo instructions text (#1189)
 
 ### Changed
 
diff --git a/src/assets/markdown/demoInstructions.md b/src/assets/markdown/demoInstructions.md
index 0aaa55945..df1b5a6cb 100644
--- a/src/assets/markdown/demoInstructions.md
+++ b/src/assets/markdown/demoInstructions.md
@@ -4,8 +4,6 @@
 
 Any text written here will be visible to students in the sidebar
 
-If you decide you do not want instructions, simply leave this panel blank.
-
 ## Writing instructions
 
 Write your instructions using [Markdown](https://www.markdownguide.org/)

From cdcec16306e6fd15c08e97207560337d40f9fa3a Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Tue, 4 Feb 2025 17:18:57 +0000
Subject: [PATCH 15/18] Instructions syntax highlighting for CEfE (#1190)

closes
https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/418
---
 CHANGELOG.md                                  |  3 +-
 src/assets/stylesheets/Instructions.scss      | 37 +++++++++--
 .../InstructionsPanel/InstructionsPanel.jsx   | 10 ++-
 .../InstructionsPanel.test.js                 | 65 +++++++++++++++++--
 src/containers/WebComponentLoader.jsx         | 18 +++++
 src/containers/WebComponentLoader.test.js     |  5 ++
 6 files changed, 123 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74e4db0cb..5d23bb1f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Dark mode for instuctions code block (#1187)
 - Change markdown links to open in new tab (#1188)
 - Update demo instructions text (#1189)
+- Syntax highlighting for custom instructions in Code Editor for Education (#1190)
 
 ### Changed
 
@@ -35,7 +36,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 - Fix AWS CLI in deploy script to 2.22.35 to workaround cloudflare issue (See https://developers.cloudflare.com/r2/examples/aws/aws-cli/) (#1178)
-- Padding on instructions code block (#1184)
+- Padding on instructions code block (#1184, 1190)
 
 ## [0.28.14] - 2025-01-06
 
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index a2bad17f3..82d7b99bf 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -40,6 +40,13 @@
     }
   }
 
+  code {
+    color: $rpf-white;
+    background-color: $rpf-grey-700;
+    border-radius: 8px;
+    padding: calc(0.75 * $space-0-125) $space-0-5;
+  }
+
   pre {
     background-color: $rpf-grey-700;
     border: 1px solid $rpf-grey-600;
@@ -47,13 +54,10 @@
     padding: $space-0-5 $space-1;
     overflow: auto;
     margin: $space-1 0;
-  }
 
-  code {
-    color: $rpf-white;
-    background-color: $rpf-grey-700;
-    border-radius: 8px;
-    padding-block: calc(0.75 * $space-0-125);
+    code {
+      padding-inline: 0;
+    }
   }
 
   .c-project-code {
@@ -125,6 +129,27 @@
     }
   }
 
+  .language-javascript {
+    .number,
+    .boolean {
+      color: $rpf-syntax-1;
+    }
+    .keyword {
+      color: $rpf-syntax-4;
+    }
+    .string,
+    .char {
+      color: $rpf-syntax-2;
+    }
+    .comment {
+      color: $rpf-syntax-3;
+    }
+
+    .keyword-print {
+      color: $rpf-white;
+    }
+  }
+
   .language-css {
     color: $rpf-syntax-1;
 
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
index 0d3403fce..e52723b8f 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
@@ -18,6 +18,8 @@ import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 import { setProjectInstructions } from "../../../../redux/EditorSlice";
 import demoInstructions from "../../../../assets/markdown/demoInstructions.md";
 import RemoveInstructionsModal from "../../../Modals/RemoveInstructionsModal";
+import Prism from "prismjs";
+import "prismjs/components/prism-python";
 
 const InstructionsPanel = () => {
   const [showModal, setShowModal] = useState(false);
@@ -50,11 +52,15 @@ const InstructionsPanel = () => {
 
   const applySyntaxHighlighting = (container) => {
     const codeElements = container.querySelectorAll(
-      ".language-python, .language-html, .language-css",
+      ".language-python, .language-html, .language-css, .language-javascript",
     );
 
     codeElements.forEach((element) => {
-      window.Prism.highlightElement(element);
+      if (window.syntaxHighlight) {
+        window.syntaxHighlight.highlightElement(element);
+      } else {
+        Prism.highlightElement(element);
+      }
     });
   };
 
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
index 167af5152..79227804c 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
@@ -5,11 +5,13 @@ import configureStore from "redux-mock-store";
 import { setProjectInstructions } from "../../../../redux/EditorSlice";
 import { act } from "react";
 import Modal from "react-modal";
+import Prism from "prismjs";
 
 window.HTMLElement.prototype.scrollTo = jest.fn();
-window.Prism = {
+jest.mock("prismjs", () => ({
+  ...jest.requireActual("prismjs"),
   highlightElement: jest.fn(),
-};
+}));
 
 describe("When instructionsEditable is true", () => {
   describe("When there are instructions", () => {
@@ -222,6 +224,7 @@ describe("When instructions are not editable", () => {
                   <code class='language-python'>print('hello')</code>
                   <code class='language-html'><p>Hello world</p></code>
                   <code class='language-css'>.hello { color: purple }</code>
+                  <code class='language-javascript'>const element = document.getElementById("my-element")</code>
                   `,
               },
             ],
@@ -262,17 +265,67 @@ describe("When instructions are not editable", () => {
 
     test("Applies syntax highlighting to python code", () => {
       const codeElement = document.getElementsByClassName("language-python")[0];
-      expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+      expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
     });
 
     test("Applies syntax highlighting to HTML code", () => {
       const codeElement = document.getElementsByClassName("language-html")[0];
-      expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+      expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
     });
 
     test("Applies syntax highlighting to CSS code", () => {
       const codeElement = document.getElementsByClassName("language-css")[0];
-      expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+      expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+    });
+
+    test("Applies syntax highlighting to javascript code", () => {
+      const codeElement = document.getElementsByClassName(
+        "language-javascript",
+      )[0];
+      expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+    });
+  });
+
+  describe("When window.syntaxHighlight is defined", () => {
+    beforeEach(() => {
+      window.syntaxHighlight = {
+        highlightElement: jest.fn(),
+      };
+      const mockStore = configureStore([]);
+      const initialState = {
+        editor: {
+          project: {},
+          instructionsEditable: false,
+        },
+        instructions: {
+          project: {
+            steps: [
+              {
+                content: "<code class='language-python'>print('hello')</code>",
+              },
+            ],
+          },
+          quiz: {},
+          currentStepPosition: 0,
+        },
+      };
+      const store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+    });
+
+    test("Applies syntax highlighting using window.syntaxHighlight", () => {
+      const codeElement = document.getElementsByClassName("language-python")[0];
+      expect(window.syntaxHighlight.highlightElement).toHaveBeenCalledWith(
+        codeElement,
+      );
+    });
+
+    afterEach(() => {
+      delete window.syntaxHighlight;
     });
   });
 
@@ -354,7 +407,7 @@ describe("When instructions are not editable", () => {
 
     test("Applies syntax highlighting", () => {
       const codeElement = document.getElementsByClassName("language-python")[0];
-      expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+      expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
     });
 
     test("Fires a quizIsReady event", () => {
diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx
index 353b5ac41..d6cae9700 100644
--- a/src/containers/WebComponentLoader.jsx
+++ b/src/containers/WebComponentLoader.jsx
@@ -161,6 +161,24 @@ const WebComponentLoader = (props) => {
     dispatch(setReadOnly(readOnly));
   }, [readOnly, dispatch]);
 
+  useEffect(() => {
+    // Create a script element to save the existing Prism object if there is one
+    const script = document.createElement("script");
+    script.textContent = `
+      if (window.Prism) {
+        window.syntaxHighlight = window.Prism;
+      }
+    `;
+
+    // Append the script to the document body
+    document.body.appendChild(script);
+
+    // Clean up the script when the component unmounts
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
   const renderSuccessState = () => (
     <>
       <SettingsContext.Provider
diff --git a/src/containers/WebComponentLoader.test.js b/src/containers/WebComponentLoader.test.js
index b82bcd9f5..c8a7df9d0 100644
--- a/src/containers/WebComponentLoader.test.js
+++ b/src/containers/WebComponentLoader.test.js
@@ -40,6 +40,7 @@ const user = { access_token: "my_token" };
 describe("When initially rendered", () => {
   beforeEach(() => {
     document.dispatchEvent = jest.fn();
+    window.Prism = jest.fn();
     const middlewares = [localStorageUserMiddleware(setUser)];
     const mockStore = configureStore(middlewares);
     const initialState = {
@@ -85,6 +86,10 @@ describe("When initially rendered", () => {
     );
   });
 
+  test("It saves window.Prism to window.syntaxHighlight", () => {
+    expect(window.syntaxHighlight).toEqual(window.Prism);
+  });
+
   describe("react app API endpoint", () => {
     describe("when react app API endpoint isn't set", () => {
       beforeEach(() => {

From 4bb2f9ae925a42ebbd616983128b61c11832fdad Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Tue, 4 Feb 2025 17:28:37 +0000
Subject: [PATCH 16/18] Fixing instructions state when set to an empty string
 (#1191)

This is fixing a bug where the user deletes everything in the
instructions box and it suddenly switches back to the empty instructions
state. This was caused by the fact that an empty string is `falsy` in
Javascript, so when the instructions content was deleted we would get
`projectInstructions = ""` which resulted in the instructions being
deleted.
---
 CHANGELOG.md                                  |  2 +-
 .../WebComponentProject.jsx                   | 19 ++++++------
 .../WebComponentProject.test.js               | 31 +++++++++++++++++++
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d23bb1f9..54ea83bde 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,7 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Instructions empty state to show when instructions are editable (#1165, #1168)
 - Allow `instructions` attribute to override instructions attached to the project (#1169)
 - Instructions tabs for edit and viewing (#1167)
-- Add remove instructions button modal (#1176)
+- Add remove instructions button modal (#1176, #1191)
 - Dark mode colours (#1182)
 - Dark mode for instuctions code block (#1187)
 - Change markdown links to open in new tab (#1188)
diff --git a/src/components/WebComponentProject/WebComponentProject.jsx b/src/components/WebComponentProject/WebComponentProject.jsx
index 137bf9bda..44996eebb 100644
--- a/src/components/WebComponentProject/WebComponentProject.jsx
+++ b/src/components/WebComponentProject/WebComponentProject.jsx
@@ -98,15 +98,16 @@ const WebComponentProject = ({
     dispatch(
       setInstructions({
         project: {
-          steps: projectInstructions
-            ? [
-                {
-                  quiz: false,
-                  title: "",
-                  content: marked.parse(projectInstructions),
-                },
-              ]
-            : [],
+          steps:
+            typeof projectInstructions === "string"
+              ? [
+                  {
+                    quiz: false,
+                    title: "",
+                    content: marked.parse(projectInstructions),
+                  },
+                ]
+              : [],
         },
         permitOverride: true,
       }),
diff --git a/src/components/WebComponentProject/WebComponentProject.test.js b/src/components/WebComponentProject/WebComponentProject.test.js
index c6e3d7c80..e5f6497e1 100644
--- a/src/components/WebComponentProject/WebComponentProject.test.js
+++ b/src/components/WebComponentProject/WebComponentProject.test.js
@@ -135,6 +135,37 @@ describe("When there are instructions", () => {
   });
 });
 
+describe("When instructions are an empty string", () => {
+  beforeEach(() => {
+    renderWebComponentProject({
+      instructions: "",
+      codeRunTriggered: true,
+    });
+  });
+
+  test("Dispatches action to set instructions", () => {
+    expect(store.getActions()).toEqual(
+      expect.arrayContaining([
+        {
+          type: "instructions/setInstructions",
+          payload: {
+            permitOverride: true,
+            project: {
+              steps: [
+                {
+                  title: "",
+                  content: "",
+                  quiz: false,
+                },
+              ],
+            },
+          },
+        },
+      ]),
+    );
+  });
+});
+
 describe("When there are no instructions", () => {
   beforeEach(() => {
     renderWebComponentProject({});

From c7d15d30131d1eb34f1534b2e6cf68105f81e6e1 Mon Sep 17 00:00:00 2001
From: "create-issue-branch[bot]"
 <53036503+create-issue-branch[bot]@users.noreply.github.com>
Date: Thu, 6 Feb 2025 12:35:29 +0000
Subject: [PATCH 17/18] Identify caching issue for editor-ui (#1186)

closes #1181

---------

Co-authored-by: Dan Halson <dan.halson@raspberrypi.org>
---
 .devcontainer/devcontainer.json |  4 +++-
 .github/workflows/deploy.yml    | 12 +++++++++++-
 CHANGELOG.md                    |  1 +
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index a4ce7d334..4c660045d 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -61,7 +61,9 @@
         "avraammavridis.vsc-react-documentation",
         "ofhumanbondage.react-proptypes-intellisense",
         "syler.sass-indented",
-        "codezombiech.gitignore"
+        "codezombiech.gitignore",
+        "github.vscode-github-actions",
+        "humao.rest-client"
       ],
       "settings": {
         "terminal.integrated.defaultProfile.linux": "zsh",
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index db09ef1b3..22c40ef0f 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -151,8 +151,18 @@ jobs:
           REACT_APP_SENTRY_ENV: ${{ inputs.react_app_sentry_env }}
 
       - name: Deploy site to S3 bucket
-        run: aws s3 sync  ./build/ s3://${{ secrets.AWS_S3_BUCKET }}/${{ needs.setup-environment.outputs.deploy_dir }} --endpoint ${{ secrets.AWS_ENDPOINT }}
+        run: aws s3 sync ./build/ s3://${{ secrets.AWS_S3_BUCKET }}/${{ needs.setup-environment.outputs.deploy_dir }} --endpoint ${{ secrets.AWS_ENDPOINT }}
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           AWS_REGION: ${{ secrets.AWS_REGION }}
+
+      - name: Purge Cloudflare cache
+        run: |
+          curl -X POST "https://api.cloudflare.com/client/v4/zones/$%7B%7B%20secrets.CLOUDFLARE_ZONE_ID%20%7D%7D/purge_cache" \
+          -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
+          -H "Content-Type: application/json" \
+          --data '{"files":["${{ needs.setup-environment.outputs.public_url }}/web-component.html", "${{ needs.setup-environment.outputs.public_url }}/web-component.js"]}'
+        env:
+          CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54ea83bde..76afc1fed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Clear the redux store when the component unmounts (#1169)
 - Login to save now logs in and automatically saves (#1162)
 - Instructions panel heading (#1183)
+- Added cache purge on deployment (#1186)
 
 ### Fixed
 

From fee4bce5a91e0a9327496171cbac8a704bc49aae Mon Sep 17 00:00:00 2001
From: Dan Halson <danhalson@users.noreply.github.com>
Date: Thu, 6 Feb 2025 12:50:46 +0000
Subject: [PATCH 18/18] Release v0.29.0 (#1193)

## What's Changed
* Support output tabs in pyodide by @loiswells97 in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1157
* Downloading the instructions by @loiswells97 in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1160
* Hack open function to write files in main thread by @loiswells97 in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1146
* Try pinning previous ubuntu version to avoid cloudflare issue by
@danhalson in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1178
* Integration: Save / Login functionality not as expected by
@create-issue-branch in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1162
* HTML audio video support by @loiswells97 in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1179
* Feat/editable instructions by @loiswells97 in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1166
* Add remove instructions button modal by @jamiebenstead in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1176
* fix dark mode colours by @conorriches in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1182
* Copy change: Project steps to Project instructions by @loiswells97 in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1183
* Fixing padding for first line of code block by @loiswells97 in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1184
* Fix contrast on dark mode instructions code block by @loiswells97 in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1187
* Markdown changes by @jamiebenstead in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1188
* Remove line from demoInstructions by @jamiebenstead in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1189
* Instructions syntax highlighting for CEfE by @loiswells97 in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1190
* Fixing instructions state when set to an empty string by @loiswells97
in https://github.com/RaspberryPiFoundation/editor-ui/pull/1191
* Identify caching issue for editor-ui by @create-issue-branch in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1186

## New Contributors
* @jamiebenstead made their first contribution in
https://github.com/RaspberryPiFoundation/editor-ui/pull/1176

**Full Changelog**:
https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.28.14...v0.29.0
---
 CHANGELOG.md | 5 +++--
 package.json | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76afc1fed..b239d5e53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Unreleased
+## [0.29.0] - 2025-02-06
 
 ### Added
 
@@ -1060,7 +1060,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Events in Web Component indicating whether Mission Zero criteria have been met (#113)
 
-[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.28.14...HEAD
+[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.29.0...HEAD
+[0.29.0]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.29.0
 [0.28.14]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.14
 [0.28.13]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.13
 [0.28.12]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.12
diff --git a/package.json b/package.json
index c2bf8d40b..af4712906 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/editor-ui",
-  "version": "0.28.14",
+  "version": "0.29.0",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.8",