Merge branch 'main' into perf/improve-MentionUserRenderer

Author: TMisiukiewicz

.eslintrc.changed.js

@@ -8,6 +8,7 @@ module.exports = {
         'deprecation/deprecation': 'error',
         'rulesdir/no-default-id-values': 'error',
         'rulesdir/provide-canBeMissing-in-useOnyx': 'error',
+        'rulesdir/no-unstable-hook-defaults': 'error',
         'no-restricted-syntax': [
             'error',
             {

.eslintrc.js

@@ -219,6 +219,7 @@ module.exports = {
         'es/no-optional-chaining': 'off',
         'deprecation/deprecation': 'off',
         'arrow-body-style': 'off',
+        'no-continue': 'off',
 
         // Import specific rules
         'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],

.github/scripts/buildActions.sh

@@ -49,14 +49,21 @@ for ((i=0; i < ${#GITHUB_ACTIONS[@]}; i++)); do
   ASYNC_BUILDS[i]=$!
 done
 
+EXIT_CODE=0
 for ((i=0; i < ${#GITHUB_ACTIONS[@]}; i++)); do
   ACTION=${GITHUB_ACTIONS[$i]}
   ACTION_DIR=$(dirname "$ACTION")
+  ACTION_NAME=$(basename "$ACTION" .ts)
 
   # Wait for the background build to finish
-  wait "${ASYNC_BUILDS[$i]}"
-
-  # Prepend the warning note to the top of the compiled file
-  OUTPUT_FILE="$ACTION_DIR/index.js"
-  echo "$NOTE_DONT_EDIT$(cat "$OUTPUT_FILE")" > "$OUTPUT_FILE"
+  if wait "${ASYNC_BUILDS[$i]}"; then
+    # Prepend the warning note to the top of the compiled file
+    OUTPUT_FILE="$ACTION_DIR/index.js"
+    echo "$NOTE_DONT_EDIT$(cat "$OUTPUT_FILE")" > "$OUTPUT_FILE"
+  else
+    echo "❌ $ACTION_NAME failed to build: $ACTION_DIR/index.js" >&2
+    EXIT_CODE=1
+  fi
 done
+
+exit $EXIT_CODE

.storybook/preview.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import Onyx from 'react-native-onyx';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import type {Parameters} from 'storybook/internal/types';
+import OnyxListItemProvider from '@components/OnyxListItemProvider';
 import {SearchContextProvider} from '@components/Search/SearchContext';
 import ComposeProviders from '@src/components/ComposeProviders';
 import HTMLEngineProvider from '@src/components/HTMLEngineProvider';
 import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
-import OnyxProvider from '@src/components/OnyxProvider';
 import {EnvironmentProvider} from '@src/components/withEnvironment';
 import {KeyboardStateProvider} from '@src/components/withKeyboardState';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -23,7 +23,16 @@ Onyx.init({
 const decorators = [
     (Story: React.ElementType) => (
         <ComposeProviders
-            components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider, PortalProvider, EnvironmentProvider, KeyboardStateProvider, SearchContextProvider]}
+            components={[
+                OnyxListItemProvider,
+                LocaleContextProvider,
+                HTMLEngineProvider,
+                SafeAreaProvider,
+                PortalProvider,
+                EnvironmentProvider,
+                KeyboardStateProvider,
+                SearchContextProvider,
+            ]}
         >
             <Story />
         </ComposeProviders>

Mobile-Expensify

@@ -114,8 +114,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009018106
-        versionName "9.1.81-6"
+        versionCode 1009018202
+        versionName "9.1.82-2"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

android/app/build.gradle

@@ -0,0 +1,61 @@
+# Mentions highlighting in Composer input and chat messages
+
+## Glossary
+**Full mention** - called more simply `userMention` is the full email of a user. In Expensify app _every_ correct full email gets highlighted in text.
+When parsed via ExpensiMark into html, this mention is described with tag `<mention-user>`.  
+#### Examples of user mentions: `@john.doe@company.org`, `@vit@expensify.com`
+
+**Short mention** - a special type of mention that contains only the login part of a user email **AND** the email domain has to be the same as our email domain. Any other `@mention` will not get highlighted if domains don't match
+When parsed via ExpensiMark into html, it is described with tag `<mention-short>`.  
+
+#### Examples of short mentions:
+ - `@vit` - **IF** my domain is `expensify.com` **AND** there exists a user with email `vit@expensify.com` - it will get highlighted ✅
+ - `@mateusz` - **IF** my domain is `expensify.com` **AND** there is **NO** user with email `mateusz@expensify.com`, but there is for example `mateusz@company.org` - it will NOT get highlighted ❌
+
+**ExpensiMark** - parser that we are using, which allows for parsing between markdown <---> html formats. Imported from `expensify-common` package.
+
+## tl;dr - the most important part
+  - there are 2 slightly different flows of handling mentions - one is inside the Composer Input and the other outside of it
+  - both are complex and need to support both userMentions and shortMentions - See **FAQ**
+
+## Parsing mentions inside Composer/Input (LiveMarkdown)
+Our `Composer` component uses `react-native-live-markdown` for writing and editing markdown and handling mentions. When discussing how mentions work **inside** the composer input always look for answers in this [library](https://github.com/Expensify/react-native-live-markdown).
+
+### Mention parsing flow in live-markdown
+1. User types in some text
+2. `RNMarkdownTextInput` will handle the text by calling `parseExpensiMark`, which is an internal function of live-markdown: https://github.com/Expensify/react-native-live-markdown/blob/main/src/parseExpensiMark.ts
+3. `parseExpensiMark` will use `ExpensiMark` for parsing, then do several extra operations so that the component can work correctly
+4. When `ExpensiMark` parses the text, any full email will get parsed to `<mention-user>...</mention-user>` and any `@phrase` will get parsed to `<mention-short>...</mention-short>`
+5. `userMentions` are ready to use as they are so they require no further modification, however for `shortMentions` we need to check if they actually should get the highlighting
+5. We use the `parser` prop of `<MarkdownTextInput>` to pass custom parsing logic - this allows us to do some extra processing after `parseExpensiMark` runs.
+6. Our custom logic will go over every `<mention-short>` entry and verify if this login is someone that exists in userDetails data, then transform this into a full mention which gets highlighting
+
+**NOTE:** this entire process takes part only "inside" Composer input. This is what happens between user typing in some text and user seeing the markdown/highlights in real time.
+
+## Parsing mentions outside of Composer/Input
+When a user types in a message and wants to send it, we need to process the message text and then call the appropriate backend command.
+However, backend only accepts text in html format. This means that text payload sent to backend has to be parsed via ExpensiMark. In addition, api **will not** accept `<mention-short>` tag - it only accepts full user mention with email. Frontend needs to process every `shortMention` into a `userMention` or stripping it completely from text.
+
+### Mention processing flow when sending a message
+1. After typing in some text user hits ENTER or presses the send button
+2. Several functions are called but ultimately `addActions(...)` is the one that will prepare backend payload and make the Api call.
+3. The function solely responsible for getting the correctly parsed text is `getParsedComment()` - it should return the string that is safe to send to backend.
+4. We **do not** have access to `parseExpensiMark` or any functions that worked in worklets, as we are outside of `live-markdown` but we need to process `shortMentions` regardless.
+5. The processing is done in `getParsedMessageWithShortMentions`: we parse via `ExpensiMark` with options very similar to what happens inside `parseExpensiMark` in `live-markdown`. (this is similar to Step 5. from previous flow).
+6. We then find every `<mention-short>...</mention-short>` and try to see if the specific mention exists in userDetails data.
+
+## FAQ
+### Q: Why can't we simply use `parseExpensiMark` in both cases?!
+We cannot call `parseExpensiMark` in both cases, because `parseExpensiMark` returns a special data structure, called `MarkdownRange` which is both created and consumed by `react-native-live-markdown`.
+
+Expensify API only accepts HTML and not markdown range.
+
+Useful graph:
+```
+ExpensiMark: (raw text with markdown markers) ----> (HTML)
+parseExpensiMark: (raw text with markdown markers) ----> MarkdownRange[] structure
+```
+```
+<MarkdownTextInput> accepts MarkdownRange[]
+Expensify Api call accepts HTML
+```

contributingGuides/MENTIONS_HIGHLIGHTING_IN_CHAT.md

@@ -38,7 +38,7 @@ Collect is perfect for small teams that need an easy way to track receipts and g
 
 ## 🌍 Localized Pricing
 
-- Equivalent pricing available in **GBP**, **AUD**, and **NZD**
+- Equivalent pricing available in **EUR**, **GBP**, **AUD**, and **NZD**
 
 ## 🔄 Flexible Scaling
 

docs/articles/expensify-classic/expensify-billing/Billing-Overview.md

@@ -34,7 +34,7 @@ For a full breakdown, visit the [Expensify pricing page](https://www.expensify.c
 
 ## 🌍 Localized pricing
 
-- Pricing available in **GBP**, **AUD**, and **NZD**
+- Pricing available in **EUR**, **GBP**, **AUD**, and **NZD**
 
 ## 🔄 Flexible scaling
 

docs/articles/new-expensify/billing-and-subscriptions/Billing-Overview.md

@@ -1,17 +1,17 @@
 ---
-title: Update Email Address
-description: Add or update contact methods for your Expensify account, including changing your default email.
-keywords: [New Expensify, change email, add email, contact method, update default email, account access]
+title: Update Contact Methods
+description: Add or update contact methods for your Expensify account, including changing your default email or phone number.
+keywords: [New Expensify, change email, add email, change phone number, add phone number, contact method, update default email, account access]
 ---
 <div id="new-expensify" markdown="1">
 
-Update or add new email addresses to keep your Expensify account secure and accessible. You can add personal or secondary emails, change your default email, and remove outdated addresses.
+Update or add new contact methods to keep your Expensify account secure and accessible. You can add personal or secondary contact methods, change your default contact method, and remove outdated contact methods.
 
 ---
 
-# Why Add Another Email Address?
+# Why Add Another Contact Method?
 
-Adding an additional email helps you:
+Adding an additional contact method helps you:
 
 - **Switch your default email** to a new one (e.g., a personal address).
 - **Maintain access** if your primary email is tied to an employer domain.
@@ -21,14 +21,13 @@ Adding an additional email helps you:
 
 ---
 
-# Add or Change an Email Address
+# Add or Change a Contact Method
 
-## On Desktop:
 1. In the left-hand menu, click **Account > Profile**.
 2. Under **Contact Method**, click **New Contact Method**.
 3. Enter the email address or phone number you want to add.
 4. Click **Add**.
-5. Check your email for a **verification code**, enter it in Expensify, and click **Verify**.
+5. Check your email or texts for a **verification code**, enter it in Expensify, and click **Verify**.
 
 After verifying, click any contact method to:
 - Set it as your **default**
@@ -39,7 +38,7 @@ After verifying, click any contact method to:
 
 # Important Notes
 
-- You can’t remove your default email until another verified contact method is set as default.
+- You can’t remove your default contact method until another verified contact method is set as default.
 - You can add multiple contact methods for flexibility when logging in or recovering your account.
 
 </div>