Add MarkdownText component for preview

example/src/App.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 
 import { Button, Platform, StyleSheet, Text, View } from 'react-native';
+import {
+  MarkdownText,
+  MarkdownTextInput,
+} from '@expensify/react-native-live-markdown';
 
-import { MarkdownTextInput } from '@expensify/react-native-live-markdown';
 import type { TextInput } from 'react-native';
 
 const DEFAULT_TEXT = [
@@ -112,7 +115,7 @@ export default function App() {
         onChangeText={setValue}
         style={styles.input}
       /> */}
-      <Text style={styles.text}>{JSON.stringify(value)}</Text>
+      <MarkdownText style={styles.text}>{value}</MarkdownText>
       <Button title="Focus" onPress={() => ref.current?.focus()} />
       <Button title="Blur" onPress={() => ref.current?.blur()} />
       <Button title="Reset" onPress={() => setValue(DEFAULT_TEXT)} />
@@ -140,8 +143,7 @@ const styles = StyleSheet.create({
     textAlignVertical: 'top',
   },
   text: {
-    fontFamily: 'Courier New',
     marginTop: 10,
-    height: 100,
+    width: 300,
   },
 });

ios/MarkdownTextDecoratorComponentView.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 MarkdownTextDecoratorComponentView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* RCT_NEW_ARCH_ENABLED */

