html-sandbox: Implement basic unsandboxed preview

Author: eliandoran

package.json

@@ -29,6 +29,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@codemirror/lang-html": "^6.4.9",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-markdown": "^6.2.5",
 		"@codemirror/lang-yaml": "^6.1.1",

pnpm-lock.yaml

@@ -1,16 +1,38 @@
 <script>
+  import CodeMirror from "svelte-codemirror-editor";
+  import { html } from "@codemirror/lang-html";
+  import { theme } from "$lib/stores/codemirror.js";
+
 	import Tool from "$lib/components/tool.svelte";
 	import TwoColumnView from "$lib/components/two-column-view.svelte";
+
+  let htmlText;
 </script>
 
 <Tool>
-  <TwoColumnView leftTitle="HTML" rightTitle="Preview">
+  <TwoColumnView leftTitle="HTML" rightTitle="Preview" hasPadding={false}>
     <div slot="left">
-
+      <div class="codemirror-outer-wrapper">
+        <CodeMirror
+          bind:value={htmlText}
+          lang={html()}
+          theme={$theme} />
+      </div>
     </div>
 
     <div slot="right">
-      
+      {@html htmlText}
     </div>
   </TwoColumnView>
-</Tool>
+</Tool>
+
+<style>
+  [slot=left],
+  [slot=right] {
+    height: 100%;
+  }
+
+  .codemirror-outer-wrapper {
+    height: 100%;
+  }
+</style>