How do I allow users to select images from devices. It's not documented.

[RamazaniMwemedi]

Please note 提问前请注意

• This option is used to ask others some usage questions. If you confirm this is a bug, please submit a bug.
• Please read How To Ask Questions before asking questions. Inefficient questions not only waste other people's time, but also keep you from getting timely answers.
• 该选项用来向其他人询问一些使用上的问题，如果你确认这是一个BUG，请提交BUG。
• 提问前，请先阅读提问的智慧。低效的问题不仅会浪费其他人的时间，也会使你无法得到及时的解答。

[zRafaF]

You should create an <input/> element and get the file from it, here's an example.

I haven't tested it, and it's a bit convoluted

As stated on #292 the pasting image seems to have an unexpected behavior. There might be a memory leak since the promise never times out

import 'react-markdown-editor-lite/lib/index.css';

import Editor from 'react-markdown-editor-lite';

interface MarkdownEditorComponentProps {}

const MarkdownEditorComponent: FunctionComponent<
    MarkdownEditorComponentProps
> = () => {
    const inputFile = useRef<HTMLInputElement | null>(null);
    const promiseResolveRef =
        useRef<(value: { url: string; text?: string | undefined }) => void>();

    const promiseRejectRef = useRef<(reason?: any) => void>();

    // This is a custom function that handles the image upload, yours will differ
    const uploadFile = async (file: File) => {
        const attachmentsRecord = await attachFile(file);
        const imageUrl = await getAttachmentFileURL(
            attachmentsRecord.files[attachmentsRecord.files.length - 1],
        );
        return imageUrl;
    };

    const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
        const selectedFile = event.target.files?.[0];

        if (selectedFile && promiseResolveRef.current) {
            try {
                const imageUrl = await uploadFile(selectedFile); // Upload the file to a server or check out https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader
                promiseResolveRef.current({
                    text: selectedFile.name,
                    url: imageUrl,
                });
            } catch (error) {
                if (promiseRejectRef.current)
                    promiseRejectRef.current(
                        new Error(
                            `Promise rejected, erro:`,
                            error as ErrorOptions
                        )
                    );
                console.error('Error reading file:', error);
            }
        }
    };

    const onCustomImageUpload = async (
        event: any
    ): Promise<{ url: string; text?: string | undefined }> => {
        inputFile.current?.click();
        return new Promise((resolve, reject) => {
            promiseResolveRef.current = resolve;
            promiseRejectRef.current = reject;
        });
    };

    return (
        <>
            <input
                type="file"
                id="file"
                ref={inputFile}
                style={{ display: 'none' }}
                onChange={handleFileChange}
            />
            <Editor
                onCustomImageUpload={onCustomImageUpload}
            />
        </>
    );
};

export default MarkdownEditorComponent;

[zRafaF]

Have a look at the demo they supplied https://github.com/HarryChen0506/react-markdown-editor-lite/blob/dependabot/npm_and_yarn/get-func-name-2.0.2/demo/basic.md