react-native-marcus 0.1.0 → 0.2.0

package/apple/MarcusTextDecoratorShadowNode.mm

@@ -0,0 +1,192 @@
+#import <RNMarcus/MarcusTextDecoratorShadowNode.h>
+
+#import <RNMarcus/MarcusTextLayoutManager.h>
+#import <RNMarcus/RCTMarcusStyle+Codegen.h>
+
+#import <react/renderer/components/text/ParagraphShadowNode.h>
+#import <react/renderer/core/ComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+extern const char MarcusTextDecoratorViewComponentName[] =
+  "MarcusTextDecoratorView";
+
+MarcusTextDecoratorShadowNode::MarcusTextDecoratorShadowNode(
+  ShadowNodeFragment const &fragment,
+  ShadowNodeFamily::Shared const &family,
+  ShadowNodeTraits traits
+)
+    : ConcreteViewShadowNode(fragment, family, traits) {
+  initialize();
+  createTextLayoutManager();
+  makeChildNodeMutable();
+
+  if (fragment.children) {
+    overwriteTextLayoutManager();
+  }
+}
+
+MarcusTextDecoratorShadowNode::MarcusTextDecoratorShadowNode(
+  ShadowNode const &sourceShadowNode,
+  ShadowNodeFragment const &fragment
+)
+    : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+  initialize();
+
+  const auto &sourceDecorator =
+    static_cast<const MarcusTextDecoratorShadowNode &>(sourceShadowNode);
+  textLayoutManager_ = sourceDecorator.textLayoutManager_;
+
+  // Fabric hands a clone the very same props object whenever nothing about the
+  // props changed, so pointer identity is both exact and cheap here. Codegen
+  // only emits `operator==` for prop structs under RN_SERIALIZABLE_STATE, which
+  // iOS does not define, and hand-written equality over the style would rot the
+  // moment a field is added.
+  if (textLayoutManager_ == nullptr ||
+      getProps().get() != sourceDecorator.getProps().get()) {
+    createTextLayoutManager();
+  }
+
+  makeChildNodeMutable();
+
+  if (fragment.children) {
+    overwriteTextLayoutManager();
+  }
+}
+
+void
+MarcusTextDecoratorShadowNode::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
+MarcusTextDecoratorShadowNode::makeChildNodeMutable() {
+  // When the decorator is cloned and has a child node, the child node should be
+  // cloned as well to ensure it is mutable. Cloning it also runs the paragraph's
+  // own component descriptor, which resets the layout manager to the shared one
+  // -- hence overwriteTextLayoutManager() always following this, never the other
+  // way around.
+  const auto &children = getChildren();
+  if (!children.empty()) {
+    react_native_assert(
+      children.size() == 1 &&
+      "MarcusTextDecoratorView received more than one child"
+    );
+
+    const auto clonedChild = children[0]->clone({});
+    replaceChild(*children[0], clonedChild);
+  }
+}
+
+void
+MarcusTextDecoratorShadowNode::createTextLayoutManager() {
+  const auto &props = getConcreteProps();
+
+  NSMutableArray<MarcusRange *> *ranges =
+    [NSMutableArray arrayWithCapacity:props.ranges.size()];
+
+  for (const auto &range : props.ranges) {
+    [ranges addObject:[[MarcusRange alloc]
+                        initWithType:RCTNSStringFromString(range.type)
+                               range:NSMakeRange(range.start, range.length)
+                               depth:static_cast<NSUInteger>(range.depth)]];
+  }
+
+  textLayoutManager_ = std::make_shared<const MarcusTextLayoutManager>(
+    getContextContainer(),
+    ranges,
+    RCTMarcusStyleFromStruct(props.markdownStyle)
+  );
+}
+
+void
+MarcusTextDecoratorShadowNode::overwriteTextLayoutManager() {
+  const auto &children = getChildren();
+  if (children.empty()) {
+    return;
+  }
+  react_native_assert(
+    children.size() == 1 &&
+    "MarcusTextDecoratorView received more than one child"
+  );
+
+  const auto child =
+    std::dynamic_pointer_cast<const ParagraphShadowNode>(children[0]);
+
+  react_native_assert(
+    child != nullptr &&
+    "MarcusTextDecoratorView received child other than a Text"
+  );
+
+  if (child == nullptr) {
+    return;
+  }
+
+  child->ensureUnsealed();
+
+  const auto mutableChild =
+    std::const_pointer_cast<ParagraphShadowNode>(child);
+  mutableChild->setTextLayoutManager(textLayoutManager_);
+}
+
+void
+MarcusTextDecoratorShadowNode::appendChild(
+  const std::shared_ptr<const ShadowNode> &child
+) {
+  YogaLayoutableShadowNode::appendChild(child);
+
+  overwriteTextLayoutManager();
+}
+
+void
+MarcusTextDecoratorShadowNode::replaceChild(
+  const ShadowNode &oldChild,
+  const std::shared_ptr<const ShadowNode> &newChild,
+  size_t suggestedIndex
+) {
+  YogaLayoutableShadowNode::replaceChild(oldChild, newChild, suggestedIndex);
+
+  overwriteTextLayoutManager();
+}
+
+void
+MarcusTextDecoratorShadowNode::layout(LayoutContext layoutContext) {
+  YogaLayoutableShadowNode::layout(layoutContext);
+
+  const auto &children = getChildren();
+  react_native_assert(
+    children.size() == 1 &&
+    "MarcusTextDecoratorView didn't receive exactly one child"
+  );
+
+  if (children.size() != 1) {
+    return;
+  }
+
+  auto child =
+    std::static_pointer_cast<const YogaLayoutableShadowNode>(children[0]);
+  child->ensureUnsealed();
+  auto mutableChild = std::const_pointer_cast<YogaLayoutableShadowNode>(child);
+
+  // Since nodes with display: contents are skipped during layout, they have
+  // zero-layout. To properly display the view, assign the layout metrics from
+  // the child (the paragraph, which was calculated by Yoga) to the decorator
+  // view.
+  auto childMetrics = child->getLayoutMetrics();
+  setLayoutMetrics(childMetrics); // makes a copy
+
+  // Then, it's also needed to update the metrics on the child as the position
+  // is relative to the parent, which was just moved above. By zeroing the
+  // origin, the child is effectively moved to the same position it was before
+  // the manipulation here.
+  childMetrics.frame.origin = Point{};
+  mutableChild->setLayoutMetrics(childMetrics);
+}
+
+} // namespace react
+} // namespace facebook

