@expensify/react-native-live-markdown 0.1.3

package/ios/MarkdownTextInputDecoratorView.h

@@ -0,0 +1,12 @@
+#import <UIKit/UIKit.h>
+#import <RNLiveMarkdown/RCTMarkdownStyle.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MarkdownTextInputDecoratorView : UIView
+
+- (void)setMarkdownStyle:(RCTMarkdownStyle *)markdownStyle;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/MarkdownTextInputDecoratorView.mm

@@ -0,0 +1,106 @@
+#import <React/RCTUITextField.h>
+#import "react_native_assert.h"
+
+#import <RNLiveMarkdown/MarkdownLayoutManager.h>
+#import <RNLiveMarkdown/MarkdownTextInputDecoratorView.h>
+#import <RNLiveMarkdown/RCTBackedTextFieldDelegateAdapter+Markdown.h>
+#import <RNLiveMarkdown/RCTUITextView+Markdown.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <RNLiveMarkdown/RCTTextInputComponentView+Markdown.h>
+#else
+#import <RNLiveMarkdown/RCTBaseTextInputView+Markdown.h>
+#endif /* RCT_NEW_ARCH_ENABLED */
+
+#import <objc/runtime.h>
+
+@implementation MarkdownTextInputDecoratorView {
+  RCTMarkdownUtils *_markdownUtils;
+  RCTMarkdownStyle *_markdownStyle;
+#ifdef RCT_NEW_ARCH_ENABLED
+  __weak RCTTextInputComponentView *_textInput;
+#else
+  __weak RCTBaseTextInputView *_textInput;
+#endif /* RCT_NEW_ARCH_ENABLED */
+  __weak RCTBackedTextFieldDelegateAdapter *_adapter;
+  __weak RCTUITextView *_textView;
+}
+
+- (void)didMoveToWindow {
+#ifdef RCT_NEW_ARCH_ENABLED
+  if (self.superview.superview == nil) {
+    return;
+  }
+#else
+  if (self.superview == nil) {
+    return;
+  }
+#endif /* RCT_NEW_ARCH_ENABLED */
+
+#ifdef RCT_NEW_ARCH_ENABLED
+  NSArray *viewsArray = self.superview.superview.subviews;
+  NSUInteger currentIndex = [viewsArray indexOfObject:self.superview];
+#else
+  NSArray *viewsArray = self.superview.subviews;
+  NSUInteger currentIndex = [viewsArray indexOfObject:self];
+#endif /* RCT_NEW_ARCH_ENABLED */
+
+  react_native_assert(currentIndex != 0 && currentIndex != NSNotFound && "Error while finding current component.");
+  UIView *view = [viewsArray objectAtIndex:currentIndex - 1];
+
+#ifdef RCT_NEW_ARCH_ENABLED
+  react_native_assert([view isKindOfClass:[RCTTextInputComponentView class]] && "Previous sibling component is not an instance of RCTTextInputComponentView.");
+  _textInput = (RCTTextInputComponentView *)view;
+  UIView<RCTBackedTextInputViewProtocol> *backedTextInputView = [_textInput valueForKey:@"_backedTextInputView"];
+#else
+  react_native_assert([view isKindOfClass:[RCTBaseTextInputView class]] && "Previous sibling component is not an instance of RCTBaseTextInputView.");
+  _textInput = (RCTBaseTextInputView *)view;
+  UIView<RCTBackedTextInputViewProtocol> *backedTextInputView = _textInput.backedTextInputView;
+#endif /* RCT_NEW_ARCH_ENABLED */
+
+  _markdownUtils = [[RCTMarkdownUtils alloc] initWithBackedTextInputView:backedTextInputView];
+  react_native_assert(_markdownStyle != nil);
+  [_markdownUtils setMarkdownStyle:_markdownStyle];
+
+  [_textInput setMarkdownUtils:_markdownUtils];
+  if ([backedTextInputView isKindOfClass:[RCTUITextField class]]) {
+    RCTUITextField *textField = (RCTUITextField *)backedTextInputView;
+    _adapter = [textField valueForKey:@"textInputDelegateAdapter"];
+    [_adapter setMarkdownUtils:_markdownUtils];
+  } else if ([backedTextInputView isKindOfClass:[RCTUITextView class]]) {
+    _textView = (RCTUITextView *)backedTextInputView;
+    [_textView setMarkdownUtils:_markdownUtils];
+    NSLayoutManager *layoutManager = _textView.layoutManager; // switching to TextKit 1 compatibility mode
+    layoutManager.allowsNonContiguousLayout = NO; // workaround for onScroll issue
+    object_setClass(layoutManager, [MarkdownLayoutManager class]);
+    [layoutManager setValue:_markdownUtils forKey:@"markdownUtils"];
+  } else {
+    react_native_assert(false && "Cannot enable Markdown for this type of TextInput.");
+  }
+}
+
+- (void)willMoveToWindow:(UIWindow *)newWindow
+{
+  if (_textInput != nil) {
+    [_textInput setMarkdownUtils:nil];
+  }
+  if (_adapter != nil) {
+    [_adapter setMarkdownUtils:nil];
+  }
+  if (_textView != nil) {
+    [_textView setMarkdownUtils:nil];
+    if (_textView.layoutManager != nil && [object_getClass(_textView.layoutManager) isEqual:[MarkdownLayoutManager class]]) {
+      [_textView.layoutManager setValue:nil forKey:@"markdownUtils"];
+      object_setClass(_textView.layoutManager, [NSLayoutManager class]);
+    }
+  }
+}
+
+- (void)setMarkdownStyle:(RCTMarkdownStyle *)markdownStyle
+{
+  _markdownStyle = markdownStyle;
+  [_markdownUtils setMarkdownStyle:markdownStyle];
+  [_textInput textInputDidChange]; // trigger attributed text update
+}
+
+@end

