Initial javascript support in html projects (#748)

Small tweaks to allow javascript files in HTML projects rather than
relying on inline styles

Author: sra405

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Javascript support for HTML projects (#748)
 - DownloadPanel for sidebar (#744)
 - Custom events for Log In and Sign Up from DownloadPanel (#744)
 - SVGO config file (#720)

package.json

@@ -8,7 +8,7 @@
     "@codemirror/commands": "^6.1.1",
     "@codemirror/lang-css": "^6.0.0",
     "@codemirror/lang-html": "^6.1.2",
-    "@codemirror/lang-javascript": "^6.1.0",
+    "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-python": "^6.0.2",
     "@codemirror/language": "^6.2.1",
     "@codemirror/view": "^6.3.0",
@@ -43,6 +43,7 @@
     "js-convert-case": "^4.2.0",
     "jszip": "^3.10.1",
     "jszip-utils": "^0.1.0",
+    "mime-types": "^2.1.35",
     "node-html-parser": "^6.1.5",
     "oidc-client": "^1.11.5",
     "parse-link-header": "^2.0.0",

src/components/Editor/EditorPanel/EditorPanel.jsx

@@ -15,6 +15,7 @@ import { indentUnit } from "@codemirror/language";
 import { html } from "@codemirror/lang-html";
 import { css } from "@codemirror/lang-css";
 import { python } from "@codemirror/lang-python";
+import { javascript } from "@codemirror/lang-javascript";
 
 import { editorLightTheme } from "../../../assets/themes/editorLightTheme";
 import { editorDarkTheme } from "../../../assets/themes/editorDarkTheme";
@@ -55,6 +56,8 @@ const EditorPanel = ({ extension = "html", fileName = "index" }) => {
         return css();
       case "py":
         return python();
+      case "js":
+        return javascript();
       default:
         return html();
     }

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

@@ -4,6 +4,7 @@ import React, { useRef, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { parse } from "node-html-parser";
 import { useMediaQuery } from "react-responsive";
+import mimeTypes from "mime-types";
 
 import ErrorModal from "../../../Modals/ErrorModal";
 import {
@@ -235,7 +236,9 @@ function HtmlRunner() {
           if (parentTag(hrefNode, "head")) {
             const projectFileBlob = getBlobURL(
               cssProjectImgs(projectFile[0]).content,
-              `text/${projectFile[0].extension}`,
+              mimeTypes.lookup(
+                `${projectFile[0].name}.${projectFile[0].extension}`,
+              ),
             );
             hrefNode.setAttribute("href", projectFileBlob);
           } else {
@@ -277,10 +280,21 @@ function HtmlRunner() {
         const projectImage = projectImages.filter(
           (component) => component.filename === srcNode.attrs.src,
         );
-        srcNode.setAttribute(
-          "src",
-          !!projectImage.length ? projectImage[0].url : "",
+        const projectFile = projectCode.filter(
+          (file) => `${file.name}.${file.extension}` === srcNode.attrs.src,
         );
+        let src = "";
+        if (projectImage.length) {
+          src = projectImage[0].url;
+        } else if (projectFile.length) {
+          src = getBlobURL(
+            projectFile[0].content,
+            mimeTypes.lookup(
+              `${projectFile[0].name}.${projectFile[0].extension}`,
+            ),
+          );
+        }
+        srcNode.setAttribute("src", src);
       });
 
       body.appendChild(parse(`<meta filename="${previewFile}" />`));

src/utils/componentNameValidation.js

@@ -2,7 +2,7 @@ import { setNameError } from "../redux/EditorSlice";
 
 const allowedExtensions = {
   python: ["py", "csv", "txt"],
-  html: ["html", "css"],
+  html: ["html", "css", "js"],
 };
 
 const allowedExtensionsString = (projectType, t) => {

yarn.lock

@@ -1189,7 +1189,7 @@
     "@lezer/css" "^1.1.0"
     "@lezer/html" "^1.3.0"
 
-"@codemirror/lang-javascript@^6.0.0", "@codemirror/lang-javascript@^6.1.0":
+"@codemirror/lang-javascript@^6.0.0":
   version "6.1.7"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.1.7.tgz#e39fb9757b1cf47de432e4244d18ca5284a73a58"
   integrity sha512-KXKqxlZ4W6t5I7i2ScmITUD3f/F5Cllk3kj0De9P9mFeYVfhOVOWuDLgYiLpk357u7Xh4dhqjJAnsNPPoTLghQ==
@@ -1202,6 +1202,19 @@
     "@lezer/common" "^1.0.0"
     "@lezer/javascript" "^1.0.0"
 
+"@codemirror/lang-javascript@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.2.1.tgz#8068d44365d13cdb044936fb4e3483301c12ef95"
+  integrity sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
 "@codemirror/lang-python@^6.0.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-python/-/lang-python-6.1.2.tgz#cabb57529679981f170491833dbf798576e7ab18"
@@ -1255,6 +1268,15 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
+"@codemirror/view@^6.17.0":
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.22.0.tgz#5a5214a04f149ecf54c4803b7fec9bdac56d0d74"
+  integrity sha512-6zLj4YIoIpfTGKrDMTbeZRpa8ih4EymMCKmddEDcJWrCdp/N1D46B38YEz4creTb4T177AVS9EyXkLeC/HL2jA==
+  dependencies:
+    "@codemirror/state" "^6.1.4"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
 "@colors/[email protected]":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -9364,7 +9386,7 @@ [email protected], "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.35, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -13194,6 +13216,11 @@ style-mod@^4.0.0:
   resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.3.tgz#136c4abc905f82a866a18b39df4dc08ec762b1ad"
   integrity sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw==
 
+style-mod@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.0.tgz#a313a14f4ae8bb4d52878c0053c4327fb787ec09"
+  integrity sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==
+
 style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"