package/apple/MarcusTextDecoratorViewManager.h

@@ -0,0 +1,4 @@
+#import <React/RCTViewManager.h>
+
+@interface MarcusTextDecoratorViewManager : RCTViewManager
+@end

package/apple/MarcusTextDecoratorViewManager.mm

@@ -0,0 +1,11 @@
+#import <RNMarcus/MarcusTextDecoratorViewManager.h>
+
+@implementation MarcusTextDecoratorViewManager
+
+RCT_EXPORT_MODULE(MarcusTextDecoratorView)
+
+RCT_EXPORT_VIEW_PROPERTY(markdownStyle, NSDictionary)
+
+RCT_EXPORT_VIEW_PROPERTY(ranges, NSArray)
+
+@end

package/apple/MarcusTextInputDecoratorComponentView.mm

@@ -95,7 +95,7 @@ using namespace facebook::react;
   // whenever the props object is recreated -- but hand-written equality over
   // ~27 fields would rot silently the moment a style prop is added.
   _decorator.markdownStyle =
-    [[RCTMarcusStyle alloc] initWithStruct:newViewProps.markdownStyle];
+    RCTMarcusStyleFromStruct(newViewProps.markdownStyle);
 
   [_decorator applyNewStyles];
 

package/apple/MarcusTextInputDecoratorShadowNode.mm

@@ -128,7 +128,7 @@ MarcusTextInputDecoratorShadowNode::
   }
 
   RCTMarcusStyle *markdownStyle =
-    [[RCTMarcusStyle alloc] initWithStruct:decoratorProps.markdownStyle];
+    RCTMarcusStyleFromStruct(decoratorProps.markdownStyle);
   NSNumber *parserId = [NSNumber numberWithInt:decoratorProps.parserId];
 
   // convert the attibuted string stored in state to

package/apple/MarcusTextLayoutManager.h

