From 3ebfb092c895a65db410a7437051e2b5334b6b6d Mon Sep 17 00:00:00 2001
From: David Enke <david@enke.dev>
Date: Mon, 21 Oct 2024 13:08:10 +0200
Subject: [PATCH] fix(demo): highlight input area properly

---
 index.html        |  4 ++--
 src/demo/demo.css | 26 +++++++++++++++++++++++---
 src/demo/demo.ts  | 47 +++++++++++++++++++++++++++++++----------------
 3 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 988dcd6..4bd3252 100644
--- a/index.html
+++ b/index.html
@@ -72,11 +72,11 @@ <h1>Astro Decap Collection Demo</h1>
       </fieldset>
       <fieldset id="config">
         <legend>Parsed config collections</legend>
-        <pre><code data-label="count: 0"></code></pre>
+        <pre><code></code></pre>
       </fieldset>
       <fieldset id="schemas">
         <legend>Zod schemata</legend>
-        <pre><code data-label="none"></code></pre>
+        <pre><code></code></pre>
       </fieldset>
     </main>
   </body>
diff --git a/src/demo/demo.css b/src/demo/demo.css
index 851e629..5317b91 100644
--- a/src/demo/demo.css
+++ b/src/demo/demo.css
@@ -52,6 +52,7 @@ main {
   display: flex;
   flex-flow: row nowrap;
   gap: 10px;
+  height: 0;
 
   @media (orientation: portrait) {
     flex-direction: column;
@@ -80,6 +81,7 @@ fieldset {
   position: relative;
   box-sizing: border-box;
   flex: 1 1 0;
+  overflow: hidden;
 
   height: 100%;
   width: 0;
@@ -168,10 +170,28 @@ code {
 }
 
 #input {
-  position: relative;
+  pre,
+  textarea {
+    white-space: pre;
+  }
 
   pre {
-    white-space: pre-wrap;
+    display: block;
+    height: 100%;
+    width: 100%;
+
+    overflow: hidden;
+    overflow-y: auto;
+
+    border: 1px solid #ccc;
+    border-radius: 6px;
+
+    > code {
+      flex: 0;
+      display: block;
+      max-height: none;
+      border: 0;
+    }
   }
 
   textarea {
@@ -193,7 +213,7 @@ code {
 
   nav {
     position: absolute;
-    inset: auto auto 10px 10px;
+    inset: auto 10px 10px auto;
     z-index: 2;
 
     display: flex;
diff --git a/src/demo/demo.ts b/src/demo/demo.ts
index 3c7d376..223ee4d 100644
--- a/src/demo/demo.ts
+++ b/src/demo/demo.ts
@@ -14,7 +14,9 @@ declare global {
     loadExample(path: string): void;
     handleInput(event: InputEvent): Promise<void>;
     handleScroll(event: Event): void;
-    updatePreview(input: string, config: string, schemas: Record<string, string>): void;
+    updateInput(from: InputEvent): string;
+    updatePreview(config: string, schemas: Record<string, string>): void;
+    clearPreview(): void;
   }
 }
 
@@ -28,7 +30,7 @@ window.global ||= window;
 
 // loads an example from the `examples` folder
 window.loadExample = async (path: string) => {
-  const input = document.querySelector('textarea');
+  const input = document.querySelector('textarea')!;
   const example = await fetch(path);
   input.value = await example.text();
   input.dispatchEvent(new InputEvent('input'));
@@ -36,12 +38,9 @@ window.loadExample = async (path: string) => {
 
 // handle textarea input event
 window.handleInput = async event => {
-  const { value: config } = event.target as HTMLTextAreaElement;
-  const { collections } = (await parseConfig(config)) ?? {};
-  if (collections === undefined) {
-    window.updatePreview(config, '', {});
-    return;
-  }
+  const config = window.updateInput(event);
+  const { collections = [] } = (await parseConfig(config)) ?? {};
+  if (!collections.length) return window.clearPreview();
 
   const schemas = await Promise.all(
     collections.map(async collection => {
@@ -49,24 +48,30 @@ window.handleInput = async event => {
       return [collection.name, await formatCode(cptime)];
     }),
   );
-  window.updatePreview(config, JSON.stringify(collections, null, 2), Object.fromEntries(schemas));
+  window.updatePreview(JSON.stringify(collections, null, 2), Object.fromEntries(schemas));
 };
 
 window.handleScroll = event => {
   const { scrollTop, parentElement } = event.target as HTMLTextAreaElement;
-  parentElement.firstElementChild.firstElementChild.scrollTop = scrollTop;
+  parentElement!.firstElementChild!.scrollTop = scrollTop;
 };
 
-// update the preview code with the config and schemas
-window.updatePreview = (input, config, schemas) => {
-  const inputPreview = document.querySelector<HTMLElement>('#input code');
-  inputPreview.innerHTML = hljs.highlight(input, { language: 'yaml' }).value;
+window.updateInput = event => {
+  const input = event.target as HTMLTextAreaElement;
+  const preview = document.querySelector<HTMLElement>('#input code')!;
+  preview.innerHTML = hljs.highlight(input.value, { language: 'yaml' }).value;
+  preview.style.height = `${input.scrollHeight}px`;
+  window.handleScroll(event);
+  return input.value;
+};
 
-  const configPreview = document.querySelector<HTMLElement>('#config code');
+// update the preview code with the config and schemas
+window.updatePreview = (config, schemas) => {
+  const configPreview = document.querySelector<HTMLElement>('#config code')!;
   configPreview.dataset.label = `count: ${Object.entries(schemas).length}`;
   configPreview.innerHTML = hljs.highlight(config, { language: 'json' }).value;
 
-  const schemaPreview = document.querySelector('#schemas pre');
+  const schemaPreview = document.querySelector('#schemas pre')!;
   schemaPreview.innerHTML = Object.entries(schemas)
     .map(
       ([name, schema]) =>
@@ -74,3 +79,13 @@ window.updatePreview = (input, config, schemas) => {
     )
     .join('\n\n');
 };
+
+// clear the code previews
+window.clearPreview = () => {
+  const configPreview = document.querySelector<HTMLElement>('#config code')!;
+  delete configPreview.dataset.label;
+  configPreview.innerHTML = '';
+
+  const schemaPreview = document.querySelector('#schemas pre')!;
+  schemaPreview.innerHTML = '<code></code>';
+};