diff --git a/src/core/ui/forms/MarkdownInput/FormikMarkdownField.tsx b/src/core/ui/forms/MarkdownInput/FormikMarkdownField.tsx index f039d8990c..70518c0086 100644 --- a/src/core/ui/forms/MarkdownInput/FormikMarkdownField.tsx +++ b/src/core/ui/forms/MarkdownInput/FormikMarkdownField.tsx @@ -105,7 +105,7 @@ export const FormikMarkdownField = ({ editor?.commands.setImage({ src: data.uploadFileOnStorageBucket, alt: 'pasted-image' }); }, onError: error => { - logError(error); + console.error(error.message); }, }); @@ -141,17 +141,18 @@ export const FormikMarkdownField = ({ const handleOnPaste = useCallback( (event: ClipboardEvent) => { const clipboardData = event.clipboardData; - const items = clipboardData.items; + const items = clipboardData?.items; if (!items) return; const storageBucketId = storageConfig?.storageBucketId; if (storageBucketId) { - let hasImage = false; + let imageProcessed = false; for (const item of items) { - if (item.type.startsWith('image/')) { + // Process `image/png` first + if (item.kind === 'file' && item.type.startsWith('image/')) { const file = item.getAsFile(); if (file) { const reader = new FileReader(); @@ -168,14 +169,25 @@ export const FormikMarkdownField = ({ }); }; - reader.readAsDataURL(file); // Read to trigger onLoad. - hasImage = true; + reader.readAsDataURL(file); // Read the file to trigger onLoad. + imageProcessed = true; + break; // Stop after processing the image. + } + } + + // Process `text/html` only if there is no image + if (!imageProcessed && item.kind === 'string' && item.type === 'text/html') { + const htmlContent = clipboardData.getData('text/html'); + if (htmlContent.includes('`, ignore it to avoid duplication. + imageProcessed = true; + break; } } } - if (hasImage) { - event.preventDefault(); // Prevent default only if there's an image. + if (imageProcessed) { + event.preventDefault(); } } }, @@ -206,7 +218,7 @@ export const FormikMarkdownField = ({ (props: PropsWithChildren) => ( ), - [handleImagePaste] + [handleImagePaste, handleOnPaste] ); const labelOffset = inputElement?.getLabelOffset(); diff --git a/src/core/ui/forms/MarkdownInput/MarkdownInput.tsx b/src/core/ui/forms/MarkdownInput/MarkdownInput.tsx index 480ace9c9c..a04ee298b4 100644 --- a/src/core/ui/forms/MarkdownInput/MarkdownInput.tsx +++ b/src/core/ui/forms/MarkdownInput/MarkdownInput.tsx @@ -58,6 +58,10 @@ const proseMirrorStyles = { const editorOptions: Partial = { extensions: [StarterKit, ImageExtension, Link, Highlight, Iframe], + editorProps: { + // Prevents automatic pasting + handlePaste: () => true, // Returns true to stop the default handling + }, }; export const MarkdownInput = memo(