Inline code block support

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -35,6 +35,7 @@ const UIView = {
  collapsable: true,
  needsOffscreenAlphaCompositing: true,
  style: ReactNativeStyleAttributes,
+ textCodeBlockStyle: true,
 };
 
 const RCTView = {

Libraries/Text/BaseText/RCTBaseTextViewManager.m

@@ -55,5 +55,6 @@ - (RCTShadowView *)shadowView
 // Special
 RCT_REMAP_SHADOW_PROPERTY(isHighlighted, textAttributes.isHighlighted, BOOL)
 RCT_REMAP_SHADOW_PROPERTY(textTransform, textAttributes.textTransform, RCTTextTransform)
+RCT_REMAP_SHADOW_PROPERTY(textCodeBlockStyle, textAttributes.textCodeBlockStyle, NSDictionary)
 
 @end

Libraries/Text/RCTTextAttributes.h

@@ -16,6 +16,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 extern NSString *const RCTTextAttributesIsHighlightedAttributeName;
 extern NSString *const RCTTextAttributesTagAttributeName;
+extern NSString *const RCTTextAttributesIsTextCodeBlockStyleAttributeName;
 
 /**
  * Represents knowledge about all supported *text* attributes
@@ -57,6 +58,7 @@ extern NSString *const RCTTextAttributesTagAttributeName;
 @property (nonatomic, strong, nullable) NSNumber *tag;
 @property (nonatomic, assign) UIUserInterfaceLayoutDirection layoutDirection;
 @property (nonatomic, assign) RCTTextTransform textTransform;
+@property (nonatomic, assign) NSDictionary *textCodeBlockStyle;
 
 #pragma mark - Inheritance
 

Libraries/Text/RCTTextAttributes.m

@@ -13,6 +13,7 @@
 
 NSString *const RCTTextAttributesIsHighlightedAttributeName = @"RCTTextAttributesIsHighlightedAttributeName";
 NSString *const RCTTextAttributesTagAttributeName = @"RCTTextAttributesTagAttributeName";
+NSString *const RCTTextAttributesIsTextCodeBlockStyleAttributeName = @"RCTTextAttributesIsTextCodeBlockStyleAttributeName";
 
 @implementation RCTTextAttributes
 
@@ -95,6 +96,12 @@ - (void)applyTextAttributes:(RCTTextAttributes *)textAttributes
  : _layoutDirection;
  _textTransform =
  textAttributes->_textTransform != RCTTextTransformUndefined ? textAttributes->_textTransform : _textTransform;
+ _textCodeBlockStyle = textAttributes->_textCodeBlockStyle ?: _textCodeBlockStyle;
+}
+
+- (NSDictionary *)textCodeBlockStyle
+{
+ return _textCodeBlockStyle;
 }
 
 - (NSParagraphStyle *)effectiveParagraphStyle
@@ -211,6 +218,10 @@ - (NSParagraphStyle *)effectiveParagraphStyle
  attributes[RCTTextAttributesTagAttributeName] = _tag;
  }
 
+ if (_textCodeBlockStyle) {
+ attributes[RCTTextAttributesIsTextCodeBlockStyleAttributeName] = _textCodeBlockStyle;
+ }
+
  return [attributes copy];
 }
 
@@ -344,7 +355,8 @@ - (BOOL)isEqual:(RCTTextAttributes *)textAttributes
  RCTTextAttributesCompareObjects(_textShadowColor) &&
  // Special
  RCTTextAttributesCompareOthers(_isHighlighted) && RCTTextAttributesCompareObjects(_tag) &&
- RCTTextAttributesCompareOthers(_layoutDirection) && RCTTextAttributesCompareOthers(_textTransform);
+ RCTTextAttributesCompareOthers(_layoutDirection) && RCTTextAttributesCompareOthers(_textTransform) &&
+ RCTTextAttributesCompareObjects(_textCodeBlockStyle);
 }
 
 @end

Libraries/Text/Text/RCTTextCodeBlockStyle.h

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTTextCodeBlockStyle : NSLayoutManager
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Text/Text/RCTTextCodeBlockStyle.m

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTTextCodeBlockStyle.h"
+#import "RCTTextAttributes.h"
+
+@implementation RCTTextCodeBlockStyle
+
+- (UIColor*)hexStringToColor:(NSString *)stringToConvert
+{
+ NSString *noHashString = [stringToConvert stringByReplacingOccurrencesOfString:@"#" withString:@""];
+ NSScanner *stringScanner = [NSScanner scannerWithString:noHashString];
+
+ unsigned hex;
+ if (![stringScanner scanHexInt:&hex]) return nil;
+ int r = (hex >> 16) & 0xFF;
+ int g = (hex >> 8) & 0xFF;
+ int b = (hex) & 0xFF;
+
+ return [UIColor colorWithRed:r / 255.0f green:g / 255.0f blue:b / 255.0f alpha:1.0f];
+}
+
+-(void)drawBackgroundForGlyphRange:(NSRange)glyphsToShow atPoint:(CGPoint)origin {
+ [super drawBackgroundForGlyphRange:glyphsToShow atPoint:origin];
+
+ if ((glyphsToShow.location + glyphsToShow.length) > [[self textStorage] length]) {
+ return;
+ }
+
+ [[self textStorage] enumerateAttribute:RCTTextAttributesIsTextCodeBlockStyleAttributeName
+ inRange:glyphsToShow
+ options:0
+ usingBlock:^(NSDictionary *textCodeBlockStyle, NSRange range, __unused BOOL *stop) {
+
+ NSString *backgroundColor = [textCodeBlockStyle objectForKey:@"backgroundColor"];
+ NSString *borderColor = [textCodeBlockStyle objectForKey:@"borderColor"];
+ float borderRadius = [[textCodeBlockStyle objectForKey:@"borderRadius"] floatValue];
+ float borderWidth = [[textCodeBlockStyle objectForKey:@"borderWidth"] floatValue];
+ float horizontalOffset = 5;
+ float verticalOffset = 2;
+
+ CGContextRef context = UIGraphicsGetCurrentContext();
+ CGContextSetFillColorWithColor(context, [self hexStringToColor:backgroundColor].CGColor);
+ CGContextSetStrokeColorWithColor(context, [self hexStringToColor:borderColor].CGColor);
+
+ if (!backgroundColor) {
+ return;
+ }
+
+ // Enumerates line fragments intersecting with the whole text container.
+ [self enumerateLineFragmentsForGlyphRange:range
+ usingBlock:^(CGRect rect, CGRect usedRect, NSTextContainer * _Nonnull textContainer, NSRange lineGlyphRange, BOOL * _Nonnull stop) {
+
+ __block UIBezierPath *textCodeBlockStylePath = nil;
+
+ NSRange lineRange = NSIntersectionRange(range, lineGlyphRange);
+
+ [self enumerateEnclosingRectsForGlyphRange:lineRange
+ withinSelectedGlyphRange:lineRange
+ inTextContainer:textContainer
+ usingBlock:^(CGRect enclosingRect, __unused BOOL *anotherStop) {
+
+ BOOL isFirstLine = range.location >= lineGlyphRange.location;
+ BOOL isLastLine = range.length + range.location <= lineGlyphRange.length + lineGlyphRange.location;
+ long corners = (
+ (isFirstLine ? (UIRectCornerTopLeft | UIRectCornerBottomLeft) : 0) |
+ (isLastLine ? (UIRectCornerTopRight | UIRectCornerBottomRight) : 0)
+ );
+
+ CGRect resultRect = CGRectMake(
+ enclosingRect.origin.x,
+ enclosingRect.origin.y + (borderWidth / 2) + verticalOffset,
+ enclosingRect.size.width + ((isFirstLine && isLastLine) || isLastLine ? 0 : horizontalOffset),
+ enclosingRect.size.height - (borderWidth * 2)
+ );
+
+ UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:resultRect byRoundingCorners:corners cornerRadii:CGSizeMake(borderRadius, borderRadius)];
+
+ if (textCodeBlockStylePath) {
+ [textCodeBlockStylePath appendPath:path];
+ } else {
+ textCodeBlockStylePath = path;
+ }
+
+ textCodeBlockStylePath.lineWidth = borderWidth;
+ [textCodeBlockStylePath stroke];
+ [textCodeBlockStylePath fill];
+ }];
+ }];
+
+ }];
+}
+
+@end

Libraries/Text/Text/RCTTextShadowView.m

@@ -14,6 +14,7 @@
 
 #import <React/RCTTextView.h>
 #import "NSTextStorage+FontScaling.h"
+#import "RCTTextCodeBlockStyle.h"
 
 @implementation RCTTextShadowView {
  __weak RCTBridge *_bridge;
@@ -219,7 +220,7 @@ - (NSTextStorage *)textStorageAndLayoutManagerThatFitsSize:(CGSize)size exclusiv
  textContainer.lineBreakMode = _maximumNumberOfLines > 0 ? _lineBreakMode : NSLineBreakByClipping;
  textContainer.maximumNumberOfLines = _maximumNumberOfLines;
 
- NSLayoutManager *layoutManager = [NSLayoutManager new];
+ NSLayoutManager *layoutManager = [RCTTextCodeBlockStyle new];
  layoutManager.usesFontLeading = NO;
  [layoutManager addTextContainer:textContainer];
 

Libraries/Text/TextCodeBlock.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+export type TextCodeBlockStyleProp = $ReadOnly<{|
+ /**
+ * The background color of the text code block.
+ */
+ backgroundColor?: ?ColorValue,
+
+ /**
+ * The border color of the text code block.
+ */
+ borderColor?: ?ColorValue,
+
+ /**
+ * The border radius of the text code block.
+ */
+ borderRadius?: ?number,
+
+ /**
+ * The border width of the text code block.
+ */
+ borderWidth?: ?number,
+|}>;

