react-native-marcus 0.1.1 → 0.2.0

package/apple/RCTMarcusStyle+Codegen.h

@@ -1,18 +1,124 @@
 #import <RNMarcus/RCTMarcusStyle.h>
 
-#import <react/renderer/components/RNMarcusSpec/Props.h>
+#import <React/RCTConversions.h>
 
 NS_ASSUME_NONNULL_BEGIN
 
-// Conversion from the codegen props struct lives in a separate category so that
-// `RCTMarcusStyle.h` itself stays free of C++. Only the component view and
-// the shadow node need this header; everything downstream can import the plain
-// one.
-@interface RCTMarcusStyle (Codegen)
+// Conversion from the codegen props struct lives in a separate header so that
+// `RCTMarcusStyle.h` itself stays free of C++. Only the component views and the
+// shadow nodes need this one; everything downstream can import the plain header.
+//
+// These are templates rather than initialisers because codegen emits a separate
+// struct type per prop path even when the shape is identical: `code` and `pre`
+// are written as one interface in TypeScript and arrive as two unrelated C++
+// types, and so do the twelve copies of the text style. The shape is held
+// together on the JavaScript side instead, by the assignability assertion in
+// `MarcusTextDecoratorViewNativeComponent.ts`.
 
-- (instancetype)initWithStruct:
-  (const facebook::react::MarcusTextInputDecoratorViewMarkdownStyleStruct &)style;
+// A colour that was never written is `SharedColor`'s undefined value rather than
+// a transparent one, and the difference matters: unset means "inherit whatever
+// the prose is drawn in", where transparent means "draw nothing".
+static inline UIColor *_Nullable
+RCTMarcusColor(const facebook::react::SharedColor &color) {
+  return color ? RCTUIColorFromSharedColor(color) : nil;
+}
 
