feat: add removeInvalidMentionContent prop

.playwright/tests/mentions.spec.ts

@@ -22,6 +22,7 @@ const sel = {
   setChannelButton: '[data-testid="mention-set-channel-button"]',
   startUserButton: '[data-testid="mention-start-user-button"]',
   startChannelButton: '[data-testid="mention-start-channel-button"]',
+  removeInvalidToggle: '[data-testid="mention-remove-invalid-toggle"]',
 } as const;
 
 async function gotoMentionTest(page: Page): Promise<void> {
@@ -313,3 +314,72 @@ test("inserting a mention between text doesn't produce a double space", async ({
       '<html><p>example <mention text="Jane" indicator="@" id="1">Jane</mention> test</p></html>'
     );
 });
+
+// Inserts "Jane" plus the space setMention adds, then moves the caret
+// `steps` characters left from the end: 1 is right after the mention,
+// 3 is between "Ja" and "ne"
+async function insertMentionAndMoveLeft(
+  page: Page,
+  steps: number
+): Promise<void> {
+  const editor = mentionEditor(page);
+  await editor.click();
+  await editor.pressSequentially('@', { delay: 80 });
+  await page.locator(sel.setUserButton).click();
+  await expect
+    .poll(async () =>
+      (await htmlOutput(page).textContent())?.includes('<mention')
+    )
+    .toBe(true);
+  await editor.press('End');
+  for (let i = 0; i < steps; i++) {
+    await editor.press('ArrowLeft');
+  }
+}
+
+test('typing inside a mention keeps its text by default', async ({ page }) => {
+  await gotoMentionTest(page);
+  await insertMentionAndMoveLeft(page, 3);
+  await mentionEditor(page).press('x');
+  await expect
+    .poll(async () => await htmlOutput(page).textContent())
+    .toEqual('<html><p>Jaxne </p></html>');
+});
+
+test('removeInvalidMentionContent: typing inside a mention removes it', async ({
+  page,
+}) => {
+  await gotoMentionTest(page);
+  await page.locator(sel.removeInvalidToggle).click();
+  await insertMentionAndMoveLeft(page, 3);
+  await mentionEditor(page).press('x');
+  await expect
+    .poll(async () => await htmlOutput(page).textContent())
+    .toEqual('<html><p> </p></html>');
+});
+
+test('removeInvalidMentionContent: backspace inside a mention removes it', async ({
+  page,
+}) => {
+  await gotoMentionTest(page);
+  await page.locator(sel.removeInvalidToggle).click();
+  await insertMentionAndMoveLeft(page, 3);
+  await mentionEditor(page).press('Backspace');
+  await expect
+    .poll(async () => await htmlOutput(page).textContent())
+    .toEqual('<html><p> </p></html>');
+});
+
+test('removeInvalidMentionContent: typing right after a mention keeps it', async ({
+  page,
+}) => {
+  await gotoMentionTest(page);
+  await page.locator(sel.removeInvalidToggle).click();
+  await insertMentionAndMoveLeft(page, 1);
+  await mentionEditor(page).press('x');
+  await expect
+    .poll(async () => await htmlOutput(page).textContent())
+    .toEqual(
+      '<html><p><mention text="Jane" indicator="@" id="1">Jane</mention>x </p></html>'
+    );
+});

android/src/main/java/com/swmansion/enriched/textinput/EnrichedTextInputViewManager.kt

@@ -177,6 +177,14 @@ class EnrichedTextInputViewManager :
     view?.parametrizedStyles?.mentionIndicators = indicatorsArray
   }
 
