[Mobile] - Image corrector - Check the path extension is a valid one (#…

…62190) * Mobile - Image corrector - Check the path extension is a valid one * [Mobile] - Image corrector- Expand comment explaining the filtering for file: media paths * Integration Test helpers - Expand pasteIntoRichText to support passing files as a parameter * Mobile Editor Tests - Add new tests related to pasting HTML content with local image paths * Update snapshot
WordPress · Jun 4, 2024 · 3a7fc35 · 3a7fc35
1 parent 9483177
commit 3a7fc35
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 7 deletions.
diff --git 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
@@ -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`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Editor adds image block when pasting HTML local image path 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="file:///path/to/file.png" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
 exports[`Editor appends media correctly for allowed types 1`] = `
 "<!-- wp:image -->
 <figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt=""/></figure>

diff --git a/packages/edit-post/src/test/editor.native.js b/packages/edit-post/src/test/editor.native.js
@@ -8,8 +8,10 @@ import {
 	getBlock,
 	getEditorHtml,
 	initializeEditor,
+	pasteIntoRichText,
 	screen,
 	setupCoreBlocks,
+	within,
 } from 'test/helpers';
 import { BackHandler } from 'react-native';
 
@@ -91,6 +93,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: '<div><img src="file:LOW-RES.png"></div>',
+		} );
+
+		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
@@ -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,
 		},