SwiftUI: Attributed string from HTML that wraps

Question

I have two strings that can contain HTML strings.

• HTML string can only contain simple text formatting like bold, italic etc.
• I need to combine these in an attributed string and show in a list.
• Every list item may have a leading or a trailing item or both at the same time.

I am using a UILabel wrapper to have a wrapping text view. I am using this wrapper to show this attributed string. This wrapper only works correctly if I set preferredMaxLayoutWidth value. So I need to give a width to wrapper. when the text view is the only item on horizontal axis it is working fine because I am giving it a constant width:

In case the list with attributed strings, the text view randomly having extra padding at the top and bottom:

This is how I am generating attributed string from HTML string:

func htmlToAttributedString(
    fontName: String = AppFonts.hebooRegular.rawValue,
    fontSize: CGFloat = 12.0,
    color: UIColor? = nil,
    lineHeightMultiple: CGFloat = 1
) -> NSAttributedString? {

    guard let data = data(using: .unicode, allowLossyConversion: true) else { return nil }

    do {
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineHeightMultiple = lineHeightMultiple
        paragraphStyle.alignment = .left
        paragraphStyle.lineBreakMode = .byWordWrapping
        paragraphStyle.lineSpacing = 0

        let attributedString = try NSMutableAttributedString(
            data: data,
            options: [
                .documentType: NSAttributedString.DocumentType.html,
                .characterEncoding: String.Encoding.utf8.rawValue
            ],
            documentAttributes: nil
        )
        attributedString.addAttribute(
            NSAttributedString.Key.paragraphStyle,
            value: paragraphStyle,
            range: NSMakeRange(0, attributedString.length)
        )
        
        if let font = UIFont(name: fontName, size: fontSize) {
            attributedString.addAttribute(
                NSAttributedString.Key.font,
                value: font,
                range: NSMakeRange(0, attributedString.length)
            )
        }
        
        if let color {
            attributedString.addAttribute(
                NSAttributedString.Key.foregroundColor,
                value: color,
                range: NSMakeRange(0, attributedString.length)
            )
        }
        
        return attributedString

    } catch {
        return nil
    }
}

And this is my UILabel wrapper:

public struct AttributedLabel: UIViewRepresentable {
    
    public func makeUIView(context: Context) -> UIViewType {
        let label = UIViewType()
        label.numberOfLines = 0
        label.lineBreakMode = .byWordWrapping
        
        let result = items.map { item in
            let result = item.text.htmlToAttributedString(
                fontName: item.fontName,
                fontSize: item.fontSize,
                color: item.color,
                lineHeightMultiple: lineHeightMultiple
            )
            guard let result else {
                return NSAttributedString(string: "")
            }
            return result
        }.reduce(NSMutableAttributedString(string: "")) { result, text in
            if result.length > 0 {
                result.append(NSAttributedString(string: " "))
            }
            result.append(text)
            return result
        }
        
        let height = result.boundingRect(
            with: .init(width: width, height: .infinity),
            options: [
                .usesFontLeading
            ],
            context: nil
        )
        debugPrint("Calculated height: \(height)")
        onHeightCalculated?(height.height)
        
        label.attributedText = result
        label.preferredMaxLayoutWidth = width
        label.textAlignment = .left
        return label
    }
    
    public func updateUIView(_ uiView: UIViewType, context: Context) {
        uiView.sizeToFit()
    }
    
    public typealias UIViewType = UILabel
    public let items: [AttributedItem]
    public let width: CGFloat
    public let lineHeightMultiple: CGFloat
    public let onHeightCalculated: ((CGFloat) -> Void)?
    
    public struct AttributedItem {
        public let color: UIColor?
        public var fontName: String
        public var fontSize: CGFloat
        public var text: String
        
        public init(
            fontName: String,
            fontSize: CGFloat,
            text: String,
            color: UIColor? = nil
        ) {
            self.fontName = fontName
            self.fontSize = fontSize
            self.text = text
            self.color = color
        }
    }
    
    public init(
        items: [AttributedItem],
        width: CGFloat,
        lineHeightMultiple: CGFloat = 1,
        onHeightCalculated: ((CGFloat) -> Void)? = nil
    ) {
        self.items = items
        self.width = width
        self.lineHeightMultiple = lineHeightMultiple
        self.onHeightCalculated = onHeightCalculated
    }
}

I am using boundingRect function to calculate the height and passing it to the parent view to set the text view height correctly. Other vise text view getting random height values between 300 to 1000.

This approach only calculates single line height precisely. For multi line texts, text goes out of the calculated bound:

And this is my item component:

private func ItemView(_ item: AppNotification) -> some View {
    HStack(alignment: .top, spacing: 10) {
        Left(item)
        SingleAxisGeometryReader(
            axis: .horizontal,
            alignment: .topLeading
        ) { width in
            AttributedLabel(
                items: [
                    .init(
                        fontName: AppFonts.hebooRegular.rawValue,
                        fontSize: 16,
                        text: item.data?.message ?? "",
                        color: UIColor(hexString: "#222222")
                    ),
                    .init(
                        fontName: AppFonts.hebooRegular.rawValue,
                        fontSize: 16,
                        text: item.timeAgo ?? "",
                        color: UIColor(hexString: "#727783")
                    )
                ],
                width: width,
                lineHeightMultiple: 0.8,
                onHeightCalculated: { textHeight = $0 }
            )
            .frame(alignment: .topLeading)
            .onTapGesture {
                if let deepLink = item.data?.deepLink {
                    viewStore.send(.openDeepLink(deepLink))
                }
            }
        }
        .frame(maxHeight: textHeight)
        .background(Color.yellow)
        Right(item)
    }
    .padding(.bottom, 16)
}

Can you see what is the problem? Or do you have an other approach?