Add macOS support

README.md

@@ -6,7 +6,7 @@
 - ⌨️ Live synchronous formatting on every keystroke
 - ⚡ Fully native experience (selection, spellcheck, autocomplete)
 - 🎨 Customizable styles
-- 🌐 Universal support (Android, iOS, web)
+- 🌐 Universal support (Android, iOS, macOS, web)
 - 🏗️ Supports New Architecture
 
 ## Installation

RNLiveMarkdown.podspec

@@ -15,7 +15,7 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "11.0", :visionos => "1.0" }
+  s.platforms    = { :ios => "11.0", :visionos => "1.0", :osx => "10.15" }
   s.source       = { :git => "https://github.com/expensify/react-native-live-markdown.git", :tag => "#{s.version}" }
 
   s.source_files = "apple/**/*.{h,m,mm}"

apple/MarkdownLayoutManager.h

@@ -1,4 +1,3 @@
-#import <UIKit/UIKit.h>
 #import <RNLiveMarkdown/RCTMarkdownUtils.h>
 
 NS_ASSUME_NONNULL_BEGIN

apple/MarkdownLayoutManager.mm

@@ -1,4 +1,5 @@
 #import <RNLiveMarkdown/MarkdownLayoutManager.h>
+#import <objc/runtime.h>
 
 @implementation MarkdownLayoutManager
 
@@ -8,7 +9,7 @@ - (void)drawBackgroundForGlyphRange:(NSRange)glyphsToShow atPoint:(CGPoint)origi
   [self enumerateLineFragmentsForGlyphRange:glyphsToShow usingBlock:^(CGRect rect, CGRect usedRect, NSTextContainer * _Nonnull textContainer, NSRange glyphRange, BOOL * _Nonnull stop) {
     __block BOOL isBlockquote = NO;
     __block int currentDepth = 0;
-    RCTMarkdownUtils *markdownUtils = [self valueForKey:@"markdownUtils"];
+    RCTMarkdownUtils *markdownUtils = objc_getAssociatedObject(self, @selector(markdownUtils));
     [markdownUtils.blockquoteRangesAndLevels enumerateObjectsUsingBlock:^(NSDictionary *item, NSUInteger idx, BOOL * _Nonnull stop) {
       NSRange range = [[item valueForKey:@"range"] rangeValue];
       currentDepth = [[item valueForKey:@"depth"] unsignedIntegerValue];
@@ -31,7 +32,7 @@ - (void)drawBackgroundForGlyphRange:(NSRange)glyphsToShow atPoint:(CGPoint)origi
         CGFloat x =  paddingLeft + (level * shift) + markdownUtils.markdownStyle.blockquoteMarginLeft;
         CGRect lineRect = CGRectMake(x, y, width, height);
         [markdownUtils.markdownStyle.blockquoteBorderColor setFill];
-        UIRectFill(lineRect);
+        NSRectFill(lineRect);
       }
     }
   }];

apple/MarkdownTextInputDecoratorView.h

@@ -1,9 +1,8 @@
-#import <UIKit/UIKit.h>
 #import <RNLiveMarkdown/RCTMarkdownStyle.h>
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface MarkdownTextInputDecoratorView : UIView
+@interface MarkdownTextInputDecoratorView : RCTUIView
 
 - (void)setMarkdownStyle:(RCTMarkdownStyle *)markdownStyle;
 

apple/MarkdownTextInputDecoratorView.mm

@@ -22,7 +22,7 @@ @implementation MarkdownTextInputDecoratorView {
 #else
   __weak RCTBaseTextInputView *_textInput;
 #endif /* RCT_NEW_ARCH_ENABLED */
-  __weak UIView<RCTBackedTextInputViewProtocol> *_backedTextInputView;
+  __weak RCTUIView<RCTBackedTextInputViewProtocol> *_backedTextInputView;
   __weak RCTBackedTextFieldDelegateAdapter *_adapter;
   __weak RCTUITextView *_textView;
 }
@@ -47,7 +47,7 @@ - (void)didMoveToWindow {
 #endif /* RCT_NEW_ARCH_ENABLED */
 
   react_native_assert(currentIndex != 0 && currentIndex != NSNotFound && "Error while finding current component.");
-  UIView *view = [viewsArray objectAtIndex:currentIndex - 1];
+  RCTUIView *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.");
@@ -78,17 +78,17 @@ - (void)didMoveToWindow {
     CGSize contentSize = _textView.contentSize;
     CGRect textBounds = [layoutManager usedRectForTextContainer:_textView.textContainer];
     contentSize.height = textBounds.size.height + _textView.textContainerInset.top + _textView.textContainerInset.bottom;
-    [_textView setContentSize:contentSize];
+    // [_textView setContentSize:contentSize]; // TODO
 
     layoutManager.allowsNonContiguousLayout = NO; // workaround for onScroll issue
     object_setClass(layoutManager, [MarkdownLayoutManager class]);
-    [layoutManager setValue:_markdownUtils forKey:@"markdownUtils"];
+    objc_setAssociatedObject(layoutManager, @selector(markdownUtils), _markdownUtils, OBJC_ASSOCIATION_RETAIN);
   } else {
     react_native_assert(false && "Cannot enable Markdown for this type of TextInput.");
   }
 }
 
-- (void)willMoveToWindow:(UIWindow *)newWindow
+- (void)willMoveToWindow:(RCTUIWindow *)newWindow
 {
   if (_textInput != nil) {
     [_textInput setMarkdownUtils:nil];
@@ -98,9 +98,10 @@ - (void)willMoveToWindow:(UIWindow *)newWindow
   }
   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]);
+    NSLayoutManager *layoutManager = _textView.layoutManager;
+    if (layoutManager != nil && [object_getClass(layoutManager) isEqual:[MarkdownLayoutManager class]]) {
+      objc_setAssociatedObject(layoutManager, @selector(markdownUtils), nil, OBJC_ASSOCIATION_RETAIN);
+      object_setClass(layoutManager, [NSLayoutManager class]);
     }
   }
 }

apple/MarkdownTextInputDecoratorViewManager.mm

@@ -5,7 +5,7 @@ @implementation MarkdownTextInputDecoratorViewManager
 
 RCT_EXPORT_MODULE(MarkdownTextInputDecoratorView)
 
-- (UIView *)view
+- (RCTUIView *)view
 {
   return [[MarkdownTextInputDecoratorView alloc] init];
 }

apple/RCTBackedTextFieldDelegateAdapter+Markdown.mm

@@ -18,7 +18,7 @@ - (void)markdown_textFieldDidChange
   RCTMarkdownUtils *markdownUtils = [self getMarkdownUtils];
   if (markdownUtils != nil) {
     RCTUITextField *backedTextInputView = [self valueForKey:@"_backedTextInputView"];
-    UITextRange *range = backedTextInputView.selectedTextRange;
+    NSRange range = [backedTextInputView selectedTextRange];
     backedTextInputView.attributedText = [markdownUtils parseMarkdown:backedTextInputView.attributedText withAttributes:backedTextInputView.defaultTextAttributes];
     [backedTextInputView setSelectedTextRange:range notifyDelegate:YES];
   }

apple/RCTBaseTextInputView+Markdown.mm

@@ -47,7 +47,7 @@ - (void)markdown_updateLocalData
     id<RCTBackedTextInputViewProtocol> backedTextInputView = self.backedTextInputView;
     NSAttributedString *oldAttributedText = backedTextInputView.attributedText;
     NSAttributedString *newAttributedText = [markdownUtils parseMarkdown:oldAttributedText withAttributes:backedTextInputView.defaultTextAttributes];
-    UITextRange *range = backedTextInputView.selectedTextRange;
+    NSRange range = backedTextInputView.selectedTextRange;
 
     // update attributed text without emitting onSelectionChange event
     id<RCTBackedTextInputDelegate> delegate = backedTextInputView.textInputDelegate;
@@ -84,7 +84,7 @@ + (void)load
       SEL swizzledSelector = @selector(markdown_updateLocalData);
       Method originalMethod = class_getInstanceMethod(cls, originalSelector);
       Method swizzledMethod = class_getInstanceMethod(cls, swizzledSelector);
-      method_exchangeImplementations(originalMethod, swizzledMethod);
+      // method_exchangeImplementations(originalMethod, swizzledMethod);
     }
 
     {

apple/RCTMarkdownStyle.h

@@ -1,4 +1,4 @@
-#import <UIKit/UIKit.h>
+#import <React/RCTUIKit.h>
 
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <react/renderer/components/RNLiveMarkdownSpec/Props.h>
@@ -8,28 +8,28 @@
 
 @interface RCTMarkdownStyle : NSObject
 
-@property (nonatomic) UIColor *syntaxColor;
-@property (nonatomic) UIColor *linkColor;
+@property (nonatomic) RCTUIColor *syntaxColor;
+@property (nonatomic) RCTUIColor *linkColor;
 @property (nonatomic) CGFloat h1FontSize;
 @property (nonatomic) CGFloat emojiFontSize;
-@property (nonatomic) UIColor *blockquoteBorderColor;
+@property (nonatomic) RCTUIColor *blockquoteBorderColor;
 @property (nonatomic) CGFloat blockquoteBorderWidth;
 @property (nonatomic) CGFloat blockquoteMarginLeft;
 @property (nonatomic) CGFloat blockquotePaddingLeft;
 @property (nonatomic) NSString *codeFontFamily;
 @property (nonatomic) CGFloat codeFontSize;
-@property (nonatomic) UIColor *codeColor;
-@property (nonatomic) UIColor *codeBackgroundColor;
+@property (nonatomic) RCTUIColor *codeColor;
+@property (nonatomic) RCTUIColor *codeBackgroundColor;
 @property (nonatomic) NSString *preFontFamily;
 @property (nonatomic) CGFloat preFontSize;
-@property (nonatomic) UIColor *preColor;
-@property (nonatomic) UIColor *preBackgroundColor;
-@property (nonatomic) UIColor *mentionHereColor;
-@property (nonatomic) UIColor *mentionHereBackgroundColor;
-@property (nonatomic) UIColor *mentionUserColor;
-@property (nonatomic) UIColor *mentionUserBackgroundColor;
-@property (nonatomic) UIColor *mentionReportColor;
-@property (nonatomic) UIColor *mentionReportBackgroundColor;
+@property (nonatomic) RCTUIColor *preColor;
+@property (nonatomic) RCTUIColor *preBackgroundColor;
+@property (nonatomic) RCTUIColor *mentionHereColor;
+@property (nonatomic) RCTUIColor *mentionHereBackgroundColor;
+@property (nonatomic) RCTUIColor *mentionUserColor;
+@property (nonatomic) RCTUIColor *mentionUserBackgroundColor;
+@property (nonatomic) RCTUIColor *mentionReportColor;
+@property (nonatomic) RCTUIColor *mentionReportBackgroundColor;
 
 #ifdef RCT_NEW_ARCH_ENABLED
 - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecoratorViewMarkdownStyleStruct &)style;

apple/RCTMarkdownUtils.mm

@@ -197,7 +197,7 @@ static void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)
       return;
     }
 
-    maximumFontLineHeight = MAX(font.lineHeight, maximumFontLineHeight);
+    maximumFontLineHeight = MAX(UIFontLineHeight(font), maximumFontLineHeight); // [macOS]
   }];
 
   if (maximumLineHeight < maximumFontLineHeight) {

apple/RCTUITextView+Markdown.h

@@ -1,4 +1,3 @@
-#import <UIKit/UIKit.h>
 #import <React/RCTUITextView.h>
 #import <RNLiveMarkdown/RCTMarkdownUtils.h>
 

apple/RCTUITextView+Markdown.mm

@@ -16,9 +16,10 @@ - (void)markdown_textDidChange
 {
   RCTMarkdownUtils *markdownUtils = [self getMarkdownUtils];
   if (markdownUtils != nil) {
-    UITextRange *range = self.selectedTextRange;
-    super.attributedText = [markdownUtils parseMarkdown:self.attributedText withAttributes:self.defaultTextAttributes];
-    [super setSelectedTextRange:range]; // prevents cursor from jumping at the end when typing in the middle of the text
+    NSRange range = [self selectedTextRange];
+    NSAttributedString *attributedString = [markdownUtils parseMarkdown:self.attributedText withAttributes:self.defaultTextAttributes];
+    [self.textStorage setAttributedString:attributedString ?: [NSAttributedString new]];
+    [super setSelectedRange:range]; // prevents cursor from jumping at the end when typing in the middle of the text
     self.typingAttributes = self.defaultTextAttributes; // removes indent in new line when typing after blockquote
   }
 
@@ -35,7 +36,7 @@ + (void)load
     SEL swizzledSelector = @selector(markdown_textDidChange);
     Method originalMethod = class_getInstanceMethod(cls, originalSelector);
     Method swizzledMethod = class_getInstanceMethod(cls, swizzledSelector);
-    method_exchangeImplementations(originalMethod, swizzledMethod);
+    // method_exchangeImplementations(originalMethod, swizzledMethod);
   });
 }
 

src/styleUtils.ts

@@ -7,6 +7,7 @@ type PartialMarkdownStyle = Partial<{
 
 const FONT_FAMILY_MONOSPACE = Platform.select({
   ios: 'Courier',
+  macos: 'Menlo',
   default: 'monospace',
 });