@@ -0,0 +1,40 @@
+#pragma once
+
+#import <Foundation/Foundation.h>
+
+#import <RNMarcus/MarcusRange.h>
+#import <RNMarcus/RCTMarcusStyle.h>
+
+#include <react/renderer/textlayoutmanager/TextLayoutManager.h>
+
+#include <memory>
+
+namespace facebook {
+namespace react {
+
+/*
+ * A `TextLayoutManager` that formats before it lays out.
+ *
+ * Everything `RCTParagraphComponentView` does with text -- measuring it,
+ * drawing it, hit-testing it, enumerating its lines -- goes through the
+ * `RCTTextLayoutManager` this owns, and each of those paths converts the
+ * shadow tree's `AttributedString` into an `NSAttributedString` first. That
+ * conversion is the only place markdown has to be applied, which is why the
+ * `Text` decorator needs none of the measure-callback surgery the `TextInput`
+ * one does: handing the child paragraph one of these covers every path at once.
+ *
+ * Immutable once constructed. The decorator builds a new one when its props
+ * change rather than mutating this, so the commit thread is never writing style
+ * or ranges while the main thread draws with them.
+ */
+class MarcusTextLayoutManager : public TextLayoutManager {
+public:
+  MarcusTextLayoutManager(
+    const std::shared_ptr<const ContextContainer> &contextContainer,
+    NSArray<MarcusRange *> *ranges,
+    RCTMarcusStyle *markdownStyle
+  );
+};
+
+} // namespace react
+} // namespace facebook

package/apple/MarcusTextLayoutManager.mm

