got to a nice point, right now I can do bi-directional transformations, and also have my spelling and grammar error markers that are also cleaned up so they don't end up in the source text

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

@@ -0,0 +1,43 @@
+import { createSignal } from "solid-js";
+import { debounce } from "@solid-primitives/scheduled";
+import { Textarea } from "~/components/textarea";
+import css from './formatter.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.
+
+> 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.
+>
+> *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}>{value()}</textarea>
+        <Textarea value={value()} oninput={setValue} lang="en-GB" />
+    </div>;
+}