fix: various mentions bugs and inconsistencies between platforms

.playwright/tests/mentions.spec.ts

@@ -12,6 +12,7 @@ const sel = {
   eventType: '[data-testid="mention-event-type"]',
   eventIndicator: '[data-testid="mention-event-indicator"]',
   eventText: '[data-testid="mention-event-text"]',
+  lastEndEvent: '[data-testid="mention-last-end-event"]',
   htmlOutput: '[data-testid="mention-html-output"]',
   detectedCount: '[data-testid="mention-detected-count"]',
   detectedText: '[data-testid="mention-detected-text"]',
@@ -41,6 +42,9 @@ function eventIndicator(page: Page) {
 function eventText(page: Page) {
   return page.locator(sel.eventText);
 }
+function lastEndEvent(page: Page) {
+  return page.locator(sel.lastEndEvent);
+}
 function htmlOutput(page: Page) {
   return page.locator(sel.htmlOutput);
 }
@@ -263,3 +267,27 @@ test('mention renders correctly', async ({ page }) => {
   );
   await expect(editorLocator(page)).toHaveScreenshot('mention-visual.png');
 });
+
+test('switching to a different mention starts it and ends the previous one', async ({
+  page,
+}) => {
+  await gotoMentionTest(page);
+  const editor = mentionEditor(page);
+  await editor.click();
+  await editor.pressSequentially('foo #g ', { delay: 80 });
+  await expect(eventType(page)).toHaveText('change');
+  await expect(eventIndicator(page)).toHaveText('#');
+  await editor.pressSequentially('@', { delay: 80 });
+  await expect(eventType(page)).toHaveText('start');
+  await expect(eventIndicator(page)).toHaveText('@');
+  await expect(lastEndEvent(page)).toHaveText('#');
+  await editor.press('ArrowLeft'); // back to the '#' mention
+  await expect(eventType(page)).toHaveText('change');
+  await expect(eventIndicator(page)).toHaveText('#');
+  await expect(lastEndEvent(page)).toHaveText('@');
+  await editor.press('ArrowLeft');
+  await editor.press('ArrowLeft');
+  await editor.press('ArrowLeft'); // leaving the '#' mention
+  await expect(eventType(page)).toHaveText('end');
+  await expect(eventIndicator(page)).toHaveText('#');
+});

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

@@ -91,6 +91,7 @@ class EnrichedTextInputView :
   val alignmentStyles: AlignmentStyles? = AlignmentStyles(this)
   var isDuringTransaction: Boolean = false
   var isRemovingMany: Boolean = false
+  var recentInputString: String = ""
   var scrollEnabled: Boolean = true
   var allowFontScaling: Boolean = EnrichedConstants.ALLOW_FONT_SCALING_DEFAULT
     set(value) {

android/src/main/java/com/swmansion/enriched/textinput/events/MentionHandler.kt

@@ -27,17 +27,30 @@ class MentionHandler(
     indicator: String,
     text: String?,
   ) {
+    var startMention = false
+
+    // switching directly to an active mention
+    if (previousIndicator != indicator) {
+      startMention = true
+      endMention()
+    }
+
+    // explicit startMention event before changeMention event
+    if (startMention && !text.isNullOrEmpty()) {
+      emitEvent(indicator, "")
+    }
+
     emitEvent(indicator, text)
-    previousIndicator = indicator
   }
 
   private fun emitEvent(
     indicator: String,
     text: String?,
   ) {
     // Do not emit events too often
-    if (previousText == text) return
+    if (previousIndicator == indicator && previousText == text) return
 
+    previousIndicator = indicator
     previousText = text
     val context = view.context as ReactContext
     val surfaceId = UIManagerHelper.getSurfaceId(context)

android/src/main/java/com/swmansion/enriched/textinput/events/OnMentionEvent.kt

@@ -13,6 +13,12 @@ class OnMentionEvent(
 ) : Event<OnMentionEvent>(surfaceId, viewId) {
   override fun getEventName(): String = EVENT_NAME
 
+  // start/change/end can be emitted as a burst within a single frame
+  // (e.g. when switching mentions: end -> start -> change).
+  // The default coalescing would merge them in the batch and drop the
+  // intermediate ones, so it must be disabled to deliver every event in order.
+  override fun canCoalesce(): Boolean = false
+
   override fun getEventData(): WritableMap? {
     val eventData: WritableMap = Arguments.createMap()
     eventData.putString("indicator", indicator)

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

@@ -91,7 +91,23 @@ class ParametrizedStyles(
     endCursorPosition: Int,
   ) {
     afterTextChangedLinks(startCursorPosition, endCursorPosition)
-    afterTextChangedMentions(s, startCursorPosition)
+    detectActiveMention(s, startCursorPosition)
+  }
+
+  // Re-runs in-progress mention detection on a pure caret move (no text change),
+  fun afterSelectionChangedMentions(
+    start: Int,
+    end: Int,
+  ) {
+    val s = view.text ?: return
+
+    // A non-collapsed selection can't be editing a single mention.
+    if (start != end) {
+      view.mentionHandler?.endMention()
+      return
+    }
+
+    detectActiveMention(s, end)
   }
 
   fun onStyleToggled(
@@ -239,7 +255,7 @@ class ParametrizedStyles(
     detectLinksInRange(spannable, affectedRange.first, affectedRange.last)
   }
 
-  private fun afterTextChangedMentions(
+  private fun detectActiveMention(
     s: CharSequence,
     endCursorPosition: Int,
   ) {

android/src/main/java/com/swmansion/enriched/textinput/utils/EnrichedSelection.kt

@@ -55,6 +55,11 @@ class EnrichedSelection(
     start = finalStart
     end = finalEnd
     validateStyles()
+
+    if (view.text?.toString() == view.recentInputString) {
+      view.parametrizedStyles?.afterSelectionChangedMentions(finalStart, finalEnd)
+    }
+
     emitSelectionChangeEvent(view.text, finalStart, finalEnd)
   }
 

android/src/main/java/com/swmansion/enriched/textinput/watchers/EnrichedTextWatcher.kt

@@ -68,6 +68,8 @@ class EnrichedTextWatcher(
     if (s == null) return
     emitEvents(s)
 
+    view.recentInputString = s.toString()
+
     if (view.isDuringTransaction) return
     applyStyles(s)
     view.layoutManager.invalidateLayout()

apps/example-web/src/App.tsx

@@ -109,10 +109,8 @@ function App() {
     console.log('[EnrichedTextInput] Change mention', indicator, text);
     if (indicator === '@') {
       userMention.onMentionChange(text);
-      if (!isUserPopupOpen) setIsUserPopupOpen(true);
     } else {
       channelMention.onMentionChange(text);
-      if (!isChannelPopupOpen) setIsChannelPopupOpen(true);
     }
   };
 

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

@@ -15,6 +15,7 @@ export function TestMentions() {
   const [detectedCount, setDetectedCount] = useState(0);
   const [detectedText, setDetectedText] = useState('');
   const [detectedIndicator, setDetectedIndicator] = useState('');
+  const [lastEndEvent, setLastEndEvent] = useState('');
 
   const preventDefault = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -40,10 +41,11 @@ export function TestMentions() {
             setEventIndicator(indicator);
             setEventText(text);
           }}
-          onEndMention={() => {
+          onEndMention={(indicator) => {
             setEventType('end');
-            setEventIndicator('');
+            setEventIndicator(indicator);
             setEventText('');
+            setLastEndEvent(indicator);
           }}
           onMentionDetected={({ text, indicator }) => {
             setDetectedCount((c) => c + 1);
@@ -65,6 +67,9 @@ export function TestMentions() {
         <Field label="event text">
           <span data-testid="mention-event-text">{eventText}</span>
         </Field>
+        <Field label="last end event">
+          <span data-testid="mention-last-end-event">{lastEndEvent}</span>
+        </Field>
         <Field label="detected count">
           <span data-testid="mention-detected-count">{detectedCount}</span>
         </Field>

apps/example/src/hooks/useEditorState.ts

@@ -105,6 +105,7 @@ export function useEditorState() {
   };
 
   const handleStartMention = (indicator: string) => {
+    console.log('Start Mention', indicator);
     if (indicator === '@') {
       userMention.onMentionChange('');
       openUserMentionPopup();
@@ -115,6 +116,7 @@ export function useEditorState() {
   };
 
   const handleEndMention = (indicator: string) => {
+    console.log('End Mention', indicator);
     if (indicator === '@') {
       closeUserMentionPopup();
       userMention.onMentionChange('');
@@ -125,12 +127,10 @@ export function useEditorState() {
   };
 
   const handleChangeMention = ({ indicator, text }: OnChangeMentionEvent) => {
+    console.log('Change Mention', indicator, text);
     indicator === '@'
       ? userMention.onMentionChange(text)
       : channelMention.onMentionChange(text);
-    indicator === '@'
-      ? !isUserPopupOpen && setIsUserPopupOpen(true)
-      : !isChannelPopupOpen && setIsChannelPopupOpen(true);
   };
 
   const handleUserMentionSelected = (item: MentionItem) => {

ios/EnrichedTextInputView.mm

@@ -1722,12 +1722,11 @@ - (void)anyTextMayHaveBeenModified {
   }
 
   if (![textView.textStorage.string isEqualToString:_recentInputString]) {
+    _recentInputString = [textView.textStorage.string copy];
+
     // emit onChangeText event
     auto emitter = [self getEventEmitter];
     if (emitter != nullptr && _emitTextChange) {
-      // set the recent input string only if the emitter is defined
-      _recentInputString = [textView.textStorage.string copy];
-
       // emit string without zero width spaces
       NSString *stringToBeEmitted = [[textView.textStorage.string
           stringByReplacingOccurrencesOfString:@"\u200B"

ios/styles/MentionStyle.mm

@@ -13,6 +13,8 @@ @implementation MentionStyle {
   NSValue *_activeMentionRange;
   NSString *_activeMentionIndicator;
   BOOL _blockMentionEditing;
+  NSString *_lastEmittedMentionIndicator;
+  NSString *_lastEmittedMentionText;
 }
 
 + (StyleType)getType {
@@ -156,9 +158,25 @@ - (void)addMention:(NSString *)indicator
   params.indicator = indicator;
   params.attributes = attributes;
 
-  // add a single space after the mention
-  NSString *newText = [NSString stringWithFormat:@"%@ ", text];
   NSRange rangeToBeReplaced = [_activeMentionRange rangeValue];
+
+  // add a single space after the mention if there isn't one already
+  BOOL hasSpaceAfter = NO;
+  NSUInteger nextCharIndex =
+      rangeToBeReplaced.location + rangeToBeReplaced.length;
+
+  if (nextCharIndex < self.host.textView.textStorage.string.length) {
+    unichar nextChar =
+        [self.host.textView.textStorage.string characterAtIndex:nextCharIndex];
+    if ([[NSCharacterSet whitespaceAndNewlineCharacterSet]
+            characterIsMember:nextChar]) {
+      hasSpaceAfter = YES;
+    }
+  }
+
+  NSString *newText =
+      hasSpaceAfter ? text : [NSString stringWithFormat:@"%@ ", text];
+
   [TextInsertionUtils replaceText:newText
                                at:rangeToBeReplaced
              additionalAttributes:nullptr
@@ -522,9 +540,24 @@ - (void)setActiveMentionRange:(NSRange)range text:(NSString *)text {
       [NSString stringWithFormat:@"%C", [text characterAtIndex:0]];
   NSString *textString =
       [text substringWithRange:NSMakeRange(1, text.length - 1)];
+
+  BOOL startMention = NO;
+
+  // switching directly to an active mention
+  if (![_activeMentionIndicator isEqualToString:indicatorString]) {
+    startMention = YES;
+    [self removeActiveMentionRange];
+  }
+
+  // explicit startMention event before changeMention event
+  if (startMention && textString.length > 0) {
+    [self emitOnMentionEvent:indicatorString text:@""];
+  }
+
+  [self emitOnMentionEvent:indicatorString text:textString];
+
   _activeMentionIndicator = indicatorString;
   _activeMentionRange = [NSValue valueWithRange:range];
-  [self.host emitOnMentionEvent:indicatorString text:textString];
 }
 
 // removes stored mention range + indicator, which means that we no longer edit
@@ -534,7 +567,16 @@ - (void)removeActiveMentionRange {
     NSString *indicatorCopy = [_activeMentionIndicator copy];
     _activeMentionIndicator = nullptr;
     _activeMentionRange = nullptr;
-    [self.host emitOnMentionEvent:indicatorCopy text:nullptr];
+    [self emitOnMentionEvent:indicatorCopy text:nullptr];
+  }
+}
+
+- (void)emitOnMentionEvent:(NSString *)indicator text:(NSString *)text {
+  if (![_lastEmittedMentionIndicator isEqualToString:indicator] ||
+      ![_lastEmittedMentionText isEqualToString:text]) {
+    [self.host emitOnMentionEvent:indicator text:text];
+    _lastEmittedMentionIndicator = indicator;
+    _lastEmittedMentionText = text;
   }
 }
 

src/web/EnrichedTextInput.tsx

@@ -1,4 +1,5 @@
 import {
+  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -69,7 +70,7 @@ import {
   MentionPlugin,
   setMention,
   startMention,
-  subscribeMentionEvents,
+  useMentionEvents,
 } from './pmPlugins/MentionPlugin';
 import { StripMarksOnImagePlugin } from './pmPlugins/StripMarksOnImagePlugin';
 import { ShortcutPlugin } from './pmPlugins/ShortcutPlugin';
@@ -150,6 +151,11 @@ export const EnrichedTextInput = ({
     };
   }, [onStartMention, onChangeMention, onEndMention, onMentionDetected]);
 
+  const getMentionCallbacks = useCallback(
+    () => mentionCallbacksRef.current,
+    []
+  );
+
   const submitBehaviorRef = useRef(submitBehavior);
   const onSubmitEditingRef = useRef(onSubmitEditing);
   const onKeyPressRef = useRef(onKeyPress);
@@ -291,11 +297,7 @@ export const EnrichedTextInput = ({
     editor?.commands.normalizeBoldInStyledHeadings();
   }, [editor, resolvedHtmlStyle]);
 
-  useEffect(() => {
-    if (!editor) return;
-    return subscribeMentionEvents(editor, () => mentionCallbacksRef.current);
-  }, [editor]);
-
+  useMentionEvents(editor, getMentionCallbacks);
   useOnChangeHtml(editor, onChangeHtml);
   useOnChangeText(editor, onChangeText);
   useOnChangeState(editor, resolvedHtmlStyle, onChangeState);

src/web/pmPlugins/MentionPlugin/index.ts

@@ -11,7 +11,7 @@ export type { MentionPluginOptions, TriggerState } from './types';
 export { mentionPluginKey } from './mentionPluginKey';
 export { setMention } from './setMention';
 export { startMention } from './startMention';
-export { subscribeMentionEvents } from './subscribeMentionEvents';
+export { useMentionEvents } from './useMentionEvents';
 
 export const MentionPlugin = Extension.create<MentionPluginOptions>({
   name: 'mentionTrigger',