Custom images in UITextField like Venmo app - ios

Question

I am wondering how Venmo places custom emoticons into their textfield.
When you copy these images and paste them elsewhere, they show up as ":sunset:", ":concert:", etc.
So my guess is the textField delegate checks for any text that matches that pattern (i.e. ":concert:") and replaces it with a tiny image.
So I am wondering how you can place your own little UIImageView within a textField alongside other text.
Edit: This could also be a UITextView now that I think about it

Answer 1

The text input in the screenshot is almost definitely a custom subclass of UITextView, and here I'll present one way to achieve the desired result with just that.
Here's a short demonstration, copying text containing a custom image from one UITextView to another:
First we'll need to subclass NSTextAttachment to have a textual representation of the image at hand, which we'll later use when copying.
class TextAttachment: NSTextAttachment {
var representation: String?
}
Now when we create an attributed string containing the image, we'll add the desired textual representation of the image to the attachment:
let attachment = TextAttachment()
attachment.image = UIImage(named: "1f197")
attachment.representation = ":anything-here:"
Next, we'll subclass UITextView and override the copy(_:) method declared in UIResponderStandardEditActions which UITextView implements.
class TextView: UITextView {
override func copy(_ sender: Any?) {
let selectedString = self.attributedText.attributedSubstring(from: self.selectedRange)
let enumeratableRange = NSRange(location: 0, length: selectedString.length)
let result = NSMutableAttributedString(attributedString: selectedString)
selectedString.enumerateAttribute(NSAttachmentAttributeName, in: enumeratableRange, options: []) { (value, range, _) in
if let attachment = value as? TextAttachment, let representation = attachment.representation {
result.replaceCharacters(in: range, with: representation)
}
}
UIPasteboard.general.string = result.string
}
}
We could also override a few other methods, such as cut(_:) and paste(_:), but that's outside the scope of the question.
Finally, let's add some attributed text to an instance of the custom text view to see how it performs in action:
var textView: TextView // Create an instance however.
let mutableString = NSMutableAttributedString()
mutableString.append(NSAttributedString(string: "Text with "))
mutableString.append(NSAttributedString(attachment: attachment))
mutableString.append(NSAttributedString(string: " text attachment."))
self.textView.attributedText = mutableString
Obviously it would be more intuitive to convert text/emoji/whatever into attachments on the fly while the user is typing.