-@end
+template <typename TextStyleStruct>
+static inline void RCTMarcusApplyTextStyle(RCTMarcusTextStyle *result,
+                                           const TextStyleStruct &style) {
+  result.color = RCTMarcusColor(style.color);
+  result.fontFamily = RCTNSStringFromStringNilIfEmpty(style.fontFamily);
+  result.fontSize = style.fontSize;
+  result.fontStyle = RCTNSStringFromStringNilIfEmpty(style.fontStyle);
+  result.fontWeight = RCTNSStringFromStringNilIfEmpty(style.fontWeight);
+  result.letterSpacing = style.letterSpacing;
+  result.lineHeight = style.lineHeight;
+  result.textDecorationLine =
+    RCTNSStringFromStringNilIfEmpty(style.textDecorationLine);
+  result.textDecorationColor = RCTMarcusColor(style.textDecorationColor);
+  result.textDecorationStyle =
+    RCTNSStringFromStringNilIfEmpty(style.textDecorationStyle);
+  result.textShadowColor = RCTMarcusColor(style.textShadowColor);
+  result.textShadowOffset =
+    CGSizeMake(style.textShadowOffset.width, style.textShadowOffset.height);
+  result.textShadowRadius = style.textShadowRadius;
+}
+
+template <typename TextStyleStruct>
+static inline RCTMarcusTextStyle *
+RCTMarcusTextStyleFromStruct(const TextStyleStruct &style) {
+  RCTMarcusTextStyle *result = [RCTMarcusTextStyle new];
+  RCTMarcusApplyTextStyle(result, style);
+  return result;
+}
+
+// The single `padding` and `margin` a style may be written with have already
+// been resolved into the two axes by `mergeMarkdownStyleWithDefault`, so there
+// is nothing to fall back to here.
+template <typename BoxStyleStruct>
+static inline RCTMarcusBoxStyle *
+RCTMarcusBoxStyleFromStruct(const BoxStyleStruct &style) {
+  RCTMarcusBoxStyle *result = [RCTMarcusBoxStyle new];
+  RCTMarcusApplyTextStyle(result, style);
+
+  result.backgroundColor = RCTMarcusColor(style.backgroundColor);
+  result.borderColor = RCTMarcusColor(style.borderColor);
+  result.borderWidth = style.borderWidth;
+  result.borderRadius = style.borderRadius;
+  result.paddingHorizontal = style.paddingHorizontal;
+  result.paddingVertical = style.paddingVertical;
+  result.marginHorizontal = style.marginHorizontal;
+  result.marginVertical = style.marginVertical;
+
+  return result;
+}
+
+template <typename ListStyleStruct>
+static inline RCTMarcusListStyle *
+RCTMarcusListStyleFromStruct(const ListStyleStruct &style) {
+  RCTMarcusListStyle *result = [RCTMarcusListStyle new];
+
+  result.marginStart = style.marginStart;
+  result.paddingStart = style.paddingStart;
+  result.markerScale = style.markerScale;
+  result.markerPadding = style.markerPadding;
+  result.marker = RCTMarcusTextStyleFromStruct(style.marker);
+
+  return result;
+}
+
+template <typename MarkdownStyleStruct>
+static inline RCTMarcusStyle *
+RCTMarcusStyleFromStruct(const MarkdownStyleStruct &style) {
+  RCTMarcusStyle *result = [RCTMarcusStyle new];
+
+  result.syntax = RCTMarcusTextStyleFromStruct(style.syntax);
+  result.link = RCTMarcusTextStyleFromStruct(style.link);
+  result.strong = RCTMarcusTextStyleFromStruct(style.strong);
+  result.emphasis = RCTMarcusTextStyleFromStruct(style.emphasis);
+  result.strikethrough = RCTMarcusTextStyleFromStruct(style.strikethrough);
+
+  RCTMarcusApplyTextStyle(result.heading, style.heading);
+  result.heading.scale = style.heading.scale;
+
+  result.emoji.fontSize = style.emoji.fontSize;
+  result.emoji.fontFamily = RCTNSStringFromStringNilIfEmpty(style.emoji.fontFamily);
+
+  RCTMarcusApplyTextStyle(result.blockquote, style.blockquote);
+  result.blockquote.borderColor = RCTMarcusColor(style.blockquote.borderColor);
+  result.blockquote.borderWidth = style.blockquote.borderWidth;
+  result.blockquote.borderRadius = style.blockquote.borderRadius;
+  result.blockquote.marginStart = style.blockquote.marginStart;
+  result.blockquote.paddingStart = style.blockquote.paddingStart;
+
+  result.orderedList = RCTMarcusListStyleFromStruct(style.orderedList);
+  result.unorderedList = RCTMarcusListStyleFromStruct(style.unorderedList);
+
+  result.code = RCTMarcusBoxStyleFromStruct(style.code);
+  result.pre = RCTMarcusBoxStyleFromStruct(style.pre);
+  result.mention = RCTMarcusBoxStyleFromStruct(style.mention);
+
+  return result;
+}
 
 NS_ASSUME_NONNULL_END

package/apple/RCTMarcusStyle.h