ios/MarkdownTextDecoratorComponentView.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 <react-native-live-markdown/MarkdownTextDecoratorComponentView.h>
+#import <react-native-live-markdown/MarkdownTextDecoratorView.h>
+#import <react-native-live-markdown/RCTMarkdownStyle.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+@implementation MarkdownTextDecoratorComponentView {
+  MarkdownTextDecoratorView *_view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<MarkdownTextDecoratorViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const MarkdownTextDecoratorViewProps>();
+    _props = defaultProps;
+
+    _view = [[MarkdownTextDecoratorView 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<MarkdownTextDecoratorViewProps const>(_props);
+    const auto &newViewProps = *std::static_pointer_cast<MarkdownTextDecoratorViewProps 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> MarkdownTextDecoratorViewCls(void)
+{
+  return MarkdownTextDecoratorComponentView.class;
+}
+
+@end
+#endif

ios/MarkdownTextDecoratorView.h

@@ -0,0 +1,8 @@
+#import <UIKit/UIKit.h>
+#import <react-native-live-markdown/RCTMarkdownStyle.h>
+
+@interface MarkdownTextDecoratorView : UIView
+
+- (void)setMarkdownStyle:(nonnull RCTMarkdownStyle *)markdownStyle;
+
+@end

ios/MarkdownTextDecoratorView.mm

@@ -0,0 +1,93 @@
+#import <React/RCTTextView.h>
+#import <react/debug/react_native_assert.h>
+
+//#import <react-native-live-markdown/MarkdownLayoutManager.h>
+#import <react-native-live-markdown/MarkdownTextDecoratorView.h>
+#import <react-native-live-markdown/RCTMarkdownUtils.h>
+#import <react-native-live-markdown/RCTMarkdownStyle.h>
+//#import <react-native-live-markdown/RCTBackedTextFieldDelegateAdapter+Markdown.h>
+#import <react-native-live-markdown/RCTTextView+Markdown.h>
+
+//#ifdef RCT_NEW_ARCH_ENABLED
+//#import <react-native-live-markdown/RCTTextComponentView+Markdown.h>
+//#else
+//#import <react-native-live-markdown/RCTBaseTextView+Markdown.h>
+//#endif /* RCT_NEW_ARCH_ENABLED */
+
+#import <objc/runtime.h>
+
+@implementation MarkdownTextDecoratorView {
+  RCTMarkdownUtils *_markdownUtils;
+  RCTMarkdownStyle *_markdownStyle;
+// #ifdef RCT_NEW_ARCH_ENABLED
+//   __weak RCTTextComponentView *_text;
+// #else
+  __weak RCTTextView *_text;
+// #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:[RCTTextComponentView class]] && "Previous sibling component is not an instance of RCTTextComponentView.");
+//   _text = (RCTTextComponentView *)view;
+//   UIView<RCTBackedTextViewProtocol> *backedTextView = [_text valueForKey:@"_backedTextView"];
+ #else
+   react_native_assert([view isKindOfClass:[RCTTextView class]] && "Previous sibling component is not an instance of RCTTextView.");
+   _text = (RCTTextView *)view;
+ #endif /* RCT_NEW_ARCH_ENABLED */
+
+   _markdownUtils = [[RCTMarkdownUtils alloc] initWithTextView:_text];
+   react_native_assert(_markdownStyle != nil);
+   [_markdownUtils setMarkdownStyle:_markdownStyle];
+
+   [_text setMarkdownUtils:_markdownUtils];
+}
+
+- (void)willMoveToWindow:(UIWindow *)newWindow
+{
+  // if (_text != nil) {
+  //   [_text 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:(nonnull RCTMarkdownStyle *)markdownStyle
+{
+  _markdownStyle = markdownStyle;
+  [_markdownUtils setMarkdownStyle:markdownStyle];
+  // [_text textDidChange]; // trigger attributed text update
+}
+
+@end

ios/MarkdownTextDecoratorViewManager.h

@@ -0,0 +1,5 @@
+#import <React/RCTViewManager.h>
+
+@interface MarkdownTextDecoratorViewManager : RCTViewManager
+
+@end

ios/MarkdownTextDecoratorViewManager.mm

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

ios/RCTMarkdownUtils.h

@@ -1,14 +1,18 @@
 #import <React/RCTBackedTextInputViewProtocol.h>
+#import <React/RCTTextView.h>
 #import <react-native-live-markdown/RCTMarkdownStyle.h>
 
 @interface RCTMarkdownUtils : NSObject
 
 @property (nonatomic) RCTMarkdownStyle *markdownStyle;
 @property (nonatomic) NSMutableArray<NSValue *> *quoteRanges;
 @property (weak, nonatomic) UIView<RCTBackedTextInputViewProtocol> *backedTextInputView;
+@property (weak, nonatomic) RCTTextView *textView;
 
 - (instancetype)initWithBackedTextInputView:(UIView<RCTBackedTextInputViewProtocol> *)backedTextInputView;
 
+- (instancetype)initWithTextView:(RCTTextView *)textView;
+
 - (NSAttributedString *)parseMarkdown:(NSAttributedString *)input;
 
 @end

ios/RCTMarkdownUtils.mm

@@ -18,6 +18,14 @@ - (instancetype)initWithBackedTextInputView:(UIView<RCTBackedTextInputViewProtoc
   return self;
 }
 
+- (instancetype)initWithTextView:(RCTTextView *)textView
+{
+  if (self = [super init]) {
+    _textView = textView;
+  }
+  return self;
+}
+
 - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input
 {
   RCTAssertMainQueue();
@@ -46,7 +54,13 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input
   JSValue *result = [function callWithArguments:@[inputString]];
   NSArray *ranges = [result toArray];
 
-  NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:inputString attributes:_backedTextInputView.defaultTextAttributes];
+//  NSDictionary<NSAttributedStringKey, id> *defaultTextAttributes = _backedTextInputView.defaultTextAttributes;
+//  if (defaultTextAttributes == nil) {
+//    defaultTextAttributes = @{};
+//  }
+//  assert(defaultTextAttributes != nil);
+//  NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:inputString attributes:defaultTextAttributes];
+  NSMutableAttributedString *attributedString = [input mutableCopy];
   [attributedString beginEditing];
 
   // If the attributed string ends with underlined text, blurring the single-line input imprints the underline style across the whole string.
@@ -80,7 +94,9 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input
         size = _markdownStyle.h1FontSize;
       }
       UIFont *newFont = [UIFont fontWithDescriptor:newFontDescriptor size:size];
-      [attributedString addAttribute:NSFontAttributeName value:newFont range:range];
+      if (newFont != nil) {
+        [attributedString addAttribute:NSFontAttributeName value:newFont range:range];
+      }
     }
 
     if ([type isEqualToString:@"syntax"]) {

ios/RCTTextView+Markdown.h

@@ -0,0 +1,17 @@
+#import <UIKit/UIKit.h>
+#import <React/RCTTextView.h>
+#import <react-native-live-markdown/RCTMarkdownUtils.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTTextView (Markdown)
+
+@property(nonatomic, nullable, getter=getMarkdownUtils) RCTMarkdownUtils *markdownUtils;
+
+- (void)markdown_setTextStorage:(NSTextStorage *)textStorage
+                   contentFrame:(CGRect)contentFrame
+                descendantViews:(NSArray<UIView *> *)descendantViews;
+
+@end
+
+NS_ASSUME_NONNULL_END

ios/RCTTextView+Markdown.mm

@@ -0,0 +1,44 @@
+#import <react-native-live-markdown/RCTTextView+Markdown.h>
+#import <react-native-live-markdown/RCTMarkdownUtils.h>
+#import <objc/message.h>
+
+@implementation RCTTextView (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_setTextStorage:(NSTextStorage *)textStorage
+                   contentFrame:(CGRect)contentFrame
+                descendantViews:(NSArray<UIView *> *)descendantViews
+{
+  RCTMarkdownUtils *markdownUtils = [self getMarkdownUtils];
+  if (markdownUtils != nil) {
+    NSRange range = NSMakeRange(0, [textStorage length]);
+    NSAttributedString *input = [textStorage attributedSubstringFromRange:range];
+    NSAttributedString *output = [markdownUtils parseMarkdown:input];
+    [textStorage replaceCharactersInRange:range withAttributedString:output];
+  }
+
+  // Call the original method
+  [self markdown_setTextStorage:textStorage contentFrame:contentFrame descendantViews:descendantViews];
+}
+
++ (void)load
+{
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    Class cls = [self class];
+    SEL originalSelector = @selector(setTextStorage:contentFrame:descendantViews:);
+    SEL swizzledSelector = @selector(markdown_setTextStorage:contentFrame:descendantViews:);
+    Method originalMethod = class_getInstanceMethod(cls, originalSelector);
+    Method swizzledMethod = class_getInstanceMethod(cls, swizzledSelector);
+    method_exchangeImplementations(originalMethod, swizzledMethod);
+  });
+}
+
+@end