package/ios/MarkdownTextInputDecoratorViewManager.h

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

package/ios/MarkdownTextInputDecoratorViewManager.mm

@@ -0,0 +1,23 @@
+#import <RNLiveMarkdown/MarkdownTextInputDecoratorViewManager.h>
+#import <RNLiveMarkdown/MarkdownTextInputDecoratorView.h>
+
+@implementation MarkdownTextInputDecoratorViewManager
+
+RCT_EXPORT_MODULE(MarkdownTextInputDecoratorView)
+
+- (UIView *)view
+{
+  return [[MarkdownTextInputDecoratorView alloc] init];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(markdownStyle, NSDictionary, MarkdownTextInputDecoratorView)
+{
+#ifdef RCT_NEW_ARCH_ENABLED
+  // implemented in MarkdownTextInputDecoratorView updateProps:
+#else
+  RCTMarkdownStyle *markdownStyle = [[RCTMarkdownStyle alloc] initWithDictionary:json];
+  [view setMarkdownStyle:markdownStyle];
+#endif /* RCT_NEW_ARCH_ENABLED */
+}
+
+@end

package/ios/RCTBackedTextFieldDelegateAdapter+Markdown.h

@@ -0,0 +1,14 @@
+#import <React/RCTBackedTextInputDelegateAdapter.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTBackedTextFieldDelegateAdapter (Markdown)
+
+@property(nonatomic, nullable, getter=getMarkdownUtils) RCTMarkdownUtils *markdownUtils;
+
+- (void)markdown_textFieldDidChange;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/RCTBackedTextFieldDelegateAdapter+Markdown.m

@@ -0,0 +1,43 @@
+#import <RNLiveMarkdown/RCTBackedTextFieldDelegateAdapter+Markdown.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+#import <React/RCTUITextField.h>
+#import <objc/message.h>
+
+@implementation RCTBackedTextFieldDelegateAdapter (Markdown)
+
+- (void)setMarkdownUtils:(RCTMarkdownUtils *)markdownUtils {
+  objc_setAssociatedObject(self, @selector(getMarkdownUtils), markdownUtils, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+}
+
+- (RCTMarkdownUtils *)getMarkdownUtils {
+  return objc_getAssociatedObject(self, @selector(getMarkdownUtils));
+}
+
+- (void)markdown_textFieldDidChange
+{
+  RCTMarkdownUtils *markdownUtils = [self getMarkdownUtils];
+  if (markdownUtils != nil) {
+    RCTUITextField *backedTextInputView = [self valueForKey:@"_backedTextInputView"];
+    UITextRange *range = backedTextInputView.selectedTextRange;
+    backedTextInputView.attributedText = [markdownUtils parseMarkdown:backedTextInputView.attributedText];
+    [backedTextInputView setSelectedTextRange:range notifyDelegate:YES];
+  }
+
+  // Call the original method
+  [self markdown_textFieldDidChange];
+}
+
++ (void)load
+{
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    Class cls = [self class];
+    SEL originalSelector = @selector(textFieldDidChange);
+    SEL swizzledSelector = @selector(markdown_textFieldDidChange);
+    Method originalMethod = class_getInstanceMethod(cls, originalSelector);
+    Method swizzledMethod = class_getInstanceMethod(cls, swizzledSelector);
+    method_exchangeImplementations(originalMethod, swizzledMethod);
+  });
+}
+
+@end

