[Mentions v2] Add support for <mention-report /> tag (#310)

Co-authored-by: Tomek Zawadzki <[email protected]>
Expensify · Apr 15, 2024 · 84e6285 · 84e6285
1 parent cd2f90d
commit 84e6285
Show file tree

Hide file tree

Showing 16 changed files with 129 additions and 406 deletions.
diff --git a/android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java b/android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java
@@ -64,6 +64,12 @@ public class MarkdownStyle {
   @ColorInt
   private final int mMentionUserBackgroundColor;
 
+  @ColorInt
+  private final int mMentionReportColor;
+
+  @ColorInt
+  private final int mMentionReportBackgroundColor;
+
   public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mSyntaxColor = parseColor(map, "syntax", "color", context);
     mLinkColor = parseColor(map, "link", "color", context);
@@ -85,6 +91,8 @@ public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mMentionHereBackgroundColor = parseColor(map, "mentionHere", "backgroundColor", context);
     mMentionUserColor = parseColor(map, "mentionUser", "color", context);
     mMentionUserBackgroundColor = parseColor(map, "mentionUser", "backgroundColor", context);
+    mMentionReportColor = parseColor(map, "mentionReport", "color", context);
+    mMentionReportBackgroundColor = parseColor(map, "mentionReport", "backgroundColor", context);
   }
 
   private static int parseColor(@NonNull ReadableMap map, @NonNull String key, @NonNull String prop, @NonNull Context context) {
@@ -204,4 +212,14 @@ public int getMentionUserColor() {
   public int getMentionUserBackgroundColor() {
     return mMentionUserBackgroundColor;
   }
+
+  @ColorInt
+  public int getMentionReportColor() {
+    return mMentionReportColor;
+  }
+
+  @ColorInt
+  public int getMentionReportBackgroundColor() {
+    return mMentionReportBackgroundColor;
+  }
 }
diff --git a/android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java b/android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java
@@ -124,6 +124,10 @@ private void applyRange(SpannableStringBuilder ssb, String type, int start, int
         setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getMentionUserColor()), start, end);
         setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getMentionUserBackgroundColor()), start, end);
         break;
+      case "mention-report":
+        setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getMentionReportColor()), start, end);
+        setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getMentionReportBackgroundColor()), start, end);
+        break;
       case "syntax":
         setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getSyntaxColor()), start, end);
         break;

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -5,7 +5,7 @@ import {Button, Platform, StyleSheet, Text, View} from 'react-native';
 import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
 import type {TextInput} from 'react-native';
 
-const DEFAULT_TEXT = ['Hello, *world*!', 'https://expensify.com', '# Lorem ipsum', '> Hello world', '`foo`', '```\nbar\n```', '@here', '@[email protected]'].join('\n');
+const DEFAULT_TEXT = ['Hello, *world*!', 'https://expensify.com', '# Lorem ipsum', '> Hello world', '`foo`', '```\nbar\n```', '@here', '@[email protected]', '#room-mention'].join('\n');
 
 function isWeb() {
   return Platform.OS === 'web';

diff --git a/ios/RCTMarkdownStyle.h b/ios/RCTMarkdownStyle.h
@@ -26,6 +26,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) UIColor *mentionHereBackgroundColor;
 @property (nonatomic) UIColor *mentionUserColor;
 @property (nonatomic) UIColor *mentionUserBackgroundColor;
+@property (nonatomic) UIColor *mentionReportColor;
+@property (nonatomic) UIColor *mentionReportBackgroundColor;
 
 #ifdef RCT_NEW_ARCH_ENABLED
 - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecoratorViewMarkdownStyleStruct &)style;

diff --git a/ios/RCTMarkdownStyle.mm b/ios/RCTMarkdownStyle.mm
@@ -41,6 +41,9 @@ - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecorato
 
     _mentionUserColor = RCTUIColorFromSharedColor(style.mentionUser.color);
     _mentionUserBackgroundColor = RCTUIColorFromSharedColor(style.mentionUser.backgroundColor);
+
+    _mentionReportColor = RCTUIColorFromSharedColor(style.mentionReport.color);
+    _mentionReportBackgroundColor = RCTUIColorFromSharedColor(style.mentionReport.backgroundColor);
   }
 
   return self;
@@ -79,6 +82,9 @@ - (instancetype)initWithDictionary:(NSDictionary *)json
 
     _mentionUserColor = [RCTConvert UIColor:json[@"mentionUser"][@"color"]];
     _mentionUserBackgroundColor = [RCTConvert UIColor:json[@"mentionUser"][@"backgroundColor"]];
+
+    _mentionReportColor = [RCTConvert UIColor:json[@"mentionReport"][@"color"]];
+    _mentionReportBackgroundColor = [RCTConvert UIColor:json[@"mentionReport"][@"backgroundColor"]];
   }
 
   return self;

diff --git a/ios/RCTMarkdownUtils.mm b/ios/RCTMarkdownUtils.mm
@@ -108,6 +108,9 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input withA
                 // TODO: change mention color when it mentions current user
                 [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.mentionUserColor range:range];
                 [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.mentionUserBackgroundColor range:range];
+            } else if ([type isEqualToString:@"mention-report"]) {
+                [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.mentionReportColor range:range];
+                [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.mentionReportBackgroundColor range:range];
             } else if ([type isEqualToString:@"link"]) {
                 [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:range];
                 [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.linkColor range:range];

diff --git a/parser/__tests__/index.test.js b/parser/__tests__/index.test.js
@@ -516,3 +516,25 @@ describe('inline image', () => {
     ]);
   });
 });
+
+describe('report mentions', () => {
+  test('simple report mention', () => {
+    expect('#report-name').toBeParsedAs([{type: 'mention-report', start: 0, length: 12}]);
+  });
+
+  test('report mention in tense', () => {
+    expect('reported #report-name should be highlighted').toBeParsedAs([{type: 'mention-report', start: 9, length: 12}]);
+  });
+
+  test('report mention with markdown', () => {
+    expect('reported #`report-name` should be highlighted').toBeParsedAs([
+      {type: 'syntax', start: 10, length: 1},
+      {type: 'code', start: 11, length: 11},
+      {type: 'syntax', start: 22, length: 1},
+    ]);
+  });
+
+  test('report mention with punctuation', () => {
+    expect('reported #report-name!').toBeParsedAs([{type: 'mention-report', start: 9, length: 12}]);
+  });
+});
diff --git a/parser/index.ts b/parser/index.ts
@@ -3,7 +3,7 @@
 import {ExpensiMark} from 'expensify-common/lib/ExpensiMark';
 import _ from 'underscore';
 
-type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
+type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'mention-report' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
 type Range = {
   type: MarkdownType;
   start: number;
@@ -140,6 +140,8 @@ function parseTreeToTextAndRanges(tree: StackItem): [string, Range[]] {
         addChildrenWithStyle(node, 'mention-here');
       } else if (node.tag === '<mention-user>') {
         addChildrenWithStyle(node, 'mention-user');
+      } else if (node.tag === '<mention-report>') {
+        addChildrenWithStyle(node, 'mention-report');
       } else if (node.tag === '<blockquote>') {
         appendSyntax('>');
         addChildrenWithStyle(node, 'blockquote');

diff --git a/parser/package.json b/parser/package.json
@@ -20,7 +20,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "expensify-common": "Expensify/expensify-common#4e020cfa13ffabde14313c92b341285aeb919f29",
+    "expensify-common": "Expensify/expensify-common#0b1275e1f0809a5a2365b92d9fa92b11654b164f",
     "patch-package": "^8.0.0",
     "underscore": "^1.13.6"
   }