+  @ReactProp(name = "removeInvalidMentionContent", defaultBoolean = false)
+  override fun setRemoveInvalidMentionContent(
+    view: EnrichedTextInputView?,
+    removeInvalidMentionContent: Boolean,
+  ) {
+    view?.parametrizedStyles?.removeInvalidMentionContent = removeInvalidMentionContent
+  }
+
   @ReactProp(name = "htmlStyle")
   override fun setHtmlStyle(
     view: EnrichedTextInputView?,

android/src/main/java/com/swmansion/enriched/textinput/styles/ParametrizedStyles.kt

@@ -23,6 +23,7 @@ class ParametrizedStyles(
   private var isSettingLinkSpan = false
 
   var mentionIndicators: Array<String> = emptyArray<String>()
+  var removeInvalidMentionContent = false
 
   fun <T> removeSpansForRange(
     spannable: Spannable,
@@ -94,9 +95,27 @@ class ParametrizedStyles(
     endCursorPosition: Int,
   ) {
     afterTextChangedLinks(startCursorPosition, endCursorPosition)
+    // the deletion re-runs this watcher on the final text with fresh positions
+    if (removeInvalidMentionContent && removeInvalidMentions(s)) return
     detectActiveMention(s, startCursorPosition)
   }
 
+  private fun removeInvalidMentions(s: Editable): Boolean {
+    var removed = false
+    for (span in s.getSpans(0, s.length, EnrichedInputMentionSpan::class.java)) {
+      val start = s.getSpanStart(span)
+      val end = s.getSpanEnd(span)
+      // the nested watcher pass may have removed it already
+      if (start == -1) continue
+      if (s.subSequence(start, end).toString() == span.getText()) continue
+
+      s.removeSpan(span)
+      s.delete(start, end)
+      removed = true
+    }
+    return removed
+  }
+
   // Re-runs in-progress mention detection on a pure caret move (no text change),
   fun afterSelectionChangedMentions(
     start: Int,

apps/example-web/src/testScreens/TestMentions.tsx

@@ -16,6 +16,8 @@ export function TestMentions() {
   const [detectedText, setDetectedText] = useState('');
   const [detectedIndicator, setDetectedIndicator] = useState('');
   const [lastEndEvent, setLastEndEvent] = useState('');
+  const [removeInvalidMentionContent, setRemoveInvalidMentionContent] =
+    useState(false);
 
   const preventDefault = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -31,6 +33,7 @@ export function TestMentions() {
           style={editorStyle}
           htmlStyle={WEB_DEFAULT_HTML_STYLE}
           mentionIndicators={['@', '#']}
+          removeInvalidMentionContent={removeInvalidMentionContent}
           onStartMention={(indicator) => {
             setEventType('start');
             setEventIndicator(indicator);
@@ -112,6 +115,13 @@ export function TestMentions() {
         Start mention (channel)
       </button>
       <button data-testid="mention-blur-target">Blur Editor</button>
+      <button
+        data-testid="mention-remove-invalid-toggle"
+        onMouseDown={preventDefault}
+        onClick={() => setRemoveInvalidMentionContent((value) => !value)}
+      >
+        removeInvalidMentionContent: {String(removeInvalidMentionContent)}
+      </button>
     </div>
   );
 }

apps/example/src/screens/DevScreen.tsx

@@ -23,6 +23,8 @@ interface DevScreenProps {
 export function DevScreen({ onSwitch }: DevScreenProps) {
   const editor = useEditorState();
   const [textNodes, setTextNodes] = useState<Array<string>>([]);
+  const [removeInvalidMentionContent, setRemoveInvalidMentionContent] =
+    useState(false);
 
   const handlePushTextNode = async () => {
     const currentText = await editor.ref.current?.getHTML();
@@ -44,6 +46,7 @@ export function DevScreen({ onSwitch }: DevScreenProps) {
           <EnrichedTextInput
             ref={editor.ref}
             mentionIndicators={['@', '#']}
+            removeInvalidMentionContent={removeInvalidMentionContent}
             style={styles.editorInput}
             htmlStyle={htmlStyle}
             placeholder="Type something here..."
@@ -96,6 +99,11 @@ export function DevScreen({ onSwitch }: DevScreenProps) {
             style={styles.button}
           />
         </View>
+        <Button
+          title={`removeInvalidMentionContent: ${removeInvalidMentionContent ? 'on' : 'off'}`}
+          onPress={() => setRemoveInvalidMentionContent((value) => !value)}
+          style={styles.valueButton}
+        />
         <Button
           title="Test Screen"
           onPress={onSwitch}

docs/docs/api-reference/enriched-text-input.md

@@ -575,6 +575,17 @@ A React ref that lets you call any [ref methods](#ref-methods) on the input.
 | ---------------------------------------------- | ------- | ----------------- |
 | `RefObject<EnrichedTextInputInstance \| null>` | -       | Android, iOS, Web |
 
+### `removeInvalidMentionContent` {#removeinvalidmentioncontent}
+
+If `true`, any change to the text of an inserted mention (typing inside it,
+deleting part of it, autocorrect) removes the whole mention. If `false`, the
+changed text stays and is no longer a mention. See
+[Mentions](/rich-text-formatting/mentions#editing-an-inserted-mention).
+
+| Type      | Default | Platforms         |
+| --------- | ------- | ----------------- |
+| `boolean` | `false` | Android, iOS, Web |
+
 ### `returnKeyLabel` {#returnkeylabel}
 
 Overrides the return key label with a custom string.

docs/docs/rich-text-formatting/mentions.mdx

@@ -70,6 +70,14 @@ space, and a second space ends it. That makes `@John Doe` a valid mention.
 
 :::
 
+## Editing an inserted mention
+
+When the text of an inserted mention changes - a character typed inside it, a
+part of it deleted, an autocorrect replacement - the text stays and is no
+longer a mention. Set
+[`removeInvalidMentionContent`](/api-reference/enriched-text-input#removeinvalidmentioncontent)
+to remove the whole mention instead.
+
 ## Driving mentions with events
 
 This example is deliberately bare-bones - one hard-coded user behind a button.

ios/EnrichedTextInputView.mm

@@ -730,6 +730,13 @@ - (void)updateProps:(Props::Shared const &)props
     [config setLinkRegexConfig:newRegexConfig];
   }
 
+  // must be set before the default value, which already checks the mentions
+  if (newViewProps.removeInvalidMentionContent !=
+      oldViewProps.removeInvalidMentionContent) {
+    [config setRemoveInvalidMentionContent:newViewProps
+                                               .removeInvalidMentionContent];
+  }
+
   // default value - must be set before placeholder to make sure it correctly
   // shows on first mount
   if (newViewProps.defaultValue != oldViewProps.defaultValue) {

ios/config/EnrichedConfig.h

@@ -23,6 +23,8 @@
 - (UIFont *)monospacedFont;
 - (NSSet<NSNumber *> *)mentionIndicators;
 - (void)setMentionIndicators:(NSSet<NSNumber *> *)newValue;
+- (BOOL)removeInvalidMentionContent;
+- (void)setRemoveInvalidMentionContent:(BOOL)newValue;
 - (CGFloat)h1FontSize;
 - (void)setH1FontSize:(CGFloat)newValue;
 - (BOOL)h1Bold;

ios/config/EnrichedConfig.mm

@@ -14,6 +14,7 @@ @implementation EnrichedConfig {
   BOOL _monospacedFontNeedsRecreation;
   BOOL _allowFontScaling;
   NSSet<NSNumber *> *_mentionIndicators;
+  BOOL _removeInvalidMentionContent;
   CGFloat _h1FontSize;
   BOOL _h1Bold;
   CGFloat _h2FontSize;
@@ -83,6 +84,7 @@ - (id)copyWithZone:(NSZone *)zone {
   copy->_monospacedFont = [_monospacedFont copy];
   copy->_allowFontScaling = _allowFontScaling;
   copy->_mentionIndicators = [_mentionIndicators copy];
+  copy->_removeInvalidMentionContent = _removeInvalidMentionContent;
   copy->_h1FontSize = _h1FontSize;
   copy->_h1Bold = _h1Bold;
   copy->_h2FontSize = _h2FontSize;
@@ -230,6 +232,14 @@ - (void)setMentionIndicators:(NSSet<NSNumber *> *)newValue {
   _mentionIndicators = newValue;
 }
 
+- (BOOL)removeInvalidMentionContent {
+  return _removeInvalidMentionContent;
+}
+
+- (void)setRemoveInvalidMentionContent:(BOOL)newValue {
+  _removeInvalidMentionContent = newValue;
+}
+
 - (CGFloat)h1FontSize {
   return [self scaledFontSizeForValue:_h1FontSize];
 }

ios/styles/MentionStyle.mm

@@ -281,6 +281,9 @@ - (void)handleExistingMentions {
 
   // set of ranges to have their mentions removed - aren't valid anymore
   NSMutableSet<NSValue *> *rangesToRemove = [[NSMutableSet alloc] init];
+  // ranges whose text gets deleted, with removeInvalidMentionContent
+  NSMutableArray<NSValue *> *rangesToDelete = [[NSMutableArray alloc] init];
+  MentionParams *lastDeletedParams = nullptr;
 
   for (NSInteger i = 0; i < mentions.count; i++) {
     StylePair *mention = mentions[i];
@@ -295,21 +298,53 @@ - (void)handleExistingMentions {
       if (prevRange.location + prevRange.length == currentRange.location) {
         [rangesToRemove addObject:[NSValue valueWithRange:prevRange]];
         [rangesToRemove addObject:[NSValue valueWithRange:currentRange]];
-        continue;
+        // with removeInvalidMentionContent an edited one still has to go
+        if (![self.host.config removeInvalidMentionContent]) {
+          continue;
+        }
       }
     }
 
     // check for text, any modifications to it makes mention invalid
     NSString *existingText =
         [self.host.textView.textStorage.string substringWithRange:currentRange];
     if (![existingText isEqualToString:currentText]) {
-      [rangesToRemove addObject:[NSValue valueWithRange:currentRange]];
+      if ([self.host.config removeInvalidMentionContent]) {
+        // text typed inside a mention doesn't get the attribute, so the
+        // mention becomes two runs with the same params; union them so the
+        // typed text goes too
+        if (lastDeletedParams == mention.styleValue) {
+          NSRange lastRange = [rangesToDelete.lastObject rangeValue];
+          rangesToDelete[rangesToDelete.count - 1] =
+              [NSValue valueWithRange:NSUnionRange(lastRange, currentRange)];
+        } else {
+          [rangesToDelete addObject:[NSValue valueWithRange:currentRange]];
+        }
+        lastDeletedParams = mention.styleValue;
+      } else {
+        [rangesToRemove addObject:[NSValue valueWithRange:currentRange]];
+      }
     }
   }
 
   for (NSValue *value in rangesToRemove) {
     [self remove:[value rangeValue] withDirtyRange:YES];
   }
+
+  // mentions are in ascending order, deleting from the end keeps the
+  // earlier ranges valid; the selection is set without focusing the input,
+  // as this also runs when the value is set from JS
+  for (NSValue *value in rangesToDelete.reverseObjectEnumerator) {
+    [TextInsertionUtils replaceText:@""
+                                 at:[value rangeValue]
+               additionalAttributes:nullptr
+                               host:self.host
+                      withSelection:NO];
+  }
+  if (rangesToDelete.count > 0) {
+    self.host.textView.selectedRange =
+        NSMakeRange([rangesToDelete.firstObject rangeValue].location, 0);
+  }
 }
 
 // manages active mention range, which in turn emits proper onMention event

src/native/EnrichedTextInput.tsx

@@ -66,6 +66,7 @@ export const EnrichedTextInput = ({
   autoFocus = false,
   editable = ENRICHED_TEXT_INPUT_DEFAULT_PROPS.editable,
   mentionIndicators = ENRICHED_TEXT_INPUT_DEFAULT_PROPS.mentionIndicators.slice(),
+  removeInvalidMentionContent = false,
   defaultValue,
   placeholder,
   placeholderTextColor,
@@ -374,6 +375,7 @@ export const EnrichedTextInput = ({
     <EnrichedTextInputNativeComponent
       ref={nativeRef}
       mentionIndicators={mentionIndicators}
+      removeInvalidMentionContent={removeInvalidMentionContent}
       editable={editable}
       autoFocus={autoFocus}
       defaultValue={defaultValue}

src/spec/EnrichedTextInputNativeComponent.ts

@@ -375,6 +375,7 @@ export interface NativeProps extends ViewProps {
   placeholder?: string;
   placeholderTextColor?: ColorValue;
   mentionIndicators: string[];
+  removeInvalidMentionContent?: boolean;
   cursorColor?: ColorValue;
   selectionColor?: ColorValue;
   autoCapitalize?: string;

src/types.ts

@@ -670,6 +670,13 @@ export interface EnrichedTextInputProps extends Omit<ViewProps, 'children'> {
    */
   mentionIndicators?: string[];
 
+  /**
+   * If `true`, any change to the text of an inserted mention (typing inside it,
+   * deleting part of it, autocorrect) removes the whole mention. If `false`, the
+   * changed text stays and is no longer a mention. Defaults to `false`.
+   */
+  removeInvalidMentionContent?: boolean;
+
   /**
    * Initial content rendered when the component mounts.
    * Use `ref.setValue()` to update the content imperatively.