@@ -2,39 +2,136 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
+/// The text attributes one styled run can carry: the subset of React Native's
+/// `TextStyle` that survives as an attribute on an attributed string.
+///
+/// Everything is optional and everything unset is inherited, which is what a run
+/// of markdown wants -- a mention that only names a colour keeps the face, the
+/// size and the weight of the prose it sits in. "Unset" is the zero value: a nil
+/// colour, a nil string, a zero length. Nothing is lost by that, because a
+/// zero-length `fontSize`, `letterSpacing` or `lineHeight` would mean the same
+/// as leaving it out.
+///
+/// The two font names are strings rather than an enum because they are React
+/// Native's own spellings -- `bold`, `600`, `italic` -- and `MarkdownFonts`
+/// resolves them through React Native's font manager rather than interpreting
+/// them here.
+@interface RCTMarcusTextStyle : NSObject
+
+@property(nonatomic, nullable) UIColor *color;
+@property(nonatomic, copy, nullable) NSString *fontFamily;
+@property(nonatomic) CGFloat fontSize;
+@property(nonatomic, copy, nullable) NSString *fontStyle;
+@property(nonatomic, copy, nullable) NSString *fontWeight;
+@property(nonatomic) CGFloat letterSpacing;
+/// Set on the paragraph, so a range covering part of a line raises all of it.
+@property(nonatomic) CGFloat lineHeight;
+@property(nonatomic, copy, nullable) NSString *textDecorationLine;
+@property(nonatomic, nullable) UIColor *textDecorationColor;
+@property(nonatomic, copy, nullable) NSString *textDecorationStyle;
+@property(nonatomic, nullable) UIColor *textShadowColor;
+@property(nonatomic) CGSize textShadowOffset;
+@property(nonatomic) CGFloat textShadowRadius;
+
+@end
+
+/// A run drawn as a box rather than as a background behind the glyphs: an inline
+/// or fenced run of code, or a mention's pill.
+///
+/// What the room holds open differs, because a block owns its lines and a run
+/// shares one. A block's padding and margin are held open on the leading edge
+/// and vertically, and a line long enough to wrap reaches the padding on the
+/// trailing edge rather than stopping in front of it: neither platform can
+/// reserve a trailing indent per paragraph. An inline run holds its padding and
+/// margin open on both sides, by widening the characters it starts and ends
+/// with, and grows into the line's own spacing above and below rather than
+/// pushing the lines apart.
+///
+/// Only the per-axis lengths are here. A style may be written with a single
+/// `padding` or `margin` covering both axes; `mergeMarkdownStyleWithDefault`
+/// resolves that into the two before the style is ever sent, so that a length of
+/// zero here means zero rather than "unset".
+@interface RCTMarcusBoxStyle : RCTMarcusTextStyle
+
+@property(nonatomic, nullable) UIColor *backgroundColor;
+@property(nonatomic, nullable) UIColor *borderColor;
+@property(nonatomic) CGFloat borderWidth;
+@property(nonatomic) CGFloat borderRadius;
+@property(nonatomic) CGFloat paddingHorizontal;
+@property(nonatomic) CGFloat paddingVertical;
+@property(nonatomic) CGFloat marginHorizontal;
+@property(nonatomic) CGFloat marginVertical;
+
+@end
+
+@interface RCTMarcusHeadingStyle : RCTMarcusTextStyle
+
+/// Each level down multiplies the one above, so level N is
+/// `fontSize * scale^(N - 1)`. Six levels, matching HTML.
+@property(nonatomic) CGFloat scale;
+
+@end
+
+/// The bar beside a quoted block, the indent it opens, and the text inside it.
+///
+/// `marginStart` and `paddingStart` rather than left and right: the gutter opens
+/// on the paragraph's leading edge, which is what `NSParagraphStyle`'s head
+/// indent has always meant, and so the names now say what was already drawn.
+@interface RCTMarcusBlockquoteStyle : RCTMarcusTextStyle
+
+@property(nonatomic, nullable) UIColor *borderColor;
+@property(nonatomic) CGFloat borderWidth;
+/// Rounds the bar's ends. A bar whose radius is half its width is a capsule.
+@property(nonatomic) CGFloat borderRadius;
+@property(nonatomic) CGFloat marginStart;
+@property(nonatomic) CGFloat paddingStart;
+
+@end
+
+/// Indent, and the marker that sits in the gutter it opens.
+///
+/// The marker is sized from the base font -- the size the wrapped `Text` renders
+/// at -- rather than from a size of its own, so a list marks itself in
+/// proportion to the prose it marks however that prose is sized. `marker` is
+/// what it is drawn with, already resolved against `syntax` on the JavaScript
+/// side, so nothing here has to know where an unset value came from.
+@interface RCTMarcusListStyle : NSObject
+
+@property(nonatomic) CGFloat marginStart;
+@property(nonatomic) CGFloat paddingStart;
+/// An ordered item's number is drawn at this fraction of the base font size; an
+/// unordered item's bullet takes it as a diameter, as a fraction of the same.
+@property(nonatomic) CGFloat markerScale;
+/// Room held open either side of the marker, between the gutter and the text.
+@property(nonatomic) CGFloat markerPadding;
+@property(nonatomic, strong) RCTMarcusTextStyle *marker;
+
+@end
+
+@interface RCTMarcusEmojiStyle : NSObject
+
+@property(nonatomic) CGFloat fontSize;
+@property(nonatomic, copy, nullable) NSString *fontFamily;
+
+@end
+
 @interface RCTMarcusStyle : NSObject
 
