got started on a dedicated editor component

src/routes/(editor)/experimental/formatter.module.css

@@ -19,4 +19,32 @@
         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/formatter.tsx

@@ -1,8 +1,8 @@
-import { createSignal } from "solid-js";
+import { createEffect, createSignal } from "solid-js";
 import { debounce } from "@solid-primitives/scheduled";
 import { Textarea } from "~/components/textarea";
 import css from './formatter.module.css';
-import { Editor } from "~/features/editor";
+import { Editor, useEditor } from "~/features/editor";
 
 const tempVal = `
 # Header
@@ -13,15 +13,13 @@ this is *a string* that contains italicized text
 
 > Dorothy followed her through many of the beautiful rooms in her castle.
 
-> Dorothy followed her through many of the beautiful rooms in her castle.
->
-> > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
-
 > #### 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
@@ -39,6 +37,25 @@ export default function Formatter(props: {}) {
 
     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" />
+        <Editor value={value()} oninput={setValue}>
+            <SearchAndReplace />
+        </Editor>
+
+        {/* <Textarea class={css.textarea} title="html" value={value()} oninput={setValue} lang="en-GB" /> */}
     </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>;
+};