package/ios/RCTBaseTextInputView+Markdown.h

@@ -0,0 +1,16 @@
+#import <React/RCTBaseTextInputView.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTBaseTextInputView (Markdown)
+
+@property(nonatomic, nullable, getter=getMarkdownUtils) RCTMarkdownUtils *markdownUtils;
+
+- (void)markdown_setAttributedText:(NSAttributedString *)attributedText;
+
+- (void)markdown_updateLocalData;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/RCTBaseTextInputView+Markdown.m

@@ -0,0 +1,66 @@
+#import <RNLiveMarkdown/RCTBaseTextInputView+Markdown.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+#import <objc/message.h>
+
+@implementation RCTBaseTextInputView (Markdown)
+
+- (void)setMarkdownUtils:(RCTMarkdownUtils *)markdownUtils {
+  objc_setAssociatedObject(self, @selector(getMarkdownUtils), markdownUtils, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+}
+
+- (RCTMarkdownUtils *)getMarkdownUtils {
+  return objc_getAssociatedObject(self, @selector(getMarkdownUtils));
+}
+
+- (void)markdown_setAttributedText:(NSAttributedString *)attributedText
+{
+  RCTMarkdownUtils *markdownUtils = [self getMarkdownUtils];
+  if (markdownUtils != nil) {
+    attributedText = [markdownUtils parseMarkdown:attributedText];
+  }
+
+  // Call the original method
+  [self markdown_setAttributedText:attributedText];
+}
+
+- (void)markdown_updateLocalData
+{
+  RCTMarkdownUtils *markdownUtils = [self getMarkdownUtils];
+  if (markdownUtils != nil) {
+    UITextRange *range = self.backedTextInputView.selectedTextRange;
+    NSAttributedString *attributedText = [markdownUtils parseMarkdown:self.backedTextInputView.attributedText];
+    [self.backedTextInputView setAttributedText:attributedText];
+    [self.backedTextInputView setSelectedTextRange:range notifyDelegate:YES];
+  }
+
+  // Call the original method
+  [self markdown_updateLocalData];
+}
+
++ (void)load
+{
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    Class cls = [self class];
+
+    {
+      // swizzle setAttributedText
+      SEL originalSelector = @selector(setAttributedText:);
+      SEL swizzledSelector = @selector(markdown_setAttributedText:);
+      Method originalMethod = class_getInstanceMethod(cls, originalSelector);
+      Method swizzledMethod = class_getInstanceMethod(cls, swizzledSelector);
+      method_exchangeImplementations(originalMethod, swizzledMethod);
+    }
+
+    {
+      // swizzle updateLocalData
+      SEL originalSelector = @selector(updateLocalData);
+      SEL swizzledSelector = @selector(markdown_updateLocalData);
+      Method originalMethod = class_getInstanceMethod(cls, originalSelector);
+      Method swizzledMethod = class_getInstanceMethod(cls, swizzledSelector);
+      method_exchangeImplementations(originalMethod, swizzledMethod);
+    }
+  });
+}
+
+@end

