Highlight text color selection is not preserved when cursor is placed in the middle of text

[dcalhoun]

Description

If the cursor is placed in the middle of Paragraph text, setting the color has no impact on newly typed text.

Step-by-step reproduction instructions

1. Add text to a Paragraph block.
2. Move cursor to the middle of the text.
3. Set a different color.
4. Begin typing.

Expected behaviour

The typed text is displayed in the selected color.

Actual behaviour

The type text is displayed in the default theme color.

Screenshots or screen recording (optional)

UX Recording

RPReplay_Final1658863804.MP4

WordPress information

• WordPress version: 6.0
• Gutenberg version: 13.7.2
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No, Geologist.

Device information

• Device: iPhone SE
• Operating system: iOS 15.6
• WordPress app version: 20.3

[fluiddot]

I also reproduced this issue in an older version (20.0), so looks like it was introduced several versions ago.

[SiobhyB]

Verifying that this is still an issue with the latest version of the app (22.5).

[dcalhoun]

For edge cases where we don't have support yet, it won't try to apply the format to avoid confusion seeing this format in the toolbar enabled but not showing in the actual test. An example of this edge case would be placing the caret in the middle of a word and toggling on the highlighted text format.

@geriux the above quote is from #37915. Do you consider fixing highlighting when the caret is in the middle of text not possible with the current Aztec limitations or is it possible if we implement the necessary workarounds in the relevant code below?

gutenberg/packages/format-library/src/text-color/inline.native.js

Lines 92 to 117 in 5067361

	// Force formatting due to limitations in the native implementation
	if (
	hasNoSelection &&
	( value.text.length === 0 ||
	( previousCharacter === ' ' && isAtTheEnd ) )
	) {
	// For cases where there's no text selected, there's a space before
	// the current caret position and it's at the end of the text.
	return applyFormat( value, format, value.start - 1, value.end + 1 );
	} else if ( hasNoSelection && isAtTheEnd ) {
	// If there's no selection and is at the end of the text
	// manually add the format within the current caret position.
	const newFormat = applyFormat( value, format );
	const { activeFormats } = newFormat;
	newFormat.formats[ value.start ] = [
	...( activeFormats?.filter(
	( { type } ) => type !== format.type
	) || [] ),
	format,
	];
	return newFormat;
	} else if ( hasNoSelection ) {
	return removeFormat( value, format );
	}
	return applyFormat( value, format );

Completely fine if your answer is "I don't know." I just figured I'd ask you before diving into the code in case you definitely knew it was not possible due to the native limitations from your previous explorations. Thanks! 🙇🏻

[geriux]

Hey @dcalhoun 👋

Do you consider fixing highlighting when the caret is in the middle of text not possible with the current Aztec limitations or is it possible if we implement the necessary workarounds in the relevant code below?

I think it could be worth revisiting that implementation, I remember there were a few issues when applying this formatting and If I recall correctly some improvements have been made after we implemented it so I think we could try if we can make it work on the JS side. If not it would require some native work in Aztec and the mark tag formatting.