react-native-marcus 0.1.0

package/apple/MarkdownAdaptiveImageGlyph.swift

@@ -0,0 +1,44 @@
+import UIKit
+
+/// Genmoji handling for iOS 18+.
+///
+/// An adaptive image glyph inserted directly would live in the text as an
+/// `NSAdaptiveImageGlyph`, which markdown formatting has no representation for.
+/// Instead it is flattened to a plain image and pasted, so it arrives as an
+/// ordinary attachment.
+@objc public final class MarkdownAdaptiveImageGlyph: NSObject {
+
+  @objc(handlePasteInTextInputView:glyph:)
+  public static func handlePaste(in textInputView: UIView, glyph: Any) {
+    guard let image = flattenedImage(from: glyph) else { return }
+
+    // Round-tripping through the pasteboard is what routes the image into the
+    // text input, so the user's own clipboard contents are saved and restored.
+    let pasteboard = UIPasteboard.general
+    let savedItems = pasteboard.items
+    pasteboard.image = image
+
+    let paste = #selector(UIResponderStandardEditActions.paste(_:))
+    if textInputView.canPerformAction(paste, withSender: nil) {
+      textInputView.perform(paste, with: nil)
+    }
+
+    pasteboard.items = savedItems
+  }
+
+  private static func flattenedImage(from glyph: Any) -> UIImage? {
+    guard #available(iOS 18.0, *),
+      let glyph = glyph as? NSAdaptiveImageGlyph,
+      let original = UIImage(data: glyph.imageContent)
+    else { return nil }
+
+    let targetSize = CGSize(width: 128, height: 128)
+    let resized = UIGraphicsImageRenderer(size: targetSize).image { _ in
+      original.draw(in: CGRect(origin: .zero, size: targetSize))
+    }
+
+    // The PNG round-trip drops the adaptive glyph's extra representations.
+    guard let pngData = resized.pngData() else { return nil }
+    return UIImage(data: pngData)
+  }
+}

package/apple/MarkdownAttributes.h

@@ -0,0 +1,31 @@
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+// Custom attributed-string keys used across the module. They live here rather
+// than alongside the formatter so that consumers which only need the key -- the
+// `_textOf:equals:` swizzle, for instance -- don't pull in the formatter.
+
+// Marks a string as markdown-formatted, which switches the swizzled
+// `_textOf:equals:` to compare plain strings instead of full attributes.
+FOUNDATION_EXPORT const
+  NSAttributedStringKey RCTMarcusTextAttributeName NS_SWIFT_NAME(marcusText);
+
+// Carries a MarkdownTextBackground for mention pills, drawn by the layout
+// fragment rather than by NSBackgroundColorAttributeName.
+FOUNDATION_EXPORT const NSAttributedStringKey
+  RCTMarcusTextBackgroundAttributeName NS_SWIFT_NAME(marcusTextBackground);
+
+// 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
+// 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).
+FOUNDATION_EXPORT const NSAttributedStringKey
+  RCTMarcusBlockquoteIndentAttributeName NS_SWIFT_NAME(marcusBlockquoteIndent);
+
+NS_ASSUME_NONNULL_END

package/apple/MarkdownAttributes.m

@@ -0,0 +1,9 @@
+#import <RNMarcus/MarkdownAttributes.h>
+
+const NSAttributedStringKey RCTMarcusTextAttributeName = @"RCTMarcusText";
+const NSAttributedStringKey RCTMarcusTextBackgroundAttributeName =
+  @"RCTMarcusTextBackground";
+const NSAttributedStringKey RCTMarcusBlockquoteDepthAttributeName =
+  @"RCTMarcusBlockquoteDepth";
+const NSAttributedStringKey RCTMarcusBlockquoteIndentAttributeName =
+  @"RCTMarcusBlockquoteIndent";

package/apple/MarkdownBackedTextInputDelegate.swift

