split formatter page to textarea and editor

src/routes/(editor)/experimental/editor.tsx

@@ -0,0 +1,59 @@
+import { createSignal } from "solid-js";
+import { debounce } from "@solid-primitives/scheduled";
+import { Editor, useEditor } from "~/features/editor";
+import css from './editor.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>
+
+        <Editor value={value()} oninput={setValue}>
+            <SearchAndReplace />
+        </Editor>
+    </div>;
+}
+
+function SearchAndReplace() {
+    const { mutate, source } = useEditor();
+    const [replacement, setReplacement] = createSignal('');
+
+    const replace = () => {
+        mutate(text => text.replaceAll(source.query, replacement()));
+    };
+
+    return <form class={css.search}>
+        <input type="search" title="editor-search" placeholder="search for" oninput={e => source.query = e.target.value} />
+        <input type="search" title="editor-replace" placeholder="replace with" oninput={e => setReplacement(e.target.value)} />
+        <button onclick={() => replace()}>replace</button>
+    </form>;
+};