fix: various mentions bugs and inconsistencies between platforms (#637)

# Summary

There were various bugs and inconsistencies with mentions
functionalities across every platform.

Mainly it wasn't handled properly when you switched **directly** between
different mentions, which caused improper event emission and the lists
stayed visible - documented in the videos section

iOS:
- events not emitted when switching directly between mentions
- duplicated `onChange` events when just moving a cursor across a
mention
- `_recentInputString` was not updated if no `onChangeText` prop was
given

Android:
- events not emitted when switching directly between mentions
- on selection changes, the mentions were not reanalyzed and no events
were emitted
- when `setMention` a duplicated space was inserted if there already was
one
- `setMention` wasn't replacing the surrounding text
-  after `setMention` the selection wasn't moved to the trailing space

Web:
- refactor on the event subscription hook for consistency
- mention query was evaluated to a cursor position, not the whole
written mention, which produced leftover text when inserting a mention
- unnecessarily considered a finalized mention into the query
- events not emitted when switching directly between mentions
- when `setMention` a duplicated space was inserted if there already was
one

Example apps:
- updated example apps with more idiomatic code. Earlier `onChange`
mention event would handle popup list opening - something what `onStart`
is for

## Test Plan

Follow the text written in the attached videos, play around with
selection changes, all events should emit correctly and the lists should
function as expected.

## Screenshots / Videos

(all platforms) events not emitting when switching between mentions


https://github.com/user-attachments/assets/cc408357-ae3f-41ed-87ce-c6192149539b

(web) incorrect query evaluation and inserting, doubled space


https://github.com/user-attachments/assets/4981556a-c8c6-4139-855e-957fa9dc4754

(android) `setMention` not replacing surrounding text:


https://github.com/user-attachments/assets/37fb805c-aaa1-4947-a8dd-4d1427ab1629

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅     |
| Android |    ✅     |
| Web |    ✅     |

## Checklist

- [x] E2E tests are passing
- [x] Required E2E tests have been added (if applicable)

---------

Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com>
Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>

Author: 3 people

.maestro/enrichedInput/flows/mention_popup_closing_on_cursor_travel.yaml

@@ -0,0 +1,45 @@
+appId: swmansion.enriched.example
+---
+# fix PR #637 - mention popups not closing when switching between mentions
+
+- launchApp
+
+- tapOn:
+    id: "toggle-screen-button"
+
+- tapOn:
+    id: "editor-input"
+
+- inputText: "mentions #gen @J"
+
+# user popup visible
+- runFlow:
+    file: "../subflows/capture_or_assert_fullscreen_screenshot.yaml"
+    env:
+      SCREENSHOT_NAME: "mention_popup_closing_on_cursor_travel_1"
+
+- tapOn:
+    id: "focus-button"
+
+- tapOn:
+    id: "editor-input"
+    point: "30%, 50%"
+
+# channel popup visible
+- runFlow:
+    file: "../subflows/capture_or_assert_fullscreen_screenshot.yaml"
+    env:
+      SCREENSHOT_NAME: "mention_popup_closing_on_cursor_travel_2"
+
+- tapOn:
+    id: "focus-button"
+
+- tapOn:
+    id: "editor-input"
+    point: "10%, 50%"
+
+# no popup visible
+- runFlow:
+    file: "../subflows/capture_or_assert_fullscreen_screenshot.yaml"
+    env:
+      SCREENSHOT_NAME: "mention_popup_closing_on_cursor_travel_3"

.maestro/enrichedInput/screenshots/android/mention_popup_closing_on_cursor_travel_1.png

@@ -0,0 +1,10 @@
+appId: swmansion.enriched.example
+---
+- tapOn:
+    id: 'blur-button'
+
+- runFlow:
+    file: '../../subflows/capture_or_assert_screenshot.yaml'
+    env:
+      ELEMENT_ID: 'full-screen'
+      SCREENSHOT_PREFIX: 'enrichedInput'

.maestro/enrichedInput/screenshots/android/mention_popup_closing_on_cursor_travel_2.png

@@ -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,49 @@ 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');
+  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('#');
+});
+
+test("inserting a mention between text doesn't produce a double space", async ({
+  page,
+}) => {
+  await gotoMentionTest(page);
+  const editor = mentionEditor(page);
+  await editor.click();
+  await editor.pressSequentially('example ', { delay: 80 });
+  await editor.pressSequentially(' test', { delay: 80 });
+  for (let i = 0; i < 5; i++) {
+    await editor.press('ArrowLeft');
+  }
+  await editor.press('@');
+  await page.locator(sel.setUserButton).click();
+  await page.waitForTimeout(2000);
+  await expect
+    .poll(async () => await htmlOutput(page).textContent())
+    .toEqual(
+      '<html><p>example <mention text="Jane" indicator="@" id="1">Jane</mention> test</p></html>'
+    );
+});

.maestro/enrichedInput/screenshots/android/mention_popup_closing_on_cursor_travel_3.png

@@ -27,17 +27,27 @@ class MentionHandler(
     indicator: String,
     text: String?,
   ) {
+    // switching directly to an active mention
+    if (previousIndicator != indicator) {
+      endMention()
+
+      // explicit startMention event before changeMention event
+      if (!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)