src/web-component.html

<!DOCTYPE html>
<html>
  <style>
    #root {
      min-block-size: 100dvh;
      -ms-overflow-style: none; /* Remove scrollbar for IE and Edge */
      scrollbar-width: none; /* Remove scroll bar for Firefox */
    }
    ::-webkit-scrollbar {
      display: none;
    }
    body {
      display: flex;
      flex-direction: column;
      block-size: 100dvh;
      margin: 0;
    }
    .editor-wc {
      flex: 1 1 auto;
      display: flex;
    }
    ::part(editor-root) {
      display: block;
      flex: 1 1 auto;
      max-block-size: 100dvh;
    }
  </style>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Editor Web component</title>
  </head>
  <body>
    <p id="results"></p>
    <p id="project-identifier"></p>
  </body>

  <script>
    document.addEventListener("DOMContentLoaded", (e) => {
      const webComp = document.createElement("editor-wc");
      const queryParams = new URLSearchParams(window.location.search);

      // sidebar
      webComp.setAttribute("with_projectbar", "true");
      webComp.setAttribute("with_sidebar", "true");
      webComp.setAttribute(
        "sidebar_options",
        JSON.stringify([
          "instructions",
          "file",
          "images",
          "download",
          "settings",
          "info",
        ]),
      );

      // Pre-set the code attribute with an empty string.
      webComp.setAttribute("code", "");
      webComp.setAttribute("class", "editor-wc");
      webComp.setAttribute("host_styles", JSON.stringify([]));
      // Set any attribute you like in the query string, including class, style, hidden, script, etc.
      queryParams.forEach((value, key) => {
        webComp.setAttribute(key, value);
      });

      // subscribe to the 'codeChanged' custom event which is pushed by the project react component
      document.addEventListener("editor-codeChanged", function (e) {
        console.log("listener in index html");
        const code = webComp.editorCode;
        console.log(code);
      });

      document.addEventListener("editor-runCompleted", (e) => {
        // const error = webComp.isErrorFree
        console.log(e.detail);
        document.getElementById("results").innerText = JSON.stringify(e.detail);
      });

      document.addEventListener("editor-projectIdentifierChanged", (e) => {
        document.getElementById("project-identifier").innerText = e.detail;
      });

      const body = document.getElementsByTagName("body")[0];
      body.prepend(webComp);

      const runButton = document.createElement("button");
      const runButtonText = document.createTextNode("Run code");
      runButton.appendChild(runButtonText);
      runButton.onclick = (event) => {
        webComp.rerunCode();
      }
      body.append(runButton);
    });
  </script>
</html>