@@ -0,0 +1,173 @@
+#import <RNMarcus/MarcusTextLayoutManager.h>
+#import <RNMarcus/MarkdownSwiftInterop.h>
+
+#import <react/debug/react_native_assert.h>
+#import <react/renderer/textlayoutmanager/RCTTextLayoutManager.h>
+#import <react/utils/ManagedObjectWrapper.h>
+
+using namespace facebook::react;
+
+// The one seam every text path funnels through. It is private to
+// RCTTextLayoutManager, so it is redeclared here to be overridden; the
+// alternative is reimplementing five public methods that each need
+// `_textStorageAndLayoutManagerWithAttributesString:`, which is private too.
+//
+// If React Native renames it the override silently stops being called, so the
+// subclass asserts on the selector at construction rather than letting
+// formatting quietly disappear.
+@interface RCTTextLayoutManager (Marcus)
+- (NSAttributedString *)
+  _nsAttributedStringFromAttributedString:(facebook::react::AttributedString)attributedString;
+- (NSTextStorage *)
+  _textStorageAndLayoutManagerWithAttributesString:(NSAttributedString *)attributedString
+                               paragraphAttributes:(facebook::react::ParagraphAttributes)paragraphAttributes
+                                              size:(CGSize)size;
+@end
+
+@interface MarcusRCTTextLayoutManager : RCTTextLayoutManager
+
+@property(nonatomic, copy) NSArray<MarcusRange *> *ranges;
+@property(nonatomic, strong) RCTMarcusStyle *markdownStyle;
+
+@end
+
+@implementation MarcusRCTTextLayoutManager
+
+- (NSAttributedString *)
+  _nsAttributedStringFromAttributedString:(AttributedString)attributedString {
+  NSAttributedString *unformatted =
+    [super _nsAttributedStringFromAttributedString:attributedString];
+
+  if (_markdownStyle == nil || unformatted.length == 0) {
+    return unformatted;
+  }
+
+  // Superclass caches what it returns, so the copy is not optional.
+  NSMutableAttributedString *formatted =
+    [[NSMutableAttributedString alloc] initWithAttributedString:unformatted];
+
+  // Unlike the text input there is no separate notion of default attributes: a
+  // paragraph's own attributes are already on the string, fragment by fragment,
+  // and the formatter is asked to leave them alone. What it still needs is a
+  // paragraph style to build indents from, which is what these supply.
+  NSDictionary<NSAttributedStringKey, id> *defaultTextAttributes =
+    [unformatted attributesAtIndex:0 effectiveRange:NULL];
+
+  [MarkdownFormatter formatParagraph:formatted
+               defaultTextAttributes:defaultTextAttributes
+                              ranges:_ranges
+                               style:_markdownStyle];
+
+  return formatted;
+}
+
+// The second seam, for the two shapes that are not attributes at all. Every
+// path builds its layout here, and swapping in a subclass is the only way to
+// reach the background drawing pass -- `drawAttributedString:` takes the layout
+// manager this returns and never asks what class it is.
+//
+// Super is called rather than reimplemented so that whatever else React Native
+// does to a text container -- line breaking, font scaling, baseline offset --
+// keeps happening, and keeps happening the same way for measurement as for
+// drawing.
+- (NSTextStorage *)
+  _textStorageAndLayoutManagerWithAttributesString:(NSAttributedString *)attributedString
+                               paragraphAttributes:(ParagraphAttributes)paragraphAttributes
+                                              size:(CGSize)size {
+  NSTextStorage *textStorage =
+    [super _textStorageAndLayoutManagerWithAttributesString:attributedString
+                                       paragraphAttributes:paragraphAttributes
+                                                      size:size];
+
+  if (_markdownStyle == nil || textStorage.layoutManagers.count != 1) {
+    return textStorage;
+  }
+
+  NSLayoutManager *original = textStorage.layoutManagers.firstObject;
+
+  if (original.textContainers.count != 1 ||
+      [original isKindOfClass:[MarkdownParagraphLayoutManager class]]) {
+    return textStorage;
+  }
+
+  NSTextContainer *textContainer = original.textContainers.firstObject;
+  MarkdownParagraphLayoutManager *replacement =
+    [MarkdownParagraphLayoutManager new];
+  replacement.usesFontLeading = original.usesFontLeading;
+  replacement.markdownStyle = _markdownStyle;
+
+  [original removeTextContainerAtIndex:0];
+  [replacement addTextContainer:textContainer];
+  [textStorage addLayoutManager:replacement];
+  [textStorage removeLayoutManager:original];
+
+  return textStorage;
+}
+
+/**
+ * Where a press lands.
+ *
+ * The touch arrives in the paragraph view's own coordinates -- padding
+ * included -- while the layout it is measured against starts at the content
+ * frame, so on a `Text` with any padding at all React Native looks up the
+ * character that many points down and to the right of the one under the
+ * finger. With 8pt of padding and a 19pt line that is the bottom half of every
+ * line pressing the line below it, which is most of what makes a link feel
+ * like it has to be aimed at.
+ *
+ * Nothing else needs the untranslated point: this is the only method that
+ * takes one.
+ */
+- (std::shared_ptr<const EventEmitter>)
+  getEventEmitterWithAttributeString:(AttributedString)attributedString
+                 paragraphAttributes:(ParagraphAttributes)paragraphAttributes
+                               frame:(CGRect)frame
+                             atPoint:(CGPoint)point {
+  CGPoint inContent =
+    CGPointMake(point.x - frame.origin.x, point.y - frame.origin.y);
+
+  return [super getEventEmitterWithAttributeString:attributedString
+                               paragraphAttributes:paragraphAttributes
+                                             frame:frame
+                                           atPoint:inContent];
+}
+
+@end
+
+namespace facebook {
+namespace react {
+
+MarcusTextLayoutManager::MarcusTextLayoutManager(
+  const std::shared_ptr<const ContextContainer> &contextContainer,
+  NSArray<MarcusRange *> *ranges,
+  RCTMarcusStyle *markdownStyle
+)
+    : TextLayoutManager(contextContainer) {
+  react_native_assert(
+    [RCTTextLayoutManager instancesRespondToSelector:
+                            @selector(_nsAttributedStringFromAttributedString:)] &&
+    "RCTTextLayoutManager no longer converts attributed strings through "
+    "-_nsAttributedStringFromAttributedString:, so markdown formatting would "
+    "never be applied"
+  );
+  react_native_assert(
+    [RCTTextLayoutManager
+      instancesRespondToSelector:
+        @selector(_textStorageAndLayoutManagerWithAttributesString:paragraphAttributes:size:)] &&
+    "RCTTextLayoutManager no longer builds its layout through "
+    "-_textStorageAndLayoutManagerWithAttributesString:paragraphAttributes:size:, "
+    "so blockquote ribbons and mention pills would never be drawn"
+  );
+
+  MarcusRCTTextLayoutManager *manager = [MarcusRCTTextLayoutManager new];
+  manager.ranges = ranges;
+  manager.markdownStyle = markdownStyle;
+
+  // Replaces the plain one the base constructor just made. Every method on
+  // TextLayoutManager reads this member rather than a type, so none of them
+  // need to be virtual for the subclass to take effect.
+  nativeTextLayoutManager_ = wrapManagedObject(manager);
+}
+
+} // namespace react
+} // namespace facebook

