SolidJS•2y ago

EditorJS does not show up

The editor seems to be ready, but doesnt show up in the container console output: I'm ready! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ Editor component:

import EditorJS from '@editorjs/editorjs';
import { createSignal, Show } from 'solid-js';

function Editor(props: any) {
    const [editorIsReady, setReady] = createSignal(false);

    // temporary random id solution for testing
    const randomHolderId = (Math.floor(Math.random() * 100) + 1).toString();

    const createEditor = () => {
        new EditorJS({
            holder: randomHolderId,
            data: props.data,
            onReady: () => setReady(true)
        })
    };

    setTimeout(createEditor, 1000);

    return (
        <div id={randomHolderId}>
            <Show when={!editorIsReady()}>
                loading...
            </Show>
        </div>
    );
}

export default Editor;

import EditorJS from '@editorjs/editorjs';
import { createSignal, Show } from 'solid-js';

function Editor(props: any) {
    const [editorIsReady, setReady] = createSignal(false);

    // temporary random id solution for testing
    const randomHolderId = (Math.floor(Math.random() * 100) + 1).toString();

    const createEditor = () => {
        new EditorJS({
            holder: randomHolderId,
            data: props.data,
            onReady: () => setReady(true)
        })
    };

    setTimeout(createEditor, 1000);

    return (
        <div id={randomHolderId}>
            <Show when={!editorIsReady()}>
                loading...
            </Show>
        </div>
    );
}

export default Editor;

<Editor data={ defaultDataForEditorJS } />

<Editor data={ defaultDataForEditorJS } />

🤔 interesting.. providing 'fallback' allows the editor to show!

import EditorJS from '@editorjs/editorjs';

import {
    createSignal,
    onMount,
    Show
} from 'solid-js';

function Editor(props: any) {
    const [editorIsReady, setReady] = createSignal(false);

    const randomHolderId = "myHolder"; //(Math.floor(Math.random() * 100) + 1).toString();

    const createEditor = async () => {
        const instance = new EditorJS({
            autofocus: true,
            holder: randomHolderId,
            data: props.data
        })

        console.log(instance);
        await instance.isReady;
        setReady(true);
    };

    onMount(createEditor);

    return (
        <div id={randomHolderId}>
            <Show when={!editorIsReady()} fallback={'what'}>
                loading...
            </Show>
        </div>
    );
}

export default Editor;

import EditorJS from '@editorjs/editorjs';

import {
    createSignal,
    onMount,
    Show
} from 'solid-js';

function Editor(props: any) {
    const [editorIsReady, setReady] = createSignal(false);

    const randomHolderId = "myHolder"; //(Math.floor(Math.random() * 100) + 1).toString();

    const createEditor = async () => {
        const instance = new EditorJS({
            autofocus: true,
            holder: randomHolderId,
            data: props.data
        })

        console.log(instance);
        await instance.isReady;
        setReady(true);
    };

    onMount(createEditor);

    return (
        <div id={randomHolderId}>
            <Show when={!editorIsReady()} fallback={'what'}>
                loading...
            </Show>
        </div>
    );
}

export default Editor;

7 Replies

Brendan•2y ago

Curious, Is this using solid-start? And if so, were there any hydration errors or warnings logged in the console before you added the fallback?

Mr Void•2y ago

no, not using solid-start

Brendan•2y ago

Ok - thanks. I want just wondering if it was related to another thread - but nope. More specific to your example. Is there any chance Editor was somehow getting called twice - so your initial code would have different ID to the div in the DOM? Like, when you went back to using Math.random for id, did the problem reappear despite the fallback?

Mr Void•2y ago

yes, tested again now and as soon as i remove fallback attribute the editor stops showing up very weird logging the instances show that they have the existing element's ids

Brendan•2y ago

I guess Solid thinks it needs to delete the children in that div once editorIsReady, including those created by the add-on.
Perhaps make the loading message a sibling of the holder div instead of a child? Still don't know why adding a fallback would change that behavior.
But regardless, it is probably better to leave Solid (or any library) to completely manage the DOM nodes it creates. @mr._.void Does this work?

return (
  <>
    <div id={randomHolderId} />
    <Show when={!editorIsReady()}>
        loading...
    </Show>
  </>
);

return (
  <>
    <div id={randomHolderId} />
    <Show when={!editorIsReady()}>
        loading...
    </Show>
  </>
);

Mr Void•2y ago

you were right, this works as well

        <div id={randomHolderId} class="rounded-md border border-slate-100 px-16">
            <span></span>
            <Show when={!editorIsReady()}>
                loading...
            </Show>
        </div>

        <div id={randomHolderId} class="rounded-md border border-slate-100 px-16">
            <span></span>
            <Show when={!editorIsReady()}>
                loading...
            </Show>
        </div>

lemme try, sec yes, that works as well 😄 thank you

Brendan•2y ago

Lovely. Feel free to close this thread if you're happy too.

Gaming

Programming

EditorJS does not show up