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)/edit.tsx

@@ -390,52 +390,17 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
 
     const copyKey = createCommand('page.edit.command.copyKey', (key: string) => writeClipboard(key));
 
-    const tempVal = `
-# Header
+    return <Grid rows={rows()} locales={locales()} api={setApi}>{
+        key => {
+            return <Context.Root commands={[copyKey.with(key)]}>
+                <Context.Menu>{
+                    command => <Command.Handle command={command} />
+                }</Context.Menu>
 
-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
-    `;
-    const { out: [html, update] } = createSource(createMarkdownParser(), createHtmlParser(), tempVal);
-
-    createEffect(() => {
-        console.log(html());
-    });
-
-    return <>
-        <div contentEditable innerHTML={html()} />
-
-        <Grid rows={rows()} locales={locales()} api={setApi}>{
-            key => {
-                return <Context.Root commands={[copyKey.with(key)]}>
-                    <Context.Menu>{
-                        command => <Command.Handle command={command} />
-                    }</Context.Menu>
-
-                    <Context.Handle>{key.split('.').at(-1)!}</Context.Handle>
-                </Context.Root>;
-            }
-        }</Grid>
-    </>;
+                <Context.Handle>{key.split('.').at(-1)!}</Context.Handle>
+            </Context.Root>;
+        }
+    }</Grid>;
 };
 
 const Blank: Component<{ open: CommandType }> = (props) => {

src/routes/(editor)/experimental.tsx

@@ -16,6 +16,7 @@ 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.Root>
 
     {props.children}

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

@@ -0,0 +1,21 @@
+.root {
+    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);
+
+    & > * {
+        overflow: auto;
+        padding: .5em;
+        background-color: transparent;
+    }
+}

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