Detecting TapGesture on an ImageAttachment to execute associated action

[martindufort]

I want to insert an ImageAttachment within the RichTextView that would respond to tap gestures.
So when the user taps the ImageAttachment, I need to be reported which ImageAttachment was tapped so I can take the appropriate action.

What would be the bets way to accomplish this?

[S1D1T1]

As i mentioned here #178 i can intercept a tap gesture with an overlay. but this may be a dead end- without some ad hoc geometry there’s no way to know what was clicked

[martindufort]

I asked perplexity.ai to give me some hints... Here's the result.

1. Add a Tap Gesture Recognizer

let tapRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
textView.addGestureRecognizer(tapRecognizer)

2. Handle the Tap

@objc func handleTap(_ recognizer: UITapGestureRecognizer) {
    let textView = recognizer.view as! UITextView
    let layoutManager = textView.layoutManager
    var location = recognizer.location(in: textView)
    location.x -= textView.textContainerInset.left
    location.y -= textView.textContainerInset.top
    
    let characterIndex = layoutManager.characterIndex(for: location, in: textView.textContainer, fractionOfDistanceBetweenInsertionPoints: nil)
    if characterIndex < textView.textStorage.length {
        // Check if the character at this index has an attachment
        let attributeValue = textView.attributedText.attribute(.attachment, at: characterIndex, effectiveRange: nil) as? NSTextAttachment
        if let attachment = attributeValue {
            // Handle the image change or any other attribute change
            changeImageForAttachment(attachment)
        }
    }
}

Now wondering if this AI hallucinations or not...

[caiomelloni]

@martindufort, have you got a solution? im facing the same issue right now

[danielsaidi]

There are sooo many things we should be able to do with image attachments, like resizing. But it's not trivial. Even the Notes app doesn't have good image handling.

[caiomelloni]

I have got a solution to detect tap gestures on images in a RichTextEditor. When i add an image attachment, i associate a "link" attribute to it. Then, inside the package, i changed the "RichTextCoordinator" to run a function passed by the "context". This way, i can pass a function from my app that will get the link that was tapped and run a function for it:

In this example, my app plays a sound when the image is tapped

This is how the action is detected

This is how the action is defined inside my UI

How the image attachment is added in my UI

This is how the action is stored

---

what do you think?, is there a better way to do it?

[danielsaidi]

That's amazing, thank you for sharing!