RichText - Move selectionColor logic to the RichText's component inst…

…ead, also take into account block themes
WordPress · Jul 10, 2023 · 14d5695 · 14d5695
1 parent bcef9ac
commit 14d5695
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 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
@@ -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
@@ -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
@@ -18,3 +18,11 @@
 .richTextPlaceholderDark {
  color: $gray-50;
 }
+
+.rich-text-selection {
+ color: $black;
+}
+
+.rich-text-selection--dark {
+ color: $white;
+}