Add handling for short mentions WIP

Author: Kicu

src/components/RNMarkdownTextInput.tsx

@@ -1,11 +1,13 @@
-import type {MarkdownRange, MarkdownTextInputProps} from '@expensify/react-native-live-markdown';
+import type {MarkdownTextInputProps} from '@expensify/react-native-live-markdown';
 import {MarkdownTextInput, parseExpensiMark} from '@expensify/react-native-live-markdown';
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useCallback} from 'react';
-import Animated from 'react-native-reanimated';
+import React, {forwardRef, useCallback, useEffect, useMemo} from 'react';
+import Animated, {useSharedValue} from 'react-native-reanimated';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useTheme from '@hooks/useTheme';
+import {decorateRangesWithShortMentions} from '@libs/ParsingUtils';
 import CONST from '@src/CONST';
+import {usePersonalDetails} from './OnyxProvider';
 
 // Convert the underlying TextInput into an Animated component so that we can take an animated ref and pass it to a worklet
 const AnimatedMarkdownTextInput = Animated.createAnimatedComponent(MarkdownTextInput);
@@ -17,30 +19,40 @@ type RNMarkdownTextInputWithRefProps = Omit<MarkdownTextInputProps, 'parser'> &
     parser?: MarkdownTextInputProps['parser'];
 };
 