package/ios/RCTMarkdownStyle.h

@@ -0,0 +1,35 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <react/renderer/components/RNLiveMarkdownSpec/Props.h>
+#endif /* RCT_NEW_ARCH_ENABLED */
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTMarkdownStyle : NSObject
+
+@property (nonatomic) UIColor *syntaxColor;
+@property (nonatomic) UIColor *linkColor;
+@property (nonatomic) CGFloat h1FontSize;
+@property (nonatomic) UIColor *blockquoteBorderColor;
+@property (nonatomic) CGFloat blockquoteBorderWidth;
+@property (nonatomic) CGFloat blockquoteMarginLeft;
+@property (nonatomic) CGFloat blockquotePaddingLeft;
+@property (nonatomic) NSString *codeFontFamily;
+@property (nonatomic) UIColor *codeColor;
+@property (nonatomic) UIColor *codeBackgroundColor;
+@property (nonatomic) NSString *preFontFamily;
+@property (nonatomic) UIColor *preColor;
+@property (nonatomic) UIColor *preBackgroundColor;
+@property (nonatomic) UIColor *mentionHereColor;
+@property (nonatomic) UIColor *mentionHereBackgroundColor;
+@property (nonatomic) UIColor *mentionUserColor;
+@property (nonatomic) UIColor *mentionUserBackgroundColor;
+
+#ifdef RCT_NEW_ARCH_ENABLED
+- (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecoratorViewMarkdownStyleStruct &)style;
+#else
+- (instancetype)initWithDictionary:(NSDictionary *)json;
+#endif /* RCT_NEW_ARCH_ENABLED */
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/RCTMarkdownStyle.mm

@@ -0,0 +1,81 @@
+#import <RNLiveMarkdown/RCTMarkdownStyle.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTConversions.h>
+#else
+#import <React/RCTConvert.h>
+#endif /* RCT_NEW_ARCH_ENABLED */
+
+@implementation RCTMarkdownStyle
+
+#ifdef RCT_NEW_ARCH_ENABLED
+
+- (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecoratorViewMarkdownStyleStruct &)style
+{
+  if (self = [super init]) {
+    _syntaxColor = RCTUIColorFromSharedColor(style.syntax.color);
+
+    _linkColor = RCTUIColorFromSharedColor(style.link.color);
+
+    _h1FontSize = style.h1.fontSize;
+
+    _blockquoteBorderColor = RCTUIColorFromSharedColor(style.blockquote.borderColor);
+    _blockquoteBorderWidth = style.blockquote.borderWidth;
+    _blockquoteMarginLeft = style.blockquote.marginLeft;
+    _blockquotePaddingLeft = style.blockquote.paddingLeft;
+
+    _codeFontFamily = RCTNSStringFromString(style.code.fontFamily);
+    _codeColor = RCTUIColorFromSharedColor(style.code.color);
+    _codeBackgroundColor = RCTUIColorFromSharedColor(style.code.backgroundColor);
+
+    _preFontFamily = RCTNSStringFromString(style.pre.fontFamily);
+    _preColor = RCTUIColorFromSharedColor(style.pre.color);
+    _preBackgroundColor = RCTUIColorFromSharedColor(style.pre.backgroundColor);
+
+    _mentionHereColor = RCTUIColorFromSharedColor(style.mentionHere.color);
+    _mentionHereBackgroundColor = RCTUIColorFromSharedColor(style.mentionHere.backgroundColor);
+
+    _mentionUserColor = RCTUIColorFromSharedColor(style.mentionUser.color);
+    _mentionUserBackgroundColor = RCTUIColorFromSharedColor(style.mentionUser.backgroundColor);
+  }
+
+  return self;
+}
+
+#else
+
+- (instancetype)initWithDictionary:(NSDictionary *)json
+{
+  if (self = [super init]) {
+    _syntaxColor = [RCTConvert UIColor:json[@"syntax"][@"color"]];
+
+    _linkColor = [RCTConvert UIColor:json[@"link"][@"color"]];
+
+    _h1FontSize = [RCTConvert CGFloat:json[@"h1"][@"fontSize"]];
+
+    _blockquoteBorderColor = [RCTConvert UIColor:json[@"blockquote"][@"borderColor"]];
+    _blockquoteBorderWidth = [RCTConvert CGFloat:json[@"blockquote"][@"borderWidth"]];
+    _blockquoteMarginLeft = [RCTConvert CGFloat:json[@"blockquote"][@"marginLeft"]];
+    _blockquotePaddingLeft = [RCTConvert CGFloat:json[@"blockquote"][@"paddingLeft"]];
+
+    _codeFontFamily = [RCTConvert NSString:json[@"code"][@"fontFamily"]];
+    _codeColor = [RCTConvert UIColor:json[@"code"][@"color"]];
+    _codeBackgroundColor = [RCTConvert UIColor:json[@"code"][@"backgroundColor"]];
+
+    _preFontFamily = [RCTConvert NSString:json[@"pre"][@"fontFamily"]];
+    _preColor = [RCTConvert UIColor:json[@"pre"][@"color"]];
+    _preBackgroundColor = [RCTConvert UIColor:json[@"pre"][@"backgroundColor"]];
+
+    _mentionHereColor = [RCTConvert UIColor:json[@"mentionHere"][@"color"]];
+    _mentionHereBackgroundColor = [RCTConvert UIColor:json[@"mentionHere"][@"backgroundColor"]];
+
+    _mentionUserColor = [RCTConvert UIColor:json[@"mentionUser"][@"color"]];
+    _mentionUserBackgroundColor = [RCTConvert UIColor:json[@"mentionUser"][@"backgroundColor"]];
+  }
+
+  return self;
+}
+
+#endif /* RCT_NEW_ARCH_ENABLED */
+
+@end

