Chris P Bacon Posts - Answer Overflow

Chris P Bacon

•Created by Chris P Bacon on 2/10/2025 in #support

How to dynamically 'render' a string interweaved with `<span />`'s

I am attepting to make a text area where I can manually mark words, or sets of words, as either a spelling or grammatical error. in order to do this I switched from a plain <textarea /> to a <div contenteditable /> so that I have full control on how to render the text inside. Now my question is, the way I mark spelling and grammer errrors in with an array of index ranges ([number, number][]). right now I do the 'rendering' with this code

    const html = createMemo(() => {
        return value().split('').map((letter, index) => {
            const spellingOpen = spellingErrors().some(([start]) => start === index) ? `<span class="${css.spellingError}">` : '';
            const spellingClose = spellingErrors().some(([, end]) => end === index) ? `</span>` : '';

            const grammarOpen = grammarErrors().some(([start]) => start === index) ? `<span class="${css.grammarError}">` : '';
            const grammarClose = grammarErrors().some(([, end]) => end === index) ? `</span>` : '';

            return `${grammarOpen}${spellingOpen}${letter}${spellingClose}${grammarClose}`;
        }).join('');
    });

    return <div
        contentEditable
        innerHTML={html()}
    />;

    const html = createMemo(() => {
        return value().split('').map((letter, index) => {
            const spellingOpen = spellingErrors().some(([start]) => start === index) ? `<span class="${css.spellingError}">` : '';
            const spellingClose = spellingErrors().some(([, end]) => end === index) ? `</span>` : '';

            const grammarOpen = grammarErrors().some(([start]) => start === index) ? `<span class="${css.grammarError}">` : '';
            const grammarClose = grammarErrors().some(([, end]) => end === index) ? `</span>` : '';

            return `${grammarOpen}${spellingOpen}${letter}${spellingClose}${grammarClose}`;
        }).join('');
    });

    return <div
        contentEditable
        innerHTML={html()}
    />;

I however really dislike having to do manual string manipulation combined with the innterHTML. So the advice I would like to get. or otherwise brainstorming I would like to do. Is, how can I do this is a more solid-esc / jsx-esc way, so that I don't need to do manual string manipulation (and hopefully then also no longer having to rerender the content on every edit which resets the cursor to the start of the input).

18 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

I have a -probably stipid- question: can I create a createAsyncMemo function? and how would I go about that? I am looking for a memo that can handle async browser api's. I thought that I could just use createAsync for this. however since it seems to be tied to the page's state I get a flickering page because the source signal I use has an internal use of createPolled. So in that train of thought I think the next logical step is to basically make a createAsync that is not tied to the router. But I am not having much luck, likely due to my limited knowledge in regards to signals. For some more concrete context, I have a function that I feed an Accessor<FileSystemDirectoryHandle> and this returns me a signal of all the .json files in that directory. Interally I also poll the files' lastModified so that my output signal is updated every time a file is CRUD'ed outside of my app. Next, and this is my problem code, I want to consume this file-list-signal. The file API's are however all async, and I often have trouble mixing async and signals. So guessing this is all due to a lack of knowledge on my part, how would I go about mixing async and signals best? this is that functions that polls a directory

17 replies

SSolidJS

•Created by Chris P Bacon on 11/6/2024 in #support

Css modules not getting nonce attribute

I am setting up my app with a strict CSP header and passing the nonce in createHandler work as expected for all assets in the header. But I don't get the nonce attribute on <style /> elements that solid and/or vite injects into the body for a route's css module. does anyone maybe know how to solve this? or otherwise point me to the code in solid's repo where css modules are handled

3 replies

Gaming

Programming