stash

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

@@ -32,19 +32,37 @@
         text-decoration-line: grammar-error;
     }
 
-    .search {
-        position: absolute;
-        inset-inline-end: 0;
-        inset-block-start: 0;
-
+    .editor {
         display: block grid;
-        grid-auto-flow: row;
+        grid: auto 1fr / 100%;
 
-        padding: .5em;
-        gap: .5em;
+        .toolbar {
+            display: block grid;
+            grid-auto-flow: column;
+            place-content: start;
+        }
 
-        background-color: var(--surface-700);
-        border-radius: var(--radii-m);
-        box-shadow: var(--shadow-2);
+        .search {
+            position: absolute;
+            inset-inline-end: 0;
+            inset-block-start: 0;
+
+            grid-template-columns: 1fr 1fr;
+
+            padding: .5em;
+            gap: .5em;
+
+            background-color: var(--surface-700);
+            border-radius: var(--radii-m);
+            box-shadow: var(--shadow-2);
+
+            &:popover-open {
+                display: block grid;
+            }
+
+            & > label {
+                display: contents;
+            }
+        }
     }
 }

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

@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js";
+import { createEffect, createMemo, createSignal, onMount } from "solid-js";
 import { debounce } from "@solid-primitives/scheduled";
 import { Editor, useEditor } from "~/features/editor";
 import css from './editor.module.css';
@@ -37,23 +37,53 @@ export default function Formatter(props: {}) {
     return <div class={css.root}>
         <textarea oninput={onInput} title="markdown">{value()}</textarea>
 
-        <Editor value={value()} oninput={setValue}>
-            <SearchAndReplace />
-        </Editor>
+        <div class={css.editor}>
+            <Editor value={value()} oninput={setValue}>
+                <Toolbar />
+                <SearchAndReplace />
+            </Editor>
+        </div>
     </div>;
 }
 
+function Toolbar() {
+    const { mutate, selection } = useEditor();
+
+    const bold = () => {
+        console.log('toggle text bold', selection());
+    };
+
+    return <div class={css.toolbar}>
+        <button onclick={bold}>bold</button>
+    </div>
+}
+
 function SearchAndReplace() {
     const { mutate, source } = useEditor();
     const [replacement, setReplacement] = createSignal('');
+    const [term, setTerm] = createSignal('');
+    const [caseInsensitive, setCaseInsensitive] = createSignal(true);
 
-    const replace = () => {
-        mutate(text => text.replaceAll(source.query, replacement()));
+    const query = createMemo(() => new RegExp(term(), caseInsensitive() ? 'gi' : 'g'));
+
+    createEffect(() => {
+        source.query = query();
+    });
+
+    const replace = (e: SubmitEvent) => {
+        e.preventDefault();
+
+        const form = e.target as HTMLFormElement;
+        form.reset();
+
+        mutate(text => text.replaceAll(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>
+    return <form on:submit={replace} class={css.search} popover="manual">
+        <label><span>Case insensitive</span><input type="checkbox" checked={caseInsensitive()} oninput={e => setCaseInsensitive(e.target.checked)} /></label>
+        <label><span>Search for</span><input type="search" title="editor-search" oninput={e => setTerm(e.target.value)} /></label>
+        <label><span>Replace with</span><input type="search" title="editor-replace" oninput={e => setReplacement(e.target.value)} /></label>
+
+        <button>replace</button>
     </form>;
 };