Expensify · tomekzaw · Mar 25, 2024 · Mar 13, 2024 · Mar 13, 2024 · Mar 13, 2024
diff --git a/android/src/main/java/com/expensify/livemarkdown/MarkdownEmojiSpan.java b/android/src/main/java/com/expensify/livemarkdown/MarkdownEmojiSpan.java
@@ -0,0 +1,9 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.AbsoluteSizeSpan;
+
+public class MarkdownEmojiSpan extends AbsoluteSizeSpan implements MarkdownSpan {
+  public MarkdownEmojiSpan(float fontSize) {
+    super((int) fontSize, true);
+  }
+}
diff --git a/android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java b/android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java
@@ -21,6 +21,8 @@ public class MarkdownStyle {
 
   private final float mH1FontSize;
 
+  private final float mEmojiFontSize;
+
   @ColorInt
   private final int mBlockquoteBorderColor;
 
@@ -62,6 +64,7 @@ public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mSyntaxColor = parseColor(map, "syntax", "color", context);
     mLinkColor = parseColor(map, "link", "color", context);
     mH1FontSize = parseFloat(map, "h1", "fontSize");
+    mEmojiFontSize = parseFloat(map, "emoji", "fontSize");
     mBlockquoteBorderColor = parseColor(map, "blockquote", "borderColor", context);
     mBlockquoteBorderWidth = parseFloat(map, "blockquote", "borderWidth");
     mBlockquoteMarginLeft = parseFloat(map, "blockquote", "marginLeft");
@@ -119,6 +122,10 @@ public float getH1FontSize() {
     return mH1FontSize;
   }
 
+  public float getEmojiFontSize() {
+    return mEmojiFontSize;
+  }
+
   @ColorInt
   public int getBlockquoteBorderColor() {
     return mBlockquoteBorderColor;

diff --git a/android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java b/android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java
@@ -116,6 +116,9 @@ private void applyRange(SpannableStringBuilder ssb, String type, int start, int
       case "strikethrough":
         setSpan(ssb, new MarkdownStrikethroughSpan(), start, end);
         break;
+      case "emoji":
+        setSpan(ssb, new MarkdownEmojiSpan(mMarkdownStyle.getEmojiFontSize()), start, end);
+        break;
       case "mention-here":
         setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getMentionHereColor()), start, end);
         setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getMentionHereBackgroundColor()), start, end);

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1377,4 +1377,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 8cb8ab8858b4911d497d269a353fbfff868afef0
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.14.3
diff --git a/ios/RCTMarkdownStyle.h b/ios/RCTMarkdownStyle.h
@@ -9,6 +9,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) UIColor *syntaxColor;
 @property (nonatomic) UIColor *linkColor;
 @property (nonatomic) CGFloat h1FontSize;
+@property (nonatomic) CGFloat emojiFontSize;
 @property (nonatomic) UIColor *blockquoteBorderColor;
 @property (nonatomic) CGFloat blockquoteBorderWidth;
 @property (nonatomic) CGFloat blockquoteMarginLeft;

diff --git a/ios/RCTMarkdownStyle.mm b/ios/RCTMarkdownStyle.mm
@@ -19,6 +19,8 @@ - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecorato
 
     _h1FontSize = style.h1.fontSize;
 
+    _emojiFontSize = style.emoji.fontSize;
+
     _blockquoteBorderColor = RCTUIColorFromSharedColor(style.blockquote.borderColor);
     _blockquoteBorderWidth = style.blockquote.borderWidth;
     _blockquoteMarginLeft = style.blockquote.marginLeft;
@@ -53,6 +55,8 @@ - (instancetype)initWithDictionary:(NSDictionary *)json
 
     _h1FontSize = [RCTConvert CGFloat:json[@"h1"][@"fontSize"]];
 
+    _emojiFontSize = [RCTConvert CGFloat:json[@"emoji"][@"fontSize"]];
+
     _blockquoteBorderColor = [RCTConvert UIColor:json[@"blockquote"][@"borderColor"]];
     _blockquoteBorderWidth = [RCTConvert CGFloat:json[@"blockquote"][@"borderWidth"]];
     _blockquoteMarginLeft = [RCTConvert CGFloat:json[@"blockquote"][@"marginLeft"]];

