Use NSTextStorageDelegate instead of method swizzling

apple/MarkdownCommitHook.mm

@@ -170,8 +170,8 @@
             }
 
             // apply markdown
-            auto newString = [utils parseMarkdown:nsAttributedString
-                                   withAttributes:defaultNSTextAttributes];
+            NSMutableAttributedString *newString = [nsAttributedString mutableCopy];
+            [utils applyFormatting:newString withDefaultTextAttributes:defaultNSTextAttributes];
 
             // create a clone of the old TextInputState and update the
             // attributed string box to point to the string with markdown
@@ -217,8 +217,8 @@
                     stateData.attributedStringBox);
 
             // apply markdown
-            auto newString = [utils parseMarkdown:nsAttributedString
-                                   withAttributes:defaultNSTextAttributes];
+            NSMutableAttributedString *newString = [nsAttributedString mutableCopy];
+            [utils applyFormatting:newString withDefaultTextAttributes:defaultNSTextAttributes];
 
             // create a clone of the old TextInputState and update the
             // attributed string box to point to the string with markdown

apple/MarkdownTextFieldObserver.h

@@ -0,0 +1,19 @@
+#import <UIKit/UIKit.h>
+#import <React/RCTUITextField.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MarkdownTextFieldObserver : NSObject
+
+@property (nonatomic, nullable, strong) RCTMarkdownUtils *markdownUtils;
+
+@property (nonatomic, nullable, strong) RCTUITextField *textField;
+
+@property (nonatomic) BOOL active;
+
+- (void)textFieldDidChange:(UITextField *)textField;
+
+@end
+
+NS_ASSUME_NONNULL_END

apple/MarkdownTextFieldObserver.mm

@@ -0,0 +1,34 @@
+#import <RNLiveMarkdown/MarkdownTextFieldObserver.h>
+#import "react_native_assert.h"
+
+@implementation MarkdownTextFieldObserver
+
+- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context
+{
+  react_native_assert(_textField != nil);
+
+  if (_active && ([keyPath isEqualToString:@"text"] || [keyPath isEqualToString:@"attributedText"])) {
+    [self textFieldDidChange:_textField];
+  }
+}
+
+- (void)textFieldDidChange:(__unused UITextField *)textField {
+  react_native_assert(_markdownUtils != nil);
+  react_native_assert(_textField != nil);
+  react_native_assert(_textField.defaultTextAttributes != nil);
+
+  if (_textField.markedTextRange != nil) {
+    return; // skip formatting during multi-stage input to avoid breaking internal state
+  }
+
+  NSMutableAttributedString *attributedText = [textField.attributedText mutableCopy];
+  [_markdownUtils applyFormatting:attributedText withDefaultTextAttributes:_textField.defaultTextAttributes];
+
+  UITextRange *textRange = _textField.selectedTextRange;
+  _active = NO; // prevent recursion
+  _textField.attributedText = attributedText;
+  _active = YES;
+  [_textField setSelectedTextRange:textRange notifyDelegate:NO];
+}
+
+@end

apple/MarkdownTextInputDecoratorView.mm

@@ -1,30 +1,27 @@
 #import <React/RCTUITextField.h>
+#import <React/RCTUITextView.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>
+#import <React/RCTTextInputComponentView.h>
 #else
-#import <RNLiveMarkdown/RCTBaseTextInputView+Markdown.h>
-#endif /* RCT_NEW_ARCH_ENABLED */
+#import <React/RCTBaseTextInputView.h>
+#endif
+
+#import <RNLiveMarkdown/MarkdownLayoutManager.h>
+#import <RNLiveMarkdown/MarkdownTextInputDecoratorView.h>
+#import <RNLiveMarkdown/MarkdownTextStorageDelegate.h>
+#import <RNLiveMarkdown/MarkdownTextFieldObserver.h>
 
 #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 UIView<RCTBackedTextInputViewProtocol> *_backedTextInputView;
-  __weak RCTBackedTextFieldDelegateAdapter *_adapter;
+  MarkdownTextStorageDelegate *_markdownTextStorageDelegate;
+  MarkdownTextFieldObserver *_markdownTextFieldObserver;
   __weak RCTUITextView *_textView;
+  __weak RCTUITextField *_textField;
 }
 
 - (void)didMoveToWindow {
@@ -51,26 +48,55 @@ - (void)didMoveToWindow {
 
 #ifdef RCT_NEW_ARCH_ENABLED
   react_native_assert([view isKindOfClass:[RCTTextInputComponentView class]] && "Previous sibling component is not an instance of RCTTextInputComponentView.");
-  _textInput = (RCTTextInputComponentView *)view;
-  _backedTextInputView = [_textInput valueForKey:@"_backedTextInputView"];
+  RCTTextInputComponentView *textInputComponentView = (RCTTextInputComponentView *)view;
+  UIView<RCTBackedTextInputViewProtocol> *backedTextInputView = [textInputComponentView valueForKey:@"_backedTextInputView"];
 #else
   react_native_assert([view isKindOfClass:[RCTBaseTextInputView class]] && "Previous sibling component is not an instance of RCTBaseTextInputView.");
-  _textInput = (RCTBaseTextInputView *)view;
-  _backedTextInputView = _textInput.backedTextInputView;
+  RCTBaseTextInputView *baseTextInputView = (RCTBaseTextInputView *)view;
+  UIView<RCTBackedTextInputViewProtocol> *backedTextInputView = baseTextInputView.backedTextInputView;
 #endif /* RCT_NEW_ARCH_ENABLED */
 
   _markdownUtils = [[RCTMarkdownUtils alloc] init];
   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];
+  if ([backedTextInputView isKindOfClass:[RCTUITextField class]]) {
+    _textField = (RCTUITextField *)backedTextInputView;
+
+    // make sure `adjustsFontSizeToFitWidth` is disabled, otherwise formatting will be overwritten
+    react_native_assert(_textField.adjustsFontSizeToFitWidth == NO);
+
+    _markdownTextFieldObserver = [[MarkdownTextFieldObserver alloc] init];
+    _markdownTextFieldObserver.markdownUtils = _markdownUtils;
+    _markdownTextFieldObserver.textField = _textField;
+    _markdownTextFieldObserver.active = YES;
+
+    // register observers for future edits
+    [_textField addTarget:_markdownTextFieldObserver action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged];
+    [_textField addObserver:_markdownTextFieldObserver forKeyPath:@"text" options:NSKeyValueObservingOptionNew context:NULL];
+    [_textField addObserver:_markdownTextFieldObserver forKeyPath:@"attributedText" options:NSKeyValueObservingOptionNew context:NULL];
+
+    // format initial value
+    [_markdownTextFieldObserver textFieldDidChange:_textField];
+
+    // TODO: register blockquotes layout manager
+  } else if ([backedTextInputView isKindOfClass:[RCTUITextView class]]) {
+    _textView = (RCTUITextView *)backedTextInputView;
+
+    _markdownTextStorageDelegate = [[MarkdownTextStorageDelegate alloc] init];
+    _markdownTextStorageDelegate.markdownUtils = _markdownUtils;
+    _markdownTextStorageDelegate.textView = _textView;
+
+    // register delegate for future edits
+    _textView.textStorage.delegate = _markdownTextStorageDelegate;
+
+#ifdef RCT_NEW_ARCH_ENABLED
+    // format initial value
+    [_textView.textStorage setAttributedString:_textView.attributedText];
+#else
+    // `_textView.defaultTextAttributes` is nil here, initial value will be passed to `setAttributedText:` that will be called later
+#endif
+
     NSLayoutManager *layoutManager = _textView.layoutManager; // switching to TextKit 1 compatibility mode
 
     // Correct content height in TextKit 1 compatibility mode. (See https://github.com/Expensify/App/issues/41567)
@@ -90,18 +116,22 @@ - (void)didMoveToWindow {
 
 - (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]);
     }
+    _markdownTextStorageDelegate = nil;
+    _textView.textStorage.delegate = nil;
+    _textView = nil;
+  }
+
+  if (_textField != nil) {
+    [_textField removeTarget:_markdownTextFieldObserver action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged];
+    [_textField removeObserver:_markdownTextFieldObserver forKeyPath:@"text" context:NULL];
+    [_textField removeObserver:_markdownTextFieldObserver forKeyPath:@"attributedText" context:NULL];
+    _markdownTextFieldObserver = nil;
+    _textField = nil;
   }
 }
 
@@ -110,17 +140,8 @@ - (void)setMarkdownStyle:(RCTMarkdownStyle *)markdownStyle
   _markdownStyle = markdownStyle;
   [_markdownUtils setMarkdownStyle:markdownStyle];
 
-  if (_textView != nil) {
-    // We want to use `textStorage` for applying markdown when possible. Currently it's only available for UITextView
-    [_textView textDidChange];
-  } else {
-    // apply new styles
-#ifdef RCT_NEW_ARCH_ENABLED
-    [_textInput _setAttributedString:_backedTextInputView.attributedText];
-#else
-    [_textInput setAttributedText:_textInput.attributedText];
-#endif /* RCT_NEW_ARCH_ENABLED */
-  }
+  // trigger reformatting
+  [_textView.textStorage setAttributedString:_textView.attributedText];
 }
 
 @end

apple/MarkdownTextStorageDelegate.h

@@ -0,0 +1,15 @@
+#import <UIKit/UIKit.h>
+#import <React/RCTUITextView.h>
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MarkdownTextStorageDelegate : NSObject <NSTextStorageDelegate>
+
+@property(nonatomic, nullable) RCTMarkdownUtils *markdownUtils;
+
+@property(nonatomic, nullable, strong) RCTUITextView *textView;
+
+@end
+
+NS_ASSUME_NONNULL_END

apple/MarkdownTextStorageDelegate.mm

@@ -0,0 +1,17 @@
+#import <RNLiveMarkdown/MarkdownTextStorageDelegate.h>
+#import "react_native_assert.h"
+
+@implementation MarkdownTextStorageDelegate
+
+- (void)textStorage:(NSTextStorage *)textStorage didProcessEditing:(NSTextStorageEditActions)editedMask range:(NSRange)editedRange changeInLength:(NSInteger)delta {
+  react_native_assert(_markdownUtils != nil);
+  react_native_assert(_textView != nil);
+  react_native_assert(_textView.defaultTextAttributes != nil);
+
+  [_markdownUtils applyFormatting:textStorage withDefaultTextAttributes:_textView.defaultTextAttributes];
+
+  // TODO: fix cursor position when adding newline after a blockquote (probably not here though)
+  // TODO: fix spellcheck not working for any of previous words when component value is controlled and contains bold (probably not here though)
+}
+
+@end