@@ -0,0 +1,117 @@
+import React
+import UIKit
+
+/// Sits in front of the text view's real delegate purely to fix the caret
+/// position after a blockquote; every other callback is forwarded untouched.
+@objc
+public final class MarkdownBackedTextInputDelegate: NSObject,
+  RCTBackedTextInputDelegate
+{
+
+  private weak var textView: RCTUITextView?
+  private let originalTextInputDelegate: RCTBackedTextInputDelegate?
+
+  @objc public init(textView: RCTUITextView) {
+    self.textView = textView
+    self.originalTextInputDelegate = textView.textInputDelegate
+    super.init()
+    textView.textInputDelegate = self
+  }
+
+  deinit {
+    textView?.textInputDelegate = originalTextInputDelegate
+  }
+
+  public func textInputDidChangeSelection() {
+    originalTextInputDelegate?.textInputDidChangeSelection()
+
+    // After a newline at the end of a blockquote, the typing attributes for the
+    // next line still carry the blockquote's paragraph indents, which pushes the
+    // caret to the right instead of leaving it at the start of the line.
+    guard let textView,
+      let typingAttributes = textView.typingAttributes,
+      let paragraphStyle = typingAttributes[.paragraphStyle]
+        as? NSParagraphStyle,
+      let mutableParagraphStyle = paragraphStyle.mutableCopy()
+        as? NSMutableParagraphStyle
+    else { return }
+
+    mutableParagraphStyle.firstLineHeadIndent = 0
+    mutableParagraphStyle.headIndent = 0
+
+    var updated = typingAttributes
+    updated[.paragraphStyle] = mutableParagraphStyle
+    textView.typingAttributes = updated
+  }
+
+  // MARK: - Straight forwarding
+
+  public func textInputDidChange() {
+    originalTextInputDelegate?.textInputDidChange()
+  }
+  public func textInputDidBeginEditing() {
+    originalTextInputDelegate?.textInputDidBeginEditing()
+  }
+  public func textInputDidEndEditing() {
+    originalTextInputDelegate?.textInputDidEndEditing()
+  }
+  public func textInputDidReturn() {
+    originalTextInputDelegate?.textInputDidReturn()
+  }
+
+  public func textInputShouldBeginEditing() -> Bool {
+    originalTextInputDelegate?.textInputShouldBeginEditing() ?? true
+  }
+
+  public func textInputShouldEndEditing() -> Bool {
+    originalTextInputDelegate?.textInputShouldEndEditing() ?? true
+  }
+
+  public func textInputShouldReturn() -> Bool {
+    originalTextInputDelegate?.textInputShouldReturn() ?? true
+  }
+
+  public func textInputShouldSubmitOnReturn() -> Bool {
+    originalTextInputDelegate?.textInputShouldSubmitOnReturn() ?? true
+  }
+
+  // The protocol annotates the return as nonnull, but its own documentation says
+  // returning nil rejects the change. Declared as an implicitly unwrapped
+  // optional so a nil from the real delegate is forwarded rather than being
+  // silently turned into "accept".
+  public func textInputShouldChangeText(_ text: String, in range: NSRange)
+    -> String!
+  {
+    originalTextInputDelegate?.textInputShouldChangeText(text, in: range)
+  }
+
+  // MARK: - Paste
+
+  // These are not part of RCTBackedTextInputDelegate; they are added by a
+  // patch applied in the New Expensify app, so they are forwarded dynamically
+  // and only when the real delegate actually implements them.
+  // See https://github.com/Expensify/App/blob/main/patches
+
+  @objc(textInputDidPaste:withData:)
+  public func textInputDidPaste(_ type: String, withData data: String) {
+    let selector = #selector(
+      MarkdownBackedTextInputDelegate.textInputDidPaste(_:withData:)
+    )
+    guard let delegate = originalTextInputDelegate as AnyObject?,
+      delegate.responds(to: selector)
+    else { return }
+    _ = delegate.perform(selector, with: type, with: data)
+  }
+
+  @objc(textInputDidPaste:)
+  public func textInputDidPaste(_ items: [[String: String]]) {
+    let selector = #selector(
+      MarkdownBackedTextInputDelegate.textInputDidPaste(_:)
+        as (MarkdownBackedTextInputDelegate) -> ([[String: String]]) -> Void
+    )
+    guard let delegate = originalTextInputDelegate as AnyObject?,
+      delegate.responds(to: selector)
+    else { return }
+    _ = delegate.perform(selector, with: items)
+  }
+}

package/apple/MarkdownDecorator.swift

