From b89e79aa324d6ea857e2ad2738b5a4b8a6868f29 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 4 Jun 2024 12:29:10 +0200 Subject: [PATCH] [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 --- .../raw-handling/image-corrector.native.js | 5 ++- .../test/__snapshots__/editor.native.js.snap | 12 +++++++ packages/edit-post/src/test/editor.native.js | 34 +++++++++++++++++++ .../rich-text-paste.js | 13 +++---- 4 files changed, 57 insertions(+), 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 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, },