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