chore: resolve merge conflicts

.github/workflows/build-android.yml

@@ -26,8 +26,12 @@ jobs:
   build:
     if: github.repository == 'Expensify/react-native-live-markdown'
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        react-native-architecture: ['Paper', 'Fabric']
+      fail-fast: false
     concurrency:
-      group: build-android-${{ github.ref }}
+      group: build-android-${{ matrix.react-native-architecture }}-${{ github.ref }}
       cancel-in-progress: true
     steps:
       - name: Check out Git repository
@@ -42,6 +46,10 @@ jobs:
       - name: Install node_modules
         run: yarn install --immutable
 
+      - name: Apply patches
+        working-directory: example
+        run: yarn patch-package
+
       - name: Build app
         working-directory: example/android
-        run: ./gradlew assembleDebug --build-cache -PreactNativeArchitectures=arm64-v8a
+        run: ./gradlew assembleDebug --build-cache -PreactNativeArchitectures=arm64-v8a -PnewArchEnabled=${{ matrix.react-native-architecture == 'Fabric' && 'true' || 'false' }}

.github/workflows/build-ios.yml

@@ -26,8 +26,12 @@ jobs:
   build:
     if: github.repository == 'Expensify/react-native-live-markdown'
     runs-on: macos-13
+    strategy:
+      matrix:
+        react-native-architecture: ['Paper', 'Fabric']
+      fail-fast: false
     concurrency:
-      group: build-ios-${{ github.ref }}
+      group: build-ios-${{ matrix.react-native-architecture }}-${{ github.ref }}
       cancel-in-progress: true
     steps:
       - name: Check out Git repository
@@ -39,8 +43,8 @@ jobs:
           path: |
             node_modules
             example/node_modules
-          key: build-ios-node-modules-${{ hashFiles('yarn.lock') }}
-          restore-keys: build-ios-node-modules-
+          key: build-ios-node-modules-${{ matrix.react-native-architecture }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: build-ios-node-modules-${{ matrix.react-native-architecture }}-
 
       - name: Install node_modules
         run: yarn install --immutable
@@ -52,11 +56,13 @@ jobs:
             example/ios/Pods
             ~/Library/Caches/CocoaPods
             ~/.cocoapods
-          key: build-ios-pods-${{ hashFiles('example/node_modules/react-native/package.json') }}
-          restore-keys: build-ios-pods-
+          key: build-ios-pods-${{ matrix.react-native-architecture }}-${{ hashFiles('example/node_modules/react-native/package.json') }}
+          restore-keys: build-ios-pods-${{ matrix.react-native-architecture }}-
 
       - name: Install Pods
         working-directory: example/ios
+        env:
+          RCT_NEW_ARCH_ENABLED: ${{ matrix.react-native-architecture == 'Fabric' && '1' || '0' }}
         run: |
           bundler install
           bundler exec pod install
@@ -69,8 +75,8 @@ jobs:
         uses: actions/cache@v4
         with:
           path: ~/Library/Developer/Xcode/DerivedData
-          key: build-ios-derived-data-${{ hashFiles('example/node_modules/react-native/package.json') }}
-          restore-keys: build-ios-derived-data-
+          key: build-ios-derived-data-${{ matrix.react-native-architecture }}-${{ hashFiles('example/node_modules/react-native/package.json') }}
+          restore-keys: build-ios-derived-data-${{ matrix.react-native-architecture }}-
 
       - name: Build app
         working-directory: example

.yarnrc.yml

@@ -3,7 +3,6 @@ nmHoistingLimits: workspaces
 nodeLinker: node-modules
 
 plugins:
-  - path: scripts/pod-install.cjs
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs

CONTRIBUTING.md

@@ -58,7 +58,7 @@ By default, the example is configured to build with the old architecture. To run
 2. For iOS, run:
 
    ```sh
-   RCT_NEW_ARCH_ENABLED=1 yarn pod-install example/ios
+   cd example/ios && bundler install && RCT_NEW_ARCH_ENABLED=1 bundler exec pod install
    yarn example ios
    ```
 

README.md

@@ -57,6 +57,11 @@ It is also possible to customize the styling of the formatted contents of `Markd
 ```tsx
 import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
 
+const FONT_FAMILY_MONOSPACE = Platform.select({
+  ios: 'Courier',
+  default: 'monospace',
+});
+
 const markdownStyle: MarkdownStyle = {
   syntax: {
     color: 'gray',
@@ -67,19 +72,24 @@ const markdownStyle: MarkdownStyle = {
   h1: {
     fontSize: 25,
   },
+  emoji: {
+    fontSize: 20,
+  },
   blockquote: {
     borderColor: 'gray',
     borderWidth: 6,
     marginLeft: 6,
     paddingLeft: 6,
   },
   code: {
-    fontFamily: 'monospace',
+    fontFamily: FONT_FAMILY_MONOSPACE,
+    fontSize: 20,
     color: 'black',
     backgroundColor: 'lightgray',
   },
   pre: {
-    fontFamily: 'monospace',
+    fontFamily: FONT_FAMILY_MONOSPACE,
+    fontSize: 20,
     color: 'black',
     backgroundColor: 'lightgray',
   },

RNLiveMarkdown.podspec

@@ -30,6 +30,5 @@ Pod::Spec.new do |s|
   s.subspec "common" do |ss|
     ss.source_files         = "cpp/**/*.{cpp,h}"
     ss.header_dir           = "RNLiveMarkdown"
-    ss.pod_target_xcconfig  = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/cpp\"" }
   end
 end

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;
+  }
 }

android/src/main/java/com/expensify/livemarkdown/MarkdownTextInputDecoratorView.java

@@ -79,7 +79,10 @@ protected void setMarkdownStyle(MarkdownStyle markdownStyle) {
       mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
     }
     if (mReactEditText != null) {
+      int selectionStart = mReactEditText.getSelectionStart();
+      int selectionEnd = mReactEditText.getSelectionEnd();
       mReactEditText.setText(mReactEditText.getText()); // trigger update
+      mReactEditText.setSelection(selectionStart, selectionEnd);
     }
   }
 }

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;