diff --git a/ios/RCTMarkdownUtils.mm b/ios/RCTMarkdownUtils.mm
@@ -65,7 +65,7 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input
     NSInteger depth = [[item valueForKey:@"depth"] unsignedIntegerValue] ?: 1;
     NSRange range = NSMakeRange(location, length);
 
-    if ([type isEqualToString:@"bold"] || [type isEqualToString:@"italic"] || [type isEqualToString:@"code"] || [type isEqualToString:@"pre"] || [type isEqualToString:@"h1"]) {
+    if ([type isEqualToString:@"bold"] || [type isEqualToString:@"italic"] || [type isEqualToString:@"code"] || [type isEqualToString:@"pre"] || [type isEqualToString:@"h1"] || [type isEqualToString:@"emoji"]) {
       UIFont *font = [attributedString attribute:NSFontAttributeName atIndex:location effectiveRange:NULL];
       if ([type isEqualToString:@"bold"]) {
         font = [RCTFont updateFont:font withWeight:@"bold"];
@@ -82,6 +82,13 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input
                                              style:nil
                                            variant:nil
                                    scaleMultiplier:0];
+      } else if ([type isEqualToString:@"emoji"]) {
+        font = [RCTFont updateFont:font withFamily:nil
+                                              size:[NSNumber numberWithFloat:_markdownStyle.emojiFontSize]
+                                            weight:nil
+                                             style:nil
+                                           variant:nil
+                                   scaleMultiplier:0];
       }
       [attributedString addAttribute:NSFontAttributeName value:font range:range];
     }

diff --git a/parser/__tests__/index.test.js b/parser/__tests__/index.test.js
@@ -45,6 +45,10 @@ test('strikethrough', () => {
   ]);
 });
 
