Update scratch version to 13

cypress/e2e/spec-html.cy.js

@@ -13,8 +13,7 @@ const getIframeDocument = () => {
 };
 
 const getIframeBody = () => {
-  const iframeDocument = getIframeDocument();
-  return iframeDocument.its("body").should("not.be.null").then(cy.wrap);
+  return getIframeDocument().its("body").should("not.be.null");
 };
 
 const makeNewFile = (filename = "new.html") => {
@@ -183,6 +182,5 @@ it("allows internal links", () => {
 
   const internalLink = getIframeBody().find("a");
   internalLink.click();
-  const content = getIframeBody().find("p");
-  content.should("include.text", "hello world");
+  getIframeBody().should("contain.text", "hello world");
 });

package.json

@@ -20,7 +20,7 @@
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
     "@replit/codemirror-indentation-markers": "^6.1.0",
-    "@scratch/scratch-gui": "^12.6.3",
+    "@scratch/scratch-gui": "^13.0.0",
     "@sentry/browser": "^7.17.3",
     "@sentry/react": "7.16.0",
     "@sentry/tracing": "7.16.0",
@@ -65,14 +65,15 @@
     "react-dom": "^18.1.0",
     "react-i18next": "^12.0.0",
     "react-modal": "^3.14.4",
-    "react-redux": "^7.2.5",
+    "react-redux": "^8.1.3",
     "react-refresh": "^0.8.3",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.7.0",
     "react-tabs": "^3.2.3",
     "react-timer-hook": "^3.0.5",
     "react-toastify": "^8.1.0",
     "react-toggle": "^4.1.3",
+    "redux": "^4.2.1",
     "redux-oidc": "^4.0.0-beta1",
     "skulpt": "^1.2.0",
     "stream-browserify": "^3.0.0",

src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx

@@ -59,6 +59,7 @@ function HtmlRunner() {
 
   const dispatch = useDispatch();
   const output = useRef(null);
+  const reloadAfterPreviewChange = useRef(false);
 
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
 
@@ -84,6 +85,7 @@ function HtmlRunner() {
 
   const [previewFile, setPreviewFile] = useState(defaultPreviewFile);
   const [runningFile, setRunningFile] = useState(previewFile);
+  const previewFileRef = useRef(previewFile);
 
   const showModal = () => {
     dispatch(showErrorModal());
@@ -94,7 +96,6 @@ function HtmlRunner() {
     externalLink,
     setExternalLink,
     handleAllowedExternalLink,
-    handleRegularExternalLink,
     handleExternalLinkError,
   } = useExternalLinkState(showModal);
 
@@ -140,8 +141,17 @@ function HtmlRunner() {
           handleExternalLinkError(showModal);
         } else if (event.data?.msg === "Allowed external link") {
           handleAllowedExternalLink(event.data.payload.linkTo);
-        } else {
-          handleRegularExternalLink(event.data.payload.linkTo, setPreviewFile);
+        } else if (event.data?.msg === "RELOAD") {
+          const nextPreviewFile = `${event.data.payload.linkTo}.html`;
+          setExternalLink(null);
+
+          if (nextPreviewFile === previewFileRef.current) {
+            reloadAfterPreviewChange.current = false;
+            dispatch(triggerCodeRun());
+          } else {
+            reloadAfterPreviewChange.current = true;
+            setPreviewFile(nextPreviewFile);
+          }
         }
       }
     });
@@ -205,6 +215,14 @@ function HtmlRunner() {
     }
   }, [focussedFileIndex, openFiles]);
 
+  useEffect(() => {
+    previewFileRef.current = previewFile;
+    if (reloadAfterPreviewChange.current) {
+      reloadAfterPreviewChange.current = false;
+      dispatch(triggerCodeRun());
+    }
+  }, [previewFile]);
+
   useEffect(() => {
     if (isEmbedded && browserPreview) {
       dispatch(setPage(runningFile));

src/containers/WebComponentLoader.jsx

@@ -81,12 +81,12 @@ const WebComponentLoader = (props) => {
     ? JSON.parse(localStorage.getItem(authKey))
     : null;
   const user = useSelector((state) => state.auth.user || localStorageUser);
-  const [loadRemix, setLoadRemix] = useState(!!user);
   const project = useSelector((state) => state.editor.project);
   const projectOwner = useSelector((state) => state.editor.project.user_name);
   const loading = useSelector((state) => state.editor.loading);
   const justLoaded = useSelector((state) => state.editor.justLoaded);
   const remixLoadFailed = useSelector((state) => state.editor.remixLoadFailed);
+  const loadRemix = !remixLoadFailed && !!user;
   const hasShownSavePrompt = useSelector(
     (state) => state.editor.hasShownSavePrompt,
   );
@@ -119,14 +119,6 @@ const WebComponentLoader = (props) => {
     }
   }, [theme, setCookie, dispatch]);
 
-  useEffect(() => {
-    if (remixLoadFailed) {
-      setLoadRemix(false);
-    } else {
-      setLoadRemix(!!user);
-    }
-  }, [user, project, remixLoadFailed]);
-
   useEffect(() => {
     if (loading === "idle" && project.identifier) {
       setProjectIdentifier(project.identifier);

src/containers/WebComponentLoader.test.js

@@ -25,7 +25,7 @@ jest.mock("../hooks/useProjectPersistence", () => ({
   useProjectPersistence: jest.fn(),
 }));
 
-const mockedChangeLanguage = jest.fn(() => new Promise(() => {}));
+const mockedChangeLanguage = jest.fn(() => Promise.resolve());
 
 jest.mock("react-i18next", () => ({
   useTranslation: () => {

src/utils/externalLinkHelper.js

@@ -22,7 +22,6 @@ const useExternalLinkState = (showModal) => {
   const handleRegularExternalLink = (linkTo, setPreviewFile) => {
     setExternalLink(null);
     setPreviewFile(`${linkTo}.html`);
-    dispatch(triggerCodeRun());
   };
 
   const handleExternalLinkError = () => {