package/apple/MarkdownAttributes.h

@@ -16,16 +16,37 @@ FOUNDATION_EXPORT const
 FOUNDATION_EXPORT const NSAttributedStringKey
   RCTMarcusTextBackgroundAttributeName NS_SWIFT_NAME(marcusTextBackground);
 
+// Carries a MarkdownCodeBlock over a fenced or indented block, drawn as one box
+// behind the whole thing rather than as a background behind its glyphs.
+FOUNDATION_EXPORT const NSAttributedStringKey
+  RCTMarcusCodeBlockAttributeName NS_SWIFT_NAME(marcusCodeBlock);
+
+// Carries a MarkdownListBullet over the marker character of an unordered list
+// item, whose glyph is left undrawn so that the circle can be drawn in its
+// place. Only a display ever carries it: an input shows the marker you typed.
+FOUNDATION_EXPORT const NSAttributedStringKey
+  RCTMarcusListBulletAttributeName NS_SWIFT_NAME(marcusListBullet);
+
 // Blockquote nesting level, used to draw the ribbons.
 FOUNDATION_EXPORT const NSAttributedStringKey
   RCTMarcusBlockquoteDepthAttributeName NS_SWIFT_NAME(marcusBlockquoteDepth);
 
-// Distance from the paragraph's left edge to the blockquote's own box: the
+// Distance from the line's leading edge to the blockquote's own box: the
 // indent the line already carried when the blockquote was applied, plus any
 // room left for a list marker drawn in front of the ribbons. They are drawn
 // from there rather than from the text origin, which also moves with containers
-// nested inside the quote (a list, say).
+// nested inside the quote (a list, say). Leading rather than left, because a
+// head indent is: which edge it is measured from is `marcusRightToLeft`.
 FOUNDATION_EXPORT const NSAttributedStringKey
   RCTMarcusBlockquoteIndentAttributeName NS_SWIFT_NAME(marcusBlockquoteIndent);
 
+// Set over a line that reads right to left, and only over such a line: left to
+// right is the absence of it. The shapes drawn beside the text -- a quote's
+// ribbons, a code block's box -- are placed from the edge the line begins at,
+// and nothing else in the string says which edge that is. UIKit resolves
+// `NSWritingDirectionNatural` while laying out and keeps the answer to itself,
+// so `MarkdownWritingDirection` works out the same one while formatting.
+FOUNDATION_EXPORT const NSAttributedStringKey
+  RCTMarcusRightToLeftAttributeName NS_SWIFT_NAME(marcusRightToLeft);
+
 NS_ASSUME_NONNULL_END

package/apple/MarkdownAttributes.m

@@ -3,7 +3,13 @@
 const NSAttributedStringKey RCTMarcusTextAttributeName = @"RCTMarcusText";
 const NSAttributedStringKey RCTMarcusTextBackgroundAttributeName =
   @"RCTMarcusTextBackground";
+const NSAttributedStringKey RCTMarcusCodeBlockAttributeName =
+  @"RCTMarcusCodeBlock";
+const NSAttributedStringKey RCTMarcusListBulletAttributeName =
+  @"RCTMarcusListBullet";
 const NSAttributedStringKey RCTMarcusBlockquoteDepthAttributeName =
   @"RCTMarcusBlockquoteDepth";
 const NSAttributedStringKey RCTMarcusBlockquoteIndentAttributeName =
   @"RCTMarcusBlockquoteIndent";
+const NSAttributedStringKey RCTMarcusRightToLeftAttributeName =
+  @"RCTMarcusRightToLeft";

package/apple/MarkdownCopy.swift