-@property(nonatomic) UIColor *syntaxColor;
-@property(nonatomic) UIColor *linkColor;
-@property(nonatomic) CGFloat headingFontSize;
-@property(nonatomic) CGFloat headingScale;
-@property(nonatomic) CGFloat emojiFontSize;
-@property(nonatomic) NSString *emojiFontFamily;
-@property(nonatomic) UIColor *blockquoteBorderColor;
-@property(nonatomic) CGFloat blockquoteBorderWidth;
-@property(nonatomic) CGFloat blockquoteMarginLeft;
-@property(nonatomic) CGFloat blockquotePaddingLeft;
-@property(nonatomic) CGFloat orderedListMarginLeft;
-@property(nonatomic) CGFloat orderedListPaddingLeft;
-@property(nonatomic) CGFloat unorderedListMarginLeft;
-@property(nonatomic) CGFloat unorderedListPaddingLeft;
-@property(nonatomic) NSString *codeFontFamily;
-@property(nonatomic) CGFloat codeFontSize;
-@property(nonatomic) UIColor *codeColor;
-@property(nonatomic) UIColor *codeBackgroundColor;
-@property(nonatomic) NSString *preFontFamily;
-@property(nonatomic) CGFloat preFontSize;
-@property(nonatomic) UIColor *preColor;
-@property(nonatomic) UIColor *preBackgroundColor;
-@property(nonatomic) UIColor *mentionHereColor;
-@property(nonatomic) UIColor *mentionHereBackgroundColor;
-@property(nonatomic) CGFloat mentionHereBorderRadius;
-@property(nonatomic) UIColor *mentionUserColor;
-@property(nonatomic) UIColor *mentionUserBackgroundColor;
-@property(nonatomic) CGFloat mentionUserBorderRadius;
-@property(nonatomic) UIColor *mentionReportColor;
-@property(nonatomic) UIColor *mentionReportBackgroundColor;
-@property(nonatomic) CGFloat mentionReportBorderRadius;
+@property(nonatomic, strong) RCTMarcusTextStyle *syntax;
+@property(nonatomic, strong) RCTMarcusTextStyle *link;
+@property(nonatomic, strong) RCTMarcusTextStyle *strong;
+@property(nonatomic, strong) RCTMarcusTextStyle *emphasis;
+@property(nonatomic, strong) RCTMarcusTextStyle *strikethrough;
+@property(nonatomic, strong) RCTMarcusHeadingStyle *heading;
+@property(nonatomic, strong) RCTMarcusEmojiStyle *emoji;
+@property(nonatomic, strong) RCTMarcusBlockquoteStyle *blockquote;
+@property(nonatomic, strong) RCTMarcusListStyle *orderedList;
+@property(nonatomic, strong) RCTMarcusListStyle *unorderedList;
+@property(nonatomic, strong) RCTMarcusBoxStyle *code;
+@property(nonatomic, strong) RCTMarcusBoxStyle *pre;
+/// A name with an `@` in front of it, drawn as a pill: the same inline box an
+/// inline run of code sits in, and so the same lengths.
+@property(nonatomic, strong) RCTMarcusBoxStyle *mention;
 
 @end
 

package/apple/RCTMarcusStyle.m

@@ -1,5 +1,53 @@
 #import <RNMarcus/RCTMarcusStyle.h>
 
