Add ability to trigger code run outside the web component

src/containers/WebComponentLoader.jsx

@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { disableTheming, setSenseHatAlwaysEnabled } from "../redux/EditorSlice";
+import {
+  disableTheming,
+  setSenseHatAlwaysEnabled,
+  stopCodeRun,
+  stopDraw,
+  triggerCodeRun,
+} from "../redux/EditorSlice";
 import WebComponentProject from "../components/WebComponentProject/WebComponentProject";
 import { useTranslation } from "react-i18next";
 import { setInstructions } from "../redux/InstructionsSlice";
@@ -41,6 +47,23 @@ const WebComponentLoader = (props) => {
     ? "dark"
     : "light";
 
+  const [isRunCodeListenerAdded, setIsRunCodeListenerAdded] = useState(false);
+
+  const runCode = () => {
+    dispatch(stopCodeRun());
+    dispatch(stopDraw());
+    dispatch(triggerCodeRun());
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (outputOnly && !isRunCodeListenerAdded) {
+      document.removeEventListener("outputOnly-runCode", runCode);
+      document.addEventListener("outputOnly-runCode", runCode);
+      setIsRunCodeListenerAdded(true);
+    }
+  });
+
   useEffect(() => {
     if (theme) {
       dispatch(disableTheming());