react-native-marcus 0.1.0

package/apple/MarcusTextInputDecoratorComponentView.mm

@@ -0,0 +1,121 @@
+#import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTTextInputComponentView.h>
+#import <react/debug/react_native_assert.h>
+#import <react/renderer/components/RNMarcusSpec/Props.h>
+
+#import <RNMarcus/MarkdownSwiftInterop.h>
+#import <RNMarcus/MarcusTextInputDecoratorComponentView.h>
+#import <RNMarcus/MarcusTextInputDecoratorViewComponentDescriptor.h>
+#import <RNMarcus/RCTMarcusStyle+Codegen.h>
+#import <RNMarcus/RCTTextInput+AdaptiveImageGlyph.h>
+
+using namespace facebook::react;
+
+// Thin Objective-C++ shell around MarkdownDecorator.
+//
+// Only the parts that RCTComponentViewProtocol forces into Objective-C++ live
+// here -- the component descriptor, the C++ props update, and view recycling.
+// Everything else is delegated to Swift.
+@implementation MarcusTextInputDecoratorComponentView {
+  MarkdownDecorator *_decorator;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<
+    MarcusTextInputDecoratorViewComponentDescriptor>();
+}
+
+// Needed because of this: https://github.com/facebook/react-native/pull/37274
++ (void)load {
+  [super load];
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps =
+      std::make_shared<const MarcusTextInputDecoratorViewProps>();
+    _props = defaultProps;
+    _decorator = [MarkdownDecorator new];
+  }
+
+  return self;
+}
+
+- (void)didAddSubview:(UIView *)subview {
+  [super didAddSubview:subview];
+
+  react_native_assert(!_decorator.isAttached && "MarcusTextInputDecoratorComponentView tried to add "
+                                                "TextInput observers while they were attached");
+  react_native_assert(
+    [subview isKindOfClass:[RCTTextInputComponentView class]] &&
+    "Child component of MarcusTextInputDecoratorComponentView is not an "
+    "instance of RCTTextInputComponentView."
+  );
+
+  [_decorator attachTo:subview];
+}
+
+- (void)willRemoveSubview:(UIView *)subview {
+  [_decorator detach];
+  [super willRemoveSubview:subview];
+}
+
+- (void)reattachTextInputObservers {
+  // React Native replaces its backed text input view in place when `multiline`
+  // changes, which never touches this view's own subviews. Called from the
+  // RCTTextInputComponentView swizzle so the observers follow the new view
+  // instead of staying bound to the discarded one.
+  UIView *textInputComponentView = self.subviews.firstObject;
+  if (textInputComponentView == nil) {
+    return;
+  }
+
+  [_decorator attachTo:textInputComponentView];
+}
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps {
+  const auto &oldViewProps =
+    *std::static_pointer_cast<MarcusTextInputDecoratorViewProps const>(
+      _props
+    );
+  const auto &newViewProps =
+    *std::static_pointer_cast<MarcusTextInputDecoratorViewProps const>(
+      props
+    );
+
+  if (oldViewProps.parserId != newViewProps.parserId) {
+    _decorator.parserId = @(newViewProps.parserId);
+  }
+
+  // Codegen only emits operator== for the markdownStyle struct under
+  // RN_SERIALIZABLE_STATE, which is not defined on iOS, so there is no cheap
+  // way to tell whether the style actually changed. Rebuilding it and
+  // re-formatting on every props update is wasteful -- Fabric emits one
+  // whenever the props object is recreated -- but hand-written equality over
+  // ~27 fields would rot silently the moment a style prop is added.
+  _decorator.markdownStyle =
+    [[RCTMarcusStyle alloc] initWithStruct:newViewProps.markdownStyle];
+
+  [_decorator applyNewStyles];
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)prepareForRecycle {
+  react_native_assert(!_decorator.isAttached && "MarcusTextInputDecoratorComponentView was being "
+                                                "recycled with TextInput observers still attached");
+  [super prepareForRecycle];
+
+  static const auto defaultProps =
+    std::make_shared<const MarcusTextInputDecoratorViewProps>();
+  _props = defaultProps;
+  [_decorator reset];
+}
+
+Class<RCTComponentViewProtocol>
+MarcusTextInputDecoratorViewCls(void) {
+  return MarcusTextInputDecoratorComponentView.class;
+}
+
+@end

