[BUG]: Editor isn't ready yet and setting content not working

[mbpictures]

Describe the bug
I'm using the useEditorBridge() hook inside a modal component and on the mount of the component, I'm getting an "Editor isn't ready yet" warning.

To Reproduce
This is my modal component:

export const TextEditorModal = ({
    isVisible,
    onClose,
    content
}: {
    isVisible: boolean,
    onClose: (text: string) => unknown,
    content?: string
}) => {
    const theme = useTheme();

    const editor = useEditorBridge({
        initialContent: content
    });

    useEffect(() => {
        if (!content || !isVisible) {
            return;
        }
        editor.setContent(content);
    }, [content, isVisible]);

    const handleClose = () => {
        editor.getHTML().then(onClose);
    }

    return (
        <Modal
            style={{
                backgroundColor: theme.colors.background,
                padding: 12,
                margin: 0,
                width,
                height
            }}
            isVisible={isVisible}
            onBackButtonPress={handleClose}
        >
            <CustomIconButton icon={"chevron-left"} onPress={handleClose} />
            <RichText editor={editor} />
            <KeyboardAvoidingView
                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                style={exampleStyles.keyboardAvoidingView}
            >
                <Toolbar editor={editor} />
            </KeyboardAvoidingView>
        </Modal>
    )
};

Expected behavior
Content is updating once the useEffect hook triggers the setContent method. No warnings.

Screenshots

[17Amir17]

Hey @mbpictures the issue here is that it takes some time for the editor to initialize and accept messages, that warning is thrown because a message was sent before the editor can do anything about it.

You can know the editor is ready from the editor state, try update your code to

    useEffect(() => {
        if (!content || !isVisible || !editor.getEditorState().isReady) {
            return;
        }
        editor.setContent(content);
    }, [content, isVisible]);

Of course this will not call setContent if it is not ready yet, but the initial content should be loaded from the prop anyways, alternatively you could list for isReady updates with useBridgeState

[mbpictures]

Thanks for this hint!

Even when I update my code like this, I'm getting the same warning:

    const editor = useEditorBridge({
        initialContent: content
    });
    const editorState = useBridgeState(editor);

    useEffect(() => {
        if (!content || !isVisible || !editorState.isReady) {
            return;
        }
        editor.setContent(content);
    }, [isVisible, editorState.isReady]);

[jonhy751]

I also have this error

[mbpictures]

Update: even without setting the content at all I get the warning

[17Amir17]

I'm unable to reproduce this, could you share a clean repo where this happens so I can investigate?

[jonhy751]

I'm creating

[jonhy751]

I managed to reproduce the error...
this code returns the error:

`Editor isn't ready yet
at Suspense
at Freeze (http://10.0.2.2:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.taptest&modulesOnly=false&runModule=true&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:135073:23)
at DelayedFreeze (http://10.0.2.2:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.taptest&modulesOnly=false&runModule=true&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:135019:22)
at RNSScreenStack
at ScreenStack (http://10.0.2.2:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.taptest&modulesOnly=false&runModule=true&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:135390:25)
at NativeStackViewInner (http://10.0.2.2:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.taptest&modulesOnly=false&runModule=true&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:132508:22)
at RCTView

I realized that when I do an if(test) return

[17Amir17]

If this is only happening on new versions of expo, this might be caused from the isExpo util` not working
https://github.com/10play/10tap-editor/blob/main/src/utils/misc.ts

EDIT: sorry this is not related, the best way to go forward would be to provide me with a repo that reproduces it

[mbpictures]

I'm using a bare react native project, with one expo-module integrated (expo-av)

[jonhy751]

I realized that the editor needs an input to be rendered together.
In my code, the editor was rendered first and after a few milliseconds my input was rendered on the screen, causing the error.
I managed to solve it by setting the input to render right when the component started, together with the editor.

[ryzencool]

I realized that the editor needs an input to be rendered together. In my code, the editor was rendered first and after a few milliseconds my input was rendered on the screen, causing the error. I managed to solve it by setting the input to render right when the component started, together with the editor.

I have encountered the same issue. Could you please share your code? Thank you very much.

[humungasaurus]

I'm also encountering this, would love some code examples of how it is solved

[hesamzkr]

Same I'm also having this issue and I'm not sure what's causing it or how to solve it

[17Amir17]

Hey guys if you could provide a repo with the min amount of code to reproduce this we will have a better chance at solving this, since we cannot reproduce

[humungasaurus]

Too difficult to create a minimal repo, but I was able to repro this by removing then re-adding the conditional rendering of the RichText view. Basically, it seems that if you instantiate the editor but dont render the webview, you get this warning. However, if you instantiate the editor after the conditional you run into the "Renderred fewer hooks than expected" error