@expensify/react-native-live-markdown 0.1.255 → 0.1.257

package/RNLiveMarkdown.podspec

@@ -34,6 +34,8 @@ Pod::Spec.new do |s|
     ].join(' '),
   }
 
+  s.pod_target_xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/cpp\"" }
+
   install_modules_dependencies(s)
 
   if ENV['USE_FRAMEWORKS'] != nil

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

@@ -1,9 +1,6 @@
 package com.expensify.livemarkdown;
 
 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;
@@ -13,19 +10,12 @@ public class LiveMarkdownModule extends NativeLiveMarkdownModuleSpec {
     SoLoader.loadLibrary("livemarkdown");
   }
 
-  private NativeProxy mNativeProxy;
   public LiveMarkdownModule(ReactApplicationContext reactContext) {
     super(reactContext);
-
-    this.mNativeProxy = new NativeProxy();
   }
 
   @Override
   public boolean install() {
-    FabricUIManager uiManager =
-      (FabricUIManager) UIManagerHelper.getUIManager(getReactApplicationContext(), UIManagerType.FABRIC);
-    mNativeProxy.createCommitHook(uiManager);
-
     long jsiRuntime = Objects.requireNonNull(getReactApplicationContext().getJavaScriptContextHolder(), "[react-native-live-markdown] JavaScriptContextHolder is null").get();
     injectJSIBindings(jsiRuntime);
 

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

@@ -1,34 +1,22 @@
 package com.expensify.livemarkdown;
 
-import androidx.annotation.Nullable;
-
 import android.content.Context;
 import android.text.Editable;
 import android.text.SpannableStringBuilder;
 import android.text.TextWatcher;
-import android.util.AttributeSet;
 
 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;
+import com.facebook.react.views.view.ReactViewGroup;
 
-public class MarkdownTextInputDecoratorView extends View {
+public class MarkdownTextInputDecoratorView extends ReactViewGroup {
 
   public MarkdownTextInputDecoratorView(Context context) {
     super(context);
   }
 
-  public MarkdownTextInputDecoratorView(Context context, @Nullable AttributeSet attrs) {
-    super(context, attrs);
-  }
-
-  public MarkdownTextInputDecoratorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
-    super(context, attrs, defStyleAttr);
-  }
-
   private MarkdownStyle mMarkdownStyle;
 
   private int mParserId;
@@ -43,23 +31,12 @@ public class MarkdownTextInputDecoratorView extends View {
   protected void onAttachedToWindow() {
     super.onAttachedToWindow();
 
-    View previousSibling = null;
-    final ViewParent parent = this.getParent();
-    if (parent instanceof ViewGroup) {
-      final ViewGroup viewGroup = (ViewGroup) parent;
-      for (int i = 1; i < viewGroup.getChildCount(); i++) {
-        if (viewGroup.getChildAt(i) == this) {
-          previousSibling = viewGroup.getChildAt(i - 1);
-          break;
-        }
-      }
-    }
-
-    if (previousSibling instanceof ReactEditText) {
+    View child = getChildAt(0);
+    if (child instanceof ReactEditText) {
       mMarkdownUtils = new MarkdownUtils((ReactContext) getContext());
       mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
       mMarkdownUtils.setParserId(mParserId);
-      mReactEditText = (ReactEditText) previousSibling;
+      mReactEditText = (ReactEditText) child;
       mTextWatcher = new MarkdownTextWatcher(mMarkdownUtils);
       mReactEditText.addTextChangedListener(mTextWatcher);
       applyNewStyles();

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

@@ -1,15 +1,15 @@
 package com.expensify.livemarkdown;
 
-import android.view.View;
+import android.view.ViewGroup;
 
 import androidx.annotation.Nullable;
 
-import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.ViewManagerDelegate;
 import com.facebook.react.viewmanagers.MarkdownTextInputDecoratorViewManagerDelegate;
 import com.facebook.react.viewmanagers.MarkdownTextInputDecoratorViewManagerInterface;
 
-public abstract class MarkdownTextInputDecoratorViewManagerSpec<T extends View> extends SimpleViewManager<T> implements MarkdownTextInputDecoratorViewManagerInterface<T> {
+public abstract class MarkdownTextInputDecoratorViewManagerSpec<T extends ViewGroup> extends ViewGroupManager<T> implements MarkdownTextInputDecoratorViewManagerInterface<T> {
   private final ViewManagerDelegate<T> mDelegate;
 
   public MarkdownTextInputDecoratorViewManagerSpec() {

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

@@ -11,7 +11,7 @@ set(LIB_CUSTOM_SOURCES_DIR ${LIB_CPP_DIR}/react/renderer/components/${LIB_LITERA
 set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/build/generated/source/codegen/jni)
 set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})
 
-file(GLOB LIB_MODULE_SRCS CONFIGURE_DEPENDS *.cpp)
+file(GLOB LIB_MODULE_SRCS CONFIGURE_DEPENDS *.cpp react/renderer/components/RNLiveMarkdownSpec/*.cpp)
 file(GLOB LIB_CUSTOM_SRCS CONFIGURE_DEPENDS ${LIB_CUSTOM_SOURCES_DIR}/*.cpp)
 file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)
 
@@ -27,6 +27,7 @@ target_include_directories(
         ${LIB_TARGET_NAME}
         PUBLIC
         .
+        ./react/renderer/components/RNLiveMarkdownSpec
         ${LIB_ANDROID_GENERATED_JNI_DIR}
         ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
         ${LIB_CPP_DIR}

package/android/src/main/new_arch/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorShadowNode.cpp

@@ -0,0 +1,135 @@
+#include "MarkdownTextInputDecoratorShadowNode.h"
+
+#include <fbjni/fbjni.h>
+#include <react/fabric/JFabricUIManager.h>
+#include <react/jni/ReadableNativeMap.h>
+#include <react/renderer/components/androidtextinput/AndroidTextInputState.h>
+#include <react/renderer/components/view/conversions.h>
+#include <react/renderer/core/ComponentDescriptor.h>
+#include <yoga/Yoga.h>
+
+namespace facebook {
+namespace react {
+
+extern const char MarkdownTextInputDecoratorViewComponentName[] =
+    "MarkdownTextInputDecoratorView";
+
+void MarkdownTextInputDecoratorShadowNode::initialize() {
+  // Setting display: contents style results in ForceFlattenView trait being set
+  // on the shadow node. This trait causes the node not to have a host view. By
+  // removing the trait, it's possible to force RN to create a host view, layout
+  // of which can then be customized.
+  ShadowNode::traits_.unset(ShadowNodeTraits::ForceFlattenView);
+}
+
+void MarkdownTextInputDecoratorShadowNode::createCustomContextContainer() {
+  static const auto customFabricUIManagerClass = jni::findClassStatic(
+      "com/expensify/livemarkdown/CustomFabricUIManager");
+  static const auto createMethod =
+      customFabricUIManagerClass
+          ->getStaticMethod<JFabricUIManager::javaobject(
+              JFabricUIManager::javaobject, ReadableMap::javaobject, int)>(
+              "create");
+
+  const auto &rawProps = this->getProps()->rawProps;
+  const auto &markdownStyle = rawProps["markdownStyle"];
+  const auto parserId = rawProps["parserId"].asInt();
+
+  const auto decoratorPropsRNM =
+      ReadableNativeMap::newObjectCxxArgs(markdownStyle);
+  const auto decoratorPropsRM =
+      jni::make_local(reinterpret_cast<ReadableMap::javaobject>(
+                          decoratorPropsRNM.get()));
+
+  const auto &fabricUIManager =
+      this->getContextContainer()->at<JFabricUIManager::javaobject>("FabricUIManager");
+
+  const auto customFabricUIManager = jni::make_global(createMethod(
+      customFabricUIManagerClass, fabricUIManager,
+      decoratorPropsRM.get(), parserId));
+  const auto contextContainer =
+      std::make_shared<ContextContainer const>();
+  contextContainer->insert("FabricUIManager", customFabricUIManager);
+
+  customContextContainer_ = contextContainer;
+  previousMarkdownStyle_ = markdownStyle;
+  previousParserId_ = parserId;
+}
+
+void MarkdownTextInputDecoratorShadowNode::updateCustomContextContainerIfNeeded() {
+  const auto markdownStyle =
+      this->getProps()->rawProps["markdownStyle"];
+  const auto parserId =
+      this->getProps()->rawProps["parserId"].asInt();
+
+  if (parserId != previousParserId_ || markdownStyle != previousMarkdownStyle_) {
+    createCustomContextContainer();
+  }
+}
+
+void MarkdownTextInputDecoratorShadowNode::overwriteTextLayoutManager() {
+  const auto &children = getChildren();
+  if (children.empty()) {
+    return;
+  }
+  react_native_assert(
+      children.size() == 1 &&
+      "MarkdownTextInputDecoratorView received more than one child");
+
+  const auto child = std::dynamic_pointer_cast<const AndroidTextInputShadowNode>(
+      children[0]);
+
+  react_native_assert(
+      child != nullptr &&
+      "MarkdownTextInputDecoratorView received child other than a TextInput");
+  child->ensureUnsealed();
+
+  const auto mutableChild = std::const_pointer_cast<AndroidTextInputShadowNode>(child);
+  mutableChild->setTextLayoutManager(
+      std::make_shared<TextLayoutManager>(customContextContainer_));
+}
+
+void MarkdownTextInputDecoratorShadowNode::appendChild(
+    const ShadowNode::Shared &child) {
+  YogaLayoutableShadowNode::appendChild(child);
+
+  overwriteTextLayoutManager();
+}
+
+void MarkdownTextInputDecoratorShadowNode::replaceChild(
+    const ShadowNode &oldChild, const ShadowNode::Shared &newChild,
+    size_t suggestedIndex) {
+  YogaLayoutableShadowNode::replaceChild(oldChild, newChild, suggestedIndex);
+
+  overwriteTextLayoutManager();
+}
+
+void MarkdownTextInputDecoratorShadowNode::layout(LayoutContext layoutContext) {
+  YogaLayoutableShadowNode::layout(layoutContext);
+
+  const auto &children = getChildren();
+  react_native_assert(
+      children.size() == 1 &&
+      "MarkdownTextInputDecoratorView didn't receive exactly one child");
+
+  auto child = std::static_pointer_cast<const YogaLayoutableShadowNode>(getChildren()[0]);
+  child->ensureUnsealed();
+  auto mutableChild = std::const_pointer_cast<YogaLayoutableShadowNode>(child);
+
+  // TODO: this may not be the correct way to do this
+  // Since nodes with display: contents are skipped during layout, they have
+  // zero-layout. To properly display the view, assign the layout metrics from
+  // the child (text input, which was calculated by Yoga) to the decorator view.
+  auto childMetrics = child->getLayoutMetrics();
+  setLayoutMetrics(childMetrics); // makes a copy
+
+  // Then, it's also needed to update the metrics on the child as the position
+  // is relative to the parent, which was just moved above. By zeroing the
+  // origin, the child is effectively moved to the same position it was before
+  // the manipulation here.
+  childMetrics.frame.origin = Point{};
+  mutableChild->setLayoutMetrics(childMetrics);
+}
+
+} // namespace react
+} // namespace facebook

package/android/src/main/new_arch/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorShadowNode.h

@@ -0,0 +1,75 @@
+#pragma once
+
+#include <react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorState.h>
+#include <react/renderer/components/RNLiveMarkdownSpec/EventEmitters.h>
+#include <react/renderer/components/RNLiveMarkdownSpec/Props.h>
+#include <react/renderer/components/androidtextinput/AndroidTextInputShadowNode.h>
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char MarkdownTextInputDecoratorViewComponentName[];
+
+class JSI_EXPORT MarkdownTextInputDecoratorShadowNode final
+    : public ConcreteViewShadowNode<MarkdownTextInputDecoratorViewComponentName,
+        MarkdownTextInputDecoratorViewProps,
+        MarkdownTextInputDecoratorViewEventEmitter,
+        MarkdownTextInputDecoratorState> {
+public:
+  MarkdownTextInputDecoratorShadowNode(ShadowNodeFragment const &fragment,
+                                       ShadowNodeFamily::Shared const &family,
+                                       ShadowNodeTraits traits)
+      : ConcreteViewShadowNode(fragment, family, traits) {
+    initialize();
+    createCustomContextContainer();
+
+    if (fragment.children) {
+      overwriteTextLayoutManager();
+    }
+  }
+
+  MarkdownTextInputDecoratorShadowNode(ShadowNode const &sourceShadowNode,
+                                       ShadowNodeFragment const &fragment)
+      : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+    initialize();
+
+    const auto &sourceDecorator = static_cast<const MarkdownTextInputDecoratorShadowNode &>(sourceShadowNode);
+
+    customContextContainer_ = sourceDecorator.customContextContainer_;
+    previousMarkdownStyle_ = sourceDecorator.previousMarkdownStyle_;
+    previousParserId_ = sourceDecorator.previousParserId_;
+
+    updateCustomContextContainerIfNeeded();
+
+    if (fragment.children) {
+      overwriteTextLayoutManager();
+    }
+  }
+
+  void appendChild(const ShadowNode::Shared &child) override;
+
+  void replaceChild(const ShadowNode &oldChild,
+                    const ShadowNode::Shared &newChild,
+                    size_t suggestedIndex = SIZE_MAX) override;
+
+  void layout(LayoutContext layoutContext) override;
+
+private:
+  ContextContainer::Shared customContextContainer_;
+  folly::dynamic previousMarkdownStyle_;
+  int previousParserId_;
+
+  void initialize();
+
+  void overwriteTextLayoutManager();
+
+  void createCustomContextContainer();
+
+  void updateCustomContextContainerIfNeeded();
+};
+
+} // namespace react
+} // namespace facebook

package/apple/LiveMarkdownModule.mm

@@ -1,25 +1,13 @@
 #import "LiveMarkdownModule.h"
 
 #import <RNLiveMarkdown/RuntimeDecorator.h>
-#import <RNLiveMarkdown/MarkdownCommitHook.h>
-
 #import <React/RCTBridge+Private.h>
-#import <React/RCTScheduler.h>
-#import <React/RCTSurfacePresenter.h>
-
 #import <jsi/jsi.h>
 
 using namespace facebook;
 using namespace expensify::livemarkdown;
 
-// A turbomodule used to register the commit hook
-// I think this is the easiest way to access the UIManager, which we need to
-// actually register the hook
-
-@implementation LiveMarkdownModule {
-  std::shared_ptr<MarkdownCommitHook> commitHook_;
-  __weak RCTSurfacePresenter *surfacePresenter_;
-}
+@implementation LiveMarkdownModule
 
 RCT_EXPORT_MODULE()
 
@@ -28,53 +16,13 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install)
   RCTCxxBridge *cxxBridge = (RCTCxxBridge *)self.bridge;
   jsi::Runtime &rt = *(jsi::Runtime *)cxxBridge.runtime;
   expensify::livemarkdown::injectJSIBindings(rt);
-
-  RCTScheduler *scheduler = [surfacePresenter_ scheduler];
-  commitHook_ = std::make_shared<MarkdownCommitHook>(scheduler.uiManager);
-
   return @(1);
 }
 
-- (void)handleJavaScriptDidLoadNotification:(NSNotification *)notification
-{
-  surfacePresenter_ = self.bridge.surfacePresenter;
-}
-
-- (void)setBridge:(RCTBridge *)bridge
-{
-  [super setBridge:bridge];
-
-  [[NSNotificationCenter defaultCenter] addObserver:self
-                                           selector:@selector(handleJavaScriptDidLoadNotification:)
-                                               name:RCTJavaScriptDidLoadNotification
-                                             object:nil];
-
-  // only within the first loading `self.bridge.surfacePresenter` exists
-  // during the reload `self.bridge.surfacePresenter` is null
-  if (self.bridge.surfacePresenter) {
-    surfacePresenter_ = self.bridge.surfacePresenter;
-  }
-}
-
-/*
- * Taken from RCTNativeAnimatedTurboModule:
- * This selector is invoked via BridgelessTurboModuleSetup.
- */
-- (void)setSurfacePresenter:(id<RCTSurfacePresenterStub>)surfacePresenter
-{
-  surfacePresenter_ = surfacePresenter;
-}
-
 - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
     (const facebook::react::ObjCTurboModule::InitParams &)params {
   return std::make_shared<facebook::react::NativeLiveMarkdownModuleSpecJSI>(
       params);
 }
 
-- (void)invalidate {
-  MarkdownShadowFamilyRegistry::reset();
-  [[NSNotificationCenter defaultCenter] removeObserver:self];
-  [super invalidate];
-}
-
 @end

package/apple/MarkdownParser.mm

@@ -23,7 +23,7 @@
     try {
       markdownWorklet = expensify::livemarkdown::getMarkdownWorklet([parserId intValue]);
     } catch (const std::out_of_range &error) {
-      _prevText = text;
+      _prevText = [NSString stringWithString:text];
       _prevParserId = parserId;
       _prevMarkdownRanges = @[];
       return _prevMarkdownRanges;
@@ -36,7 +36,7 @@
       output = markdownRuntime->runGuarded(markdownWorklet, input);
     } catch (const jsi::JSError &error) {
       // Skip formatting, runGuarded will show the error in LogBox
-      _prevText = text;
+      _prevText = [NSString stringWithString:text];
       _prevParserId = parserId;
       _prevMarkdownRanges = @[];
       return _prevMarkdownRanges;
@@ -62,13 +62,13 @@
       }
     } catch (const jsi::JSError &error) {
       RCTLogWarn(@"[react-native-live-markdown] Incorrect schema of worklet parser output: %s", error.getMessage().c_str());
-      _prevText = text;
+      _prevText = [NSString stringWithString:text];
       _prevParserId = parserId;
       _prevMarkdownRanges = @[];
       return _prevMarkdownRanges;
     }
 
-    _prevText = text;
+    _prevText = [NSString stringWithString:text];
     _prevParserId = parserId;
     _prevMarkdownRanges = markdownRanges;
     return _prevMarkdownRanges;

package/apple/MarkdownTextInputDecoratorComponentView.mm

@@ -5,7 +5,6 @@
 
 #import <RNLiveMarkdown/MarkdownBackedTextInputDelegate.h>
 #import <RNLiveMarkdown/MarkdownLayoutManager.h>
-#import <RNLiveMarkdown/MarkdownShadowFamilyRegistry.h>
 #import <RNLiveMarkdown/MarkdownTextInputDecoratorComponentView.h>
 #import <RNLiveMarkdown/MarkdownTextInputDecoratorViewComponentDescriptor.h>
 #import <RNLiveMarkdown/RCTBackedTextFieldDelegateAdapter+Markdown.h>
@@ -26,7 +25,6 @@ using namespace facebook::react;
   __weak UIView<RCTBackedTextInputViewProtocol> *_backedTextInputView;
   __weak RCTBackedTextFieldDelegateAdapter *_adapter;
   __weak RCTUITextView *_textView;
-  ShadowNodeFamily::Shared _decoratorFamily;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -50,44 +48,13 @@ using namespace facebook::react;
   return self;
 }
 
-- (void)updateState:(const facebook::react::State::Shared &)state oldState:(const facebook::react::State::Shared &)oldState
+- (void)didAddSubview:(UIView *)subview
 {
-    auto data = std::static_pointer_cast<MarkdownTextInputDecoratorShadowNode::ConcreteState const>(state)->getData();
-
-    if (_decoratorFamily != nullptr) {
-        MarkdownShadowFamilyRegistry::unregisterFamilyForUpdates(_decoratorFamily);
-    }
-
-    _decoratorFamily = data.decoratorFamily;
-    MarkdownShadowFamilyRegistry::registerFamilyForUpdates(_decoratorFamily);
-}
-
-- (void)willMoveToSuperview:(UIView *)newSuperview {
-    if (newSuperview == nil) {
-        MarkdownShadowFamilyRegistry::unregisterFamilyForUpdates(_decoratorFamily);
-      _decoratorFamily = nullptr;
-    }
-
-    [super willMoveToSuperview:newSuperview];
-}
-
-- (void)didMoveToWindow {
-  if (self.superview == nil) {
-    return;
-  }
-
-  NSArray *viewsArray = self.superview.subviews;
-  NSUInteger currentIndex = [viewsArray indexOfObject:self];
-
-  react_native_assert(currentIndex != 0 && currentIndex != NSNotFound && "Error while finding current component.");
-  UIView *view = [viewsArray objectAtIndex:currentIndex - 1];
-
-  react_native_assert([view isKindOfClass:[RCTTextInputComponentView class]] && "Previous sibling component is not an instance of RCTTextInputComponentView.");
-  _textInput = (RCTTextInputComponentView *)view;
+  react_native_assert([subview isKindOfClass:[RCTTextInputComponentView class]] && "Child component of MarkdownTextInputDecoratorComponentView is not an instance of RCTTextInputComponentView.");
+  _textInput = (RCTTextInputComponentView *)subview;
   _backedTextInputView = [_textInput valueForKey:@"_backedTextInputView"];
 
   _markdownUtils = [[RCTMarkdownUtils alloc] init];
-  react_native_assert(_markdownStyle != nil);
   [_markdownUtils setMarkdownStyle:_markdownStyle];
   [_markdownUtils setParserId:_parserId];
 
@@ -121,6 +88,9 @@ using namespace facebook::react;
 
 - (void)willMoveToWindow:(UIWindow *)newWindow
 {
+  if (newWindow != nil) {
+    return;
+  }
   if (_textInput != nil) {
     [_textInput setMarkdownUtils:nil];
   }

package/apple/MarkdownTextInputDecoratorShadowNode.h

@@ -0,0 +1,67 @@
+#pragma once
+
+#include <react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorState.h>
+#include <react/renderer/components/RNLiveMarkdownSpec/EventEmitters.h>
+#include <react/renderer/components/RNLiveMarkdownSpec/Props.h>
+#include <react/renderer/components/iostextinput/TextInputShadowNode.h>
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char MarkdownTextInputDecoratorViewComponentName[];
+
+class JSI_EXPORT MarkdownTextInputDecoratorShadowNode final
+    : public ConcreteViewShadowNode<MarkdownTextInputDecoratorViewComponentName,
+                                    MarkdownTextInputDecoratorViewProps,
+                                    MarkdownTextInputDecoratorViewEventEmitter,
+                                    MarkdownTextInputDecoratorState> {
+public:
+  MarkdownTextInputDecoratorShadowNode(ShadowNodeFragment const &fragment,
+                                       ShadowNodeFamily::Shared const &family,
+                                       ShadowNodeTraits traits)
+      : ConcreteViewShadowNode(fragment, family, traits) {
+    initialize();
+
+    if (fragment.children) {
+      overwriteMeasureCallbackConnector();
+    }
+  }
+
+  MarkdownTextInputDecoratorShadowNode(ShadowNode const &sourceShadowNode,
+                                       ShadowNodeFragment const &fragment)
+      : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+    initialize();
+
+    if (fragment.children) {
+      overwriteMeasureCallbackConnector();
+    }
+  }
+
+  void appendChild(const ShadowNode::Shared &child) override;
+  void replaceChild(const ShadowNode &oldChild,
+                    const ShadowNode::Shared &newChild,
+                    size_t suggestedIndex = SIZE_MAX) override;
+  void layout(LayoutContext layoutContext) override;
+  Size
+  measureContent(const LayoutContext &layoutContext,
+                 const LayoutConstraints &layoutConstraints) const override;
+
+private:
+  void initialize();
+  void overwriteMeasureCallbackConnector();
+  void applyMarkdownFormattingToTextInputState(std::shared_ptr<TextInputShadowNode> node,
+                     const LayoutContext &layoutContext) const;
+  static YGSize yogaNodeMeasureCallbackConnector(YGNodeConstRef yogaNode,
+                                                 float width,
+                                                 YGMeasureMode widthMode,
+                                                 float height,
+                                                 YGMeasureMode heightMode);
+  static YogaLayoutableShadowNode &
+  shadowNodeFromContext(YGNodeConstRef yogaNode);
+};
+
+} // namespace react
+} // namespace facebook