Autoselect caret label text color

Compact inline style

src/components/collaborative-editing/use-yjs/formats/collab-caret/CollabCaret.stories.tsx

@@ -1,16 +1,29 @@
+import { applyCarets, settings } from '.';
+
 export default {
 	title: 'Collaboration/Components/Caret',
 	component: CollabCaret,
 };
 
+function cssStringToObject( cssString ) {
+	const keyValuePairs = cssString
+		.split( ';' )
+		.map( ( line ) => line.trim().split( ':' ) )
+		.filter( ( pair ) => pair.length === 2 );
+	return Object.fromEntries( keyValuePairs );
+}
+
 function CollabCaret( { label, color } ) {
+	const { activeFormats } = applyCarets( { formats: [], text: 'foo' }, [ { label, color, start: 0, end: 0 } ] );
+	const { class: additionalClasses, style, ...attributes } = activeFormats[ 0 ].attributes;
+
 	return (
 		<p contentEditable style={ { padding: '8px' } }>
 			Lorem ipsum dolor sit
 			<mark
-				className="iso-editor-collab-caret is-collapsed"
-				title={ label }
-				style={ { '--iso-editor-collab-caret-color': color } as React.CSSProperties }
+				className={ `${ settings.className } ${ additionalClasses }` }
+				style={ cssStringToObject( style ) }
+				{ ...attributes }
 			/>{ ' ' }
 			amet consectetur
 		</p>

src/components/collaborative-editing/use-yjs/formats/collab-caret/color-utils.js

@@ -0,0 +1,16 @@
+function getContrastYIQ( hexcolor ) {
+	const r = parseInt( hexcolor.substr( 0, 2 ), 16 );
+	const g = parseInt( hexcolor.substr( 2, 2 ), 16 );
+	const b = parseInt( hexcolor.substr( 4, 2 ), 16 );
+	return ( r * 299 + g * 587 + b * 114 ) / 1000;
+}
+
+/**
+ * Determine whether white text should be used on a given background color, based on YIQ contrast.
+ *
+ * @param {string} backgroundColorHex
+ */
+export function shouldUseWhiteText( backgroundColorHex ) {
+	const hex = backgroundColorHex.charAt( 0 ) === '#' ? backgroundColorHex.substr( 1 ) : backgroundColorHex;
+	return getContrastYIQ( hex ) < 128;
+}

src/components/collaborative-editing/use-yjs/formats/collab-caret/index.js

@@ -12,6 +12,7 @@ import { applyFormat, registerFormatType } from '@wordpress/rich-text';
 /**
  * Internal dependencies
  */
+import { shouldUseWhiteText } from './color-utils';
 import './style.scss';
 
 const FORMAT_NAME = 'isolated/collab-caret';
@@ -48,7 +49,12 @@ export function applyCarets( record, carets = [] ) {
 						'is-shifted': isShifted,
 					} ),
 					title: label,
-					style: `--iso-editor-collab-caret-color: ${ color || '#2e3d48' }`,
+					style: [
+						`--iso-editor-collab-caret-color: ${ color || '#2e3d48' };`,
+						`--iso-editor-collab-caret-label-text-color: ${
+							shouldUseWhiteText( color ) ? '#fff' : 'currentColor'
+						};`,
+					].join( ' ' ),
 				},
 			},
 			start,

src/components/collaborative-editing/use-yjs/formats/collab-caret/style.scss

@@ -36,7 +36,7 @@ mark.iso-editor-collab-caret::after {
 	padding: 2px 4px 3px;
 	border-radius: 2px;
 	content: attr( title ); // identity
-	color: white;
+	color: var( --iso-editor-collab-caret-label-text-color );
 	vertical-align: top;
 	font-size: 10px;
 	line-height: 1;