Display init value retrieved from database

[vt0022]

Hello everyone. Recently, I've been using this useful editor to create note feature for my app. But I encounter a problem: the init value return from API cannot be displayed on the editor. It only display the hard-coded init value. I try many ways but I cannot resolve it. If the value from API is in wrong format, it should display nothing or throw error but nothing happens.

    const Note = ({ page, slug }) => {
    const editor = useMemo(() => createYooptaEditor(), []);

    const [content, setContent] = useState({
        "6fb82999-1b24-41a7-8c8b-55b199b16886": {
            id: "6fb82999-1b24-41a7-8c8b-55b199b16886",
            meta: {
                depth: 0,
                order: 0,
            },
            type: "Paragraph",
            value: [
                {
                    id: "a90661d3-8280-48e3-9c7c-996f783a1275",
                    type: "paragraph",
                    props: {
                        nodeType: "block",
                    },
                    children: [
                        {
                            text: "12345",
                        },
                    ],
                },
            ],
        },
    });
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        if (slug) {
            onRetrieve();
        }
    }, [page]);

    const onRetrieve = async () => {
        try {
            const response = await getNote(slug, {
                params: {
                    page: page,
                },
            });

            if (response.status === 200) {
                setContent(response.data.content);
                // editor.setEditorValue(response.data.content);

                // The same
                console.log("1", JSON.parse(response.data.content));
                console.log("2", content);
            }
        } catch (error) {}
    };

    return (
        <div className="bg-teal-200 rounded-b-3xl rounded-tr-3xl shadow-lg mt-5 p-3 max-h-[270px] w-full">
            <div className="flex space-x-2 items-center mb-5">
                <div className="bg-white p-2 w-10 h-10 rounded-full flex items-center justify-center">
                    <FaFeatherPointed className="w-5 h-5" />
                </div>

                <div className="text-lg font-medium">Ghi chú trang 2</div>
            </div>

            {fetchingStatus === 2 && <YooptaEditor editor={editor} plugins={plugins} tools={TOOLS} marks={MARKS} value={content} />}

[Darginec05]

Hi @vt0022 👋

It seems you have multipage structure? If yes just add key prop to YooptaEditor component.

<YooptaEditor key={page.id} editor={editor} plugins={plugins} tools={TOOLS} marks={MARKS} value={content} />

Let me know if this approach has helped you

[vt0022]

I followed your instruction but it seemed not working. The page prop there is just an integer. I tried this : editor.setEditorValue(JSON.parse(response.data.content)); and everything seems ok. Thanks for your assistance @Darginec05.

[vt0022]

Sorry @Darginec05 Now I encounter another problem. I cannot change the display value of editor. I have a note list and I want that when I click on each note, the editor will display its content. I try to print the editor value and it has changed but it doesn't reflect value on display. How can I resolve this? Sincerely thank you

[Darginec05]

@vt0022 I'll prepare demo with solution for your case today evening

[Akshdhiwar]

Hey @vt0022 Did you found any solution for this problem I'm also encountering same issue. If have any update please share !!!

hello @Darginec05 need some help on this

Sorry @Darginec05 Now I encounter another problem. I cannot change the display value of editor. I have a note list and I want that when I click on each note, the editor will display its content. I try to print the editor value and it has changed but it doesn't reflect value on display. How can I resolve this? Sincerely thank you