+test('emoji', () => {
+  expect('Hello, 😎').toBeParsedAs([{type: 'emoji', start: 7, length: 2}]);
+});
+
 describe('mention-here', () => {
   test('normal', () => {
     expect('@here Hello!').toBeParsedAs([{type: 'mention-here', start: 0, length: 5}]);

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' | 'mention-here' | 'mention-user' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
+type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
 type Range = {
   type: MarkdownType;
   start: number;
@@ -115,6 +115,8 @@ function parseTreeToTextAndRanges(tree: StackItem): [string, Range[]] {
         appendSyntax('~');
         addChildrenWithStyle(node, 'strikethrough');
         appendSyntax('~');
+      } else if (node.tag === '<emoji>') {
+        addChildrenWithStyle(node, 'emoji');
       } else if (node.tag === '<code>') {
         appendSyntax('`');
         addChildrenWithStyle(node, 'code');

diff --git a/parser/package-lock.json b/parser/package-lock.json
diff --git a/parser/package.json b/parser/package.json
@@ -20,7 +20,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#9e47e1f521241f6bd6f23d432848dd3e0ff47ea6",
+    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#4e020cfa13ffabde14313c92b341285aeb919f29",
     "patch-package": "^8.0.0",
     "underscore": "^1.13.6"
   }

diff --git a/parser/patches/expensify-common+1.0.0.patch b/parser/patches/expensify-common+1.0.0.patch
@@ -1,21 +1,28 @@
 diff --git a/node_modules/expensify-common/lib/CONST.jsx b/node_modules/expensify-common/lib/CONST.jsx
-index b402256..02f8e87 100644
+index abdc31b..d99df0c 100644
 --- a/node_modules/expensify-common/lib/CONST.jsx
 +++ b/node_modules/expensify-common/lib/CONST.jsx
-@@ -356,7 +356,7 @@ export const CONST = {
+@@ -356,13 +356,13 @@ export const CONST = {
           *
           * @type RegExp
           */
 -        EMOJIS: /[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
-+        EMOJIS: /[\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
++        EMOJIS: /(?:[\xA9\xAE\u200D\u203C\u2049\u20E3\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299\uFE0F]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDFF\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFF]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD]|\uDB40[\uDC20-\uDC7F])|[#\*0-9]\uFE0F?\u20E3/g,
+         /**
+          * Regex matching an text containing an Emoji that can be a single emoji or made up by some different emojis
+          *
+          * @type RegExp
+          */
+-        EMOJI_RULE: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/gu,
++        EMOJI_RULE: /(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDE5\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFA]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])(\u200D(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDE5\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFA]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])|(?:\uD83C[\uDFFB-\uDFFF])|(?:\uDB40[\uDC20-\uDC7F])|\uFE0F|\u20E3)*|(?:\uD83C[\uDDE6-\uDDFF]){2}|[#\*0-9]\uFE0F?\u20E3/g
      },
 
      REPORT: {
 diff --git a/node_modules/expensify-common/lib/ExpensiMark.js b/node_modules/expensify-common/lib/ExpensiMark.js
-index 181101a..83991d1 100644
+index 02d408c..4d034f1 100644
 --- a/node_modules/expensify-common/lib/ExpensiMark.js
 +++ b/node_modules/expensify-common/lib/ExpensiMark.js
-@@ -7,8 +7,8 @@ const MARKDOWN_LINK_REGEX = new RegExp(`\\[([^\\][]*(?:\\[[^\\][]*][^\\][]*)*)]\
+@@ -9,8 +9,8 @@ const MARKDOWN_IMAGE_REGEX = new RegExp(`\\!${MARKDOWN_LINK}`, 'gi');
 
  const SLACK_SPAN_NEW_LINE_TAG = '<span class="c-mrkdwn__br" data-stringify-type="paragraph-break" style="box-sizing: inherit; display: block; height: unset;"></span>';
 
@@ -26,7 +33,7 @@ index 181101a..83991d1 100644
          /**
           * The list of regex replacements to do on a comment. Check the link regex is first so links are processed
           * before other delimiters
-@@ -482,7 +482,7 @@ export default class ExpensiMark {
+@@ -516,7 +516,7 @@ export default class ExpensiMark {
           * @type {Number}
           */
          this.currentQuoteDepth = 0;
@@ -35,7 +42,7 @@ index 181101a..83991d1 100644
 
      /**
       * Replaces markdown with html elements
-@@ -528,7 +528,7 @@ export default class ExpensiMark {
+@@ -562,7 +562,7 @@ export default class ExpensiMark {
          }
 
          return replacedText;
@@ -44,7 +51,7 @@ index 181101a..83991d1 100644
 
      /**
       * Checks matched URLs for validity and replace valid links with html elements
-@@ -635,7 +635,7 @@ export default class ExpensiMark {
+@@ -669,7 +669,7 @@ export default class ExpensiMark {
          }
 
          return replacedText;
@@ -53,7 +60,7 @@ index 181101a..83991d1 100644
 
      /**
       * Checks matched Emails for validity and replace valid links with html elements
-@@ -674,7 +674,7 @@ export default class ExpensiMark {
+@@ -708,7 +708,7 @@ export default class ExpensiMark {
              replacedText = replacedText.concat(textToCheck.substr(startIndex));
          }
          return replacedText;
@@ -62,7 +69,7 @@ index 181101a..83991d1 100644
 
      /**
       * replace block element with '\n' if :
-@@ -714,7 +714,7 @@ export default class ExpensiMark {
+@@ -748,7 +748,7 @@ export default class ExpensiMark {
          });
 
          return joinedText;
@@ -71,7 +78,7 @@ index 181101a..83991d1 100644
 
      /**
       * Replaces HTML with markdown
-@@ -741,7 +741,7 @@ export default class ExpensiMark {
+@@ -775,7 +775,7 @@ export default class ExpensiMark {
              generatedMarkdown = generatedMarkdown.replace(rule.regex, rule.replacement);
          });
          return Str.htmlDecode(this.replaceBlockElementWithNewLine(generatedMarkdown));
@@ -80,7 +87,7 @@ index 181101a..83991d1 100644
 
      /**
       * Convert HTML to text
-@@ -760,7 +760,7 @@ export default class ExpensiMark {
+@@ -794,7 +794,7 @@ export default class ExpensiMark {
          // We use 'htmlDecode' instead of 'unescape' to replace entities like '&#32;'
          replacedText = Str.htmlDecode(replacedText);
          return replacedText;
@@ -89,7 +96,7 @@ index 181101a..83991d1 100644
 
      /**
       * Modify text for Quotes replacing chevrons with html elements
-@@ -823,7 +823,7 @@ export default class ExpensiMark {
+@@ -857,7 +857,7 @@ export default class ExpensiMark {
              replacedText = textToCheck;
          }
          return replacedText;
@@ -98,7 +105,7 @@ index 181101a..83991d1 100644
 
      /**
       * Format the content of blockquote if the text matches the regex or else just return the original text
-@@ -844,7 +844,7 @@ export default class ExpensiMark {
+@@ -878,7 +878,7 @@ export default class ExpensiMark {
              return replacement(textToFormat);
          }
          return textToCheck;
@@ -107,7 +114,7 @@ index 181101a..83991d1 100644
 
      /**
       * Check if the input text includes only the open or the close tag of an element.
-@@ -883,7 +883,7 @@ export default class ExpensiMark {
+@@ -917,7 +917,7 @@ export default class ExpensiMark {
 
          // If there are any tags left in the stack, they're unclosed
          return tagStack.length !== 0;
@@ -116,7 +123,7 @@ index 181101a..83991d1 100644
 
      /**
       * @param {String} comment
-@@ -905,7 +905,7 @@ export default class ExpensiMark {
+@@ -939,7 +939,7 @@ export default class ExpensiMark {
              console.warn('Error parsing url in ExpensiMark.extractLinksInMarkdownComment', {error: e});
              return undefined;
          }
@@ -125,10 +132,21 @@ index 181101a..83991d1 100644
 
      /**
       * Compares two markdown comments and returns a list of the links removed in a new comment.
-@@ -920,3 +920,5 @@ export default class ExpensiMark {
+@@ -952,7 +952,7 @@ export default class ExpensiMark {
+         const linksInOld = this.extractLinksInMarkdownComment(oldComment);
+         const linksInNew = this.extractLinksInMarkdownComment(newComment);
          return linksInOld === undefined || linksInNew === undefined ? [] : _.difference(linksInOld, linksInNew);
-     }
+-    }
++    },
+
+     /**
+      * Replace MD characters with their HTML entity equivalent
+@@ -975,5 +975,7 @@ export default class ExpensiMark {
+         };
+
+         return text.replace(pattern, char => entities[char] || char);
+-    }
++    },
  }
 +
 +ExpensiMark.initializer();
-\ No newline at end of file
diff --git a/parser/react-native-live-markdown-parser.js b/parser/react-native-live-markdown-parser.js
diff --git a/src/MarkdownTextInputDecoratorViewNativeComponent.ts b/src/MarkdownTextInputDecoratorViewNativeComponent.ts
@@ -7,6 +7,9 @@ interface MarkdownStyle {
   syntax: {
     color: ColorValue;
   };
+  emoji: {
+    fontSize: Float;
+  };
   link: {
     color: ColorValue;
   };

diff --git a/src/styleUtils.ts b/src/styleUtils.ts
@@ -23,6 +23,9 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
     h1: {
       fontSize: 25,
     },
+    emoji: {
+      fontSize: 20,
+    },
     blockquote: {
       borderColor: 'gray',
       borderWidth: 6,

diff --git a/src/web/parserUtils.ts b/src/web/parserUtils.ts
@@ -4,7 +4,7 @@ import * as BrowserUtils from './browserUtils';
 
 type PartialMarkdownStyle = StyleUtilsTypes.PartialMarkdownStyle;
 
-type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax' | 'mention-here' | 'mention-user';
+type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax' | 'mention-here' | 'mention-user';
 
 type MarkdownRange = {
   type: MarkdownType;
@@ -33,6 +33,9 @@ function addStyling(targetElement: HTMLElement, type: MarkdownType, markdownStyl
     case 'strikethrough':
       node.style.textDecoration = 'line-through';
       break;
+    case 'emoji':
+      Object.assign(node.style, markdownStyle.emoji);
+      break;
     case 'mention-here':
       Object.assign(node.style, markdownStyle.mentionHere);
       break;

diff --git a/types/global.d.ts b/types/global.d.ts
@@ -1,6 +1,6 @@
 export {};
 
-type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'mention-here' | 'mention-user' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
+type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
 
 type Range = {
   type: MarkdownType;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1377,4 +1377,4 @@ SPEC CHECKSUMS:

		PODFILE CHECKSUM: 8cb8ab8858b4911d497d269a353fbfff868afef0

		COCOAPODS: 1.12.1
		COCOAPODS: 1.14.3