@expensify/react-native-live-markdown 0.1.187 → 0.1.188

package/README.md

@@ -5,6 +5,7 @@
 - ⚛️ Drop-in replacement for `<TextInput>` component
 - ⌨️ Live synchronous formatting on every keystroke
 - ⚡ Fully native experience (selection, spellcheck, autocomplete)
+- 🔧 Customizable logic
 - 🎨 Customizable styles
 - 🌐 Universal support (Android, iOS, web)
 - 🏗️ Supports New Architecture
@@ -14,15 +15,17 @@
 First, install the library from npm with the package manager of your choice:
 
 ```sh
-yarn add @expensify/react-native-live-markdown
-npm install @expensify/react-native-live-markdown --save
-npx expo install @expensify/react-native-live-markdown
+yarn add @expensify/react-native-live-markdown react-native-reanimated expensify-common
+npm install @expensify/react-native-live-markdown react-native-reanimated expensify-common --save
+npx expo install @expensify/react-native-live-markdown react-native-reanimated expensify-common
 ```
 
+React Native Live Markdown requires [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) 3.16.3 or newer and [expensify-common](https://github.com/Expensify/expensify-common) 2.0.106 or newer.
+
 Then, install the iOS dependencies with CocoaPods:
 
 ```sh
-cd ios && pod install
+cd ios && bundler install && bundler exec pod install
 ```
 
 The library includes native code so you will need to re-build the native app.
@@ -33,7 +36,7 @@ The library includes native code so you will need to re-build the native app.
 ## Usage
 
 ```tsx
-import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
+import {MarkdownTextInput, parseExpensiMark} from '@expensify/react-native-live-markdown';
 import React from 'react';
 
 export default function App() {
@@ -43,6 +46,7 @@ export default function App() {
     <MarkdownTextInput
       value={text}
       onChangeText={setText}
+      parser={parseExpensiMark}
     />
   );
 }
@@ -118,6 +122,48 @@ The style object can be passed to multiple `MarkdownTextInput` components using
 > [!TIP]
 > We recommend to store the style object outside of a component body or memoize the style object with `React.useMemo`.
 
+## Parsing logic
+
+`MarkdownTextInput` behavior can be customized via `parser` property. Parser is a function that accepts a plaintext string and returns an array of `MarkdownRange` objects:
+
+```ts
+interface MarkdownRange {
+  type: MarkdownType;
+  start: number;
+  length: number;
+  depth?: number;
+}
+```
+
+Currently, only the following types are supported:
+
+```ts
+type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'mention-report' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
+```
+
+Parser needs to be marked as a [worklet](https://docs.swmansion.com/react-native-reanimated/docs/guides/worklets/) because it's executed on the UI thread as the user types.
+
+Here's a sample function that parses all substrings located between two asterisks as bold text:
+
+```ts
+function parser(input: string) {
+  'worklet';
+
+  const ranges = [];
+  const regexp = /\*(.*?)\*/g;
+  let match;
+  while ((match = regexp.exec(input)) !== null) {
+    ranges.push({start: match.index, length: 1, type: 'syntax'});
+    ranges.push({start: match.index + 1, length: match[1]!.length, type: 'bold'});
+    ranges.push({start: match.index + 1 + match[1]!.length, length: 1, type: 'syntax'});
+  }
+  return ranges;
+}
+```
+
+> [!TIP]
+> We recommend to store the parser function outside of a component body or memoize the parser function with `React.useMemo`.
+
 ## Markdown flavors support
 
 Currently, `react-native-live-markdown` supports only [ExpensiMark](https://github.com/Expensify/expensify-common/blob/main/lib/ExpensiMark.ts) flavor. We are working on CommonMark support as well as possibility to use other Markdown parsers.
@@ -126,9 +172,10 @@ Currently, `react-native-live-markdown` supports only [ExpensiMark](https://gith
 
 `MarkdownTextInput` inherits all props of React Native's `TextInput` component as well as introduces the following properties:
 
-| Prop            | Type            | Default     | Note                                                                                                                                                                                                                   |
-| --------------- | --------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `markdownStyle` | `MarkdownStyle` | `undefined` | Adds custom styling to Markdown text. The provided value is merged with default style object. See [Styling](https://github.com/expensify/react-native-live-markdown/blob/main/README.md#styling) for more information. |
+| Prop            | Type                                 | Default     | Note                                                                                                                                                                                                                   |
+| --------------- | ------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `parser`        | `(value: string) => MarkdownRange[]` | `undefined` | A function that parses the current value and returns an array of ranges.                                                                                                                                               |
+| `markdownStyle` | `MarkdownStyle`                      | `undefined` | Adds custom styling to Markdown text. The provided value is merged with default style object. See [Styling](https://github.com/expensify/react-native-live-markdown/blob/main/README.md#styling) for more information. |
 
 ## Compatibility
 

package/RNLiveMarkdown.podspec

@@ -18,11 +18,9 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => "11.0", :visionos => "1.0" }
   s.source       = { :git => "https://github.com/expensify/react-native-live-markdown.git", :tag => "#{s.version}" }
 
-  s.source_files = "apple/**/*.{h,m,mm}"
+  s.source_files = "apple/**/*.{h,m,mm}", "cpp/**/*.{h,cpp}"
 
-  s.resources = "parser/react-native-live-markdown-parser.js"
-
-  s.dependency "hermes-engine"
+  s.dependency "RNReanimated/worklets"
 
   s.xcconfig = {
     "OTHER_CFLAGS" => "$(inherited) -DREACT_NATIVE_MINOR_VERSION=#{react_native_minor_version}"

package/android/build.gradle

@@ -156,6 +156,9 @@ android {
       "**/libjsi.so",
       "**/libreactnativejni.so",
       "**/libreactnative.so",
+      "**/libreact_nativemodule_core.so",
+      "**/libruntimeexecutor.so",
+      "**/libworklets.so",
       "**/libreact_render*.so",
       "**/librrc_root.so",
     ]
@@ -171,6 +174,7 @@ repositories {
 dependencies {
   implementation "com.facebook.react:react-android" // version substituted by RNGP
   implementation "com.facebook.react:hermes-android" // version substituted by RNGP
+  implementation project(":react-native-reanimated")
 }
 
 if (isNewArchitectureEnabled()) {
@@ -180,12 +184,3 @@ if (isNewArchitectureEnabled()) {
     codegenJavaPackageName = "com.expensify.livemarkdown"
   }
 }
-
-task copyJS(type: Copy) {
-  from '../parser/react-native-live-markdown-parser.js'
-  into 'src/main/assets'
-}
-
-tasks.preBuild {
-  dependsOn copyJS
-}

package/android/src/main/cpp/CMakeLists.txt

@@ -8,27 +8,35 @@ add_compile_options(-fvisibility=hidden -fexceptions -frtti)
 
 string(APPEND CMAKE_CXX_FLAGS " -DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}")
 
-file(GLOB livemarkdown_SRC CONFIGURE_DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/*.cpp)
+set(CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../cpp")
 
-add_library(${CMAKE_PROJECT_NAME} SHARED ${livemarkdown_SRC})
+file(GLOB ANDROID_SRC CONFIGURE_DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/*.cpp)
+file(GLOB CPP_SRC CONFIGURE_DEPENDS "${CPP_DIR}/*.cpp")
 
-target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR})
+add_library(${CMAKE_PROJECT_NAME} SHARED ${ANDROID_SRC} ${CPP_SRC})
+
+target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR} ${CPP_DIR})
 
 find_package(fbjni REQUIRED CONFIG)
 find_package(ReactAndroid REQUIRED CONFIG)
-find_package(hermes-engine REQUIRED CONFIG)
+find_package(react-native-reanimated REQUIRED CONFIG)
 
 target_link_libraries(
         ${CMAKE_PROJECT_NAME}
         fbjni::fbjni
-        hermes-engine::libhermes
         ReactAndroid::jsi
+        react-native-reanimated::worklets
 )
 
 if (ReactAndroid_VERSION_MINOR GREATER_EQUAL 76)
   target_link_libraries(${CMAKE_PROJECT_NAME} ReactAndroid::reactnative)
 elseif (ReactAndroid_VERSION_MINOR GREATER_EQUAL 75)
-  target_link_libraries(${CMAKE_PROJECT_NAME} ReactAndroid::reactnativejni)
+  target_link_libraries(
+          ${CMAKE_PROJECT_NAME}
+          ReactAndroid::react_nativemodule_core
+          ReactAndroid::reactnativejni
+          ReactAndroid::runtimeexecutor
+  )
 else ()
   message(FATAL_ERROR "react-native-live-markdown requires react-native 0.75 or newer.")
 endif ()

package/android/src/main/cpp/MarkdownUtils.cpp

@@ -1,42 +1,31 @@
 #include "MarkdownUtils.h"
+#include "MarkdownGlobal.h"
 
 #include <fbjni/fbjni.h>
-#include <hermes/hermes.h>
 
 using namespace facebook;
 
 namespace expensify {
 namespace livemarkdown {
-  std::shared_ptr<jsi::Runtime> MarkdownUtils::runtime_;
-
-  void MarkdownUtils::nativeInitializeRuntime(
-      jni::alias_ref<jhybridobject> jThis,
-      jni::alias_ref<jni::JString> code) {
-    assert(runtime_ == nullptr && "Markdown runtime is already initialized");
-    runtime_ = facebook::hermes::makeHermesRuntime();
-    auto codeBuffer = std::make_shared<const jsi::StringBuffer>(code->toStdString());
-    runtime_->evaluateJavaScript(codeBuffer, "nativeInitializeRuntime");
-  }
-
   jni::local_ref<jni::JString> MarkdownUtils::nativeParseMarkdown(
       jni::alias_ref<jhybridobject> jThis,
-      jni::alias_ref<jni::JString> input) {
-    jsi::Runtime &rt = *runtime_;
-    auto func = rt.global().getPropertyAsFunction(rt, "parseExpensiMarkToRanges");
-    auto arg = input->toStdString();
-    jsi::Value result;
-    try {
-      result = func.call(rt, arg);
-    } catch (jsi::JSError e) {
-      result = jsi::Array(rt, 0);
-    }
-    auto json = rt.global().getPropertyAsObject(rt, "JSON").getPropertyAsFunction(rt, "stringify").call(rt, result).asString(rt).utf8(rt);
+      jni::alias_ref<jni::JString> input,
+      int parserId) {
+    // This method is synchronized (see MarkdownUtils.java) so we don't need a mutex here.
+    const auto markdownRuntime = expensify::livemarkdown::getMarkdownRuntime();
+    jsi::Runtime &rt = markdownRuntime->getJSIRuntime();
+
+    const auto markdownWorklet = expensify::livemarkdown::getMarkdownWorklet(parserId);
+
+    const auto text = jsi::String::createFromUtf8(rt, input->toStdString());
+    const auto result = markdownRuntime->runGuarded(markdownWorklet, text);
+
+    const auto json = rt.global().getPropertyAsObject(rt, "JSON").getPropertyAsFunction(rt, "stringify").call(rt, result).asString(rt).utf8(rt);
     return jni::make_jstring(json);
   }
 
   void MarkdownUtils::registerNatives() {
     registerHybrid({
-        makeNativeMethod("nativeInitializeRuntime", MarkdownUtils::nativeInitializeRuntime),
         makeNativeMethod("nativeParseMarkdown", MarkdownUtils::nativeParseMarkdown)});
   }
 

package/android/src/main/cpp/MarkdownUtils.h

@@ -21,19 +21,14 @@ namespace livemarkdown {
     static constexpr auto kJavaDescriptor =
         "Lcom/expensify/livemarkdown/MarkdownUtils;";
 
-    static void nativeInitializeRuntime(
-        jni::alias_ref<jhybridobject> jThis,
-        jni::alias_ref<jni::JString> code);
-
     static jni::local_ref<jni::JString> nativeParseMarkdown(
         jni::alias_ref<jhybridobject> jThis,
-        jni::alias_ref<jni::JString> input);
+        jni::alias_ref<jni::JString> input,
+        int parserId);
 
     static void registerNatives();
 
   private:
-    static std::shared_ptr<jsi::Runtime> runtime_;
-
     friend HybridBase;
   };
 

package/android/src/main/cpp/OnLoad.cpp

@@ -1,8 +1,14 @@
 #include <fbjni/fbjni.h>
 
 #include "MarkdownUtils.h"
+#include "RuntimeDecorator.h"
 
 JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *reserved) {
     return facebook::jni::initialize(
             vm, [] { expensify::livemarkdown::MarkdownUtils::registerNatives(); });
 }
+
+extern "C" JNIEXPORT void JNICALL Java_com_expensify_livemarkdown_LiveMarkdownModule_injectJSIBindings(JNIEnv *env, jobject thiz, jlong jsiRuntime) {
+  jsi::Runtime &rt = *reinterpret_cast<jsi::Runtime*>(jsiRuntime);
+  expensify::livemarkdown::injectJSIBindings(rt);
+}

package/android/src/main/java/com/expensify/livemarkdown/CustomFabricUIManager.java

@@ -13,7 +13,7 @@ import java.lang.reflect.Field;
 
 public class CustomFabricUIManager {
 
-  public static FabricUIManager create(FabricUIManager source, ReadableMap markdownProps) {
+  public static FabricUIManager create(FabricUIManager source, ReadableMap markdownProps, int parserId) {
     Class<? extends FabricUIManager> uiManagerClass = source.getClass();
 
     try {
@@ -27,7 +27,7 @@ public class CustomFabricUIManager {
 
       FabricUIManager customFabricUIManager = new FabricUIManager(reactContext, viewManagerRegistry, batchEventDispatchedListener);
 
-      mountingManagerField.set(customFabricUIManager, new CustomMountingManager(viewManagerRegistry, mountItemExecutor, reactContext, markdownProps));
+      mountingManagerField.set(customFabricUIManager, new CustomMountingManager(viewManagerRegistry, mountItemExecutor, reactContext, markdownProps, parserId));
 
       return customFabricUIManager;
     } catch (NoSuchFieldException | IllegalAccessException e) {

package/android/src/main/java/com/expensify/livemarkdown/CustomMountingManager.java

@@ -38,14 +38,12 @@ public class CustomMountingManager extends MountingManager {
       @NonNull ViewManagerRegistry viewManagerRegistry,
       @NonNull MountItemExecutor mountItemExecutor,
       @NonNull Context context,
-      @NonNull ReadableMap decoratorProps) {
+      @NonNull ReadableMap decoratorProps,
+      int parserId) {
     super(viewManagerRegistry, mountItemExecutor);
-
-    AssetManager assetManager = context.getAssets();
-    MarkdownUtils.maybeInitializeRuntime(assetManager);
-
-    this.markdownUtils = new MarkdownUtils(assetManager);
+    this.markdownUtils = new MarkdownUtils((ReactContext) context);
     this.markdownUtils.setMarkdownStyle(new MarkdownStyle(decoratorProps, context));
+    this.markdownUtils.setParserId(parserId);
   }
 
   @Override

package/android/src/main/java/com/expensify/livemarkdown/LiveMarkdownModule.java

@@ -4,8 +4,15 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.fabric.FabricUIManager;
 import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.common.UIManagerType;
+import com.facebook.soloader.SoLoader;
+
+import java.util.Objects;
 
 public class LiveMarkdownModule extends NativeLiveMarkdownModuleSpec {
+  static {
+    SoLoader.loadLibrary("livemarkdown");
+  }
+
   private NativeProxy mNativeProxy;
   public LiveMarkdownModule(ReactApplicationContext reactContext) {
     super(reactContext);
@@ -21,6 +28,11 @@ public class LiveMarkdownModule extends NativeLiveMarkdownModuleSpec {
       mNativeProxy.createCommitHook(uiManager);
     }
 
+    long jsiRuntime = Objects.requireNonNull(getReactApplicationContext().getJavaScriptContextHolder(), "[react-native-live-markdown] JavaScriptContextHolder is null").get();
+    injectJSIBindings(jsiRuntime);
+
     return true;
   }
+
+  private native void injectJSIBindings(long jsiRuntime);
 }

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

@@ -11,6 +11,7 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewParent;
 
+import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.views.textinput.ReactEditText;
 
 public class MarkdownTextInputDecoratorView extends View {
@@ -29,6 +30,8 @@ public class MarkdownTextInputDecoratorView extends View {
 
   private MarkdownStyle mMarkdownStyle;
 
+  private int mParserId;
+
   private MarkdownUtils mMarkdownUtils;
 
   private ReactEditText mReactEditText;
@@ -52,10 +55,9 @@ public class MarkdownTextInputDecoratorView extends View {
     }
 
     if (previousSibling instanceof ReactEditText) {
-      AssetManager assetManager = getContext().getAssets();
-      MarkdownUtils.maybeInitializeRuntime(assetManager);
-      mMarkdownUtils = new MarkdownUtils(assetManager);
+      mMarkdownUtils = new MarkdownUtils((ReactContext) getContext());
       mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
+      mMarkdownUtils.setParserId(mParserId);
       mReactEditText = (ReactEditText) previousSibling;
       mTextWatcher = new MarkdownTextWatcher(mMarkdownUtils);
       mReactEditText.addTextChangedListener(mTextWatcher);
@@ -78,6 +80,18 @@ public class MarkdownTextInputDecoratorView extends View {
     if (mMarkdownUtils != null) {
       mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
     }
+    applyNewStyles();
+  }
+
+  protected void setParserId(int parserId) {
+    mParserId = parserId;
+    if (mMarkdownUtils != null) {
+      mMarkdownUtils.setParserId(mParserId);
+    }
+    applyNewStyles();
+  }
+
+  protected void applyNewStyles() {
     if (mReactEditText != null) {
       int selectionStart = mReactEditText.getSelectionStart();
       int selectionEnd = mReactEditText.getSelectionEnd();

package/android/src/main/java/com/expensify/livemarkdown/MarkdownTextInputDecoratorViewManager.java

@@ -28,4 +28,10 @@ public class MarkdownTextInputDecoratorViewManager extends MarkdownTextInputDeco
     MarkdownStyle markdownStyle = new MarkdownStyle(value, view.getContext());
     view.setMarkdownStyle(markdownStyle);
   }
+
+  @Override
+  @ReactProp(name = "parserId")
+  public void setParserId(@NonNull MarkdownTextInputDecoratorView view, int parserId) {
+    view.setParserId(parserId);
+  }
 }

package/android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java

@@ -7,6 +7,8 @@ import android.text.Spanned;
 import androidx.annotation.NonNull;
 
 import com.expensify.livemarkdown.spans.*;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.util.RNLog;
 import com.facebook.react.views.text.internal.span.CustomLineHeightSpan;
 import com.facebook.soloader.SoLoader;
 
@@ -14,8 +16,6 @@ import org.json.JSONArray;
 import org.json.JSONException;
 import org.json.JSONObject;
 
-import java.io.IOException;
-import java.io.InputStream;
 import java.util.Objects;
 
 public class MarkdownUtils {
@@ -23,49 +23,31 @@ public class MarkdownUtils {
     SoLoader.loadLibrary("livemarkdown");
   }
 
-  private static boolean IS_RUNTIME_INITIALIZED = false;
+  private static synchronized native String nativeParseMarkdown(String input, int parserId);
 
-  public static synchronized void maybeInitializeRuntime(AssetManager assetManager) {
-    if (IS_RUNTIME_INITIALIZED) {
-      return;
-    }
-    try {
-      InputStream inputStream = assetManager.open("react-native-live-markdown-parser.js");
-      byte[] buffer = new byte[inputStream.available()];
-      inputStream.read(buffer);
-      inputStream.close();
-      String code = new String(buffer);
-      nativeInitializeRuntime(code);
-      IS_RUNTIME_INITIALIZED = true;
-    } catch (IOException e) {
-      throw new RuntimeException("Failed to initialize Markdown runtime");
-    }
-  }
-
-  private static native void nativeInitializeRuntime(String code);
-
-  private synchronized static String parseMarkdown(String input) {
-    return nativeParseMarkdown(input);
-  }
-
-  private static native String nativeParseMarkdown(String input);
-
-  public MarkdownUtils(@NonNull AssetManager assetManager) {
-    mAssetManager = assetManager;
+  public MarkdownUtils(@NonNull ReactContext reactContext) {
+    mReactContext = reactContext;
+    mAssetManager = reactContext.getAssets();
   }
 
+  private final @NonNull ReactContext mReactContext;
   private final @NonNull AssetManager mAssetManager;
 
   private String mPrevInput;
-
   private String mPrevOutput;
+  private int mPrevParserId;
 
   private MarkdownStyle mMarkdownStyle;
+  private int mParserId;
 
   public void setMarkdownStyle(@NonNull MarkdownStyle markdownStyle) {
     mMarkdownStyle = markdownStyle;
   }
 
+  public void setParserId(int parserId) {
+    mParserId = parserId;
+  }
+
   public void applyMarkdownFormatting(SpannableStringBuilder ssb) {
     Objects.requireNonNull(mMarkdownStyle, "mMarkdownStyle is null");
 
@@ -73,12 +55,17 @@ public class MarkdownUtils {
 
     String input = ssb.toString();
     String output;
-    if (input.equals(mPrevInput)) {
+    if (input.equals(mPrevInput) && mParserId == mPrevParserId) {
       output = mPrevOutput;
     } else {
-      output = parseMarkdown(input);
+      try {
+        output = nativeParseMarkdown(input, mParserId);
+      } catch (Exception e) {
+        output = "[]";
+      }
       mPrevInput = input;
       mPrevOutput = output;
+      mPrevParserId = mParserId;
     }
 
     try {
@@ -96,7 +83,7 @@ public class MarkdownUtils {
         applyRange(ssb, type, start, end, depth);
       }
     } catch (JSONException e) {
-      // Do nothing
+      RNLog.w(mReactContext, "[react-native-live-markdown] Incorrect schema of worklet parser output: " + e.getMessage());
     }
   }
 

package/android/src/main/new_arch/MarkdownCommitHook.cpp

@@ -135,7 +135,8 @@ RootShadowNode::Unshared MarkdownCommitHook::shadowTreeWillCommit(
 
           const auto currentDecoratorProps =
               nodes.decorator->getProps()->rawProps["markdownStyle"];
-
+          const auto currentParserId =
+              nodes.decorator->getProps()->rawProps["parserId"].asInt();
           // if it's the first time we encounter this particular input or the
           // markdown styles have changed (in which case we need to reset the
           // cpp cache, to which we don't have a direct access), create a new
@@ -143,13 +144,14 @@ RootShadowNode::Unshared MarkdownCommitHook::shadowTreeWillCommit(
           // for this particular input
           if (!textLayoutManagers_.contains(nodes.textInput->getTag()) ||
               previousDecoratorProps_[nodes.textInput->getTag()] !=
-                  currentDecoratorProps) {
+                  currentDecoratorProps ||
+              previousParserId_[nodes.textInput->getTag()] != currentParserId) {
             static auto customUIManagerClass = jni::findClassStatic(
                 "com/expensify/livemarkdown/CustomFabricUIManager");
             static auto createCustomUIManager =
                 customUIManagerClass
                     ->getStaticMethod<JFabricUIManager::javaobject(
-                        JFabricUIManager::javaobject, ReadableMap::javaobject)>(
+                        JFabricUIManager::javaobject, ReadableMap::javaobject, int)>(
                         "create");
 
             auto const decoratorPropsRNM =
@@ -160,7 +162,7 @@ RootShadowNode::Unshared MarkdownCommitHook::shadowTreeWillCommit(
 
             const auto customUIManager = jni::make_global(createCustomUIManager(
                 customUIManagerClass, fabricUIManager_.get(),
-                decoratorPropsRM.get()));
+                decoratorPropsRM.get(), currentParserId));
             const ContextContainer::Shared contextContainer =
                 std::make_shared<ContextContainer const>();
             contextContainer->insert("FabricUIManager", customUIManager);
@@ -168,6 +170,7 @@ RootShadowNode::Unshared MarkdownCommitHook::shadowTreeWillCommit(
                 std::make_shared<TextLayoutManager>(contextContainer);
             previousDecoratorProps_[nodes.textInput->getTag()] =
                 currentDecoratorProps;
+            previousParserId_[nodes.textInput->getTag()] = currentParserId;
           }
 
           // we need to replace the TextLayoutManager every time to make sure

package/android/src/main/new_arch/MarkdownCommitHook.h

@@ -47,6 +47,8 @@ private:
       textLayoutManagers_;
   std::unordered_map<facebook::react::Tag, folly::dynamic>
       previousDecoratorProps_;
+  std::unordered_map<facebook::react::Tag, int>
+      previousParserId_;
   std::unordered_map<facebook::react::Tag, int64_t>
       previousEventCount_;
 };

package/android/src/newarch/LiveMarkdownModuleSpec.java

@@ -0,0 +1,9 @@
+package com.expensify.livemarkdown;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+
+abstract class LiveMarkdownModuleSpec extends NativeLiveMarkdownModuleSpec {
+  LiveMarkdownModuleSpec(ReactApplicationContext context) {
+    super(context);
+  }
+}

package/android/src/oldarch/LiveMarkdownModuleSpec.java

@@ -0,0 +1,12 @@
+package com.expensify.livemarkdown;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+
+abstract class LiveMarkdownModuleSpec extends ReactContextBaseJavaModule {
+  LiveMarkdownModuleSpec(ReactApplicationContext context) {
+    super(context);
+  }
+
+  public abstract boolean install();
+}

package/android/src/oldarch/MarkdownTextInputDecoratorViewManagerSpec.java

@@ -7,4 +7,5 @@ import com.facebook.react.uimanager.SimpleViewManager;
 
 public abstract class MarkdownTextInputDecoratorViewManagerSpec<T extends View> extends SimpleViewManager<T> {
   public abstract void setMarkdownStyle(T view, ReadableMap value);
+  public abstract void setParserId(T view, int value);
 }

package/apple/LiveMarkdownModule.h

@@ -0,0 +1,16 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <RNLiveMarkdownSpec/RNLiveMarkdownSpec.h>
+#else
+#import <React/RCTBridgeModule.h>
+#endif // RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTEventEmitter.h>
+
+// Without inheriting after RCTEventEmitter we don't get access to bridge
+@interface LiveMarkdownModule : RCTEventEmitter
+#ifdef RCT_NEW_ARCH_ENABLED
+                                <NativeLiveMarkdownModuleSpec>
+#else
+                                <RCTBridgeModule>
+#endif // RCT_NEW_ARCH_ENABLED
+@end