HTML img tag with remote url doesn't render in AttributedLabel

[tarun-personatech]

Environment

Atributika Version: 5.0.5
Xcode Version: Version 15.3 (15E204a)
Swift Version: Swift 5
iOS Version: iOS 17.5

Sample code Git Repo

I am trying to render an image with remote url in AttributedLabel using NSTextAttachment. But doesn't render the first time. As soon as you tap on the label, it renders. If you do the same thing with a UILabel it works the first time.

I am using the this file for loading the remote image, setting it to the NSTextAttachment, and then layout the textContainer. Here the code

var tweets = [
  """
  <img url="https://fastly.picsum.photos/id/1037/20/20.jpg?hmac=H1FupXbPg3p-Qx6RtuTkKa0FDn9avljHu6vqOGlhgXY"/> This image is loaded from remote URL
  Check this <a href=\"https://github.com/psharanda/Atributika\">link</a>
  """,
]

extension String {
  func styleAsTweet(labelView: UIView) -> NSAttributedString {

    let baseLinkAttrs = Attrs().foregroundColor(.red)

    let a = TagTuner {
      Attrs(baseLinkAttrs).akaLink($0.tag.attributes["href"] ?? "")
    }

    let img = TagTuner(
      style: {
        if let imageId = $0.tag.attributes["id"] {
          let textAttachment = NSTextAttachment()
          textAttachment.image = UIImage(named: imageId)
          return Attrs(baseLinkAttrs).attachment(textAttachment)
        } else if let url = URL(string: $0.tag.attributes["url"]) {
          let attachment = RemoteImageTextAttachment(
            imageURL: url,
            label: labelView,
            fitInside: CGRect(x: 0, y: -4, width: 20, height: 20)
          )
          return Attrs(baseLinkAttrs).attachment(attachment)
        } else {
          return Attrs(baseLinkAttrs)
        }
      },
      transform: { _, part in
        switch part {
          case .opening:
            "\u{FFFC}"
          case .closing:
            nil
          case .content:
            nil
        }
      }
    )

    return self
      .style(tags: ["img": img])
      .attributedString
  }
}

I am using the TweetCell from the example.

In the case of AttributedLabel the image loads but the layout doesn't seem to refresh. I tried setting the attributedText again after the image is downloaded from RemoteImageTextAttachment (Casting the UIView to TweetCell), tried setNeedsLayout, and even tried setNeedsDisplayText by exposing it but nothing seems to work. But if you use a plain UILabel instead of AttributedLabel it works just fine.

Is there a way to refresh the AttributedLabel layout?

In the sample code change var cellToUse: CellType to switch between AttributedLabel and UILabel

[tarun-personatech]

Update:

It seems, that calling setNeedsDisplay on the underlying backend view works. But for that BaseAttributedTextView needs to expose its _backend.view.

Sample code updated.

[psharanda]

I believe setting label.attributedText = createAttributedStringUsingAtributika(image) (with image being optional) should reset everything. Initially, you create NSAttributedString with a placeholder NSTextAttachment and start downloading the image. Once the image is downloaded, you update label.attributedText with a newly created NSAttributedString that uses NSTextAttachment configured for the downloaded image.

Subclassing NSTextAttachment and invalidating ranges or calling setNeedsDisplay seems like a gray area to me and requires thorough testing across different iOS versions. However, it might offer better performance compared to resetting the entire string.

[tarun-personatech]

Thanks @psharanda , this solution works. But it gets tricky when loading a remote HTML text with multiple images or in an environment where you don't have much control over the URLs. I haven't thought much about it but I think it shouldn't be too hard to create a system around it. Thanks again.