From 14d5695b547d09c29f4e12590b7cf2958c20b595 Mon Sep 17 00:00:00 2001
From: Gerardo <gerardo.pacheco@automattic.com>
Date: Mon, 10 Jul 2023 17:06:07 +0200
Subject: [PATCH] RichText - Move selectionColor logic to the RichText's
 component instead, also take into account block themes

---
 .../src/components/rich-text/index.native.js  | 15 ++------
 .../rich-text/src/component/index.native.js   | 35 ++++++++++++++++++-
 .../rich-text/src/component/style.native.scss |  8 +++++
 3 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
index c47b440b6d0f6..b0c82848db687 100644
--- a/packages/block-editor/src/components/rich-text/index.native.js
+++ b/packages/block-editor/src/components/rich-text/index.native.js
@@ -15,11 +15,7 @@ import {
 	findTransform,
 	isUnmodifiedDefaultBlock,
 } from '@wordpress/blocks';
-import {
-	useInstanceId,
-	useMergeRefs,
-	usePreferredColorSchemeStyle,
-} from '@wordpress/compose';
+import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import {
 	__experimentalRichText as RichText,
 	__unstableCreateElement,
@@ -207,11 +203,6 @@ function RichTextWrapper(
 			);
 	}
 
-	const defaultSelectionColor = usePreferredColorSchemeStyle(
-		'black',
-		'white'
-	);
-
 	const onSelectionChange = useCallback(
 		( selectionChangeStart, selectionChangeEnd ) => {
 			selectionChange(
@@ -628,9 +619,7 @@ function RichTextWrapper(
 			deleteEnter={ deleteEnter }
 			placeholderTextColor={ placeholderTextColor }
 			textAlign={ textAlign }
-			selectionColor={
-				selectionColor ? selectionColor : defaultSelectionColor
-			}
+			selectionColor={ selectionColor }
 			tagsToEliminate={ tagsToEliminate }
 			disableEditingMenu={ disableEditingMenu }
 			fontSize={ fontSize }
diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
index 2d48d1263cb61..47a50c9b200f3 100644
--- a/packages/rich-text/src/component/index.native.js
+++ b/packages/rich-text/src/component/index.native.js
@@ -1049,6 +1049,37 @@ export class RichText extends Component {
 			: defaultColor;
 	}
 
+	getSelectionColor() {
+		const {
+			baseGlobalStyles,
+			getStylesFromColorScheme,
+			selectionColor: currentSelectionColor,
+		} = this.props;
+		let selectionColor = getStylesFromColorScheme(
+			styles[ 'rich-text-selection' ],
+			styles[ 'rich-text-selection--dark' ]
+		).color;
+
+		if ( currentSelectionColor ) {
+			selectionColor = currentSelectionColor;
+		}
+
+		if ( this.getIsBlockBasedTheme() ) {
+			const colordTextColor = colord( selectionColor );
+			const colordBackgroundColor = colord(
+				baseGlobalStyles?.color?.background
+			);
+			const isColordTextReadable = colordTextColor.isReadable(
+				colordBackgroundColor
+			);
+			if ( ! isColordTextReadable ) {
+				selectionColor = baseGlobalStyles?.color?.text;
+			}
+		}
+
+		return selectionColor;
+	}
+
 	render() {
 		const {
 			tagName,
@@ -1154,6 +1185,8 @@ export class RichText extends Component {
 			},
 		];
 
+		const selectionColor = this.getSelectionColor();
+
 		const EditableView = ( props ) => {
 			this.customEditableOnKeyDown = props?.onKeyDown;
 
@@ -1238,7 +1271,7 @@ export class RichText extends Component {
 					{ ...( this.isIOS ? { maxWidth } : {} ) }
 					minWidth={ minWidth }
 					id={ this.props.id }
-					selectionColor={ this.props.selectionColor }
+					selectionColor={ selectionColor }
 					disableAutocorrection={ this.props.disableAutocorrection }
 				/>
 				{ isSelected && (
diff --git a/packages/rich-text/src/component/style.native.scss b/packages/rich-text/src/component/style.native.scss
index d0b94c6f8e950..3ba3be6a7150b 100644
--- a/packages/rich-text/src/component/style.native.scss
+++ b/packages/rich-text/src/component/style.native.scss
@@ -18,3 +18,11 @@
 .richTextPlaceholderDark {
 	color: $gray-50;
 }
+
+.rich-text-selection {
+	color: $black;
+}
+
+.rich-text-selection--dark {
+	color: $white;
+}