package/apple/MarcusTextInputDecoratorShadowNode.cpp

@@ -0,0 +1,251 @@
+#include "MarcusTextInputDecoratorShadowNode.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 MarcusTextInputDecoratorViewComponentName[] =
+  "MarcusTextInputDecoratorView";
+
+MarcusTextInputDecoratorShadowNode::MarcusTextInputDecoratorShadowNode(
+  ShadowNodeFragment const &fragment,
+  ShadowNodeFamily::Shared const &family,
+  ShadowNodeTraits traits
+)
+    : ConcreteViewShadowNode(fragment, family, traits) {
+  initialize();
+  makeChildNodeMutable();
+
+  if (fragment.children) {
+    overwriteMeasureCallbackConnector();
+  }
+}
+
+MarcusTextInputDecoratorShadowNode::MarcusTextInputDecoratorShadowNode(
+  ShadowNode const &sourceShadowNode,
+  ShadowNodeFragment const &fragment
+)
+    : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+  // Carry the re-measure flag over from the node being cloned. It has to be set
+  // before makeChildNodeMutable() below, which is what reads it.
+  const auto &source =
+    static_cast<const MarcusTextInputDecoratorShadowNode &>(sourceShadowNode);
+  needsRemeasure_ = source.needsRemeasure_;
+
+  initialize();
+  makeChildNodeMutable();
+
+  if (fragment.children) {
+    overwriteMeasureCallbackConnector();
+  }
+}
+
+void
+MarcusTextInputDecoratorShadowNode::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
+MarcusTextInputDecoratorShadowNode::makeChildNodeMutable() {
+  // When the decorator is cloned and has a child node, the child node should be
+  // cloned as well to ensure it is mutable.
+  const auto &children = getChildren();
+  if (!children.empty()) {
+    react_native_assert(
+      children.size() == 1 &&
+      "MarcusTextInputDecoratorView received more than one child"
+    );
+
+    const auto clonedChild = children[0]->clone({});
+    replaceChild(*children[0], clonedChild);
+  }
+}
+
+void
+MarcusTextInputDecoratorShadowNode::overwriteMeasureCallbackConnector() {
+  const auto &children = getChildren();
+  if (children.empty()) {
+    return;
+  }
+  react_native_assert(
+    children.size() == 1 &&
+    "MarcusTextInputDecoratorView received more than one child"
+  );
+
+  const auto child = std::dynamic_pointer_cast<const TextInputShadowNode>(children[0]);
+  react_native_assert(
+    child != nullptr &&
+    "MarcusTextInputDecoratorView received child other than a TextInput"
+  );
+  child->ensureUnsealed();
+
+  // This is obviously not correct, but since both MarcusTextInputDecoratorShadowNode and
+  // TextInputShadowNode inherit from YogaLayoutableShadowNode by doing this cast it's
+  // possible to access protected members from TextInputShadowNode like yogaNode_.
+  // As only things from YogaLayoutableShadowNode are accessed, it should be safe,
+  // since the vtable should be the same between them.
+  const auto &nodeWithAccessibleYogaNode =
+    std::reinterpret_pointer_cast<const MarcusTextInputDecoratorShadowNode>(child);
+
+  // decorator node cannot have a measure function since it's not a leaf node
+  // but we can redirect measuring of the child input to call measureContent
+  // on the decorator
+  const auto &yogaNode = &nodeWithAccessibleYogaNode->yogaNode_;
+  YGNodeSetMeasureFunc(yogaNode, yogaNodeMeasureCallbackConnector);
+
+  // If a background parse finished since the last layout, the size Yoga has for
+  // the child was measured from unformatted text. Nothing dirties this part of
+  // the tree on its own -- Yoga never measures the decorator -- so the stale
+  // height would stick until something else changed the layout.
+  //
+  // Both nodes are marked by hand rather than via YGNodeMarkDirty(): the child
+  // is usually already dirty from completeClone(), which stops the flag
+  // propagating upwards and would leave the decorator clean. Parents pick it up
+  // themselves when updateYogaChildren() runs.
+  if (needsRemeasure_ != nullptr && needsRemeasure_->exchange(false)) {
+    yogaNode->setDirty(true);
+    yogaNode_.setDirty(true);
+  }
+}
+
+void
+MarcusTextInputDecoratorShadowNode::appendChild(
+  const std::shared_ptr<const ShadowNode> &child
+) {
+  YogaLayoutableShadowNode::appendChild(child);
+
+  overwriteMeasureCallbackConnector();
+}
+
+void
+MarcusTextInputDecoratorShadowNode::replaceChild(
+  const ShadowNode &oldChild, const std::shared_ptr<const ShadowNode> &newChild, size_t suggestedIndex
+) {
+  YogaLayoutableShadowNode::replaceChild(oldChild, newChild, suggestedIndex);
+
+  overwriteMeasureCallbackConnector();
+};
+
+Size
+MarcusTextInputDecoratorShadowNode::measureContent(
+  const LayoutContext &layoutContext,
+  const LayoutConstraints &layoutConstraints
+) const {
+  const auto &children = getChildren();
+  react_native_assert(
+    children.size() == 1 &&
+    "MarcusTextInputDecoratorView received wrong number of children"
+  );
+
+  const auto child =
+    std::static_pointer_cast<const TextInputShadowNode>(children[0]);
+
+  child->ensureUnsealed();
+
+  // apply markdown formatting before measuring the child
+  const auto &mutableChild =
+    std::const_pointer_cast<TextInputShadowNode>(child);
+  applyMarkdownFormattingToTextInputState(mutableChild, layoutContext);
+
+  const auto childWithMeasureContentAccess =
+    std::static_pointer_cast<const YogaLayoutableShadowNode>(child);
+  return childWithMeasureContentAccess->measureContent(layoutContext, layoutConstraints);
+}
+
+void
+MarcusTextInputDecoratorShadowNode::layout(LayoutContext layoutContext) {
+  YogaLayoutableShadowNode::layout(layoutContext);
+
+  const auto &children = getChildren();
+  react_native_assert(
+    children.size() == 1 &&
+    "MarcusTextInputDecoratorView didn't receive exactly one child"
+  );
+
+  const auto child =
+    std::static_pointer_cast<const TextInputShadowNode>(children[0]);
+
+  child->ensureUnsealed();
+
+  const auto &mutableChild =
+    std::const_pointer_cast<TextInputShadowNode>(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);
+
+  // 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);
+}
+
+// this is private in YogaLayoutableShadowNode
+YGSize
+MarcusTextInputDecoratorShadowNode::yogaNodeMeasureCallbackConnector(
+  YGNodeConstRef yogaNode, float width, YGMeasureMode widthMode, float height, YGMeasureMode heightMode
+) {
+
+  auto minimumSize = Size{0, 0};
+  auto maximumSize = Size{std::numeric_limits<Float>::infinity(), std::numeric_limits<Float>::infinity()};
+
+  switch (widthMode) {
+  case YGMeasureModeUndefined:
+    break;
+  case YGMeasureModeExactly:
+    minimumSize.width = floatFromYogaFloat(width);
+    maximumSize.width = floatFromYogaFloat(width);
+    break;
+  case YGMeasureModeAtMost:
+    maximumSize.width = floatFromYogaFloat(width);
+    break;
+  }
+
+  switch (heightMode) {
+  case YGMeasureModeUndefined:
+    break;
+  case YGMeasureModeExactly:
+    minimumSize.height = floatFromYogaFloat(height);
+    maximumSize.height = floatFromYogaFloat(height);
+    break;
+  case YGMeasureModeAtMost:
+    maximumSize.height = floatFromYogaFloat(height);
+    break;
+  }
+
+  // This is where changes begin compared to the copied code
+  const auto &decoratorYogaNode = YGNodeGetParent(const_cast<YGNodeRef>(yogaNode));
+  const auto &decoratorShadowNode = shadowNodeFromContext(decoratorYogaNode);
+
+  LayoutContext context{};
+  context.fontSizeMultiplier = fontSizeMultiplier();
+
+  const auto size = decoratorShadowNode.measureContent(context, {minimumSize, maximumSize});
+
+  return YGSize{yogaFloatFromFloat(size.width), yogaFloatFromFloat(size.height)};
+}
+
+// this is private in YogaLayoutableShadowNode
+YogaLayoutableShadowNode &
+MarcusTextInputDecoratorShadowNode::shadowNodeFromContext(
+  YGNodeConstRef yogaNode
+) {
+  return dynamic_cast<YogaLayoutableShadowNode &>(
+    *static_cast<ShadowNode *>(YGNodeGetContext(yogaNode))
+  );
+}
+
+} // namespace react
+} // namespace facebook

