diff --git a/packages/blocks/src/api/raw-handling/image-corrector.native.js b/packages/blocks/src/api/raw-handling/image-corrector.native.js
index c6a9288ede2d3b..550c2e0e6e1537 100644
--- a/packages/blocks/src/api/raw-handling/image-corrector.native.js
+++ b/packages/blocks/src/api/raw-handling/image-corrector.native.js
@@ -10,7 +10,10 @@ export default function imageCorrector( node ) {
return;
}
- if ( node.src.indexOf( 'file:' ) === 0 ) {
+ // For local files makes sure the path doesn't end with an invalid extension.
+ // This scenario often happens with content from MS Word and similar text apps.
+ // We still need to support local files pasted from the users Media library.
+ if ( node.src.startsWith( 'file:' ) && node.src.slice( -1 ) === '/' ) {
node.setAttribute( 'src', '' );
}
diff --git a/packages/edit-post/src/test/__snapshots__/editor.native.js.snap b/packages/edit-post/src/test/__snapshots__/editor.native.js.snap
index 76bb42d5a2ccea..4a88b249a1db66 100644
--- a/packages/edit-post/src/test/__snapshots__/editor.native.js.snap
+++ b/packages/edit-post/src/test/__snapshots__/editor.native.js.snap
@@ -1,5 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Editor adds empty image block when pasting unsupported HTML local image path 1`] = `
+"
+
+"
+`;
+
+exports[`Editor adds image block when pasting HTML local image path 1`] = `
+"
+
+"
+`;
+
exports[`Editor appends media correctly for allowed types 1`] = `
"
diff --git a/packages/edit-post/src/test/editor.native.js b/packages/edit-post/src/test/editor.native.js
index acafc4d68d42a5..8fe116758608b5 100644
--- a/packages/edit-post/src/test/editor.native.js
+++ b/packages/edit-post/src/test/editor.native.js
@@ -9,8 +9,10 @@ import {
getEditorHtml,
getEditorTitle,
initializeEditor,
+ pasteIntoRichText,
screen,
setupCoreBlocks,
+ within,
} from 'test/helpers';
import { BackHandler } from 'react-native';
@@ -98,6 +100,38 @@ describe( 'Editor', () => {
} );
} );
+ it( 'adds empty image block when pasting unsupported HTML local image path', async () => {
+ await initializeEditor();
+ await addBlock( screen, 'Paragraph' );
+
+ const paragraphBlock = getBlock( screen, 'Paragraph' );
+ fireEvent.press( paragraphBlock );
+ const paragraphTextInput =
+ within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+ pasteIntoRichText( paragraphTextInput, {
+ text: '

',
+ } );
+
+ expect( getEditorHtml() ).toMatchSnapshot();
+ } );
+
+ it( 'adds image block when pasting HTML local image path', async () => {
+ await initializeEditor();
+ await addBlock( screen, 'Paragraph' );
+
+ const paragraphBlock = getBlock( screen, 'Paragraph' );
+ fireEvent.press( paragraphBlock );
+ const paragraphTextInput =
+ within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+ pasteIntoRichText( paragraphTextInput, {
+ files: [ 'file:///path/to/file.png' ],
+ } );
+
+ expect( getEditorHtml() ).toMatchSnapshot();
+ } );
+
it( 'appends media correctly for allowed types', async () => {
// Arrange
requestMediaImport
diff --git a/test/native/integration-test-helpers/rich-text-paste.js b/test/native/integration-test-helpers/rich-text-paste.js
index d2c01ed2fb5a72..6d447181e0b8d2 100644
--- a/test/native/integration-test-helpers/rich-text-paste.js
+++ b/test/native/integration-test-helpers/rich-text-paste.js
@@ -6,19 +6,20 @@ import { fireEvent } from '@testing-library/react-native';
/**
* Paste content into a RichText component.
*
- * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance.
- * @param {Object} content Content to paste.
- * @param {string} content.text Text format of the content.
- * @param {string} [content.html] HTML format of the content. If not provided, text format will be used.
+ * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance.
+ * @param {Object} content Content to paste.
+ * @param {string} content.text Text format of the content.
+ * @param {string} [content.html] HTML format of the content. If not provided, text format will be used.
+ * @param {string} [content.files] Files array to add to the editor.
*/
-export const pasteIntoRichText = ( richText, { text, html } ) => {
+export const pasteIntoRichText = ( richText, { text, html, files = [] } ) => {
fireEvent( richText, 'focus' );
fireEvent( richText, 'paste', {
preventDefault: jest.fn(),
nativeEvent: {
eventCount: 1,
target: undefined,
- files: [],
+ files,
pastedHtml: html || text,
pastedText: text,
},