From 9d1e2bfb28f21600aa8be0bf507b3ab8c1aab527 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Fri, 14 Jun 2024 08:15:48 +0900
Subject: [PATCH] feat: add PlaygroundParser component to PlaygroundMenu

---
 src/lib/Playground/PlaygroundMenu.svelte   |  9 +++++++++
 src/lib/Playground/PlaygroundParser.svelte | 23 ++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 src/lib/Playground/PlaygroundParser.svelte

diff --git a/src/lib/Playground/PlaygroundMenu.svelte b/src/lib/Playground/PlaygroundMenu.svelte
index cb3ac70e..84f9a699 100644
--- a/src/lib/Playground/PlaygroundMenu.svelte
+++ b/src/lib/Playground/PlaygroundMenu.svelte
@@ -11,6 +11,7 @@
     import { get } from "svelte/store";
     import { DataBase, setDatabase, type character } from "src/ts/storage/database";
   import PlaygroundImageGen from "./PlaygroundImageGen.svelte";
+  import PlaygroundParser from "./PlaygroundParser.svelte";
 
     const playgroundChat = () => {
         let db = get(DataBase)
@@ -75,6 +76,11 @@
             }}>
                 <h1 class="text-2xl font-bold text-start">{language.imageGeneration}</h1>
             </button>
+            <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+                PlaygroundStore.set(8)
+            }}>
+                <h1 class="text-2xl font-bold text-start">Parser</h1>
+            </button>
         </div>
     {:else}
         {#if $SizeStore.w < 1024}
@@ -105,6 +111,9 @@
             {#if $PlaygroundStore === 7}
                 <PlaygroundImageGen/>
             {/if}  
+            {#if $PlaygroundStore === 8}
+                <PlaygroundParser/>
+            {/if}  
         </div>
     {/if}
 </div>
\ No newline at end of file
diff --git a/src/lib/Playground/PlaygroundParser.svelte b/src/lib/Playground/PlaygroundParser.svelte
new file mode 100644
index 00000000..903b43a3
--- /dev/null
+++ b/src/lib/Playground/PlaygroundParser.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { ParseMarkdown } from "src/ts/parser";
+    import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
+    let input = "";
+    let output = "";
+    const onInput = async () => {
+        try {
+            output = await ParseMarkdown(input)
+        } catch (e) {
+            output = `Error: ${e}`
+        }
+    }
+</script>
+
+<h2 class="text-4xl text-textcolor my-6 font-black relative">Full Parser</h2>
+
+<span class="text-textcolor text-lg">Input</span>
+
+<TextAreaInput onInput={onInput} bind:value={input} optimaizedInput={false} />
+
+<span class="text-textcolor text-lg">Output HTML</span>
+
+<TextAreaInput value={output} />
\ No newline at end of file