split formatter page to textarea and editor

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} />}>

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>;
 }
 

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);
+    }
+}

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>;
+}