Libraries/Text/TextNativeComponent.js

@@ -47,6 +47,7 @@ const textViewConfig = {
  dataDetectorType: true,
  android_hyphenationFrequency: true,
  lineBreakStrategyIOS: true,
+ textCodeBlockStyle: true,
  },
  directEventTypes: {
  topTextLayout: {
@@ -64,6 +65,7 @@ const virtualTextViewConfig = {
  isHighlighted: true,
  isPressable: true,
  maxFontSizeMultiplier: true,
+ textCodeBlockStyle: true,
  },
  uiViewClassName: 'RCTVirtualText',
 };

Libraries/Text/TextProps.js

@@ -24,6 +24,7 @@ import type {
  PressEvent,
  TextLayoutEvent,
 } from '../Types/CoreEventTypes';
+import type {TextCodeBlockStyleProp} from './TextCodeBlockStyle';
 import type {Node} from 'react';
 
 export type PressRetentionOffset = $ReadOnly<{|
@@ -266,4 +267,11 @@ export type TextProps = $ReadOnly<{|
  * See https://reactnative.dev/docs/text.html#linebreakstrategyios
  */
  lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
+
+ /*
+ * Draws inline border around text with background, mostly used for inline code blocks.
+ *
+ * See https://github.com/Expensify/App/issues/4733
+ */
+ textCodeBlockStyle?: ?TextCodeBlockStyleProp,
 |}>;

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -159,6 +159,7 @@ public class ViewProps {
  public static final String ACCESSIBILITY_VALUE = "accessibilityValue";
  public static final String ACCESSIBILITY_LABELLED_BY = "accessibilityLabelledBy";
  public static final String IMPORTANT_FOR_ACCESSIBILITY = "importantForAccessibility";
+ public static final String TEXT_CODE_BLOCK = "textCodeBlockStyle";
 
  // DEPRECATED
  public static final String ROTATION = "rotation";