+@implementation RCTMarcusTextStyle
+@end
+
+@implementation RCTMarcusBoxStyle
+@end
+
+@implementation RCTMarcusHeadingStyle
+@end
+
+@implementation RCTMarcusBlockquoteStyle
+@end
+
+@implementation RCTMarcusListStyle
+
+- (instancetype)init {
+  if (self = [super init]) {
+    _marker = [RCTMarcusTextStyle new];
+  }
+  return self;
+}
+
+@end
+
+@implementation RCTMarcusEmojiStyle
+@end
+
 @implementation RCTMarcusStyle
 
+// Every entry exists whether or not the style named it, so that a formatter can
+// read one without asking first: an entry that says nothing is an entry whose
+// every property is unset, which is exactly what "inherit" means here.
+- (instancetype)init {
+  if (self = [super init]) {
+    _syntax = [RCTMarcusTextStyle new];
+    _link = [RCTMarcusTextStyle new];
+    _strong = [RCTMarcusTextStyle new];
+    _emphasis = [RCTMarcusTextStyle new];
+    _strikethrough = [RCTMarcusTextStyle new];
+    _heading = [RCTMarcusHeadingStyle new];
+    _emoji = [RCTMarcusEmojiStyle new];
+    _blockquote = [RCTMarcusBlockquoteStyle new];
+    _orderedList = [RCTMarcusListStyle new];
+    _unorderedList = [RCTMarcusListStyle new];
+    _code = [RCTMarcusBoxStyle new];
+    _pre = [RCTMarcusBoxStyle new];
+    _mention = [RCTMarcusBoxStyle new];
+  }
+  return self;
+}
+
 @end

package/apple/RCTParagraphComponentView+Marcus.h

@@ -0,0 +1,17 @@
+#import <React/RCTParagraphComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+// Copying a paragraph that has drawings in it.
+//
+// A view nested in a `Text` is one U+FFFC in the attributed string React Native
+// lays out, and U+FFFC is what its own `copy:` puts on the pasteboard: an
+// equation arrives in the next application as an empty box. This replaces the
+// copy with one that writes each of those characters back out as the markdown
+// it stands for -- but only for a paragraph inside a `MarcusTextDecoratorView`
+// that reported any, so every other `Text` in the application copies exactly as
+// it did before.
+@interface RCTParagraphComponentView (Marcus)
+@end
+
+NS_ASSUME_NONNULL_END

package/apple/RCTParagraphComponentView+Marcus.mm

@@ -0,0 +1,38 @@
+#import <RNMarcus/MarcusSwizzle.h>
+#import <RNMarcus/MarcusTextDecoratorComponentView.h>
+#import <RNMarcus/RCTParagraphComponentView+Marcus.h>
+
+@implementation RCTParagraphComponentView (Marcus)
+
+- (void)marcus_copy:(id)sender {
+  // The decorator is this view's superview: it has a host view of its own
+  // precisely so that it can sit there, and it is the only thing that knows
+  // what the placeholders in this paragraph stand for.
+  UIView *parent = self.superview;
+
+  NSString *source =
+    [parent isKindOfClass:[MarcusTextDecoratorComponentView class]]
+      ? [(MarcusTextDecoratorComponentView *)parent substitutedTextOf:self.attributedText]
+      : nil;
+
+  if (source == nil) {
+    [self marcus_copy:sender];
+    return;
+  }
+
+  // Plain text alone, where React Native would also put RTF. What is on the
+  // pasteboard now is markdown -- the source of the paragraph, dollar signs and
+  // all -- and there is no rich-text rendering of that worth carrying: the
+  // markup that says how it looked is the very thing being copied out.
+  UIPasteboard.generalPasteboard.string = source;
+}
+
++ (void)load {
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    // Implemented by this class, so this is a plain exchange.
+    RCTMarcusSwizzle([self class], @selector(copy:), @selector(marcus_copy:));
+  });
+}
+
+@end

package/apple/RCTTextInputComponentView+Marcus.mm

@@ -1,7 +1,7 @@
 #import <RNMarcus/MarkdownAttributes.h>
 #import <RNMarcus/MarcusTextInputDecoratorComponentView.h>