@@ -0,0 +1,316 @@
+import React
+import UIKit
+
+/// Owns everything the decorator does to a React Native text input: installing
+/// the observers, delegates and layout-manager delegate that apply markdown
+/// formatting, and tearing them down again.
+///
+/// The Fabric component view is a thin Objective-C++ shell around this, because
+/// `RCTComponentViewProtocol` carries C++ types in its signatures and cannot be
+/// implemented in Swift.
+@objc public final class MarkdownDecorator: NSObject {
+
+  private var markdownUtils = RCTMarcusUtils()
+
+  private weak var textView: RCTUITextView?
+  private weak var textField: RCTUITextField?
+
+  /// What `attach(to:)` last bound to, so a repeated call for an unchanged
+  /// backed view can be skipped.
+  private weak var attachedBackedTextInputView: UIView?
+
+  /// The backed view's own smart-dashes setting, restored on detach.
+  private var previousSmartDashesType: UITextSmartDashesType?
+
+  private var layoutManagerDelegate: MarkdownTextLayoutManagerDelegate?
+  private var backedTextInputDelegate: MarkdownBackedTextInputDelegate?
+  private var textStorageDelegate: MarkdownTextStorageDelegate?
+  private var textViewObserver: MarkdownTextViewObserver?
+  private var textFieldObserver: MarkdownTextFieldObserver?
+
+  @objc public private(set) var isAttached = false
+
+  // MARK: - Props
+
+  @objc public var markdownStyle: RCTMarcusStyle? {
+    get { markdownUtils.markdownStyle }
+    set { markdownUtils.markdownStyle = newValue }
+  }
+
+  @objc public var parserId: NSNumber? {
+    get { markdownUtils.parserId }
+    set { markdownUtils.parserId = newValue }
+  }
+
+  /// Drops all per-mount state so the view can be recycled.
+  @objc public func reset() {
+    markdownUtils = RCTMarcusUtils()
+  }
+
+  // MARK: - Attach / detach
+
+  /// Attaches to the backed text input inside `textInputComponentView`.
+  ///
+  /// Detaches first, so this doubles as the re-attach path used when React
+  /// Native swaps its backed view on a `multiline` change.
+  @objc public func attach(to textInputComponentView: UIView) {
+    guard
+      let backedTextInputView =
+        textInputComponentView.value(forKey: "_backedTextInputView") as? UIView
+    else {
+      assertionFailure(
+        "TextInput component view has no backed text input view."
+      )
+      return
+    }
+
+    // The re-attach hook fires for every subview added to the TextInput
+    // component view, so ignore the ones that leave the backed view unchanged.
+    if isAttached, backedTextInputView === attachedBackedTextInputView {
+      return
+    }
+
+    detach()
+
+    if let textField = backedTextInputView as? RCTUITextField {
+      attach(toTextField: textField)
+    } else if let textView = backedTextInputView as? RCTUITextView {
+      attach(toTextView: textView)
+    } else {
+      assertionFailure("Cannot enable Markdown for this type of TextInput.")
+      return
+    }
+
+    attachedBackedTextInputView = backedTextInputView
+    isAttached = true
+  }
+
+  @objc public func detach() {
+    guard isAttached else { return }
+    isAttached = false
+
+    if let textView {
+      textView.textLayoutManager?.delegate = nil
+      backedTextInputDelegate = nil
+      if let textViewObserver {
+        textView.removeObserver(
+          textViewObserver,
+          forKeyPath: "defaultTextAttributes",
+          context: nil
+        )
+      }
+      setSmartDashesEnabled(true, on: textView)
+      setAdaptiveImageGlyphSupport(false, on: textView)
+      textViewObserver = nil
+      textStorageDelegate = nil
+      textView.textStorage.delegate = nil
+      self.textView = nil
+    }
+
+    if let textField {
+      if let textFieldObserver {
+        textField.removeTarget(
+          textFieldObserver,
+          action: #selector(MarkdownTextFieldObserver.textFieldDidChange(_:)),
+          for: .editingChanged
+        )
+        textField.removeTarget(
+          textFieldObserver,
+          action: #selector(
+            MarkdownTextFieldObserver.textFieldDidEndEditing(_:)
+          ),
+          for: .editingDidEnd
+        )
+        textField.removeObserver(
+          textFieldObserver,
+          forKeyPath: "text",
+          context: nil
+        )
+        textField.removeObserver(
+          textFieldObserver,
+          forKeyPath: "attributedText",
+          context: nil
+        )
+      }
+      setSmartDashesEnabled(true, on: textField)
+      setAdaptiveImageGlyphSupport(false, on: textField)
+      textFieldObserver = nil
+      self.textField = nil
+    }
+
+    layoutManagerDelegate = nil
+    attachedBackedTextInputView = nil
+  }
+
+  /// Re-applies formatting after a style prop change.
+  @objc public func applyNewStyles() {
+    if let textView, let attributedText = textView.attributedText {
+      textView.textStorage.setAttributedString(attributedText)
+    }
+    if let textField, let textFieldObserver {
+      textFieldObserver.textFieldDidChange(textField)
+    }
+  }
+
+  // MARK: - Single line
+
+  private func attach(toTextField textField: RCTUITextField) {
+    self.textField = textField
+
+    // Formatting would be overwritten otherwise.
+    assert(textField.adjustsFontSizeToFitWidth == false)
+
+    setSmartDashesEnabled(false, on: textField)
+    setAdaptiveImageGlyphSupport(true, on: textField)
+
+    let observer = MarkdownTextFieldObserver(
+      textField: textField,
+      markdownUtils: markdownUtils
+    )
+    textFieldObserver = observer
+
+    textField.addTarget(
+      observer,
+      action: #selector(MarkdownTextFieldObserver.textFieldDidChange(_:)),
+      for: .editingChanged
+    )
+    textField.addTarget(
+      observer,
+      action: #selector(MarkdownTextFieldObserver.textFieldDidEndEditing(_:)),
+      for: .editingDidEnd
+    )
+    textField.addObserver(
+      observer,
+      forKeyPath: "text",
+      options: .new,
+      context: nil
+    )
+    textField.addObserver(
+      observer,
+      forKeyPath: "attributedText",
+      options: .new,
+      context: nil
+    )
+
+    // Format the initial value.
+    observer.textFieldDidChange(textField)
+
+    // UITextField keeps its TextKit 2 stack private. The key names are spelled
+    // backwards so they don't appear as literals in the binary.
+    guard
+      let textContainer = textField.value(
+        forKey: Self.reversed("reniatnoCtxet_")
+      ) as? NSTextContainer,
+      let textStorage = textField.value(forKey: Self.reversed("egarotStxet_"))
+        as? NSTextStorage
+    else { return }
+
+    let delegate = MarkdownTextLayoutManagerDelegate(
+      textStorage: textStorage,
+      markdownUtils: markdownUtils
+    )
+    layoutManagerDelegate = delegate
+    textContainer.textLayoutManager?.delegate = delegate
+
+    // TODO: register blockquotes layout manager
+    // https://github.com/Expensify/react-native-live-markdown/issues/87
+  }
+
+  // MARK: - Multiline
+
+  private func attach(toTextView textView: RCTUITextView) {
+    self.textView = textView
+
+    setSmartDashesEnabled(false, on: textView)
+    setAdaptiveImageGlyphSupport(true, on: textView)
+
+    assert(textView.textStorage.delegate == nil)
+    let storageDelegate = MarkdownTextStorageDelegate(
+      textView: textView,
+      markdownUtils: markdownUtils
+    )
+    textStorageDelegate = storageDelegate
+    textView.textStorage.delegate = storageDelegate
+
+    let observer = MarkdownTextViewObserver(
+      textView: textView,
+      markdownUtils: markdownUtils
+    )
+    textViewObserver = observer
+    textView.addObserver(
+      observer,
+      forKeyPath: "defaultTextAttributes",
+      options: .new,
+      context: nil
+    )
+
+    // Format the initial value.
+    if let attributedText = textView.attributedText {
+      textView.textStorage.setAttributedString(attributedText)
+    }
+
+    let delegate = MarkdownTextLayoutManagerDelegate(
+      textStorage: textView.textStorage,
+      markdownUtils: markdownUtils
+    )
+    layoutManagerDelegate = delegate
+    textView.textLayoutManager?.delegate = delegate
+
+    // Fixes the caret position after a blockquote.
+    backedTextInputDelegate = MarkdownBackedTextInputDelegate(
+      textView: textView
+    )
+  }
+
+  // MARK: - Helpers
+
+  private static func reversed(_ value: String) -> String {
+    String(value.reversed())
+  }
+
+  /// Turns off the keyboard's `--` to em dash substitution while the input is
+  /// decorated, restoring whatever it was on detach so a recycled view is not
+  /// left changed.
+  ///
+  /// Smart punctuation rewrites the characters as they are typed, so `--` and
+  /// `---` never reach the parser: a setext heading or thematic break silently
+  /// stays plain text, while pasting the same characters works. Markdown syntax
+  /// is not prose, so the substitution is wrong here even though it is right in
+  /// a renderer.
+  ///
+  /// React Native does not expose this trait (it has `smartInsertDelete`, which
+  /// is unrelated), and `autoCorrect={false}` does not cover it either -- smart
+  /// dashes are independent of autocorrection.
+  private func setSmartDashesEnabled(_ enabled: Bool, on textView: RCTUITextView) {
+    if enabled {
+      textView.smartDashesType = previousSmartDashesType ?? .default
+      previousSmartDashesType = nil
+    } else {
+      previousSmartDashesType = textView.smartDashesType
+      textView.smartDashesType = .no
+    }
+  }
+
+  private func setSmartDashesEnabled(_ enabled: Bool, on textField: RCTUITextField) {
+    if enabled {
+      textField.smartDashesType = previousSmartDashesType ?? .default
+      previousSmartDashesType = nil
+    } else {
+      previousSmartDashesType = textField.smartDashesType
+      textField.smartDashesType = .no
+    }
+  }
+
+  private func setAdaptiveImageGlyphSupport(
+    _ enabled: Bool,
+    on textInputView: UIView
+  ) {
+    guard #available(iOS 18.0, *) else { return }
+    guard
+      textInputView.responds(
+        to: NSSelectorFromString("setSupportsAdaptiveImageGlyph:")
+      )
+    else { return }
+    textInputView.setValue(enabled, forKey: "supportsAdaptiveImageGlyph")
+  }
+}

