@expensify/react-native-live-markdown 0.1.293 → 0.1.295

package/android/src/main/new_arch/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorShadowNode.cpp

@@ -14,13 +14,49 @@ namespace react {
 extern const char MarkdownTextInputDecoratorViewComponentName[] =
     "MarkdownTextInputDecoratorView";
 
+MarkdownTextInputDecoratorShadowNode::MarkdownTextInputDecoratorShadowNode(
+    ShadowNodeFragment const &fragment,
+    ShadowNodeFamily::Shared const &family,
+    ShadowNodeTraits traits)
+    : ConcreteViewShadowNode(fragment, family, traits) {
+  initialize();
+  createCustomContextContainer();
+  makeChildNodeMutable();
+
+  if (fragment.children) {
+    overwriteTextLayoutManager();
+  }
+}
+
+MarkdownTextInputDecoratorShadowNode::MarkdownTextInputDecoratorShadowNode(
+    ShadowNode const &sourceShadowNode,
+    ShadowNodeFragment const &fragment)
+    : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+  initialize();
+
+  const auto &sourceDecorator = static_cast<const MarkdownTextInputDecoratorShadowNode &>(sourceShadowNode);
+
+  customContextContainer_ = sourceDecorator.customContextContainer_;
+  previousMarkdownStyle_ = sourceDecorator.previousMarkdownStyle_;
+  previousParserId_ = sourceDecorator.previousParserId_;
+
+  updateCustomContextContainerIfNeeded();
+  makeChildNodeMutable();
+
+  if (fragment.children) {
+    overwriteTextLayoutManager();
+  }
+}
+
 void MarkdownTextInputDecoratorShadowNode::initialize() {
   // Setting display: contents style results in ForceFlattenView trait being set
   // on the shadow node. This trait causes the node not to have a host view. By
   // removing the trait, it's possible to force RN to create a host view, layout
   // of which can then be customized.
   ShadowNode::traits_.unset(ShadowNodeTraits::ForceFlattenView);
+}
 
+void MarkdownTextInputDecoratorShadowNode::makeChildNodeMutable() {
   // When the decorator is cloned and has a child node, the child node should be
   // cloned as well to ensure it is mutable.
   const auto &children = getChildren();
@@ -28,7 +64,7 @@ void MarkdownTextInputDecoratorShadowNode::initialize() {
     react_native_assert(
         children.size() == 1 &&
         "MarkdownTextInputDecoratorView received more than one child");
-    
+
     const auto clonedChild = children[0]->clone({});
     replaceChild(*children[0], clonedChild);
   }

package/android/src/main/new_arch/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorShadowNode.h

@@ -21,33 +21,10 @@ class JSI_EXPORT MarkdownTextInputDecoratorShadowNode final
 public:
   MarkdownTextInputDecoratorShadowNode(ShadowNodeFragment const &fragment,
                                        ShadowNodeFamily::Shared const &family,
-                                       ShadowNodeTraits traits)
-      : ConcreteViewShadowNode(fragment, family, traits) {
-    initialize();
-    createCustomContextContainer();
-
-    if (fragment.children) {
-      overwriteTextLayoutManager();
-    }
-  }
+                                       ShadowNodeTraits traits);
 
   MarkdownTextInputDecoratorShadowNode(ShadowNode const &sourceShadowNode,
-                                       ShadowNodeFragment const &fragment)
-      : ConcreteViewShadowNode(sourceShadowNode, fragment) {
-    initialize();
-
-    const auto &sourceDecorator = static_cast<const MarkdownTextInputDecoratorShadowNode &>(sourceShadowNode);
-
-    customContextContainer_ = sourceDecorator.customContextContainer_;
-    previousMarkdownStyle_ = sourceDecorator.previousMarkdownStyle_;
-    previousParserId_ = sourceDecorator.previousParserId_;
-
-    updateCustomContextContainerIfNeeded();
-
-    if (fragment.children) {
-      overwriteTextLayoutManager();
-    }
-  }
+                                       ShadowNodeFragment const &fragment);
 
   void appendChild(const ShadowNode::Shared &child) override;
 
@@ -69,6 +46,8 @@ private:
   void createCustomContextContainer();
 
   void updateCustomContextContainerIfNeeded();
+
+  void makeChildNodeMutable();
 };
 
 } // namespace react

package/apple/BlockquoteTextLayoutFragment.h

@@ -0,0 +1,15 @@
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+API_AVAILABLE(ios(15.0))
+@interface BlockquoteTextLayoutFragment : NSTextLayoutFragment
+
+@property (nonnull, atomic) RCTMarkdownUtils *markdownUtils;
+
+@property NSUInteger depth;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/apple/BlockquoteTextLayoutFragment.mm

@@ -0,0 +1,51 @@
+#import <RNLiveMarkdown/BlockquoteTextLayoutFragment.h>
+
+@implementation BlockquoteTextLayoutFragment
+
+- (CGRect)boundingRect {
+  CGRect fragmentTextBounds = CGRectNull;
+  for (NSTextLineFragment *lineFragment in self.textLineFragments) {
+    if (lineFragment.characterRange.length == 0) {
+      continue;
+    }
+    CGRect lineFragmentBounds = lineFragment.typographicBounds;
+    if (CGRectIsNull(fragmentTextBounds)) {
+      fragmentTextBounds = lineFragmentBounds;
+    } else {
+      fragmentTextBounds = CGRectUnion(fragmentTextBounds, lineFragmentBounds);
+    }
+  }
+  
+  CGFloat marginLeft = _markdownUtils.markdownStyle.blockquoteMarginLeft;
+  CGFloat borderWidth = _markdownUtils.markdownStyle.blockquoteBorderWidth;
+  CGFloat paddingLeft = _markdownUtils.markdownStyle.blockquotePaddingLeft;
+  CGFloat shift = marginLeft + borderWidth + paddingLeft;
+
+  fragmentTextBounds.origin.x -= (paddingLeft + borderWidth) + shift * (_depth - 1);
+  fragmentTextBounds.size.width = borderWidth + shift * (_depth - 1);
+
+  return fragmentTextBounds;
+}
+
+- (void)drawAtPoint:(CGPoint)point inContext:(CGContextRef)ctx {
+  CGFloat marginLeft = _markdownUtils.markdownStyle.blockquoteMarginLeft;
+  CGFloat borderWidth = _markdownUtils.markdownStyle.blockquoteBorderWidth;
+  CGFloat paddingLeft = _markdownUtils.markdownStyle.blockquotePaddingLeft;
+  CGFloat shift = marginLeft + borderWidth + paddingLeft;
+
+  [_markdownUtils.markdownStyle.blockquoteBorderColor setFill];
+
+  CGRect boundingRect = self.boundingRect;
+  for (NSUInteger i = 0; i < _depth; ++i) {
+    CGRect ribbonRect = CGRectMake(boundingRect.origin.x + i * shift, boundingRect.origin.y, borderWidth, boundingRect.size.height);
+    UIRectFill(ribbonRect);
+  }
+
+  [super drawAtPoint:point inContext:ctx];
+}
+
+- (CGRect)renderingSurfaceBounds {
+  return CGRectUnion(self.boundingRect, [super renderingSurfaceBounds]);
+}
+
+@end

package/apple/MarkdownTextInputDecoratorComponentView.mm

@@ -7,6 +7,7 @@
 
 #import <RNLiveMarkdown/MarkdownBackedTextInputDelegate.h>
 #import <RNLiveMarkdown/MarkdownLayoutManager.h>
+#import <RNLiveMarkdown/MarkdownTextLayoutManagerDelegate.h>
 #import <RNLiveMarkdown/MarkdownTextFieldObserver.h>
 #import <RNLiveMarkdown/MarkdownTextViewObserver.h>
 #import <RNLiveMarkdown/MarkdownTextInputDecoratorComponentView.h>
@@ -22,6 +23,7 @@ using namespace facebook::react;
   RCTMarkdownUtils *_markdownUtils;
   RCTMarkdownStyle *_markdownStyle;
   NSNumber *_parserId;
+  MarkdownTextLayoutManagerDelegate *_markdownTextLayoutManagerDelegate;
   MarkdownBackedTextInputDelegate *_markdownBackedTextInputDelegate;
   MarkdownTextStorageDelegate *_markdownTextStorageDelegate;
   MarkdownTextViewObserver *_markdownTextViewObserver;
@@ -111,18 +113,25 @@ using namespace facebook::react;
     // format initial value
     [_textView.textStorage setAttributedString:_textView.attributedText];
 
-    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)
-    // Consider removing this fix if it is no longer needed after migrating to TextKit 2.
-    CGSize contentSize = _textView.contentSize;
-    CGRect textBounds = [layoutManager usedRectForTextContainer:_textView.textContainer];
-    contentSize.height = textBounds.size.height + _textView.textContainerInset.top + _textView.textContainerInset.bottom;
-    [_textView setContentSize:contentSize];
-
-    layoutManager.allowsNonContiguousLayout = NO; // workaround for onScroll issue
-    object_setClass(layoutManager, [MarkdownLayoutManager class]);
-    [layoutManager setValue:_markdownUtils forKey:@"markdownUtils"];
+    if (@available(iOS 16.0, *)) {
+      _markdownTextLayoutManagerDelegate = [[MarkdownTextLayoutManagerDelegate alloc] init];
+      _markdownTextLayoutManagerDelegate.textStorage = _textView.textStorage;
+      _markdownTextLayoutManagerDelegate.markdownUtils = _markdownUtils;
+      _textView.textLayoutManager.delegate = _markdownTextLayoutManagerDelegate;
+    } else {
+      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)
+      // Consider removing this fix if it is no longer needed after migrating to TextKit 2.
+      CGSize contentSize = _textView.contentSize;
+      CGRect textBounds = [layoutManager usedRectForTextContainer:_textView.textContainer];
+      contentSize.height = textBounds.size.height + _textView.textContainerInset.top + _textView.textContainerInset.bottom;
+      [_textView setContentSize:contentSize];
+
+      layoutManager.allowsNonContiguousLayout = NO; // workaround for onScroll issue
+      object_setClass(layoutManager, [MarkdownLayoutManager class]);
+      [layoutManager setValue:_markdownUtils forKey:@"markdownUtils"];
+    }
 
     // register delegate for fixing cursor position after blockquote
     _markdownBackedTextInputDelegate = [[MarkdownBackedTextInputDelegate alloc] initWithTextView:_textView];