android/src/main/new_arch/MarkdownCommitHook.cpp

@@ -112,6 +112,15 @@ RootShadowNode::Unshared MarkdownCommitHook::shadowTreeWillCommit(
           // force measurement of a map buffer
           newStateData->cachedAttributedStringId = 0;
 
+          // setting -1 as the event counter makes sure that the update will be ignored by the java
+          // part of the code, which is what we want as we don't change the attributed string here
+          if (previousEventCount_.contains(nodes.textInput->getTag()) &&
+              previousEventCount_[nodes.textInput->getTag()] == stateData.mostRecentEventCount) {
+              newStateData->mostRecentEventCount = -1;
+          } else {
+              previousEventCount_[nodes.textInput->getTag()] = stateData.mostRecentEventCount;
+          }
+
           // clone the text input with the new state
           auto newNode = node.clone({
               .state =

android/src/main/new_arch/MarkdownCommitHook.h

@@ -47,6 +47,8 @@ class MarkdownCommitHook : public UIManagerCommitHook {
       textLayoutManagers_;
   std::unordered_map<facebook::react::Tag, folly::dynamic>
       previousDecoratorProps_;
+  std::unordered_map<facebook::react::Tag, int64_t>
+      previousEventCount_;
 };
 
 } // namespace livemarkdown

cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorState.h

@@ -1,4 +1,5 @@
 #pragma once
+#if defined(RCT_NEW_ARCH_ENABLED) || defined(ANDROID)
 
 #include <react/renderer/core/ShadowNodeFamily.h>
 
@@ -32,3 +33,5 @@ class JSI_EXPORT MarkdownTextInputDecoratorState final {
 
 } // namespace react
 } // namespace facebook
+
+#endif

cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorViewComponentDescriptor.h

@@ -1,4 +1,5 @@
 #pragma once
+#if defined(RCT_NEW_ARCH_ENABLED) || defined(ANDROID)
 
 #include "MarkdownTextInputDecoratorShadowNode.h"
 #include <react/debug/react_native_assert.h>
@@ -15,3 +16,5 @@ class MarkdownTextInputDecoratorViewComponentDescriptor final
 
 } // namespace react
 } // namespace facebook
+
+#endif

example/ios/Podfile.lock

@@ -1111,12 +1111,12 @@ PODS:
     - React-jsi (= 0.73.4)
     - React-logger (= 0.73.4)
     - React-perflogger (= 0.73.4)
-  - RNLiveMarkdown (0.1.52):
+  - RNLiveMarkdown (0.1.54):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-    - RNLiveMarkdown/common (= 0.1.52)
-  - RNLiveMarkdown/common (0.1.52):
+    - RNLiveMarkdown/common (= 0.1.54)
+  - RNLiveMarkdown/common (0.1.54):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1376,7 +1376,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: ed48e5faac6751e66ee1261c4bd01643b436f112
   React-utils: 6e5ad394416482ae21831050928ae27348f83487
   ReactCommon: 840a955d37b7f3358554d819446bffcf624b2522
-  RNLiveMarkdown: 35d7377d07dcf3e0ecfb1b202550f31829e1ae42
+  RNLiveMarkdown: 2f6f838a2089bd7337020a82800cb0c05c48c5d9
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70
 

example/package.json

@@ -19,8 +19,7 @@
     "@babel/runtime": "^7.20.0",
     "@react-native/babel-preset": "0.73.21",
     "@react-native/metro-config": "0.73.5",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "pod-install": "^0.1.0"
+    "babel-plugin-module-resolver": "^5.0.0"
   },
   "engines": {
     "node": ">=18"

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';

ios/RCTMarkdownStyle.h

@@ -34,6 +34,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;

ios/RCTMarkdownStyle.mm

@@ -49,6 +49,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;
@@ -95,6 +98,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;

ios/RCTMarkdownUtils.mm

@@ -110,6 +110,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];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.57",
+  "version": "0.1.73",
   "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -87,7 +87,6 @@
     "eslint-plugin-tsdoc": "^0.2.17",
     "jest": "^29.6.3",
     "jest-environment-jsdom": "^29.7.0",
-    "pod-install": "^0.1.0",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-native": "0.73.4",