react-native-enriched-markdown 0.1.0 → 0.2.0

package/ios/attachments/EnrichedMarkdownImageAttachment.h

@@ -0,0 +1,23 @@
+#pragma once
+#import <UIKit/UIKit.h>
+
+@class StyleConfig;
+@class UITextView;
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * Custom NSTextAttachment for rendering markdown images.
+ * Images are loaded asynchronously and scaled dynamically based on text container width.
+ * Supports inline and block images with custom height and border radius from config.
+ */
+@interface EnrichedMarkdownImageAttachment : NSTextAttachment
+
+@property (nonatomic, readonly) NSString *imageURL;
+@property (nonatomic, readonly) BOOL isInline;
+
+- (instancetype)initWithImageURL:(NSString *)imageURL config:(StyleConfig *)config isInline:(BOOL)isInline;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/attachments/EnrichedMarkdownImageAttachment.m

@@ -0,0 +1,185 @@
+#import "EnrichedMarkdownImageAttachment.h"
+#import "RuntimeKeys.h"
+#import "StyleConfig.h"
+#import <React/RCTLog.h>
+#import <objc/runtime.h>
+
+@interface EnrichedMarkdownImageAttachment ()
+@property (nonatomic, readwrite) NSString *imageURL;
+@property (nonatomic, weak) StyleConfig *config;
+@property (nonatomic, assign) BOOL isInline;
+@property (nonatomic, assign) CGFloat cachedHeight;
+@property (nonatomic, assign) CGFloat cachedBorderRadius;
+@property (nonatomic, weak) NSTextContainer *textContainer;
+@property (nonatomic, weak) UITextView *textView;
+@property (nonatomic, strong) UIImage *originalImage;
+@property (nonatomic, strong) UIImage *loadedImage;
+@property (nonatomic, strong) NSURLSessionDataTask *loadingTask;
+@end
+
+@implementation EnrichedMarkdownImageAttachment
+
+- (instancetype)initWithImageURL:(NSString *)imageURL config:(StyleConfig *)config isInline:(BOOL)isInline
+{
+  if (self = [super init]) {
+    _imageURL = imageURL;
+    _config = config;
+    _isInline = isInline;
+    _cachedHeight = isInline ? [config inlineImageSize] : [config imageHeight];
+    _cachedBorderRadius = [config imageBorderRadius];
+
+    [self setupPlaceholder];
+    [self loadImage];
+  }
+  return self;
+}
+
+- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer
+                      proposedLineFragment:(CGRect)lineFrag
+                             glyphPosition:(CGPoint)position
+                            characterIndex:(NSUInteger)charIndex
+{
+  CGFloat height = self.cachedHeight;
+  CGFloat width = self.isInline ? height : (lineFrag.size.width > 0 ? lineFrag.size.width : height);
+  return CGRectMake(0, 0, width, height);
+}
+
+- (UIImage *)imageForBounds:(CGRect)imageBounds
+              textContainer:(NSTextContainer *)textContainer
+             characterIndex:(NSUInteger)charIndex
+{
+  self.textContainer = textContainer;
+
+  // If width is now known but we haven't scaled yet, trigger it
+  if (self.originalImage && !self.loadedImage && imageBounds.size.width > 0) {
+    self.bounds = imageBounds;
+    [self handleLoadedImage:self.originalImage];
+  }
+
+  return self.loadedImage ?: self.image;
+}
+
+- (void)handleLoadedImage:(UIImage *)image
+{
+  if (!image)
+    return;
+  self.originalImage = image;
+
+  __weak typeof(self) weakSelf = self;
+  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
+    __strong typeof(weakSelf) strongSelf = weakSelf;
+    if (!strongSelf)
+      return;
+
+    CGFloat targetWidth = strongSelf.isInline ? strongSelf.cachedHeight : strongSelf.bounds.size.width;
+    if (targetWidth <= 0)
+      return;
+
+    UIImage *scaled = [strongSelf scaleImage:image
+                                     toWidth:targetWidth
+                                      height:strongSelf.cachedHeight
+                                borderRadius:strongSelf.cachedBorderRadius];
+
+    dispatch_async(dispatch_get_main_queue(), ^{
+      strongSelf.loadedImage = scaled;
+
+      if (strongSelf.isInline) {
+        // Use scaled image for RTF export (RTF uses self.image dimensions)
+        strongSelf.image = scaled;
+        strongSelf.bounds = CGRectMake(0, 0, strongSelf.cachedHeight, strongSelf.cachedHeight);
+      } else {
+        // Use original for "Save to Camera Roll" (no baked-in rounded corners)
+        strongSelf.image = image;
+      }
+
+      [strongSelf updateUI];
+    });
+  });
+}
+
+- (void)updateUI
+{
+  UITextView *textView = [self getTextView];
+  if (!textView)
+    return;
+
+  NSRange range = [self findAttachmentRangeInText:textView.attributedText];
+  if (range.location == NSNotFound)
+    return;
+
+  [textView.layoutManager invalidateDisplayForCharacterRange:range];
+  if (!self.isInline) {
+    [textView.layoutManager invalidateLayoutForCharacterRange:range actualCharacterRange:NULL];
+  }
+}
+
+- (UITextView *)getTextView
+{
+  if (self.textView)
+    return self.textView;
+  if (!self.textContainer)
+    return nil;
+  self.textView = objc_getAssociatedObject(self.textContainer, kTextViewKey);
+  return self.textView;
+}
+
+- (void)setupPlaceholder
+{
+  CGFloat size = self.cachedHeight;
+  self.bounds = CGRectMake(0, 0, size, size);
+  UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:CGSizeMake(size, size)];
+  self.image = [renderer imageWithActions:^(UIGraphicsImageRendererContext *ctx){}];
+}
+
+- (void)loadImage
+{
+  if (self.imageURL.length == 0)
+    return;
+  NSURL *url = [NSURL URLWithString:self.imageURL];
+  if (!url)
+    return;
+
+  __weak typeof(self) weakSelf = self;
+  self.loadingTask =
+      [[NSURLSession sharedSession] dataTaskWithURL:url
+                                  completionHandler:^(NSData *data, NSURLResponse *res, NSError *err) {
+                                    if (data) {
+                                      UIImage *img = [UIImage imageWithData:data];
+                                      dispatch_async(dispatch_get_main_queue(), ^{ [weakSelf handleLoadedImage:img]; });
+                                    }
+                                  }];
+  [self.loadingTask resume];
+}
+
+- (UIImage *)scaleImage:(UIImage *)image toWidth:(CGFloat)w height:(CGFloat)h borderRadius:(CGFloat)r
+{
+  UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:CGSizeMake(w, h)];
+  return [renderer imageWithActions:^(UIGraphicsImageRendererContext *ctx) {
+    if (r > 0) {
+      [[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, w, h) cornerRadius:r] addClip];
+    }
+    [image drawInRect:CGRectMake(0, 0, w, h)];
+  }];
+}
+
+- (NSRange)findAttachmentRangeInText:(NSAttributedString *)text
+{
+  __block NSRange found = NSMakeRange(NSNotFound, 0);
+  [text enumerateAttribute:NSAttachmentAttributeName
+                   inRange:NSMakeRange(0, text.length)
+                   options:0
+                usingBlock:^(id val, NSRange range, BOOL *stop) {
+                  if (val == self) {
+                    found = range;
+                    *stop = YES;
+                  }
+                }];
+  return found;
+}
+
+- (void)dealloc
+{
+  [_loadingTask cancel];
+}
+
+@end

package/ios/attachments/ThematicBreakAttachment.h

@@ -0,0 +1,15 @@
+#pragma once
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface ThematicBreakAttachment : NSTextAttachment
+
+@property (nonatomic, strong) UIColor *lineColor;
+@property (nonatomic, assign) CGFloat lineHeight;
+@property (nonatomic, assign) CGFloat marginTop;
+@property (nonatomic, assign) CGFloat marginBottom;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/attachments/ThematicBreakAttachment.m

@@ -0,0 +1,33 @@
+#import "ThematicBreakAttachment.h"
+
+@implementation ThematicBreakAttachment
+
+- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer
+                      proposedLineFragment:(CGRect)lineFrag
+                             glyphPosition:(CGPoint)position
+                            characterIndex:(NSUInteger)charIndex
+{
+  CGFloat totalHeight = self.marginTop + self.lineHeight + self.marginBottom;
+  return CGRectMake(0, 0, CGRectGetWidth(lineFrag), totalHeight);
+}
+
+- (UIImage *)imageForBounds:(CGRect)imageBounds
+              textContainer:(NSTextContainer *)textContainer
+             characterIndex:(NSUInteger)charIndex
+{
+  UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:imageBounds.size];
+
+  return [renderer imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
+    CGContextRef ctx = rendererContext.CGContext;
+
+    CGFloat lineY = self.marginTop + (self.lineHeight / 2.0);
+
+    [self.lineColor setStroke];
+    CGContextSetLineWidth(ctx, self.lineHeight);
+    CGContextMoveToPoint(ctx, 0, lineY);
+    CGContextAddLineToPoint(ctx, imageBounds.size.width, lineY);
+    CGContextStrokePath(ctx);
+  }];
+}
+
+@end

package/ios/generated/EnrichedMarkdownTextSpec/ComponentDescriptors.cpp

@@ -0,0 +1,22 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateComponentDescriptorCpp.js
+ */
+
+#include "ComponentDescriptors.h"
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+
+namespace facebook::react {
+
+void EnrichedMarkdownTextSpec_registerComponentDescriptorsFromCodegen(
+  std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
+registry->add(concreteComponentDescriptorProvider<EnrichedMarkdownTextComponentDescriptor>());
+}
+
+} // namespace facebook::react

package/ios/generated/EnrichedMarkdownTextSpec/ComponentDescriptors.h

@@ -0,0 +1,24 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateComponentDescriptorH.js
+ */
+
+#pragma once
+
+#include "ShadowNodes.h"
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+
+namespace facebook::react {
+
+using EnrichedMarkdownTextComponentDescriptor = ConcreteComponentDescriptor<EnrichedMarkdownTextShadowNode>;
+
+void EnrichedMarkdownTextSpec_registerComponentDescriptorsFromCodegen(
+  std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);
+
+} // namespace facebook::react

package/ios/generated/EnrichedMarkdownTextSpec/EventEmitters.cpp

@@ -0,0 +1,33 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateEventEmitterCpp.js
+ */
+
+#include "EventEmitters.h"
+
+
+namespace facebook::react {
+
+void EnrichedMarkdownTextEventEmitter::onLinkPress(OnLinkPress event) const {
+  dispatchEvent("linkPress", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "url", event.url);
+    return payload;
+  });
+}
+
+
+void EnrichedMarkdownTextEventEmitter::onLinkLongPress(OnLinkLongPress event) const {
+  dispatchEvent("linkLongPress", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "url", event.url);
+    return payload;
+  });
+}
+
+} // namespace facebook::react

package/ios/generated/EnrichedMarkdownTextSpec/EventEmitters.h

@@ -0,0 +1,31 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateEventEmitterH.js
+ */
+#pragma once
+
+#include <react/renderer/components/view/ViewEventEmitter.h>
+
+
+namespace facebook::react {
+class EnrichedMarkdownTextEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  struct OnLinkPress {
+      std::string url;
+    };
+
+  struct OnLinkLongPress {
+      std::string url;
+    };
+  void onLinkPress(OnLinkPress value) const;
+
+  void onLinkLongPress(OnLinkLongPress value) const;
+};
+} // namespace facebook::react

package/ios/generated/EnrichedMarkdownTextSpec/Props.cpp

@@ -0,0 +1,82 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GeneratePropsCpp.js
+ */
+
+#include "Props.h"
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook::react {
+
+EnrichedMarkdownTextProps::EnrichedMarkdownTextProps(
+    const PropsParserContext &context,
+    const EnrichedMarkdownTextProps &sourceProps,
+    const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
+
+    markdown(convertRawProp(context, rawProps, "markdown", sourceProps.markdown, {})),
+    markdownStyle(convertRawProp(context, rawProps, "markdownStyle", sourceProps.markdownStyle, {})),
+    enableLinkPreview(convertRawProp(context, rawProps, "enableLinkPreview", sourceProps.enableLinkPreview, {true})),
+    selectable(convertRawProp(context, rawProps, "selectable", sourceProps.selectable, {false})),
+    md4cFlags(convertRawProp(context, rawProps, "md4cFlags", sourceProps.md4cFlags, {})),
+    allowFontScaling(convertRawProp(context, rawProps, "allowFontScaling", sourceProps.allowFontScaling, {true})),
+    maxFontSizeMultiplier(convertRawProp(context, rawProps, "maxFontSizeMultiplier", sourceProps.maxFontSizeMultiplier, {0.0})),
+    allowTrailingMargin(convertRawProp(context, rawProps, "allowTrailingMargin", sourceProps.allowTrailingMargin, {false})) {}
+    
+#ifdef RN_SERIALIZABLE_STATE
+ComponentName EnrichedMarkdownTextProps::getDiffPropsImplementationTarget() const {
+  return "EnrichedMarkdownText";
+}
+
+folly::dynamic EnrichedMarkdownTextProps::getDiffProps(
+    const Props* prevProps) const {
+  static const auto defaultProps = EnrichedMarkdownTextProps();
+  const EnrichedMarkdownTextProps* oldProps = prevProps == nullptr
+      ? &defaultProps
+      : static_cast<const EnrichedMarkdownTextProps*>(prevProps);
+  if (this == oldProps) {
+    return folly::dynamic::object();
+  }
+  folly::dynamic result = HostPlatformViewProps::getDiffProps(prevProps);
+  
+  if (markdown != oldProps->markdown) {
+    result["markdown"] = markdown;
+  }
+    
+  if (markdownStyle != oldProps->markdownStyle) {
+    result["markdownStyle"] = toDynamic(markdownStyle);
+  }
+    
+  if (enableLinkPreview != oldProps->enableLinkPreview) {
+    result["enableLinkPreview"] = enableLinkPreview;
+  }
+    
+  if (selectable != oldProps->selectable) {
+    result["selectable"] = selectable;
+  }
+    
+  if (md4cFlags != oldProps->md4cFlags) {
+    result["md4cFlags"] = toDynamic(md4cFlags);
+  }
+    
+  if (allowFontScaling != oldProps->allowFontScaling) {
+    result["allowFontScaling"] = allowFontScaling;
+  }
+    
+  if ((maxFontSizeMultiplier != oldProps->maxFontSizeMultiplier) && !(std::isnan(maxFontSizeMultiplier) && std::isnan(oldProps->maxFontSizeMultiplier))) {
+    result["maxFontSizeMultiplier"] = maxFontSizeMultiplier;
+  }
+    
+  if (allowTrailingMargin != oldProps->allowTrailingMargin) {
+    result["allowTrailingMargin"] = allowTrailingMargin;
+  }
+  return result;
+}
+#endif
+
+} // namespace facebook::react