Highlight color fixes

RELEASE-NOTES.txt

@@ -1,6 +1,7 @@
 Unreleased
 ---
 * [**] [internal] Upgrade React Native to version 0.73.3 [https://github.com/wordpress-mobile/gutenberg-mobile/pull/6590]
+* [**] Highlight color formatting style improvements [https://github.com/wordpress-mobile/gutenberg-mobile/pull/6517]
 
 1.114.0
 ---

__device-tests__/gutenberg-editor-functionality-test-1-visual.test.js

@@ -376,4 +376,88 @@ describe( 'Gutenberg Editor - Test Suite 1', () => {
 			expect( screenshot ).toMatchImageSnapshot();
 		} );
 	} );
+
+	describe( 'Highlight color', () => {
+		let screenshot;
+		it( 'should set a custom highlight color', async () => {
+			await editorPage.initializeEditor();
+
+			const defaultBlockAppenderElement =
+				await editorPage.getDefaultBlockAppenderElement();
+			await defaultBlockAppenderElement.click();
+			const toolbar = await editorPage.getToolbar();
+
+			await editorPage.toggleHighlightColor( 'Pale pink' );
+
+			await editorPage.typeKeyString( 'Hey ' );
+
+			screenshot = await takeScreenshotByElement(
+				await toolbar.$( '~Text color' ),
+				{ padding: -5 }
+			);
+			expect( screenshot ).toMatchImageSnapshot();
+
+			await editorPage.toggleHighlightColor( 'Vivid red' );
+
+			await editorPage.typeKeyString( 'there ' );
+
+			screenshot = await takeScreenshotByElement(
+				await toolbar.$( '~Text color' ),
+				{ padding: -5 }
+			);
+			expect( screenshot ).toMatchImageSnapshot();
+
+			await editorPage.toggleHighlightColor( 'Luminous vivid orange' );
+
+			await editorPage.typeKeyString( 'how are you?' );
+
+			screenshot = await takeScreenshotByElement(
+				await toolbar.$( '~Text color' ),
+				{ padding: -5 }
+			);
+			expect( screenshot ).toMatchImageSnapshot();
+
+			await editorPage.dismissKeyboard();
+			await editorPage.driver.waitUntil( async function () {
+				return ! ( await editorPage.driver.isKeyboardShown() );
+			} );
+
+			let paragraphBlockElement = await editorPage.getBlockAtPosition(
+				blockNames.paragraph
+			);
+			screenshot = await takeScreenshotByElement( paragraphBlockElement );
+			expect( screenshot ).toMatchImageSnapshot();
+
+			// Add a new Paragraph block
+			await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock();
+			paragraphBlockElement = await editorPage.getBlockAtPosition(
+				blockNames.paragraph,
+				2
+			);
+			expect( paragraphBlockElement ).toBeTruthy();
+
+			await editorPage.typeKeyString( 'Hey there' );
+
+			await editorPage.toggleHighlightColor( 'Luminous vivid orange' );
+
+			await editorPage.typeKeyString( ' how are you?' );
+
+			await editorPage.toggleHighlightColor( 'Pale pink' );
+
+			await editorPage.typeKeyString( ' all good!.' );
+
+			// Reset color
+			await editorPage.toggleHighlightColor();
+
+			await editorPage.typeKeyString( ' No colored text.' );
+
+			await editorPage.dismissKeyboard();
+			await editorPage.driver.waitUntil( async function () {
+				return ! ( await editorPage.driver.isKeyboardShown() );
+			} );
+
+			screenshot = await takeScreenshotByElement( paragraphBlockElement );
+			expect( screenshot ).toMatchImageSnapshot();
+		} );
+	} );
 } );

ios-xcframework/Podfile

@@ -7,6 +7,8 @@ GUTENBERG_PATH = '../gutenberg'
 REACT_NATIVE_PATH = File.join(GUTENBERG_PATH, 'node_modules', 'react-native')
 require_relative File.join(REACT_NATIVE_PATH, 'scripts', 'react_native_pods')
 
+pod 'WordPress-Aztec-iOS', :git => 'https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git', :commit => 'a41d881f6a831fecef9e6400e69a64aafe80d9ac'
+
 HERMES_ENABLED = ENV.fetch('HERMES_ENABLED', true)
 
 puts "[Gutenberg] Installing pods with Hermes #{HERMES_ENABLED ? 'enabled' : 'disabled'}"

ios-xcframework/Podfile.lock

@@ -1184,6 +1184,7 @@ DEPENDENCIES:
   - RNScreens (from `../third-party-podspecs/RNScreens.podspec.json`)
   - RNSVG (from `../third-party-podspecs/RNSVG.podspec.json`)
   - RNTAztecView (from `../gutenberg/packages/react-native-aztec`)
+  - WordPress-Aztec-iOS (from `https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git`, commit `a41d881f6a831fecef9e6400e69a64aafe80d9ac`)
   - Yoga (from `../gutenberg/node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1194,7 +1195,6 @@ SPEC REPOS:
     - SDWebImage
     - SDWebImageWebPCoder
     - SocketRocket
-    - WordPress-Aztec-iOS
 
 EXTERNAL SOURCES:
   boost:
@@ -1325,13 +1325,19 @@ EXTERNAL SOURCES:
     :podspec: "../third-party-podspecs/RNSVG.podspec.json"
   RNTAztecView:
     :path: "../gutenberg/packages/react-native-aztec"
+  WordPress-Aztec-iOS:
+    :commit: a41d881f6a831fecef9e6400e69a64aafe80d9ac
+    :git: https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git
   Yoga:
     :path: "../gutenberg/node_modules/react-native/ReactCommon/yoga"
 
 CHECKOUT OPTIONS:
   RNReanimated:
     :commit: 370beae83df674476e6917fe8ac4cea6b0179ad3
     :git: https://github.com/wordpress-mobile/react-native-reanimated
+  WordPress-Aztec-iOS:
+    :commit: a41d881f6a831fecef9e6400e69a64aafe80d9ac
+    :git: https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git
 
 SPEC CHECKSUMS:
   boost: d3f49c53809116a5d38da093a8aa78bf551aed09
@@ -1406,6 +1412,6 @@ SPEC CHECKSUMS:
   WordPress-Aztec-iOS: fbebd569c61baa252b3f5058c0a2a9a6ada686bb
   Yoga: ff0382b894475dba0b4d2a5fda860bfee5a9afad
 
-PODFILE CHECKSUM: fbfd4d8f52bfcf86e5e1fab197d349d6d2b8e72f
+PODFILE CHECKSUM: 0cff0eada79f00d73d0add6b3d271a6784386090
 
 COCOAPODS: 1.13.0