Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline toolbar usage and render data #2745

Open
vt0022 opened this issue Jun 24, 2024 · 0 comments
Open

Inline toolbar usage and render data #2745

vt0022 opened this issue Jun 24, 2024 · 0 comments

Comments

@vt0022
Copy link

vt0022 commented Jun 24, 2024

Hello everyone, I'm new to EditorJs and I'm really interested in this awesome editor. However, I encountered some problems when working with it.
First, I am really confused with the usage of inline toolbar. Does EditorJs support default inline toolbar? I try to config inlineToolbar: true but it doesn't work or show up.
Second, I have a list of notes. When I click on a note, I want to re-render editor data with editor.current.blocks.render(content) But when I first render component, it throws me error: Can't find a Block to remove although I've set init data before rendering.
Here is my editor:

    const initData = {
        time: 1719246341883,
        blocks: [
            {
                id: "wqGx4FfRpe",
                data: {
                    text: "",
                },
                type: "paragraph",
            },
        ],
        version: "2.29.1",
    };

    useEffect(() => {
        if (!editor.current) {
            editor.current = new EditorJS({
                holder: "editorjs",
                inlineToolbar: true,
                tools: {
                    header: {
                        class: Header,
                        inlineToolbar: true,
                    },
                    marker: {
                        class: Marker,
                        inlineToolbar: true,
                    },
                    list: List,
                    checklist: Checklist,
                    paragraph: Paragraph,
                    quote: {
                        class: Quote,
                        inlineToolbar: true,
                    },
                    code: {
                        class: Code,
                        inlineToolbar: true,
                    },
                    bold: StrongInlineTool,
                    italic: ItalicInlineTool,
                    underline: UnderlineInlineTool,
                },
                data: initData,
                onChange: (api, event) => {
                    api.saver
                        .save()
                        .then((data) => {
                            onSave(data);
                        })
                        .catch((error) => {
                            console.log("Saving failed: ", error);
                        });
                },
            });
        }
    }, []);

    useEffect(() => {
        pageRef.current = page;
    }, [page]);

    useEffect(() => {
        editor.current.isReady
            .then(() => {
                editor.current.blocks.render(content);
            })
            .catch((error) => {
                console.log("Editor.js failed to initialize", error);
            });
    }, [content]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant