@mathers101/react-native-render-rich-text 0.0.0-stage → 0.1.10

package/ios/utils/ListMarkerDrawer.m

@@ -0,0 +1,239 @@
+#import "ListMarkerDrawer.h"
+#import "ENRMUIKit.h"
+#import "ListItemRenderer.h"
+#import "ParagraphStyleUtils.h"
+#import "RenderContext.h"
+#import "StyleConfig.h"
+
+extern NSString *const ListItemMarkerStartAttribute;
+
+static NSString *const kAppleColorEmojiFontName = @"AppleColorEmoji";
+
+@implementation ListMarkerDrawer {
+  StyleConfig *_config;
+}
+
+- (instancetype)initWithConfig:(StyleConfig *)config
+{
+  if (self = [super init]) {
+    _config = config;
+  }
+  return self;
+}
+
+- (void)drawMarkersForGlyphRange:(NSRange)glyphsToShow
+                   layoutManager:(NSLayoutManager *)layoutManager
+                   textContainer:(NSTextContainer *)textContainer
+                         atPoint:(CGPoint)origin
+{
+  NSTextStorage *storage = layoutManager.textStorage;
+  if (!storage || storage.length == 0)
+    return;
+
+  CGFloat gap = [_config effectiveListGapWidth];
+  NSMutableSet *drawnParagraphs = [NSMutableSet set];
+
+  [layoutManager
+      enumerateLineFragmentsForGlyphRange:glyphsToShow
+                               usingBlock:^(CGRect rect, CGRect usedRect, NSTextContainer *container,
+                                            NSRange glyphRange, BOOL *stop) {
+                                 NSRange charRange = [layoutManager characterRangeForGlyphRange:glyphRange
+                                                                               actualGlyphRange:NULL];
+                                 if (charRange.location == NSNotFound)
+                                   return;
+
+                                 NSDictionary *attrs = [storage attributesAtIndex:charRange.location
+                                                                   effectiveRange:NULL];
+                                 NSArray *markers = attrs[ListItemMarkerStartAttribute];
+                                 if (![markers isKindOfClass:[NSArray class]] || markers.count == 0)
+                                   return;
+
+                                 // Identify the start of the paragraph
+                                 NSRange paraRange = [storage.string paragraphRangeForRange:charRange];
+                                 if (charRange.location != paraRange.location ||
+                                     [drawnParagraphs containsObject:@(paraRange.location)])
+                                   return;
+                                 [drawnParagraphs addObject:@(paraRange.location)];
+
+                                 BOOL isRTL = ENRMParagraphIsRTL(attrs[NSParagraphStyleAttributeName]);
+
+                                 CGPoint glyphLoc = [layoutManager locationForGlyphAtIndex:glyphRange.location];
+                                 CGFloat baselineY = origin.y + rect.origin.y + glyphLoc.y;
+
+                                 // TextKit places an attachment glyph at the bottom edge of its
+                                 // bounds, not on the baseline. An item that starts with a link
+                                 // pill, an inline image or inline math would otherwise push its
+                                 // marker down by however far the attachment hangs below the text.
+                                 NSTextAttachment *attachment = attrs[NSAttachmentAttributeName];
+                                 if ([attachment isKindOfClass:[NSTextAttachment class]]) {
+                                   baselineY += [attachment attachmentBoundsForTextContainer:container
+                                                                        proposedLineFragment:rect
+                                                                               glyphPosition:glyphLoc
+                                                                              characterIndex:charRange.location]
+                                                    .origin.y;
+                                 }
+
+                                 // When the anchor character is an emoji, NSFontAttributeName
+                                 // returns AppleColorEmoji whose metrics (xHeight, capHeight)
+                                 // differ widely from the text font and would misplace the
+                                 // marker. Look past the first composed character sequence
+                                 // to find the actual text font used on the line.
+                                 UIFont *font = attrs[NSFontAttributeName];
+                                 if (charRange.length > 1) {
+                                   NSRange firstGrapheme =
+                                       [storage.string rangeOfComposedCharacterSequenceAtIndex:charRange.location];
+                                   NSUInteger afterFirst = NSMaxRange(firstGrapheme);
+                                   if (afterFirst < NSMaxRange(charRange)) {
+                                     UIFont *textFont = [storage attribute:NSFontAttributeName
+                                                                   atIndex:afterFirst
+                                                            effectiveRange:NULL];
+                                     if (textFont) {
+                                       font = textFont;
+                                     }
+                                   }
+                                 }
+                                 if (!font || [font.fontName isEqualToString:kAppleColorEmojiFontName]) {
+                                   font = [self defaultFont];
+                                 }
+
+                                 for (ENRMListMarkerDescriptor *marker in markers) {
+                                   CGFloat markerX = isRTL ? origin.x + container.size.width - marker.indent + gap
+                                                           : origin.x + marker.indent - gap;
+
+                                   if (marker.isTask) {
+                                     const CGFloat size = [_config taskListCheckboxSize];
+                                     CGFloat checkboxX = isRTL ? markerX + size / 2.0 : markerX - size / 2.0;
+                                     [self drawCheckboxAtX:checkboxX
+                                                   centerY:baselineY - (font.capHeight / 2.0)
+                                                   checked:marker.isChecked];
+                                   } else if (marker.listType == ListTypeUnordered) {
+                                     // Right-align in the shared number column, same as the checkbox.
+                                     const CGFloat bulletSize = [_config listStyleBulletSize];
+                                     CGFloat bulletX = isRTL ? markerX + bulletSize / 2.0 : markerX - bulletSize / 2.0;
+                                     [self drawBulletAtX:bulletX
+                                                 centerY:baselineY - (font.xHeight + font.capHeight) / 4.0
+                                                   depth:marker.depth];
+                                   } else {
+                                     [self drawOrderedMarkerAtX:markerX
+                                                         number:marker.number
+                                                      baselineY:baselineY
+                                                          isRTL:isRTL];
+                                   }
+                                 }
+                               }];
+}
+
+#pragma mark - Drawing Helpers
+
+- (void)drawCheckboxAtX:(CGFloat)x centerY:(CGFloat)y checked:(BOOL)checked
+{
+  const CGFloat size = [_config taskListCheckboxSize];
+  const CGFloat radius = [_config taskListCheckboxBorderRadius];
+  const CGRect rect = CGRectMake(x - size / 2.0, y - size / 2.0, size, size);
+
+  [self
+      executeDrawing:^(CGContextRef ctx) {
+        UIBezierPath *borderPath = UIBezierPathWithRoundedRect(rect, radius);
+
+        if (checked) {
+          [[_config taskListCheckedColor] setFill];
+          [borderPath fill];
+
+          [self drawCheckmarkInsideRect:rect size:size];
+        } else {
+          CGFloat lineWidth = MAX(1.0, size * 0.09);
+          CGRect insetRect = CGRectInset(rect, lineWidth / 2.0, lineWidth / 2.0);
+          UIBezierPath *insetPath = UIBezierPathWithRoundedRect(insetRect, radius);
+          insetPath.lineWidth = lineWidth;
+          [[_config taskListBorderColor] setStroke];
+          [insetPath stroke];
+        }
+      }
+                 atX:x
+                   y:y];
+}
+
+- (void)drawCheckmarkInsideRect:(CGRect)rect size:(CGFloat)size
+{
+  const CGFloat inset = size * 0.22;
+  const CGFloat verticalMid = CGRectGetMidY(rect);
+  const CGFloat horizontalMidOffset = size * 0.05;
+
+  UIBezierPath *checkmark = [UIBezierPath bezierPath];
+
+  [checkmark moveToPoint:CGPointMake(rect.origin.x + inset, verticalMid)];
+
+  BezierPathAddLine(checkmark, CGPointMake(CGRectGetMidX(rect) - horizontalMidOffset, CGRectGetMaxY(rect) - inset));
+  BezierPathAddLine(checkmark, CGPointMake(CGRectGetMaxX(rect) - inset, rect.origin.y + inset));
+
+  checkmark.lineWidth = MAX(1.5, size * 0.12);
+  BezierPathSetRoundStyle(checkmark);
+
+  [[_config taskListCheckmarkColor] setStroke];
+  [checkmark stroke];
+}
+
+- (void)drawBulletAtX:(CGFloat)x centerY:(CGFloat)y depth:(NSInteger)depth
+{
+  CGFloat size = [_config listStyleBulletSize];
+  CGRect rect = CGRectMake(x - size / 2.0, y - size / 2.0, size, size);
+  [self
+      executeDrawing:^(CGContextRef ctx) {
+        switch (depth) {
+          case 0:
+            [[_config listStyleBulletColor] setFill];
+            CGContextFillEllipseInRect(ctx, rect);
+            break;
+          case 1: {
+            CGFloat lineWidth = MAX(1.0, size * 0.15);
+            [[_config listStyleBulletColor] setStroke];
+            CGContextSetLineWidth(ctx, lineWidth);
+            CGContextStrokeEllipseInRect(ctx, CGRectInset(rect, lineWidth / 2.0, lineWidth / 2.0));
+            break;
+          }
+          default:
+            [[_config listStyleBulletColor] setFill];
+            CGContextFillRect(ctx, rect);
+            break;
+        }
+      }
+                 atX:x
+                   y:y];
+}
+
+- (void)drawOrderedMarkerAtX:(CGFloat)boundaryX number:(NSInteger)number baselineY:(CGFloat)baselineY isRTL:(BOOL)isRTL
+{
+  NSString *text =
+      isRTL ? [NSString stringWithFormat:@".%ld", (long)number] : [NSString stringWithFormat:@"%ld.", (long)number];
+  UIFont *font = [_config listMarkerFont] ?: [self defaultFont];
+
+  NSDictionary *mAttrs = @{NSFontAttributeName : font, NSForegroundColorAttributeName : [_config listStyleMarkerColor]};
+  CGSize size = [text sizeWithAttributes:mAttrs];
+  CGFloat drawX = isRTL ? boundaryX : boundaryX - size.width;
+
+  if ([self isValidX:drawX y:baselineY]) {
+    [text drawAtPoint:CGPointMake(drawX, baselineY - font.ascender) withAttributes:mAttrs];
+  }
+}
+
+- (void)executeDrawing:(void (^)(CGContextRef))block atX:(CGFloat)x y:(CGFloat)y
+{
+  CGContextRef ctx = UIGraphicsGetCurrentContext();
+  if (ctx && [self isValidX:x y:y]) {
+    CGContextSaveGState(ctx);
+    block(ctx);
+    CGContextRestoreGState(ctx);
+  }
+}
+
+- (UIFont *)defaultFont
+{
+  return [UIFont systemFontOfSize:[_config listStyleFontSize]];
+}
+
+- (BOOL)isValidX:(CGFloat)x y:(CGFloat)y
+{
+  return !isnan(x) && !isinf(x) && !isnan(y) && !isinf(y);
+}
+
+@end

package/ios/utils/MentionBackground.h

@@ -0,0 +1,26 @@
+#pragma once
+#import "ENRMUIKit.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+extern NSString *const MentionAttributeName;
+extern NSString *const MentionIdAttributeName;
+extern NSString *const MentionLabelAttributeName;
+extern NSString *const MentionBackgroundColorAttributeName;
+
+/// Horizontal room inside the chip, also added as kern so the fill does not
+/// cover the neighboring glyphs.
+extern const CGFloat ENRMMentionPaddingX;
+/// Extra height above the glyphs. Small enough to stay inside the line box.
+extern const CGFloat ENRMMentionPaddingY;
+
+@interface MentionBackground : NSObject
+
+- (void)drawBackgroundsForGlyphRange:(NSRange)glyphsToShow
+                       layoutManager:(NSLayoutManager *)layoutManager
+                       textContainer:(NSTextContainer *)textContainer
+                             atPoint:(CGPoint)origin;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/utils/MentionBackground.m

@@ -0,0 +1,86 @@
+#import "MentionBackground.h"
+
+NSString *const MentionAttributeName = @"Mention";
+NSString *const MentionIdAttributeName = @"mentionId";
+NSString *const MentionLabelAttributeName = @"mentionLabel";
+NSString *const MentionBackgroundColorAttributeName = @"MentionBackgroundColor";
+
+const CGFloat ENRMMentionPaddingX = 3.0;
+const CGFloat ENRMMentionPaddingY = 1.0;
+static const CGFloat kMentionCornerRadius = 10.0;
+
+@implementation MentionBackground
+
+- (void)drawBackgroundsForGlyphRange:(NSRange)glyphsToShow
+                       layoutManager:(NSLayoutManager *)layoutManager
+                       textContainer:(NSTextContainer *)textContainer
+                             atPoint:(CGPoint)origin
+{
+  NSTextStorage *textStorage = layoutManager.textStorage;
+  if (!textStorage || textStorage.length == 0)
+    return;
+
+  NSRange charRange = [layoutManager characterRangeForGlyphRange:glyphsToShow actualGlyphRange:NULL];
+  if (charRange.location == NSNotFound || charRange.length == 0)
+    return;
+
+  [textStorage enumerateAttribute:MentionAttributeName
+                          inRange:NSMakeRange(0, textStorage.length)
+                          options:0
+                       usingBlock:^(id value, NSRange range, BOOL *stop) {
+                         (void)stop;
+                         if (!value || range.length == 0)
+                           return;
+                         if (NSIntersectionRange(range, charRange).length == 0)
+                           return;
+
+                         RCTUIColor *backgroundColor = [textStorage attribute:MentionBackgroundColorAttributeName
+                                                                      atIndex:range.location
+                                                               effectiveRange:NULL];
+                         if (!backgroundColor)
+                           return;
+
+                         [self drawMentionForRange:range
+                                     layoutManager:layoutManager
+                                     textContainer:textContainer
+                                           atPoint:origin
+                                   backgroundColor:backgroundColor];
+                       }];
+}
+
+/// One rounded rect per line fragment. A wrapped mention paints `box-decoration-break: clone`,
+/// so each line keeps its own 10pt corners instead of stretching into a bar.
+- (void)drawMentionForRange:(NSRange)range
+              layoutManager:(NSLayoutManager *)layoutManager
+              textContainer:(NSTextContainer *)textContainer
+                    atPoint:(CGPoint)origin
+            backgroundColor:(RCTUIColor *)backgroundColor
+{
+  NSRange glyphRange = [layoutManager glyphRangeForCharacterRange:range actualCharacterRange:NULL];
+  if (glyphRange.location == NSNotFound || glyphRange.length == 0)
+    return;
+
+  [layoutManager
+      enumerateLineFragmentsForGlyphRange:glyphRange
+                               usingBlock:^(CGRect rect, CGRect usedRect, NSTextContainer *tc, NSRange lineRange,
+                                            BOOL *stop) {
+                                 (void)rect;
+                                 (void)usedRect;
+                                 (void)tc;
+                                 (void)stop;
+                                 NSRange intersect = NSIntersectionRange(lineRange, glyphRange);
+                                 if (intersect.length == 0)
+                                   return;
+
+                                 CGRect textRect =
+                                     [layoutManager boundingRectForGlyphRange:intersect inTextContainer:textContainer];
+                                 CGRect finalRect = CGRectInset(textRect, -ENRMMentionPaddingX, -ENRMMentionPaddingY);
+                                 finalRect.origin.x += origin.x;
+                                 finalRect.origin.y += origin.y;
+                                 UIBezierPath *path = UIBezierPathWithRoundedRect(finalRect, kMentionCornerRadius);
+                                 [backgroundColor setFill];
+                                 [path fill];
+                               }];
+}
+
+@end