+#import <RNMarcus/MarcusSwizzle.h>
 #import <RNMarcus/RCTTextInputComponentView+Marcus.h>
-#import <objc/message.h>
 
 @implementation RCTTextInputComponentView (Marcus)
 
@@ -39,30 +39,6 @@
   }
 }
 
-// Installs `swizzledSelector` in place of `originalSelector` on `cls`.
-//
-// method_exchangeImplementations alone is only safe when `cls` implements
-// `originalSelector` itself. For an inherited method -- didAddSubview:, for
-// instance -- class_getInstanceMethod returns the *superclass's* method, and
-// exchanging it rewrites UIView for every view in the app. So the
-// implementation is added to this class first; when that succeeds, the
-// "call the original" selector is pointed at the inherited implementation.
-static void
-RCTMarcusSwizzle(Class cls, SEL originalSelector, SEL swizzledSelector) {
-  Method originalMethod = class_getInstanceMethod(cls, originalSelector);
-  Method swizzledMethod = class_getInstanceMethod(cls, swizzledSelector);
-  if (originalMethod == NULL || swizzledMethod == NULL) {
-    return;
-  }
-
-  BOOL didAddMethod = class_addMethod(cls, originalSelector, method_getImplementation(swizzledMethod), method_getTypeEncoding(swizzledMethod));
-  if (didAddMethod) {
-    class_replaceMethod(cls, swizzledSelector, method_getImplementation(originalMethod), method_getTypeEncoding(originalMethod));
-  } else {
-    method_exchangeImplementations(originalMethod, swizzledMethod);
-  }
-}
-
 + (void)load {
   static dispatch_once_t onceToken;
   dispatch_once(&onceToken, ^{

package/cpp/react/renderer/components/RNMarcusSpec/MarcusTextDecoratorState.h

@@ -0,0 +1,37 @@
+#pragma once
+
+#include <memory>
+#include <react/renderer/core/ShadowNodeFamily.h>
+
+namespace facebook {
+namespace react {
+
+// The decorator carries no state of its own; the formatting it applies lives on
+// the text layout manager it hands to the child. This exists only because a
+// shadow node has to name a state type, and because Android's mounting layer
+// wants one it can serialize.
+class JSI_EXPORT MarcusTextDecoratorState final {
+public:
+  using Shared = std::shared_ptr<const MarcusTextDecoratorState>;
+
+  MarcusTextDecoratorState() {};
+
+// TODO: Simplify once RN 0.81 is the lowest supported version
+#if (defined(ANDROID) && REACT_NATIVE_MINOR_VERSION < 81) || (defined(RN_SERIALIZABLE_STATE) && REACT_NATIVE_MINOR_VERSION >= 81)
+  MarcusTextDecoratorState(
+    MarcusTextDecoratorState const &previousState, folly::dynamic data
+  ) {};
+
+  folly::dynamic
+  getDynamic() const {
+    return {};
+  }
+#if REACT_NATIVE_MINOR_VERSION < 81
+  MapBuffer
+  getMapBuffer() const { return MapBufferBuilder::EMPTY(); };
+#endif // REACT_NATIVE_MINOR_VERSION < 81
+#endif // (defined(ANDROID) && REACT_NATIVE_MINOR_VERSION < 81) || (defined(RN_SERIALIZABLE_STATE) && REACT_NATIVE_MINOR_VERSION >= 81)
+};
+
+} // namespace react
+} // namespace facebook

package/cpp/react/renderer/components/RNMarcusSpec/MarcusTextDecoratorViewComponentDescriptor.h

@@ -0,0 +1,17 @@
+#pragma once
+
+#include "MarcusTextDecoratorShadowNode.h"
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+class MarcusTextDecoratorViewComponentDescriptor final
+    : public ConcreteComponentDescriptor<MarcusTextDecoratorShadowNode> {
+public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+};
+
+} // namespace react
+} // namespace facebook