package/apple/MarkdownFonts.swift

@@ -0,0 +1,21 @@
+import UIKit
+
+/// How a run's font is derived from the one already on the text.
+///
+/// The formatter needs React Native's font resolution -- it understands weight
+/// and style names, family fallbacks and the text-size multiplier, and matching
+/// it by hand would be a second implementation to keep in step. Nothing else in
+/// the formatter needs React at all, though, so naming that one dependency is
+/// what lets the file compile, and so be tested, without the pod graph.
+///
+/// `MarkdownReactFonts` is the production implementation; the test target
+/// substitutes one whose output it can predict.
+///
+/// Not `@objc`: nothing in Objective-C names this type -- the `@objc` entry
+/// point supplies the implementation itself -- and marking it so would restrict
+/// conformance to classes for no reason.
+public protocol MarkdownFontProviding {
+  func update(_ font: UIFont?, weight: String) -> UIFont?
+  func update(_ font: UIFont?, style: String) -> UIFont?
+  func update(_ font: UIFont?, family: String?, size: CGFloat, weight: String?) -> UIFont?
+}

package/apple/MarkdownFormatter+React.swift

@@ -0,0 +1,51 @@
+import React
+import UIKit
+
+/// React Native's font resolution, and the only part of formatting that needs
+/// the React pod graph.
+@objc public final class MarkdownReactFonts: NSObject, MarkdownFontProviding {
+  public func update(_ font: UIFont?, weight: String) -> UIFont? {
+    RCTFont.update(font, withWeight: weight)
+  }
+
+  public func update(_ font: UIFont?, style: String) -> UIFont? {
+    RCTFont.update(font, withStyle: style)
+  }
+
+  public func update(
+    _ font: UIFont?,
+    family: String?,
+    size: CGFloat,
+    weight: String?
+  ) -> UIFont? {
+    RCTFont.update(
+      font,
+      withFamily: family,
+      size: NSNumber(value: Float(size)),
+      weight: weight,
+      style: nil,
+      variant: nil,
+      scaleMultiplier: 0
+    )
+  }
+}
+
+extension MarkdownFormatter {
+  /// The entry point the Objective-C++ callers use, unchanged. It supplies the
+  /// React font resolution so those call sites never have to know a seam exists.
+  @objc(formatAttributedString:defaultTextAttributes:ranges:style:)
+  public static func format(
+    _ attributedString: NSMutableAttributedString,
+    defaultTextAttributes: [NSAttributedString.Key: Any],
+    ranges: [MarcusRange],
+    style: RCTMarcusStyle
+  ) {
+    format(
+      attributedString,
+      defaultTextAttributes: defaultTextAttributes,
+      ranges: ranges,
+      style: style,
+      fonts: MarkdownReactFonts()
+    )
+  }
+}