@@ -137,7 +146,9 @@ using namespace facebook::react;
   _observersAdded = false;
 
   if (_textView != nil) {
-    if (_textView.layoutManager != nil && [object_getClass(_textView.layoutManager) isEqual:[MarkdownLayoutManager class]]) {
+    if (@available(iOS 16.0, *)) {
+      _textView.textLayoutManager.delegate = nil;
+    } else if (_textView.layoutManager != nil && [object_getClass(_textView.layoutManager) isEqual:[MarkdownLayoutManager class]]) {
       [_textView.layoutManager setValue:nil forKey:@"markdownUtils"];
       object_setClass(_textView.layoutManager, [NSLayoutManager class]);
     }

package/apple/MarkdownTextInputDecoratorShadowNode.h

@@ -21,24 +21,10 @@ class JSI_EXPORT MarkdownTextInputDecoratorShadowNode final
 public:
   MarkdownTextInputDecoratorShadowNode(ShadowNodeFragment const &fragment,
                                        ShadowNodeFamily::Shared const &family,
-                                       ShadowNodeTraits traits)
-      : ConcreteViewShadowNode(fragment, family, traits) {
-    initialize();
-
-    if (fragment.children) {
-      overwriteMeasureCallbackConnector();
-    }
-  }
+                                       ShadowNodeTraits traits);
 
   MarkdownTextInputDecoratorShadowNode(ShadowNode const &sourceShadowNode,
-                                       ShadowNodeFragment const &fragment)
-      : ConcreteViewShadowNode(sourceShadowNode, fragment) {
-    initialize();
-
-    if (fragment.children) {
-      overwriteMeasureCallbackConnector();
-    }
-  }
+                                       ShadowNodeFragment const &fragment);
 
   void appendChild(const ShadowNode::Shared &child) override;
   void replaceChild(const ShadowNode &oldChild,
@@ -52,6 +38,7 @@ public:
 private:
   void initialize();
   void overwriteMeasureCallbackConnector();
+  void makeChildNodeMutable();
   void applyMarkdownFormattingToTextInputState(std::shared_ptr<TextInputShadowNode> node,
                      const LayoutContext &layoutContext) const;
   static YGSize yogaNodeMeasureCallbackConnector(YGNodeConstRef yogaNode,

package/apple/MarkdownTextInputDecoratorShadowNode.mm

@@ -15,6 +15,31 @@ namespace react {
 extern const char MarkdownTextInputDecoratorViewComponentName[] =
     "MarkdownTextInputDecoratorView";
 
+MarkdownTextInputDecoratorShadowNode::MarkdownTextInputDecoratorShadowNode(
+    ShadowNodeFragment const &fragment,
+    ShadowNodeFamily::Shared const &family,
+    ShadowNodeTraits traits)
+    : ConcreteViewShadowNode(fragment, family, traits) {
+  initialize();
+  makeChildNodeMutable();
+  
+  if (fragment.children) {
+    overwriteMeasureCallbackConnector();
+  }
+}
+
+MarkdownTextInputDecoratorShadowNode::MarkdownTextInputDecoratorShadowNode(
+    ShadowNode const &sourceShadowNode,
+    ShadowNodeFragment const &fragment)
+    : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+  initialize();
+  makeChildNodeMutable();
+  
+  if (fragment.children) {
+    overwriteMeasureCallbackConnector();
+  }
+}
+
 void MarkdownTextInputDecoratorShadowNode::initialize() {
   // Setting display: contents style results in ForceFlattenView trait being set
   // on the shadow node. This trait causes the node not to have a host view. By
@@ -23,6 +48,20 @@ void MarkdownTextInputDecoratorShadowNode::initialize() {
   ShadowNode::traits_.unset(ShadowNodeTraits::ForceFlattenView);
 }
 
+void MarkdownTextInputDecoratorShadowNode::makeChildNodeMutable() {
+  // When the decorator is cloned and has a child node, the child node should be
+  // cloned as well to ensure it is mutable.
+  const auto &children = getChildren();
+  if (!children.empty()) {
+    react_native_assert(
+        children.size() == 1 &&
+        "MarkdownTextInputDecoratorView received more than one child");
+
+    const auto clonedChild = children[0]->clone({});
+    replaceChild(*children[0], clonedChild);
+  }
+}
+
 void MarkdownTextInputDecoratorShadowNode::overwriteMeasureCallbackConnector() {
   const auto &children = getChildren();
   if (children.empty()) {

package/apple/MarkdownTextLayoutManagerDelegate.h

@@ -0,0 +1,14 @@
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MarkdownTextLayoutManagerDelegate : NSObject <NSTextLayoutManagerDelegate>
+
+@property (nonnull, atomic) NSTextStorage *textStorage;
+
+@property (nonnull, atomic) RCTMarkdownUtils *markdownUtils;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/apple/MarkdownTextLayoutManagerDelegate.mm

@@ -0,0 +1,22 @@
+#import <RNLiveMarkdown/MarkdownTextLayoutManagerDelegate.h>
+#import <RNLiveMarkdown/BlockquoteTextLayoutFragment.h>
+#import <RNLiveMarkdown/MarkdownFormatter.h>
+
+@implementation MarkdownTextLayoutManagerDelegate
+
+- (NSTextLayoutFragment *)textLayoutManager:(NSTextLayoutManager *)textLayoutManager textLayoutFragmentForLocation:(id <NSTextLocation>)location inTextElement:(NSTextElement *)textElement
+API_AVAILABLE(ios(15.0)){
+  NSInteger index = [textLayoutManager offsetFromLocation:textLayoutManager.documentRange.location toLocation:location];
+  if (index < self.textStorage.length) {
+    NSNumber *depth = [self.textStorage attribute:RCTLiveMarkdownBlockquoteDepthAttributeName atIndex:index effectiveRange:nil];
+    if (depth != nil) {
+      BlockquoteTextLayoutFragment *textLayoutFragment = [[BlockquoteTextLayoutFragment alloc] initWithTextElement:textElement range:textElement.elementRange];
+      textLayoutFragment.markdownUtils = _markdownUtils;
+      textLayoutFragment.depth = [depth unsignedIntValue];
+      return textLayoutFragment;
+    }
+  }
+  return [[NSTextLayoutFragment alloc] initWithTextElement:textElement range:textElement.elementRange];
+}
+
+@end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.293",
+  "version": "0.1.295",
   "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",