implement inital suggestion application

src/components/textarea/textarea.module.css

@@ -17,4 +17,35 @@
     & [data-marker="grammar"] {
         text-decoration-line: grammar-error;
     }
+}
+
+.suggestions {
+    position-anchor: --suggestions;
+
+    position: fixed;
+    inset-inline-start: anchor(start);
+    inset-block-start: anchor(end);
+    position-try-fallbacks: flip-block, flip-inline;
+
+    margin: 0;
+    padding: var(--padding-m) 0;
+    border: 1px solid var(--surface-300);
+    background-color: var(--surface-600);
+    box-shadow: var(--shadow-2);
+    list-style: none;
+
+    display: none;
+    grid-auto-flow: row;
+
+    &:popover-open {
+        display: block grid;
+    }
+
+    & > li {
+        padding: var(--padding-m);
+
+        &:hover {
+            background-color: oklch(from var(--info) l c h / .5);
+        }
+    }
 }

src/components/textarea/textarea.tsx

@@ -1,10 +1,9 @@
-import { createEffect, createMemo, untrack } from 'solid-js';
+import { Component, createContext, createEffect, createMemo, createSignal, For, onMount, untrack, useContext } from 'solid-js';
 import { debounce } from '@solid-primitives/scheduled';
 import { createSelection } from '@solid-primitives/selection';
-import { defaultChecker as spellChecker } from './spellChecker';
-import { defaultChecker as grammarChecker } from './grammarChecker';
 import { createSource } from '~/features/source';
 import css from './textarea.module.css';
+import { isServer } from 'solid-js/web';
 
 interface TextareaProps {
     class?: string;
@@ -18,6 +17,7 @@ interface TextareaProps {
 
 export function Textarea(props: TextareaProps) {
     const [selection, setSelection] = createSelection();
+    const [editorRef, setEditorRef] = createSignal<HTMLElement>();
 
     const source = createSource(props.value);
 
@@ -29,43 +29,114 @@ export function Textarea(props: TextareaProps) {
         source.in = props.value;
     });
 
-    const onInput = debounce(() => {
-        const [el, start, end] = untrack(() => selection());
+    const mutate = debounce(() => {
+        const [el, start, end] = selection();
+        const ref = editorRef();
 
-        if (el) {
-            source.out = el.innerHTML;
+        if (ref) {
+            source.out = ref.innerHTML;
 
-            el.style.height = `1px`;
-            el.style.height = `${2 + el.scrollHeight}px`;
+            ref.style.height = `1px`;
+            ref.style.height = `${2 + ref.scrollHeight}px`;
 
-            setSelection([el, start, end]);
+            setSelection([ref, start, end]);
         }
     }, 300);
 
-    const spellingErrors = createMemo(() => spellChecker(source.out, props.lang));
-    const grammarErrors = createMemo(() => grammarChecker(source.out, props.lang));
+    onMount(() => {
+        new MutationObserver(mutate).observe(editorRef()!, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+        });
+    });
 
-    // const html = createMemo(() => {
-    //     return source.out.split('').map((letter, index) => {
-    //         const spellingOpen = spellingErrors().some(([start]) => start === index) ? `<span class="${css.spellingError}">` : '';
-    //         const spellingClose = spellingErrors().some(([, end]) => end === index) ? `</span>` : '';
+    return <>
+        <Suggestions />
+        <div
+            ref={setEditorRef}
+            class={`${css.textarea} ${props.class}`}
+            contentEditable
+            dir="auto"
+            lang={props.lang}
+            innerHTML={source.out}
+            data-placeholder={props.placeholder ?? ''}
+            on:keydown={e => e.stopPropagation()}
+            on:pointerdown={e => e.stopPropagation()}
+        />
+    </>;
+}
 
-    //         const grammarOpen = grammarErrors().some(([start]) => start === index) ? `<span class="${css.grammarError}">` : '';
-    //         const grammarClose = grammarErrors().some(([, end]) => end === index) ? `</span>` : '';
+const Suggestions: Component = () => {
+    const [selection] = createSelection();
+    const [suggestionRef, setSuggestionRef] = createSignal<HTMLElement>();
+    const [suggestions, setSuggestions] = createSignal<string[]>([]);
 
-    //         return `${grammarOpen}${spellingOpen}${letter}${spellingClose}${grammarClose}`;
-    //     }).join('');
-    // });
+    const marker = createMemo(() => {
+        if (isServer) {
+            return;
+        }
 
-    return <div
-        class={`${css.textarea} ${props.class}`}
-        contentEditable
-        dir="auto"
-        lang={props.lang}
-        oninput={onInput}
-        innerHTML={source.out}
-        data-placeholder={props.placeholder ?? ''}
-        on:keydown={e => e.stopPropagation()}
-        on:pointerdown={e => e.stopPropagation()}
-    />;
-}
+        const [n] = selection();
+        const s = window.getSelection();
+
+        if (n === null || s === null || s.rangeCount < 1) {
+            return;
+        }
+
+        return (findMarkerNode(s.getRangeAt(0)?.commonAncestorContainer) ?? undefined) as HTMLElement | undefined;
+    });
+
+    createEffect<HTMLElement | undefined>((prev) => {
+        if (prev) {
+            prev.style.setProperty('anchor-name', null);
+        }
+
+        const m = marker();
+        const ref = untrack(() => suggestionRef()!);
+
+        if (m === undefined) {
+            ref.hidePopover();
+
+            return;
+        }
+
+        m.style.setProperty('anchor-name', '--suggestions');
+        ref.showPopover();
+        ref.focus()
+
+        return m;
+    });
+
+    createEffect(() => {
+        marker();
+
+        setSuggestions(Array(Math.ceil(Math.random() * 5)).fill('').map((_, i) => `suggestion ${i}`));
+    });
+
+    const onPointerDown = (e: PointerEvent) => {
+        marker()?.replaceWith(document.createTextNode(e.target.textContent));
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+        console.log(e);
+    }
+
+    return <menu ref={setSuggestionRef} class={css.suggestions} popover="manual" onkeydown={onKeyDown}>
+        <For each={suggestions()}>{
+            suggestion => <li onpointerdown={onPointerDown}>{suggestion}</li>
+        }</For>
+    </menu>;
+};
+
+const findMarkerNode = (node: Node | null) => {
+    while (node !== null) {
+        if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).hasAttribute('data-marker')) {
+            break;
+        }
+
+        node = node.parentNode;
+    }
+
+    return node;
+};