package/apple/MarcusTextInputDecoratorShadowNode.h

@@ -0,0 +1,65 @@
+#pragma once
+
+#include <react/renderer/components/RNMarcusSpec/EventEmitters.h>
+#include <react/renderer/components/RNMarcusSpec/MarcusTextInputDecoratorState.h>
+#include <react/renderer/components/RNMarcusSpec/Props.h>
+#include <react/renderer/components/iostextinput/TextInputShadowNode.h>
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+
+#include <atomic>
+#include <memory>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char MarcusTextInputDecoratorViewComponentName[];
+
+class JSI_EXPORT MarcusTextInputDecoratorShadowNode final
+    : public ConcreteViewShadowNode<MarcusTextInputDecoratorViewComponentName, MarcusTextInputDecoratorViewProps, MarcusTextInputDecoratorViewEventEmitter, MarcusTextInputDecoratorState> {
+public:
+  MarcusTextInputDecoratorShadowNode(ShadowNodeFragment const &fragment, ShadowNodeFamily::Shared const &family, ShadowNodeTraits traits);
+
+  MarcusTextInputDecoratorShadowNode(ShadowNode const &sourceShadowNode, ShadowNodeFragment const &fragment);
+
+  void
+  appendChild(const std::shared_ptr<const ShadowNode> &child) override;
+  void
+  replaceChild(const ShadowNode &oldChild, const std::shared_ptr<const ShadowNode> &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
+  makeChildNodeMutable();
+  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);
+
+  // Defined in the Objective-C++ half of this class; wraps
+  // RCTFontSizeMultiplier so the Yoga measure connector can stay in plain C++.
+  static Float
+  fontSizeMultiplier();
+
+  // Set from any thread when a background parse finishes. The next
+  // overwriteMeasureCallbackConnector() marks the child's Yoga node dirty so it
+  // is measured again, this time with markdown applied. Shared across clones so
+  // a parse that lands mid-layout is not lost.
+  mutable std::shared_ptr<std::atomic_bool> needsRemeasure_;
+};
+
+} // namespace react
+} // namespace facebook

package/apple/MarcusTextInputDecoratorShadowNode.mm

@@ -0,0 +1,204 @@
+// Objective-C++ half of MarcusTextInputDecoratorShadowNode.
+//
+// Everything that needs to cross into Objective-C lives here; the rest of the
+// class is plain C++ in MarcusTextInputDecoratorShadowNode.cpp. Splitting a
+// class across translation units is fine -- these are just two object files
+// that link together.
+
+#include "MarcusTextInputDecoratorShadowNode.h"
+
+#import <React/RCTUtils.h>
+#include <react/renderer/core/ConcreteState.h>
+#include <react/renderer/textlayoutmanager/RCTAttributedTextUtils.h>
+
+#include <atomic>
+#include <memory>
+
+#import "RCTMarcusStyle+Codegen.h"
+#import <RNMarcus/MarkdownSwiftInterop.h>
+
+namespace facebook {
+namespace react {
+
+namespace {
+
+using DecoratorState = ConcreteState<MarcusTextInputDecoratorState>;
+
+// Formats `string` in place.
+//
+// On the main thread only already-cached ranges are used; the parser is never
+// run there. Running it waits on the markdown runtime, and on a Yoga measure
+// pass that wait can outlast the watchdog
+// (Expensify/react-native-live-markdown#772). On a cache miss the text is left
+// unformatted for this pass and parsed in the background instead, then
+// `needsRemeasure` and a state update ask for another measure so the size
+// measured from unformatted text -- wrong for h1, code fonts, blockquote
+// indents and emoji -- does not stick.
+//
+// This is rare in practice: text changes are normally parsed off the main
+// thread first, so the main thread finds the ranges already cached.
+void
+ApplyMarkdownFormatting(
+  NSMutableAttributedString *string,
+  NSDictionary<NSAttributedStringKey, id> *defaultTextAttributes,
+  RCTMarcusStyle *markdownStyle,
+  NSNumber *parserId,
+  MarkdownParser *parser,
+  std::shared_ptr<std::atomic_bool> needsRemeasure,
+  std::shared_ptr<const DecoratorState> state
+) {
+  NSString *text = string.string;
+  NSArray<MarcusRange *> *markdownRanges =
+    [parser cachedRangesForText:text
+                   withParserId:parserId];
+
+  if (markdownRanges == nil) {
+    if ([NSThread isMainThread]) {
+      [parser
+        warmCacheAsyncForText:text
+                 withParserId:parserId
+                   completion:^{
+                     // Only ever runs for the newest text, so this cannot
+                     // loop: the next measure finds the ranges cached, or the
+                     // text changed again and a new measure was needed
+                     // anyway.
+                     if (needsRemeasure != nullptr) {
+                       needsRemeasure->store(true);
+                     }
+                     if (state != nullptr) {
+                       // Changes nothing; it exists only to schedule a
+                       // commit. updateState() is safe from any thread and
+                       // handles an already-gone family.
+                       state->updateState(MarcusTextInputDecoratorState{});
+                     }
+                   }];
+      return;
+    }
+
+    // Background threads may parse inline: the watchdog only applies to the
+    // main thread, and parsing no longer holds a lock the main thread waits on.
+    markdownRanges = [parser parse:text withParserId:parserId];
+  }
+
+  [MarkdownFormatter formatAttributedString:string
+                      defaultTextAttributes:defaultTextAttributes
+                                     ranges:markdownRanges
+                                      style:markdownStyle];
+}
+
+} // namespace
+
+Float
+MarcusTextInputDecoratorShadowNode::fontSizeMultiplier() {
+  return RCTFontSizeMultiplier();
+}
+
+void
+MarcusTextInputDecoratorShadowNode::
+  applyMarkdownFormattingToTextInputState(
+    std::shared_ptr<TextInputShadowNode> textInput,
+    const LayoutContext &layoutContext
+  ) const {
+
+  const auto &textInputState =
+    *std::static_pointer_cast<const react::ConcreteState<TextInputState>>(
+      textInput->getState()
+    );
+  const auto &stateData = textInputState.getData();
+  const auto fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+
+  const auto &decoratorProps =
+    *std::static_pointer_cast<MarcusTextInputDecoratorViewProps const>(
+      getProps()
+    );
+  const auto &textInputProps =
+    *std::static_pointer_cast<TextInputProps const>(textInput->getProps());
+
+  const auto defaultTextAttributes =
+    textInputProps.getEffectiveTextAttributes(fontSizeMultiplier);
+  const auto defaultNSTextAttributes =
+    RCTNSTextAttributesFromTextAttributes(defaultTextAttributes);
+
+  // The parser is shared process-wide, so its cache survives the cloning that
+  // happens during layout without this node having to hold on to it.
+  MarkdownParser *parser = [MarkdownParser sharedParser];
+
+  if (!needsRemeasure_) {
+    needsRemeasure_ = std::make_shared<std::atomic_bool>(false);
+  }
+
+  RCTMarcusStyle *markdownStyle =
+    [[RCTMarcusStyle alloc] initWithStruct:decoratorProps.markdownStyle];
+  NSNumber *parserId = [NSNumber numberWithInt:decoratorProps.parserId];
+
+  // convert the attibuted string stored in state to
+  // NSAttributedString
+  auto nsAttributedString = RCTNSAttributedStringFromAttributedStringBox(
+    stateData.attributedStringBox
+  );
+
+  auto newStateData = TextInputState(stateData);
+
+  if (stateData.attributedStringBox.getMode() ==
+      AttributedStringBox::Mode::Value) {
+
+    // Handles the first render, where the text stored in props is
+    // different than the one stored in state. The one in state is empty,
+    // while the one in props is passed from JS. If we don't update the
+    // state here, we'll end up with a one-default-line-sized text input
+    if (textInputState.getRevision() == State::initialRevisionValue) {
+      auto plainStringFromState =
+        std::string([[nsAttributedString string] UTF8String]);
+
+      if (plainStringFromState != textInputProps.text) {
+        // creates new AttributedString from props, adapted from
+        // TextInputShadowNode (ios one, text inputs are
+        // platform-specific)
+        auto attributedString = AttributedString{};
+        attributedString.appendFragment(AttributedString::Fragment{textInputProps.text, defaultTextAttributes});
+
+        auto attachments = BaseTextShadowNode::Attachments{};
+        BaseTextShadowNode::buildAttributedString(
+          defaultTextAttributes, *textInput, attributedString, attachments
+        );
+
+        // convert the newly created attributed string to
+        // NSAttributedString
+        nsAttributedString = RCTNSAttributedStringFromAttributedStringBox(
+          AttributedStringBox{attributedString}
+        );
+      }
+    }
+
+    // apply markdown
+    NSMutableAttributedString *newString = [nsAttributedString mutableCopy];
+    ApplyMarkdownFormatting(
+      newString, defaultNSTextAttributes, markdownStyle, parserId, parser, needsRemeasure_, std::static_pointer_cast<const DecoratorState>(getState())
+    );
+
+    // create a clone of the old TextInputState and update the
+    // attributed string box to point to the string with markdown
+    // applied
+    newStateData.attributedStringBox =
+      RCTAttributedStringBoxFromNSAttributedString(newString);
+  } else if (stateData.attributedStringBox.getMode() ==
+             AttributedStringBox::Mode::OpaquePointer) {
+
+    // apply markdown
+    NSMutableAttributedString *newString = [nsAttributedString mutableCopy];
+    ApplyMarkdownFormatting(
+      newString, defaultNSTextAttributes, markdownStyle, parserId, parser, needsRemeasure_, std::static_pointer_cast<const DecoratorState>(getState())
+    );
+
+    // create a clone of the old TextInputState and update the
+    // attributed string box to point to the string with markdown
+    // applied
+    newStateData.attributedStringBox =
+      RCTAttributedStringBoxFromNSAttributedString(newString);
+  }
+
+  textInput->setStateData(std::move(newStateData));
+}
+
+} // namespace react
+} // namespace facebook

package/apple/MarcusTextInputDecoratorViewManager.h

@@ -0,0 +1,8 @@
+#import <React/RCTViewManager.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MarcusTextInputDecoratorViewManager : RCTViewManager
+@end
+
+NS_ASSUME_NONNULL_END

package/apple/MarcusTextInputDecoratorViewManager.mm

@@ -0,0 +1,11 @@
+#import <RNMarcus/MarcusTextInputDecoratorViewManager.h>
+
+@implementation MarcusTextInputDecoratorViewManager
+
+RCT_EXPORT_MODULE(MarcusTextInputDecoratorView)
+
+RCT_EXPORT_VIEW_PROPERTY(markdownStyle, NSDictionary)
+
+RCT_EXPORT_VIEW_PROPERTY(parserId, NSNumber)
+
+@end