feat: #9 WIP formatting and styline input / output editors

Author: thescientist13

src/index.html

@@ -41,12 +41,18 @@
       #output-container {
         flex: 1;
         width: 100%;
+        font-family: var(--font-secondary);
       }
 
       #input-content,
       #output-content {
         width: 100%;
         height: 100%;
+        font-family: var(--font-secondary);
+      }
+
+      .monaco-editor {
+        font-family: var(--font-secondary);
       }
     </style>
   </head>

src/scripts/repl-init.ts

@@ -6,58 +6,65 @@ const workerUrl = new URL("./repl.ts", import.meta.url);
 const worker = new Worker(workerUrl, { type: "module" });
 
 const inputContents = `
-  const template = document.createElement('template');
-
-  template.innerHTML = \`
-    <style>
-      .footer {
-        color: white;
-        background-color: #192a27;
-      }
-    </style>
-
-    <footer class="footer">
-      <h4>My Blog &copy; \${new Date().getFullYear()}</h4>
-    </footer>
-  \`;
-
-  class Footer extends HTMLElement {
-    connectedCallback() {
-      if (!this.shadowRoot) {
-        this.attachShadow({ mode: 'open' });
-        this.shadowRoot.appendChild(template.content.cloneNode(true));
-      }
+const template = document.createElement('template');
+
+template.innerHTML = \`
+  <style>
+    .footer {
+      color: white;
+      background-color: #192a27;
+    }
+  </style>
+
+  <footer class="footer">
+    <h4>My Blog &copy; \${new Date().getFullYear()}</h4>
+  </footer>
+\`;
+
+class Footer extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
     }
   }
+}
 
-  export default Footer;
+export default Footer;
 
-  customElements.define('wcc-footer', Footer);
+customElements.define('wcc-footer', Footer);
 `;
 
+const commonTheme = {
+  fontFamily: "Geist-Mono",
+  fontSize: 16,
+  minimap: { enabled: false },
+  colorDecorators: false, // Disables hex color swatches and picker
+};
+
 document.addEventListener("DOMContentLoaded", () => {
-  console.log("Initializing Monaco Editor...", { monaco });
+  console.log("Initializing Editor...");
 
   const inputEditor = monaco.editor.create(inputContainer, {
-    value: inputContents,
+    value: inputContents.trim(),
     language: "javascript",
+    ...commonTheme,
   });
-
   const outputEditor = monaco.editor.create(outputContainer, {
-    // value: "<h1>Output</h1>",
     language: "html",
+    ...commonTheme,
   });
 
+  // listen for changes in the input editor and send the updated code to the worker for compilation
   inputEditor.onDidChangeModelContent(() => {
-    const inputContent = inputEditor.getValue();
-    console.log("Input content changed", { inputContent });
-    // const worker = new Worker(workerUrl, { type: "module" });
-    worker.postMessage([inputContent]);
+    worker.postMessage([inputEditor.getValue()]);
   });
 
+  // once the worker sends back the compiled HTML, update the output editor with the result
   worker.onmessage = (result) => {
-    outputEditor.setValue(result.data.html);
+    outputEditor.setValue(result.data.html.trim());
   };
 
+  // trigger an initial compilation with the default input contents
   worker.postMessage([inputEditor.getValue()]);
 });