From fa6bf5bbacbfa3d4ed5a409ecd2111c255fe30f6 Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Mon, 3 Mar 2025 11:10:19 +0100
Subject: [PATCH] split formatter page to textarea and editor

---
 src/routes/(editor)/experimental.tsx          |  3 +-
 ...formatter.module.css => editor.module.css} |  0
 .../{formatter.tsx => editor.tsx}             | 12 ++---
 .../(editor)/experimental/textarea.module.css | 50 +++++++++++++++++++
 src/routes/(editor)/experimental/textarea.tsx | 41 +++++++++++++++
 5 files changed, 98 insertions(+), 8 deletions(-)
 rename src/routes/(editor)/experimental/{formatter.module.css => editor.module.css} (100%)
 rename src/routes/(editor)/experimental/{formatter.tsx => editor.tsx} (83%)
 create mode 100644 src/routes/(editor)/experimental/textarea.module.css
 create mode 100644 src/routes/(editor)/experimental/textarea.tsx

diff --git a/src/routes/(editor)/experimental.tsx b/src/routes/(editor)/experimental.tsx
index 5ddac59..171a55a 100644
--- a/src/routes/(editor)/experimental.tsx
+++ b/src/routes/(editor)/experimental.tsx
@@ -17,7 +17,8 @@ export default function Experimental(props: ParentProps) {
       <Menu.Item command={goTo.withLabel('table').with('table')} />
       <Menu.Item command={goTo.withLabel('grid').with('grid')} />
       <Menu.Item command={goTo.withLabel('context-menu').with('context-menu')} />
-      <Menu.Item command={goTo.withLabel('formatter').with('formatter')} />
+      <Menu.Item command={goTo.withLabel('textarea').with('textarea')} />
+      <Menu.Item command={goTo.withLabel('editor').with('editor')} />
     </Menu.Root>
 
     <ErrorBoundary fallback={e => <ErrorComp error={e} />}>
diff --git a/src/routes/(editor)/experimental/formatter.module.css b/src/routes/(editor)/experimental/editor.module.css
similarity index 100%
rename from src/routes/(editor)/experimental/formatter.module.css
rename to src/routes/(editor)/experimental/editor.module.css
diff --git a/src/routes/(editor)/experimental/formatter.tsx b/src/routes/(editor)/experimental/editor.tsx
similarity index 83%
rename from src/routes/(editor)/experimental/formatter.tsx
rename to src/routes/(editor)/experimental/editor.tsx
index 4c9546a..25e2090 100644
--- a/src/routes/(editor)/experimental/formatter.tsx
+++ b/src/routes/(editor)/experimental/editor.tsx
@@ -1,8 +1,7 @@
-import { createEffect, createSignal } from "solid-js";
+import { createSignal } from "solid-js";
 import { debounce } from "@solid-primitives/scheduled";
-import { Textarea } from "~/components/textarea";
-import css from './formatter.module.css';
 import { Editor, useEditor } from "~/features/editor";
+import css from './editor.module.css';
 
 const tempVal = `
 # Header
@@ -37,11 +36,10 @@ export default function Formatter(props: {}) {
 
     return <div class={css.root}>
         <textarea oninput={onInput} title="markdown">{value()}</textarea>
-        {/* <Editor value={value()} oninput={setValue}>
-            <SearchAndReplace />
-        </Editor> */}
 
-        <Textarea class={css.textarea} title="html" value={value()} oninput={setValue} lang="en-GB" />
+        <Editor value={value()} oninput={setValue}>
+            <SearchAndReplace />
+        </Editor>
     </div>;
 }
 
diff --git a/src/routes/(editor)/experimental/textarea.module.css b/src/routes/(editor)/experimental/textarea.module.css
new file mode 100644
index 0000000..213165f
--- /dev/null
+++ b/src/routes/(editor)/experimental/textarea.module.css
@@ -0,0 +1,50 @@
+.root {
+    position: relative;
+    margin: 1em;
+    padding: .5em;
+    gap: 1em;
+    display: grid;
+
+    grid: 100% / repeat(2, minmax(0, 1fr));
+
+    inline-size: calc(100% - 2em);
+    block-size: calc(100% - 2em);
+
+    place-content: start;
+    background-color: var(--surface-500);
+    border-radius: var(--radii-xl);
+
+    & > :is(textarea, .textarea) {
+        overflow: auto;
+        padding: .5em;
+        background-color: transparent;
+    }
+
+    & ::highlight(search-results) {
+        background-color: var(--secondary-900);
+    }
+
+    & ::highlight(spelling-error) {
+        text-decoration-line: spelling-error;
+    }
+
+    & ::highlight(grammar-error) {
+        text-decoration-line: grammar-error;
+    }
+
+    .search {
+        position: absolute;
+        inset-inline-end: 0;
+        inset-block-start: 0;
+
+        display: block grid;
+        grid-auto-flow: row;
+
+        padding: .5em;
+        gap: .5em;
+
+        background-color: var(--surface-700);
+        border-radius: var(--radii-m);
+        box-shadow: var(--shadow-2);
+    }
+}
\ No newline at end of file
diff --git a/src/routes/(editor)/experimental/textarea.tsx b/src/routes/(editor)/experimental/textarea.tsx
new file mode 100644
index 0000000..e638b27
--- /dev/null
+++ b/src/routes/(editor)/experimental/textarea.tsx
@@ -0,0 +1,41 @@
+import { createSignal } from "solid-js";
+import { debounce } from "@solid-primitives/scheduled";
+import { Textarea } from "~/components/textarea";
+import css from './textarea.module.css';
+
+const tempVal = `
+# Header
+
+this is **a string** that contains bolded text
+
+this is *a string* that contains italicized text
+
+> Dorothy followed her through many of the beautiful rooms in her castle.
+
+> #### The quarterly results look great!
+>
+> - Revenue was off the chart.
+> - Profits were higher than ever.
+>
+> > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
+>
+> *Everything* is going according to **plan**.
+
+- First item
+- Second item
+- Third item
+- Fourth item
+`;
+
+export default function Formatter(props: {}) {
+    const [value, setValue] = createSignal(tempVal);
+
+    const onInput = debounce((e: InputEvent) => {
+        setValue((e.target! as HTMLTextAreaElement).value);
+    }, 300);
+
+    return <div class={css.root}>
+        <textarea oninput={onInput} title="markdown">{value()}</textarea>
+        <Textarea class={css.textarea} title="html" value={value()} oninput={setValue} lang="en-GB" />
+    </div>;
+}
\ No newline at end of file