package/ios/utils/ParagraphStyleUtils.h

@@ -0,0 +1,87 @@
+#import "ENRMUIKit.h"
+#import <Foundation/Foundation.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+__BEGIN_DECLS
+
+extern NSAttributedString *kNewlineAttributedString;
+
+NSLineBreakStrategy ENRMResolveLineBreakStrategy(NSString *_Nullable strategy);
+void ENRMApplyLineBreakStrategyToParagraphStyles(NSMutableAttributedString *output,
+                                                 NSLineBreakStrategy lineBreakStrategy);
+
+/// Resolves an ellipsizeMode prop value to the NSLineBreakMode used for
+/// truncation on the text container (with maximumNumberOfLines). 'clip' maps to
+/// NSLineBreakByClipping (truncate with no ellipsis). Defaults to tail. Mirrors
+/// React Native Text's ellipsizeMode.
+NSLineBreakMode ENRMResolveEllipsizeLineBreakMode(NSString *_Nullable mode);
+
+/// Auto/LTR/RTL match React Native's writingDirection prop.
+/// FirstStrong is the library extension: resolve each paragraph from its first strong
+/// directional character (matches Android's TEXT_DIRECTION_FIRST_STRONG).
+typedef NS_ENUM(NSInteger, ENRMWritingDirectionMode) {
+  ENRMWritingDirectionModeAuto,
+  ENRMWritingDirectionModeLTR,
+  ENRMWritingDirectionModeRTL,
+  ENRMWritingDirectionModeFirstStrong,
+};
+
+ENRMWritingDirectionMode ENRMResolveWritingDirectionMode(NSString *_Nullable value);
+
+void ENRMApplyWritingDirectionToParagraphStyles(NSMutableAttributedString *output, NSWritingDirection writingDirection);
+
+NSWritingDirection ENRMFirstStrongDirection(NSString *text);
+
+/// Paragraphs without a strong character fall back to `fallback`. Code blocks are skipped.
+void ENRMApplyFirstStrongParagraphDirections(NSMutableAttributedString *output, NSWritingDirection fallback);
+
+/// Falls back to the app's UI layout direction when the style is missing or Natural.
+BOOL ENRMParagraphIsRTL(NSParagraphStyle *_Nullable style);
+
+/// Dispatch entry point used after every render pass. `layoutDirection` is the
+/// fallback for FirstStrong neutral paragraphs and is unused for the other modes.
+void ENRMApplyWritingDirectionMode(NSMutableAttributedString *output, ENRMWritingDirectionMode mode,
+                                   NSWritingDirection layoutDirection);
+
+/// Sets lineHeight as a floor (minimumLineHeight) so a line can still grow to fit a taller run.
+/// No-op when lineHeight <= 0.
+void ENRMApplyLineHeightToParagraphStyle(NSMutableParagraphStyle *style, CGFloat lineHeight);
+
+NSMutableParagraphStyle *getOrCreateParagraphStyle(NSMutableAttributedString *output, NSUInteger index);
+void applyParagraphSpacingAfter(NSMutableAttributedString *output, NSUInteger start, CGFloat marginBottom);
+NSUInteger applyParagraphSpacingBefore(NSMutableAttributedString *output, NSRange range, CGFloat marginTop);
+NSUInteger applyBlockSpacingBefore(NSMutableAttributedString *output, NSUInteger insertionPoint, CGFloat marginTop);
+void applyBlockSpacingAfter(NSMutableAttributedString *output, CGFloat marginBottom);
+/// `lineHeight`, raised to the largest `pill.lineHeight` among the link pills in `range`.
+/// A line grows to fit a pill on its own, but only that line and only to the pill's box, so
+/// pills on consecutive lines touch. A style that sets `pill.lineHeight` gets a floor for
+/// the whole block instead, which keeps its lines even and the pills apart.
+CGFloat ENRMLineHeightWithLinkPills(NSAttributedString *text, NSRange range, CGFloat lineHeight);
+void applyLineHeight(NSMutableAttributedString *output, NSRange range, CGFloat lineHeight);
+
+/// Stamps every styled run in `range` with `NSOriginalFont` set to its own
+/// `NSFont`, so a line is sized from the font the renderer chose rather than
+/// from whichever font ends up drawing the glyphs.
+///
+/// UIKit writes this attribute itself, but only into a UITextView's storage, so
+/// the view-free measurement stack never saw it and sized a line from the
+/// fallback font instead. Stamping it here keeps measuring and rendering agreed.
+///
+/// IMPORTANT:
+/// Call this last, after every font in the range is final, on any attributed
+/// string handed to a layout engine. A run whose `NSFont` changes after the
+/// stamp is then sized from the stale font, in the measurement stack and in
+/// `UITextView` alike, so the line comes out wrong in both.
+/// `ENRMRenderASTNodes` and `ENRMRenderBlockquoteContentNodes` cover everything
+/// built through the node renderers; the two paths that assemble their own
+/// string (table cells, code block content) call it themselves.
+void ENRMPinLineMetricsToStyledFonts(NSMutableAttributedString *output, NSRange range);
+CGFloat calculateBaselineOffset(NSAttributedString *output, NSRange range);
+void applyBaselineOffset(NSMutableAttributedString *output, NSRange range);
+void applyTextAlignment(NSMutableAttributedString *output, NSRange range, NSTextAlignment textAlign);
+NSTextAlignment textAlignmentFromString(NSString *textAlign);
+
+__END_DECLS
+
+NS_ASSUME_NONNULL_END