package/ios/RCTMarkdownUtils.h

@@ -0,0 +1,18 @@
+#import <React/RCTBackedTextInputViewProtocol.h>
+#import <RNLiveMarkdown/RCTMarkdownStyle.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTMarkdownUtils : NSObject
+
+@property (nonatomic) RCTMarkdownStyle *markdownStyle;
+@property (nonatomic) NSMutableArray<NSValue *> *blockquoteRanges;
+@property (weak, nonatomic) UIView<RCTBackedTextInputViewProtocol> *backedTextInputView;
+
+- (instancetype)initWithBackedTextInputView:(UIView<RCTBackedTextInputViewProtocol> *)backedTextInputView;
+
+- (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/RCTMarkdownUtils.mm

@@ -0,0 +1,134 @@
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+#import "react_native_assert.h"
+#import <React/RCTAssert.h>
+#import <React/RCTFont.h>
+#import <JavaScriptCore/JavaScriptCore.h>
+
+@implementation RCTMarkdownUtils {
+  NSString *_prevInputString;
+  NSAttributedString *_prevAttributedString;
+  NSDictionary<NSAttributedStringKey, id> *_prevTextAttributes;
+  __weak RCTMarkdownStyle *_prevMarkdownStyle;
+}
+
+- (instancetype)initWithBackedTextInputView:(UIView<RCTBackedTextInputViewProtocol> *)backedTextInputView
+{
+  if (self = [super init]) {
+    _backedTextInputView = backedTextInputView;
+  }
+  return self;
+}
+
+- (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input
+{
+  RCTAssertMainQueue();
+
+  if (input == nil) {
+    return nil;
+  }
+
+  NSString *inputString = [input string];
+  if ([inputString isEqualToString:_prevInputString] && [_backedTextInputView.defaultTextAttributes isEqualToDictionary:_prevTextAttributes] && [_markdownStyle isEqual:_prevMarkdownStyle]) {
+    return _prevAttributedString;
+  }
+
+  static JSContext *ctx = nil;
+  static JSValue *function = nil;
+  if (ctx == nil) {
+    NSString *path = [[NSBundle mainBundle] pathForResource:@"react-native-live-markdown-parser" ofType:@"js"];
+    assert(path != nil && "[react-native-live-markdown] Markdown parser bundle not found");
+    NSString *content = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:NULL];
+    assert(content != nil && "[react-native-live-markdown] Markdown parser bundle is empty");
+    ctx = [[JSContext alloc] init];
+    [ctx evaluateScript:content];
+    function = ctx[@"parseExpensiMarkToRanges"];
+  }
+
+  JSValue *result = [function callWithArguments:@[inputString]];
+  NSArray *ranges = [result toArray];
+
+  NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:inputString attributes:_backedTextInputView.defaultTextAttributes];
+  [attributedString beginEditing];
+
+  // If the attributed string ends with underlined text, blurring the single-line input imprints the underline style across the whole string.
+  // It looks like a bug in iOS, as there is no underline style to be found in the attributed string, especially after formatting.
+  // This is a workaround that applies the NSUnderlineStyleNone to the string before iterating over ranges which resolves this problem.
+  [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleNone] range:NSMakeRange(0, attributedString.length)];
+
+  _blockquoteRanges = [NSMutableArray new];
+
+  [ranges enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
+    NSArray *item = obj;
+    NSString *type = item[0];
+    NSUInteger location = [item[1] unsignedIntegerValue];
+    NSUInteger length = [item[2] unsignedIntegerValue];
+    NSRange range = NSMakeRange(location, length);
+
+    if ([type isEqualToString:@"bold"] || [type isEqualToString:@"italic"] || [type isEqualToString:@"code"] || [type isEqualToString:@"pre"] || [type isEqualToString:@"h1"]) {
+      UIFont *font = [attributedString attribute:NSFontAttributeName atIndex:location effectiveRange:NULL];
+      if ([type isEqualToString:@"bold"]) {
+        font = [RCTFont updateFont:font withWeight:@"bold"];
+      } else if ([type isEqualToString:@"italic"]) {
+        font = [RCTFont updateFont:font withStyle:@"italic"];
+      } else if ([type isEqualToString:@"code"]) {
+        font = [RCTFont updateFont:font withFamily:_markdownStyle.codeFontFamily];
+      } else if ([type isEqualToString:@"pre"]) {
+        font = [RCTFont updateFont:font withFamily:_markdownStyle.preFontFamily];
+      } else if ([type isEqualToString:@"h1"]) {
+        font = [RCTFont updateFont:font withFamily:nil
+                                              size:[NSNumber numberWithFloat:_markdownStyle.h1FontSize]
+                                            weight:@"bold"
+                                             style:nil
+                                           variant:nil
+                                   scaleMultiplier:0];
+      }
+      [attributedString addAttribute:NSFontAttributeName value:font range:range];
+    }
+
+    if ([type isEqualToString:@"syntax"]) {
+      [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.syntaxColor range:range];
+    } else if ([type isEqualToString:@"strikethrough"]) {
+      [attributedString addAttribute:NSStrikethroughStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:range];
+    } else if ([type isEqualToString:@"code"]) {
+      [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.codeColor range:range];
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.codeBackgroundColor range:range];
+    } else if ([type isEqualToString:@"mention-here"]) {
+      [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.mentionHereColor range:range];
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.mentionHereBackgroundColor range:range];
+    } else if ([type isEqualToString:@"mention-user"]) {
+      // TODO: change mention color when it mentions current user
+      [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.mentionUserColor range:range];
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.mentionUserBackgroundColor range:range];
+    } else if ([type isEqualToString:@"link"]) {
+      [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:range];
+      [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.linkColor range:range];
+    } else if ([type isEqualToString:@"blockquote"]) {
+      CGFloat indent = _markdownStyle.blockquoteMarginLeft + _markdownStyle.blockquoteBorderWidth + _markdownStyle.blockquotePaddingLeft;
+      NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
+      paragraphStyle.firstLineHeadIndent = indent;
+      paragraphStyle.headIndent = indent;
+      [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:range];
+      [_blockquoteRanges addObject:[NSValue valueWithRange:range]];
+    } else if ([type isEqualToString:@"pre"]) {
+      [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.preColor range:range];
+      NSRange rangeForBackground = [inputString characterAtIndex:range.location] == '\n' ? NSMakeRange(range.location + 1, range.length - 1) : range;
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.preBackgroundColor range:rangeForBackground];
+      // TODO: pass background color and ranges to layout manager
+    } else if ([type isEqualToString:@"h1"]) {
+      NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
+      NSRange rangeWithHashAndSpace = NSMakeRange(range.location - 2, range.length + 2); // we also need to include prepending "# "
+      [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:rangeWithHashAndSpace];
+    }
+  }];
+
+  [attributedString endEditing];
+
+  _prevInputString = inputString;
+  _prevAttributedString = attributedString;
+  _prevTextAttributes = _backedTextInputView.defaultTextAttributes;
+  _prevMarkdownStyle = _markdownStyle;
+
+  return attributedString;
+}
+
+@end

