fix(demo): highlight input area properly

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>

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;

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,49 +30,62 @@ 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'));
 };
 
 // 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 => {
       const { cptime } = transformCollection(collection, { zod });
       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]) =>
         `<code data-label="${name}">${hljs.highlight(schema, { language: 'ts' }).value}</code>`,
     )
     .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>';
+};