Enhance updateFormats to preserve editor-only formats when caret is inside an annotation. Updated function parameters to include preserveEditorOnlyFormatsFrom, ensuring annotations grow with newly typed text only when applicable. Improved event listener logic to determine annotation presence before typing.

Author: maxschmeling

packages/rich-text/src/component/event-listeners/input-and-selection.js

@@ -88,14 +88,25 @@ export default ( props ) => ( element ) => {
 		const currentValue = createRecord();
 		const { start, activeFormats: oldActiveFormats = [] } = record.current;
 
+		// Determine if the caret was inside an annotation before typing by checking
+		// the OLD record's formats at the caret position. We only preserve annotations
+		// when the caret was inside one before typing, so typing past the annotation
+		// won't extend it.
+		const oldFormatsAtCaret =
+			record.current.formats && record.current.formats[ start ]
+				? record.current.formats[ start ]
+				: [];
+		const preserveEditorOnlyFormatsFrom = oldFormatsAtCaret.filter(
+			( format ) => format?.type === 'core/annotation'
+		);
+
 		// Update the formats between the last and new caret position.
-		// updateFormats will filter out editor-only formats (like annotations)
-		// from activeFormats and preserve them from the formats array instead.
 		const change = updateFormats( {
 			value: currentValue,
 			start,
 			end: currentValue.start,
 			formats: oldActiveFormats,
+			preserveEditorOnlyFormatsFrom,
 		} );
 
 		handleChange( change );

packages/rich-text/src/update-formats.js

@@ -10,15 +10,22 @@ import { isFormatEqual } from './is-format-equal';
  * Efficiently updates all the formats from `start` (including) until `end`
  * (excluding) with the active formats. Mutates `value`.
  *
- * @param {Object}        $1         Named paramentes.
- * @param {RichTextValue} $1.value   Value te update.
- * @param {number}        $1.start   Index to update from.
- * @param {number}        $1.end     Index to update until.
- * @param {Array}         $1.formats Replacement formats.
+ * @param {Object}        $1                               Named parameters.
+ * @param {RichTextValue} $1.value                         Value to update.
+ * @param {number}        $1.start                         Index to update from.
+ * @param {number}        $1.end                           Index to update until.
+ * @param {Array}         $1.formats                       Replacement formats.
+ * @param {Array}         $1.preserveEditorOnlyFormatsFrom Formats that were active at the caret before typing.
  *
  * @return {RichTextValue} Mutated value.
  */
-export function updateFormats( { value, start, end, formats } ) {
+export function updateFormats( {
+	value,
+	start,
+	end,
+	formats,
+	preserveEditorOnlyFormatsFrom = [],
+} ) {
 	// Start and end may be switched in case of delete.
 	const min = Math.min( start, end );
 	const max = Math.max( start, end );
@@ -48,24 +55,32 @@ export function updateFormats( { value, start, end, formats } ) {
 		return format;
 	} );
 
-	// Preserve editor-only formats (like annotations) from surrounding positions
-	// when typing, so annotations grow to include newly typed text.
-	const annotationFormatsBefore = formatsBefore.filter(
-		( format ) => format.type === 'core/annotation'
-	);
-	const annotationFormatsAfter = formatsAfter.filter(
+	const wasInsideAnnotation = preserveEditorOnlyFormatsFrom.some(
 		( format ) => format.type === 'core/annotation'
 	);
-	// Merge annotation formats from both positions, preferring formatsAfter.
-	const annotationFormats = [
-		...annotationFormatsAfter,
-		...annotationFormatsBefore.filter(
-			( format ) =>
-				! annotationFormatsAfter.find( ( f ) =>
-					isFormatEqual( f, format )
-				)
-		),
-	];
+
+	// Preserve editor-only formats (like annotations) from surrounding positions
+	// when typing, so annotations grow to include newly typed text. Only do this
+	// when the caret was inside an annotation before typing.
+	let annotationFormats = [];
+	if ( wasInsideAnnotation ) {
+		const annotationFormatsBefore = formatsBefore.filter(
+			( format ) => format.type === 'core/annotation'
+		);
+		const annotationFormatsAfter = formatsAfter.filter(
+			( format ) => format.type === 'core/annotation'
+		);
+		// Merge annotation formats from both positions, preferring formatsAfter.
+		annotationFormats = [
+			...annotationFormatsAfter,
+			...annotationFormatsBefore.filter(
+				( format ) =>
+					! annotationFormatsAfter.find( ( f ) =>
+						isFormatEqual( f, format )
+					)
+			),
+		];
+	}
 
 	while ( --end >= start ) {
 		if ( value.activeFormats.length > 0 || annotationFormats.length > 0 ) {