package/ios/RCTTextInputComponentView+Markdown.h

@@ -0,0 +1,21 @@
+// This guard prevent this file to be compiled in the old architecture.
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTTextInputComponentView.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTTextInputComponentView (Markdown)
+
+@property(nonatomic, nullable, getter=getMarkdownUtils) RCTMarkdownUtils *markdownUtils;
+
+- (void)markdown__setAttributedString:(NSAttributedString *)attributedString;
+
+- (void)textInputDidChange;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* RCT_NEW_ARCH_ENABLED */

package/ios/RCTTextInputComponentView+Markdown.mm

@@ -0,0 +1,51 @@
+// This guard prevent this file to be compiled in the old architecture.
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <RNLiveMarkdown/RCTTextInputComponentView+Markdown.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+#import <React/RCTUITextField.h>
+#import <objc/message.h>
+
+@implementation RCTTextInputComponentView (Markdown)
+
+- (void)setMarkdownUtils:(RCTMarkdownUtils *)markdownUtils {
+  objc_setAssociatedObject(self, @selector(getMarkdownUtils), markdownUtils, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+
+  if (markdownUtils != nil) {
+    // force Markdown formatting on first render because `_setAttributedText` is called before `setMarkdownUtils`
+    RCTUITextField *backedTextInputView = [self valueForKey:@"_backedTextInputView"];
+    backedTextInputView.attributedText = [markdownUtils parseMarkdown:backedTextInputView.attributedText];
+  }
+}
+
+- (RCTMarkdownUtils *)getMarkdownUtils {
+  return objc_getAssociatedObject(self, @selector(getMarkdownUtils));
+}
+
+- (void)markdown__setAttributedString:(NSAttributedString *)attributedString
+{
+  RCTMarkdownUtils *markdownUtils = [self getMarkdownUtils];
+  if (markdownUtils != nil) {
+    attributedString = [markdownUtils parseMarkdown:attributedString];
+  }
+
+  // Call the original method
+  [self markdown__setAttributedString:attributedString];
+}
+
++ (void)load
+{
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    Class cls = [self class];
+    SEL originalSelector = @selector(_setAttributedString:);
+    SEL swizzledSelector = @selector(markdown__setAttributedString:);
+    Method originalMethod = class_getInstanceMethod(cls, originalSelector);
+    Method swizzledMethod = class_getInstanceMethod(cls, swizzledSelector);
+    method_exchangeImplementations(originalMethod, swizzledMethod);
+  });
+}
+
+@end
+
+#endif /* RCT_NEW_ARCH_ENABLED */

package/ios/RCTUITextView+Markdown.h

@@ -0,0 +1,15 @@
+#import <UIKit/UIKit.h>
+#import <React/RCTUITextView.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTUITextView (Markdown)
+
+@property(nonatomic, nullable, getter=getMarkdownUtils) RCTMarkdownUtils *markdownUtils;
+
+- (void)markdown_textDidChange;
+
+@end
+
+NS_ASSUME_NONNULL_END