Multiple instance of the editor exist?

[Tapialj]

Hello! I'm working with milkdown to create a small page to edit, but I've noticed that when I load up the components for this, there are 3 different boxes that can be clicked into and edited. They seem to exist withing the useEditor so it's not like they are duplicate renders, when I type into one of the empty lines, I log that the changes for that line are completely separate from the others. I'm just a bit confused as to why these extra editors exist inside of my render, is this normal and expected or am I doing something wrong with the code? When examining the elements, I see:

<div data-milkdown-root="true">
    <div class="milkdown">...</div>
    <div class="milkdown">...</div>
    <div class="milkdown">...</div>
</div>

Only the last div contains the information I'm passing into the component.

Here is my editor react component:

import React, { useState , useEffect } from 'react';
import { fetchPage } from '../../utils/editHandler';
import { Editor, rootCtx, defaultValueCtx } from '@milkdown/kit/core';
import { nord } from '@milkdown/theme-nord';
import { Milkdown, MilkdownProvider, useEditor } from '@milkdown/react';
import { commonmark } from '@milkdown/kit/preset/commonmark';
import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
import '@milkdown/theme-nord/style.css';
import Card from '@mui/material/Card';




interface EditPageProps {
    content: string | undefined;
    onUpdate: any;
}

type MarkdownPage = {
    id: number,
    title?: string,
    markdown?: string,
    version: number, //increment each update.
    key: string, //eg. auroral-clutter
    hash?: string,
    tags?: string[]
}

const WikiEditor: React.FC<EditPageProps> = (props) => {

    let updatedText = "";
    const content = props.content ? props.content : "";
    const onUpdate = props.onUpdate;

    useEditor((root) => {
        return Editor
            .make()
            .config(ctx => {
                ctx.set(rootCtx, root)
                ctx.set(defaultValueCtx, content)
                ctx.get(listenerCtx).markdownUpdated((ctx, markdown, prevMarkdown) => {
                    updatedText = markdown;
                    onUpdate(updatedText);
                    console.log(markdown);
                })
            })
            .config(nord)
            .use(commonmark)
            .use(listener);
    }, []);

    return <Milkdown />;
};

const WikiEditorWrapper: React.FC = () => {

    const [markdownData, setMarkdownData] = useState<MarkdownPage>();
    const [updates, setUpdates] = useState<string>("");

    useEffect(() => {
        const getPageContent = async (pageID: number) => {
            const content = await fetchPage(`pages/${pageID}`);
            setMarkdownData(content);
        }

        getPageContent(1);
    }, []);

    return (
        <MilkdownProvider>
            <WikiEditor key={markdownData?.id} content={markdownData?.markdown} onUpdate={setUpdates} />
        </MilkdownProvider>
    );
};

export default WikiEditorWrapper;

I did try to remove the key from the WikiEditor but that didn't seem to do anything. Curious if anyone has any ideas or what may be going on. Thanks

[adambirds]

I'm getting this as well, first time there is only one and then next time there are two. Here is my code:

import type {FC} from "react";
import {Milkdown, useEditor} from "@milkdown/react";
import {emoji} from "@milkdown/plugin-emoji";
import {Crepe} from "@milkdown/crepe";
import {fetchWithCSRF} from "@/helpers/common/csrf";
import {useRef, useEffect} from "react";

interface MilkdownEditorProps {
    markdown: string;
    setMarkdown: (markdown: string) => void;
}

export const MilkdownEditor: FC<MilkdownEditorProps> = ({
    markdown,
    setMarkdown,
}) => {
    // Store the Crepe instance so we can manually destroy it later.
    const editorInstance = useRef<Crepe | null>(null);

    useEditor((root) => {
        const crepe = new Crepe({
            root,
            defaultValue: markdown,
            features: {
                [Crepe.Feature.Latex]: false,
            },
            featureConfigs: {
                [Crepe.Feature.Placeholder]: {
                    text: "Type something here...",
                },
                [Crepe.Feature.ImageBlock]: {
                    onUpload: async (file: File) => {
                        const formData = new FormData();
                        formData.append("file", file);

                        // Provide alt_text and caption in a JSON payload field
                        const payload = {
                            alt_text: "Uploaded image",
                            caption: "Uploaded via Milkdown editor",
                        };
                        formData.append("payload", JSON.stringify(payload));

                        const res = await fetchWithCSRF(
                            `${process.env.NEXT_PUBLIC_API_URL}/api/blog/gallery`,
                            {
                                method: "POST",
                                body: formData,
                            },
                        );

                        if (!res.ok) {
                            throw new Error("Image upload failed");
                        }

                        const data = await res.json();
                        // Assuming the API returns an object with a URL field
                        return data.image;
                    },
                },
            },
        });

        crepe.editor.use(emoji);

        crepe.on((listener) => {
            listener.markdownUpdated((_, markdown, prevMarkdown) => {
                if (markdown !== prevMarkdown) {
                    console.log("Markdown updated", markdown);
                    setMarkdown(markdown);
                }
            });
        });

        // Save the instance for cleanup.
        editorInstance.current = crepe;
        return crepe;
    }, []);

    // When the component unmounts, manually destroy the Crepe instance.
    useEffect(() => {
        return () => {
            if (editorInstance.current) {
                editorInstance.current.destroy();
                editorInstance.current = null;
            }
        };
    }, []);

    return <Milkdown />;
};

export default MilkdownEditor;

Really not sure what is causing it.

[Saul-Mirone]

Should be fixed by #1679

[adambirds]

Any idea when that will be released to 'npm'?

[adambirds]

And is this actually needed like i have in my above example, or will it be automatic with this fix now?

// When the component unmounts, manually destroy the Crepe instance.
    useEffect(() => {
        return () => {
            if (editorInstance.current) {
                editorInstance.current.destroy();
                editorInstance.current = null;
            }
        };
    }, []);

[adambirds]

Hey @Saul-Mirone, any idea when the fix from #1679 will get pushed to npm?