-function decorateRangesWithCurrentUser(ranges: MarkdownRange[], text: string, currentUser: string): MarkdownRange[] {
-    'worklet';
-
-    return ranges.map((range) => {
-        if (range.type === 'mention-user') {
-            const mentionText = text.slice(range.start, range.start + range.length);
-            const isCurrentUser = mentionText === `@${currentUser}`;
-            if (isCurrentUser) {
-                return {
-                    ...range,
-                    type: 'mention-here',
-                };
-            }
-        }
-
-        return range;
-    });
-}
-
 function RNMarkdownTextInputWithRef({maxLength, parser, ...props}: RNMarkdownTextInputWithRefProps, ref: ForwardedRef<AnimatedMarkdownTextInputRef>) {
     const theme = useTheme();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
 
-    const currentUserLogin = currentUserPersonalDetails.login;
+    const personalDetails = usePersonalDetails();
+    const mentionsListSV = useSharedValue<string[]>([]);
+
+    useEffect(() => {
+        if (!personalDetails) {
+            return;
+        }
+
+        const mentionsList = Object.values(personalDetails)
+            .map((personalDetail) => {
+                if (!personalDetail?.login) {
+                    return;
+                }
+
+                const [username] = personalDetail.login.split('@');
+                return username ? `@${username}` : undefined;
+            })
+            .filter((login): login is string => !!login);
+
+        mentionsListSV.set(mentionsList);
+    }, [mentionsListSV, personalDetails]);
+
+    const currentUserLogin = useMemo(() => {
+        if (!currentUserPersonalDetails.login) {
+            return;
+        }
+
+        const [baseName] = currentUserPersonalDetails.login.split('@');
+        return `@${baseName}`;
+    }, [currentUserPersonalDetails.login]);
 
     // We accept parser passed down as a prop or use ExpensiMark if parser is not defined
     const parserWorklet = useCallback(
@@ -56,9 +68,9 @@ function RNMarkdownTextInputWithRef({maxLength, parser, ...props}: RNMarkdownTex
                 return parsedMentions;
             }
 
-            return decorateRangesWithCurrentUser(parsedMentions, text, currentUserLogin);
+            return decorateRangesWithShortMentions(parsedMentions, text, mentionsListSV.get(), currentUserLogin);
         },
-        [currentUserLogin, parser],
+        [currentUserLogin, mentionsListSV, parser],
     );
 
     return (
@@ -86,5 +98,4 @@ function RNMarkdownTextInputWithRef({maxLength, parser, ...props}: RNMarkdownTex
 RNMarkdownTextInputWithRef.displayName = 'RNTextInputWithRef';
 
 export default forwardRef(RNMarkdownTextInputWithRef);
-export {decorateRangesWithCurrentUser};
 export type {AnimatedMarkdownTextInputRef};

src/libs/ParsingUtils.ts

@@ -0,0 +1,37 @@
+import type {MarkdownRange} from '@expensify/react-native-live-markdown';
+
+/**
+ * returns ranges Fixme
+ */
+function decorateRangesWithShortMentions(ranges: MarkdownRange[], text: string, availableMentions: string[], currentUser: string): MarkdownRange[] {
+    'worklet';
+
+    return ranges
+        .map((range) => {
+            if (range.type === 'mention-short') {
+                const mentionText = text.slice(range.start, range.start + range.length);
+
+                if (mentionText === currentUser) {
+                    return {
+                        ...range,
+                        type: 'mention-here',
+                    };
+                }
+
+                if (availableMentions.includes(mentionText)) {
+                    return {
+                        ...range,
+                        type: 'mention-user',
+                    };
+                }
+
+                // If it's neither, then we remove the range since no special styling will be needed
+                return;
+            }
+            return range;
+        })
+        .filter((maybeRange): maybeRange is MarkdownRange => !!maybeRange);
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export {decorateRangesWithShortMentions};

tests/unit/decorateRangesWithCurrentUserTest.ts

@@ -0,0 +1,142 @@
+import type {MarkdownRange} from '@expensify/react-native-live-markdown';
+import {decorateRangesWithShortMentions} from '@libs/ParsingUtils';
+
+describe('decorateRangesWithShortMentions', () => {
+    test('returns empty list for empty text', () => {
+        const result = decorateRangesWithShortMentions([], '', [], '');
+        expect(result).toEqual([]);
+    });
+
+    test('returns empty list when there are no relevant mentions', () => {
+        const text = 'Lorem ipsum';
+        const result = decorateRangesWithShortMentions([], text, [], '');
+        expect(result).toEqual([]);
+    });
+
+    test('returns unchanged ranges when there are other markups than user-mentions', () => {
+        const text = 'Lorem ipsum';
+        const ranges: MarkdownRange[] = [
+            {
+                type: 'bold',
+                start: 5,
+                length: 3,
+            },
+        ];
+        const result = decorateRangesWithShortMentions(ranges, text, [], '');
+        expect(result).toEqual([
+            {
+                type: 'bold',
+                start: 5,
+                length: 3,
+            },
+        ]);
+    });
+
+    test('returns ranges with current user type changed to "mention-here"', () => {
+        const text = 'Lorem ipsum @myUser';
+        const ranges: MarkdownRange[] = [
+            {
+                type: 'mention-short',
+                start: 12,
+                length: 8,
+            },
+        ];
+        const result = decorateRangesWithShortMentions(ranges, text, [], '@myUser');
+        expect(result).toEqual([
+            {
+                type: 'mention-here',
+                start: 12,
+                length: 8,
+            },
+        ]);
+    });
+
+    test('returns ranges with correct short-mentions', () => {
+        const text = 'Lorem ipsum @steven.mock';
+        const ranges: MarkdownRange[] = [
+            {
+                type: 'mention-short',
+                start: 12,
+                length: 12,
+            },
+        ];
+        const availableMentions = ['@johnDoe', '@steven.mock'];
+
+        const result = decorateRangesWithShortMentions(ranges, text, availableMentions, '');
+        expect(result).toEqual([
+            {
+                type: 'mention-user',
+                start: 12,
+                length: 12,
+            },
+        ]);
+    });
+
+    test('returns ranges with removed short-mentions when they do not match', () => {
+        const text = 'Lorem ipsum @steven.mock';
+        const ranges: MarkdownRange[] = [
+            {
+                type: 'bold',
+                start: 5,
+                length: 3,
+            },
+            {
+                type: 'mention-short',
+                start: 12,
+                length: 12,
+            },
+        ];
+        const availableMentions = ['@other.person'];
+
+        const result = decorateRangesWithShortMentions(ranges, text, availableMentions, '');
+        expect(result).toEqual([
+            {
+                type: 'bold',
+                start: 5,
+                length: 3,
+            },
+        ]);
+    });
+
+    test('returns ranges with both types of mentions handled', () => {
+        const text = 'Lorem ipsum @steven.mock @John.current @test';
+        const ranges: MarkdownRange[] = [
+            {
+                type: 'bold',
+                start: 5,
+                length: 3,
+            },
+            {
+                type: 'mention-short',
+                start: 12,
+                length: 12,
+            },
+            {
+                type: 'mention-short',
+                start: 25,
+                length: 13,
+            },
+        ];
+        const availableMentions = ['@johnDoe', '@steven.mock', '@John.current'];
+        const currentUser = '@John.current';
+
+        const result = decorateRangesWithShortMentions(ranges, text, availableMentions, currentUser);
+        expect(result).toEqual([
+            {
+                type: 'bold',
+                start: 5,
+                length: 3,
+            },
+            {
+                type: 'mention-user',
+                start: 12,
+                length: 12,
+            },
+            {
+                type: 'mention-here',
+                start: 25,
+                length: 13,
+            },
+        ]);
+    });
+});