@@ -0,0 +1,63 @@
+import Foundation
+
+/// What a copied paragraph puts on the pasteboard.
+///
+/// A view nested in a `Text` -- a drawn equation, an image -- is one U+FFFC in
+/// the string TextKit lays out, and U+FFFC is what the platform's own copy
+/// writes: a message with an equation in it arrives in the next application
+/// with an empty box where the maths was. So each of those characters is
+/// written back out as the markdown it stands for.
+///
+/// The offsets come from JavaScript, measured against the stripped text. That
+/// is the same string the ranges are measured against and the same one React
+/// Native laid out -- the strip left behind exactly the one character an
+/// attachment costs -- so there is nothing to remap here.
+///
+/// The whole paragraph, rather than a selection of it: React Native's `Text`
+/// has no partial selection on iOS, and `copy:` is sent for the lot. Android
+/// takes a range because there it can be given one.
+@objc public final class MarkdownCopy: NSObject {
+
+  /// The paragraph with every placeholder replaced by its source.
+  ///
+  /// The two arrays are one list said in the only shape that crosses into
+  /// Objective-C: `indices[i]` is where `sources[i]` goes. They arrive in text
+  /// order and each covers exactly one character, so one walk is enough.
+  ///
+  /// - Parameters:
+  ///   - text: the string the layout was made from.
+  ///   - indices: where each placeholder is, in UTF-16 offsets.
+  ///   - sources: the markdown each placeholder was written as. An empty one
+  ///     removes the placeholder, which is how an image copies as nothing.
+  @objc(substituteInto:indices:sources:)
+  public static func substitute(_ text: String, indices: [Int], sources: [String]) -> String {
+    // Indexed as an `NSString` rather than a `String`: the offsets count UTF-16
+    // code units, which is what the text layout counts, while `String` counts
+    // characters a reader would recognise as one. The two disagree over every
+    // emoji in the paragraph, and the placeholder after one would land inside a
+    // surrogate pair.
+    let string = text as NSString
+    let length = string.length
+    var copied = ""
+    var cursor = 0
+
+    for (index, source) in zip(indices, sources) {
+      // Skipped rather than trusted: the props and the string that was laid out
+      // are two sides of one commit, and a paragraph mounted between them is the
+      // one frame where they can disagree.
+      guard index >= cursor, index < length else {
+        continue
+      }
+
+      copied += string.substring(with: NSRange(location: cursor, length: index - cursor))
+      copied += source
+      cursor = index + 1
+    }
+
+    if cursor < length {
+      copied += string.substring(from: cursor)
+    }
+
+    return copied
+  }
+}

package/apple/MarkdownDecorator.swift

@@ -10,7 +10,7 @@ import UIKit
 /// implemented in Swift.
 @objc public final class MarkdownDecorator: NSObject {
 
-  private var markdownUtils = RCTMarcusUtils()
+  private var markdownUtils = MarkdownUtils()
 
   private weak var textView: RCTUITextView?
   private weak var textField: RCTUITextField?
@@ -44,7 +44,7 @@ import UIKit
 
   /// Drops all per-mount state so the view can be recycled.
   @objc public func reset() {
-    markdownUtils = RCTMarcusUtils()
+    markdownUtils = MarkdownUtils()
   }
 
   // MARK: - Attach / detach

package/apple/MarkdownFormatter+React.swift

@@ -48,4 +48,27 @@ extension MarkdownFormatter {
       fonts: MarkdownReactFonts()
     )
   }
+
+  /// The paragraph entry point. Same formatting, except that whatever the
+  /// shadow tree already put on the string -- nested `Text` attributes, inline
+  /// view attachments -- is left where it is, and that the list markers are
+  /// rendered rather than shown: this is the finished text rather than the text
+  /// being written.
+  @objc(formatParagraph:defaultTextAttributes:ranges:style:)
+  public static func formatParagraph(
+    _ attributedString: NSMutableAttributedString,
+    defaultTextAttributes: [NSAttributedString.Key: Any],
+    ranges: [MarcusRange],
+    style: RCTMarcusStyle
+  ) {
+    format(
+      attributedString,
+      defaultTextAttributes: defaultTextAttributes,
+      ranges: ranges,
+      style: style,
+      fonts: MarkdownReactFonts(),
+      resetAttributes: false,
+      display: true
+    )
+  }
 }