[RNMobile] Fix undo/redo history when inserting a link configured to …

…open in a new tab (#50460)

* Add rel to link formatting attributes

* Update CHANGELOG to add undo/redo fix to Unreleased section

* Update packages/react-native-editor/CHANGELOG.md

Co-authored-by: Tanner Stokes <tanner.stokes@automattic.com>

* Update packages/react-native-editor/CHANGELOG.md

Co-authored-by: David Calhoun <github@davidcalhoun.me>

* Add test for checking undo/redo history when a link is configured to open in a new tab

* Update link settings modal test case to check for correct editor history

* test: Fix React prop typo

* test: Simplify test queries

The targeted elements do not require asynchronous queries. Using
synchronous queries is more concise and easier to comprehend.

* test: Increase editor history link test accuracy

The targeted bug occurs when:

1. Changing a link to "Open in a new tab."
2. Performing additional changes, e.g. typing.
3. Undoing both actions.
4. Redoing both actions.

Thus, this changes the initial HTML, adds additional undo/redo
invocations, and updates inline snapshots to match the expected
outcomes.

---------

Co-authored-by: Tanner Stokes <tanner.stokes@automattic.com>
Co-authored-by: David Calhoun <github@davidcalhoun.me>

packages/format-library/src/link/index.native.js

@@ -37,6 +37,7 @@ export const link = {
 	attributes: {
 		url: 'href',
 		target: 'target',
+		rel: 'rel',
 	},
 	edit: withSpokenMessages(
 		class LinkEdit extends Component {

packages/format-library/src/link/modal.native.js

@@ -19,6 +19,7 @@ const ModalLinkUI = ( { isVisible, ...restProps } ) => {
 				hideHeader
 				onClose={ restProps.onClose }
 				hasNavigation
+				testID="link-settings-modal"
 			>
 				<BottomSheet.NavigationContainer animate main>
 					<BottomSheet.NavigationScreen name={ screens.settings }>

packages/react-native-editor/CHANGELOG.md

@@ -17,6 +17,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [*] Fix crash when trying to convert to regular blocks an undefined/deleted reusable block [#50475]
 -   [**] Tapping on nested text blocks gets focus directly instead of having to tap multiple times depeding on the nesting levels. [#50108]
 -   [*] Use host app namespace in reusable block message [#50478]
+-   [**] Configuring a link to open in a new tab no longer results in a partial loss of edit history (undo and redo) [#50460]
 
 ## 1.94.0
 -   [*] Split pasted content between title and body. [#37169]

test/native/integration/editor-history.native.js

@@ -3,12 +3,14 @@
  */
 import {
 	addBlock,
+	dismissModal,
 	getBlock,
 	typeInRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
 	setupCoreBlocks,
+	selectRangeInRichText,
 	within,
 } from 'test/helpers';
 
@@ -173,4 +175,62 @@ describe( 'Editor History', () => {
 		<!-- /wp:paragraph -->"
 	` );
 	} );
+
+	it( 'should preserve editor history when a link has been added and configured to open in a new tab', async () => {
+		// Arrange
+		const initialHtml = `
+			<!-- wp:paragraph --><p>A <a href="http://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p><!-- /wp:paragraph -->
+		`;
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		selectRangeInRichText( paragraphTextInput, 2, 7 );
+		fireEvent.press( screen.getByLabelText( 'Link' ) );
+
+		const newTabButton = screen.getByText( 'Open in new tab' );
+		fireEvent.press( newTabButton );
+
+		dismissModal( screen.getByTestId( 'link-settings-modal' ) );
+
+		typeInRichText(
+			paragraphTextInput,
+			' A quick brown fox jumps over the lazy dog.'
+		);
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="http://wordpress.org" target="_blank" rel="noreferrer noopener">quick</a> brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		fireEvent.press( screen.getByLabelText( 'Undo' ) );
+		fireEvent.press( screen.getByLabelText( 'Undo' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="http://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		fireEvent.press( screen.getByLabelText( 'Redo' ) );
+		fireEvent.press( screen.getByLabelText( 'Redo' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="http://wordpress.org" target="_blank" rel="noreferrer noopener">quick</a> brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );