@expensify/react-native-live-markdown 0.1.3

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

@@ -0,0 +1,5 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.StrikethroughSpan;
+
+public class MarkdownStrikethroughSpan extends StrikethroughSpan implements MarkdownSpan {}

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

@@ -0,0 +1,186 @@
+package com.expensify.livemarkdown;
+
+import android.content.Context;
+
+import androidx.annotation.ColorInt;
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.ColorPropConverter;
+import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.JSApplicationCausedNativeException;
+import com.facebook.react.bridge.ReadableMap;
+
+import java.util.Objects;
+
+public class MarkdownStyle {
+  @ColorInt
+  private final int mSyntaxColor;
+
+  @ColorInt
+  private final int mLinkColor;
+
+  private final float mH1FontSize;
+
+  @ColorInt
+  private final int mBlockquoteBorderColor;
+
+  private final float mBlockquoteBorderWidth;
+
+  private final float mBlockquoteMarginLeft;
+
+  private final float mBlockquotePaddingLeft;
+
+  private final String mCodeFontFamily;
+
+  @ColorInt
+  private final int mCodeColor;
+
+  @ColorInt
+  private final int mCodeBackgroundColor;
+
+  private final String mPreFontFamily;
+
+  @ColorInt
+  private final int mPreColor;
+
+  @ColorInt
+  private final int mPreBackgroundColor;
+
+  @ColorInt
+  private final int mMentionHereColor;
+
+  @ColorInt
+  private final int mMentionHereBackgroundColor;
+
+  @ColorInt
+  private final int mMentionUserColor;
+
+  @ColorInt
+  private final int mMentionUserBackgroundColor;
+
+  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");
+    mBlockquoteBorderColor = parseColor(map, "blockquote", "borderColor", context);
+    mBlockquoteBorderWidth = parseFloat(map, "blockquote", "borderWidth");
+    mBlockquoteMarginLeft = parseFloat(map, "blockquote", "marginLeft");
+    mBlockquotePaddingLeft = parseFloat(map, "blockquote", "paddingLeft");
+    mCodeFontFamily = parseString(map, "code", "fontFamily");
+    mCodeColor = parseColor(map, "code", "color", context);
+    mCodeBackgroundColor = parseColor(map, "code", "backgroundColor", context);
+    mPreFontFamily = parseString(map, "pre", "fontFamily");
+    mPreColor = parseColor(map, "pre", "color", context);
+    mPreBackgroundColor = parseColor(map, "pre", "backgroundColor", context);
+    mMentionHereColor = parseColor(map, "mentionHere", "color", context);
+    mMentionHereBackgroundColor = parseColor(map, "mentionHere", "backgroundColor", context);
+    mMentionUserColor = parseColor(map, "mentionUser", "color", context);
+    mMentionUserBackgroundColor = parseColor(map, "mentionUser", "backgroundColor", context);
+  }
+
+  private static int parseColor(@NonNull ReadableMap map, @NonNull String key, @NonNull String prop, @NonNull Context context) {
+    ReadableMap style = map.getMap(key);
+    Objects.requireNonNull(style);
+    Dynamic value = style.getDynamic(prop);
+    switch (value.getType()) {
+      case Number:
+        return ColorPropConverter.getColor(value.asDouble(), context);
+      case Map:
+        return ColorPropConverter.getColor(value.asMap(), context);
+      default:
+        throw new JSApplicationCausedNativeException("ColorValue: the value must be a number or Object.");
+    }
+  }
+
+  private static float parseFloat(@NonNull ReadableMap map, @NonNull String key, @NonNull String prop) {
+    ReadableMap style = map.getMap(key);
+    Objects.requireNonNull(style);
+    double value = style.getDouble(prop);
+    return (float) value;
+  }
+
+  private static String parseString(@NonNull ReadableMap map, @NonNull String key, @NonNull String prop) {
+    ReadableMap style = map.getMap(key);
+    Objects.requireNonNull(style);
+    return style.getString(prop);
+  }
+
+  @ColorInt
+  public int getSyntaxColor() {
+    return mSyntaxColor;
+  }
+
+  @ColorInt
+  public int getLinkColor() {
+    return mLinkColor;
+  }
+
+  public float getH1FontSize() {
+    return mH1FontSize;
+  }
+
+  @ColorInt
+  public int getBlockquoteBorderColor() {
+    return mBlockquoteBorderColor;
+  }
+
+  public float getBlockquoteBorderWidth() {
+    return mBlockquoteBorderWidth;
+  }
+
+  public float getBlockquoteMarginLeft() {
+    return mBlockquoteMarginLeft;
+  }
+
+  public float getBlockquotePaddingLeft() {
+    return mBlockquotePaddingLeft;
+  }
+
+  public String getCodeFontFamily() {
+    return mCodeFontFamily;
+  }
+
+  @ColorInt
+  public int getCodeColor() {
+    return mCodeColor;
+  }
+
+  @ColorInt
+  public int getCodeBackgroundColor() {
+    return mCodeBackgroundColor;
+  }
+
+  public String getPreFontFamily() {
+    return mPreFontFamily;
+  }
+
+  @ColorInt
+  public int getPreColor() {
+    return mPreColor;
+  }
+
+  @ColorInt
+  public int getPreBackgroundColor() {
+    return mPreBackgroundColor;
+  }
+
+  @ColorInt
+  public int getMentionHereColor() {
+    return mMentionHereColor;
+  }
+
+  @ColorInt
+  public int getMentionHereBackgroundColor() {
+    return mMentionHereBackgroundColor;
+  }
+
+  @ColorInt
+  public int getMentionUserColor() {
+    return mMentionUserColor;
+  }
+
+  @ColorInt
+  public int getMentionUserBackgroundColor() {
+    return mMentionUserBackgroundColor;
+  }
+}

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

@@ -0,0 +1,85 @@
+package com.expensify.livemarkdown;
+
+import androidx.annotation.Nullable;
+
+import android.content.Context;
+import android.content.res.AssetManager;
+import android.text.TextWatcher;
+import android.util.AttributeSet;
+
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.ViewParent;
+
+import com.facebook.react.views.textinput.ReactEditText;
+
+public class MarkdownTextInputDecoratorView extends View {
+
+  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 MarkdownUtils mMarkdownUtils;
+
+  private ReactEditText mReactEditText;
+
+  private TextWatcher mTextWatcher;
+
+  @Override
+  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) {
+      AssetManager assetManager = getContext().getAssets();
+      MarkdownUtils.maybeInitializeRuntime(assetManager);
+      mMarkdownUtils = new MarkdownUtils(assetManager);
+      mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
+      mReactEditText = (ReactEditText) previousSibling;
+      mTextWatcher = new MarkdownTextWatcher(mMarkdownUtils);
+      mReactEditText.addTextChangedListener(mTextWatcher);
+    }
+  }
+
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+    if (mReactEditText != null) {
+      mReactEditText.removeTextChangedListener(mTextWatcher);
+      mReactEditText = null;
+      mTextWatcher = null;
+      mMarkdownUtils = null;
+    }
+  }
+
+  protected void setMarkdownStyle(MarkdownStyle markdownStyle) {
+    mMarkdownStyle = markdownStyle;
+    if (mMarkdownUtils != null) {
+      mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
+    }
+    if (mReactEditText != null) {
+      mReactEditText.setText(mReactEditText.getText()); // trigger update
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+package com.expensify.livemarkdown;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+@ReactModule(name = MarkdownTextInputDecoratorViewManager.NAME)
+public class MarkdownTextInputDecoratorViewManager extends MarkdownTextInputDecoratorViewManagerSpec<MarkdownTextInputDecoratorView> {
+
+  public static final String NAME = "MarkdownTextInputDecoratorView";
+
+  @Override
+  public String getName() {
+    return NAME;
+  }
+
+  @Override
+  public MarkdownTextInputDecoratorView createViewInstance(ThemedReactContext context) {
+    return new MarkdownTextInputDecoratorView(context);
+  }
+
+  @Override
+  @ReactProp(name = "markdownStyle")
+  public void setMarkdownStyle(@NonNull MarkdownTextInputDecoratorView view, @NonNull ReadableMap value) {
+    MarkdownStyle markdownStyle = new MarkdownStyle(value, view.getContext());
+    view.setMarkdownStyle(markdownStyle);
+  }
+}

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

@@ -0,0 +1,38 @@
+package com.expensify.livemarkdown;
+
+import android.text.Editable;
+import android.text.SpannableStringBuilder;
+import android.text.TextWatcher;
+
+import androidx.annotation.NonNull;
+
+public class MarkdownTextWatcher implements TextWatcher {
+  private final MarkdownUtils mMarkdownUtils;
+
+  private boolean mShouldSkip = false;
+
+  public MarkdownTextWatcher(@NonNull MarkdownUtils markdownUtils) {
+    mMarkdownUtils = markdownUtils;
+  }
+
+  @Override
+  public void beforeTextChanged(CharSequence s, int start, int count, int after) {
+
+  }
+
+  @Override
+  public void onTextChanged(CharSequence s, int start, int before, int count) {
+    if (mShouldSkip) {
+      return;
+    }
+    if (s instanceof SpannableStringBuilder) {
+      mMarkdownUtils.applyMarkdownFormatting((SpannableStringBuilder) s);
+      mShouldSkip = true;
+    }
+  }
+
+  @Override
+  public void afterTextChanged(Editable editable) {
+    mShouldSkip = false;
+  }
+}

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

@@ -0,0 +1,5 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.UnderlineSpan;
+
+public class MarkdownUnderlineSpan extends UnderlineSpan implements MarkdownSpan {}

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

@@ -0,0 +1,176 @@
+package com.expensify.livemarkdown;
+
+import static com.facebook.infer.annotation.ThreadConfined.UI;
+
+import android.content.res.AssetManager;
+import android.text.SpannableStringBuilder;
+import android.text.Spanned;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.infer.annotation.Assertions;
+import com.facebook.infer.annotation.ThreadConfined;
+import com.facebook.react.bridge.UiThreadUtil;
+import com.facebook.react.views.text.CustomLineHeightSpan;
+import com.facebook.soloader.SoLoader;
+
+import org.json.JSONArray;
+import org.json.JSONException;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.util.Objects;
+
+public class MarkdownUtils {
+  static {
+    SoLoader.loadLibrary("livemarkdown");
+  }
+
+  private static boolean IS_RUNTIME_INITIALIZED = false;
+
+  @ThreadConfined(UI)
+  public static void maybeInitializeRuntime(AssetManager assetManager) {
+    UiThreadUtil.assertOnUiThread();
+    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);
+
+  @ThreadConfined(UI)
+  private static String parseMarkdown(String input) {
+    UiThreadUtil.assertOnUiThread();
+    return nativeParseMarkdown(input);
+  }
+
+  private static native String nativeParseMarkdown(String input);
+
+  public MarkdownUtils(@NonNull AssetManager assetManager) {
+    mAssetManager = assetManager;
+  }
+
+  private final @NonNull AssetManager mAssetManager;
+
+  private String mPrevInput;
+
+  private String mPrevOutput;
+
+  private MarkdownStyle mMarkdownStyle;
+
+  public void setMarkdownStyle(@NonNull MarkdownStyle markdownStyle) {
+    mMarkdownStyle = markdownStyle;
+  }
+
+  public void applyMarkdownFormatting(SpannableStringBuilder ssb) {
+    Objects.requireNonNull(mMarkdownStyle, "mMarkdownStyle is null");
+
+    removeSpans(ssb);
+
+    String input = ssb.toString();
+    String output;
+    if (input.equals(mPrevInput)) {
+      output = mPrevOutput;
+    } else {
+      output = parseMarkdown(input);
+      mPrevInput = input;
+      mPrevOutput = output;
+    }
+
+    try {
+      JSONArray ranges = new JSONArray(output);
+      for (int i = 0; i < ranges.length(); i++) {
+        JSONArray range = ranges.getJSONArray(i);
+        String type = range.getString(0);
+        int start = range.getInt(1);
+        int end = start + range.getInt(2);
+        applyRange(ssb, type, start, end);
+      }
+    } catch (JSONException e) {
+      // Do nothing
+    }
+  }
+
+  private void applyRange(SpannableStringBuilder ssb, String type, int start, int end) {
+    switch (type) {
+      case "bold":
+        setSpan(ssb, new MarkdownBoldSpan(), start, end);
+        break;
+      case "italic":
+        setSpan(ssb, new MarkdownItalicSpan(), start, end);
+        break;
+      case "strikethrough":
+        setSpan(ssb, new MarkdownStrikethroughSpan(), start, end);
+        break;
+      case "mention-here":
+        setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getMentionHereColor()), start, end);
+        setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getMentionHereBackgroundColor()), start, end);
+        break;
+      case "mention-user":
+        // TODO: change mention color when it mentions current user
+        setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getMentionUserColor()), start, end);
+        setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getMentionUserBackgroundColor()), start, end);
+        break;
+      case "syntax":
+        setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getSyntaxColor()), start, end);
+        break;
+      case "link":
+        setSpan(ssb, new MarkdownUnderlineSpan(), start, end);
+        setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getLinkColor()), start, end);
+        break;
+      case "code":
+        setSpan(ssb, new MarkdownFontFamilySpan(mMarkdownStyle.getCodeFontFamily(), mAssetManager), start, end);
+        setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getCodeColor()), start, end);
+        setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getCodeBackgroundColor()), start, end);
+        break;
+      case "pre":
+        setSpan(ssb, new MarkdownFontFamilySpan(mMarkdownStyle.getPreFontFamily(), mAssetManager), start, end);
+        setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getPreColor()), start, end);
+        setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getPreBackgroundColor()), start, end);
+        break;
+      case "h1":
+        setSpan(ssb, new MarkdownBoldSpan(), start, end);
+        CustomLineHeightSpan[] spans = ssb.getSpans(0, ssb.length(), CustomLineHeightSpan.class);
+        if (spans.length >= 1) {
+          int lineHeight = spans[0].getLineHeight();
+          setSpan(ssb, new MarkdownLineHeightSpan(lineHeight * 1.5f), start, end);
+        }
+        // NOTE: size span must be set after line height span to avoid height jumps
+        setSpan(ssb, new MarkdownFontSizeSpan(mMarkdownStyle.getH1FontSize()), start, end);
+        break;
+      case "blockquote":
+        MarkdownBlockquoteSpan span = new MarkdownBlockquoteSpan(
+          mMarkdownStyle.getBlockquoteBorderColor(),
+          mMarkdownStyle.getBlockquoteBorderWidth(),
+          mMarkdownStyle.getBlockquoteMarginLeft(),
+          mMarkdownStyle.getBlockquotePaddingLeft());
+        setSpan(ssb, span, start, end);
+        break;
+      default:
+        throw new IllegalStateException("Unsupported type: " + type);
+    }
+  }
+
+  private void setSpan(SpannableStringBuilder ssb, MarkdownSpan span, int start, int end) {
+    ssb.setSpan(span, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
+  }
+
+  private void removeSpans(SpannableStringBuilder ssb) {
+    // We shouldn't use `removeSpans()` because it also removes SpellcheckSpan, SuggestionSpan etc.
+    MarkdownSpan[] spans = ssb.getSpans(0, ssb.length(), MarkdownSpan.class);
+    for (MarkdownSpan span : spans) {
+      ssb.removeSpan(span);
+    }
+  }
+}

package/android/src/newarch/MarkdownTextInputDecoratorViewManagerSpec.java

@@ -0,0 +1,24 @@
+package com.expensify.livemarkdown;
+
+import android.view.View;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.uimanager.SimpleViewManager;
+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> {
+  private final ViewManagerDelegate<T> mDelegate;
+
+  public MarkdownTextInputDecoratorViewManagerSpec() {
+    mDelegate = new MarkdownTextInputDecoratorViewManagerDelegate(this);
+  }
+
+  @Nullable
+  @Override
+  protected ViewManagerDelegate<T> getDelegate() {
+    return mDelegate;
+  }
+}

package/android/src/oldarch/MarkdownTextInputDecoratorViewManagerSpec.java

@@ -0,0 +1,10 @@
+package com.expensify.livemarkdown;
+
+import android.view.View;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.SimpleViewManager;
+
+public abstract class MarkdownTextInputDecoratorViewManagerSpec<T extends View> extends SimpleViewManager<T> {
+  public abstract void setMarkdownStyle(T view, ReadableMap value);
+}

package/ios/MarkdownLayoutManager.h

@@ -0,0 +1,12 @@
+#import <UIKit/UIKit.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MarkdownLayoutManager : NSLayoutManager
+
+@property(nonatomic) RCTMarkdownUtils *markdownUtils;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/MarkdownLayoutManager.mm

@@ -0,0 +1,35 @@
+#import <RNLiveMarkdown/MarkdownLayoutManager.h>
+
+@implementation MarkdownLayoutManager
+
+- (void)drawBackgroundForGlyphRange:(NSRange)glyphsToShow atPoint:(CGPoint)origin {
+  [super drawBackgroundForGlyphRange:glyphsToShow atPoint:origin];
+
+  [self enumerateLineFragmentsForGlyphRange:glyphsToShow usingBlock:^(CGRect rect, CGRect usedRect, NSTextContainer * _Nonnull textContainer, NSRange glyphRange, BOOL * _Nonnull stop) {
+    __block BOOL isBlockquote = NO;
+    RCTMarkdownUtils *markdownUtils = [self valueForKey:@"markdownUtils"];
+    [markdownUtils.blockquoteRanges enumerateObjectsUsingBlock:^(NSValue *item, NSUInteger idx, BOOL * _Nonnull stop) {
+      NSRange range = [item rangeValue];
+      NSUInteger start = range.location;
+      NSUInteger end = start + range.length;
+      NSUInteger location = glyphRange.location;
+      if (location >= start && location < end) {
+        isBlockquote = YES;
+        *stop = YES;
+      }
+    }];
+    if (isBlockquote) {
+      CGFloat paddingLeft = markdownUtils.backedTextInputView.textContainerInset.left;
+      CGFloat paddingTop = markdownUtils.backedTextInputView.textContainerInset.top;
+      CGFloat x = paddingLeft + markdownUtils.markdownStyle.blockquoteMarginLeft;
+      CGFloat y = paddingTop + rect.origin.y;
+      CGFloat width = markdownUtils.markdownStyle.blockquoteBorderWidth;
+      CGFloat height = rect.size.height;
+      CGRect lineRect = CGRectMake(x, y, width, height);
+      [markdownUtils.markdownStyle.blockquoteBorderColor setFill];
+      UIRectFill(lineRect);
+    }
+  }];
+}
+
+@end

package/ios/MarkdownTextInputDecoratorComponentView.h

@@ -0,0 +1,12 @@
+// This guard prevent this file to be compiled in the old architecture.
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MarkdownTextInputDecoratorComponentView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* RCT_NEW_ARCH_ENABLED */

package/ios/MarkdownTextInputDecoratorComponentView.mm

@@ -0,0 +1,55 @@
+// This guard prevent this file to be compiled in the old architecture.
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <react/renderer/components/RNLiveMarkdownSpec/ComponentDescriptors.h>
+#import <react/renderer/components/RNLiveMarkdownSpec/Props.h>
+
+#import <RNLiveMarkdown/MarkdownTextInputDecoratorComponentView.h>
+#import <RNLiveMarkdown/MarkdownTextInputDecoratorView.h>
+#import <RNLiveMarkdown/RCTMarkdownStyle.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+@implementation MarkdownTextInputDecoratorComponentView {
+  MarkdownTextInputDecoratorView *_view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<MarkdownTextInputDecoratorViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const MarkdownTextInputDecoratorViewProps>();
+    _props = defaultProps;
+
+    _view = [[MarkdownTextInputDecoratorView alloc] init];
+
+    self.contentView = _view;
+  }
+
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+    const auto &oldViewProps = *std::static_pointer_cast<MarkdownTextInputDecoratorViewProps const>(_props);
+    const auto &newViewProps = *std::static_pointer_cast<MarkdownTextInputDecoratorViewProps const>(props);
+
+    // TODO: if (oldViewProps.markdownStyle != newViewProps.markdownStyle)
+    RCTMarkdownStyle *markdownStyle = [[RCTMarkdownStyle alloc] initWithStruct:newViewProps.markdownStyle];
+    [_view setMarkdownStyle:markdownStyle];
+
+    [super updateProps:props oldProps:oldProps];
+}
+
+Class<RCTComponentViewProtocol> MarkdownTextInputDecoratorViewCls(void)
+{
+  return MarkdownTextInputDecoratorComponentView.class;
+}
+
+@end
+#endif