nuplay / richtext

Easily show RichText(html) in SwiftUI

💬 Comment

👋 Hello! I am an iOS developer
🛠️ I use Swift (SwiftUI) to develop iOS apps
🎨 I also like to design

💡 MyApps

ChatGenie	PayMap	Trendy	Fonty	MusicSpace
FontSnap	ChatMe	Real Probability	Salary	DropUI(Swift Student Challenge)

📚 Tech Stack

🛠 Tools

✏️ Stats

🚀 OpenSource

richtext's Issues

When my html string contains an image, RichText renders at an incorrect height because the image hasn't loaded yet

Add privacy manifest per app store guidelines starting May 2024

https://developer.apple.com/documentation/bundleresources/privacy_manifest_files/describing_use_of_required_reason_api

Custom CSS

Hi, very helpful lib that you have made!
Is it possible to add custom CSS?

Font Size Dynamically Change

How do I add a customizable font size?

Question about using custom fonts

I'm trying to get a custom font rendering in my webview.
I feel like I'm doing all the right steps but I'm unable to see a font change.
I tried using the FontType.custom with a name and a UIFont. The UIFont was definitely not nil and was the correct font I wanted passed in. Should using this modifier be the only thing I need? I also tried using custom CSS to change the font. Nothing worked though.
Does someone have an example using a custom font just so I could compare.
For more project context I added this library as a local package because of needing a few small changes to styling. The custom fonts are added to the main target of the project. Do they need to be added as resources to local package?

Thanks for the library - it's very nice

FontType doesn't support custom fonts

When I try to set a custom font that I imported into my project it doesn't work

.fontType(.custom(UIFont(name: "NunitoSans-Regular", size: 14.0)))

LinkOpenType - custom type

Could be my inexperience, but I was hoping to use this new feature in the following way:

1. I receive HTML content via an api
2. The HTML contains links that I would like to open within my app, using it to display the content in my UI (not in any browser)
3. Some of the links from this api come in weird formats like "<a href="/gary-busey/4005-1780/" data-ref-id="4005-1780">Gary Busey"
4. I was planning to process the link using Regex to rewrite it and load the content in a new view in my app
5. I tried some simple test code like:

.linkOpenType(.custom({ url in
      print(url)
 }))

but I'm getting the following messages in the Output window after clinking the link:

0x16e1300c0 - [PID=77634] WebProcessProxy::checkURLReceivedFromWebProcess: Received an unexpected URL from the web process
0x1060a9018 - [pageProxyID=14, webPageID=15, PID=77634] WebPageProxy::Ignoring request to load this main resource because it is outside the sandbox

If I click a traditional-looking link like:
<a href="https://api.site.com/gary-busey/4005-15789/\" data-ref-id="4005-15789">Gary Busey
My code will print the URL as expected.

Am I totally off base, trying to use the new feature in this way? If so, what's the intended use of this feature?

Thanks
Maury

Does not obey frame

Frame is set to 48 tall.

Message body:
<p>This is a <strong>fancy</strong> <strong><span style=\"color: rgb(226, 80, 65);\">HTML</span></strong> <span style=\"background-color: rgb(97, 189, 109);\">message</span> with some styling.</p><p>And a <a href=\"http://www.google.com\" target=\"_blank\">link to google</a>.</p>

Wrong tag versions for SPM

Right now I cannot add your package using SPM by specifying a version. The tagged versions should be something like 1.6.0 and not 1.6.

Thanks!

<Figure> Markup Bug

While it renders

. it is offset from the rest of the text.

Here is the example HTML text:

<figure data-align=\"center\" data-size=\"large\" data-img-src=\"https://www.gamespot.com/a/uploads/original/1596/15969599/4052233-steamskins2.png\" data-ref-id=\"1300-4052233\" data-ratio=\"0.33333333333333\" data-width=\"900\" data-embed-type=\"image\" style=\"width: 900px\"><a class=\"fluid-height\" style=\"padding-bottom:33.3%\" href=\"https://www.gamespot.com/a/uploads/original/1596/15969599/4052233-steamskins2.png\" data-ref-id=\"1300-4052233\"><img alt=\"The days of easily modding your Steam to look the way you want are, sadly, over.\" src=\"https://www.gamespot.com/a/uploads/original/1596/15969599/4052233-steamskins2.png\" srcset=\"https://www.gamespot.com/a/uploads/original/1596/15969599/4052233-steamskins2.png 900w, https://www.gamespot.com/a/uploads/scale_medium/1596/15969599/4052233-steamskins2.png 480w\" sizes=\"(max-width: 900px) 100vw, 900px\" data-width=\"900\"></a><figcaption>The days of easily modding your Steam to look the way you want are, sadly, over.</figcaption></figure>

Here is what is rendered in SwiftUI

Can you advise if there is anything I can do to resolve this or if it is a known bug?

ability to remove background color

that html sample will render white bg and no options to ignore it. doesn't look well on dark mode

<p style=\"text-align: justify;background: white;\"><strong><span style=\"font-size:17px;\">&nbsp;</span></strong></p>

Horizontal Scroll

Hi, im using the pod, but i have problems when i want to use horizontal scroll and overflows not work when create the css style.

i already support this?

macOS support

seems like a very capable library, but can unfortunately not be used for a macOS SwiftUI application due to the lack of UIKit availability.

Text does not show in dark mode

RichText works fine in light mode - but I don't see anything in dark mode. Just a blank black screen.

RichText(html: myHtml)
    .placeholder {
        Text("Loading myHtml")
    }

Normal text doesn't show up

Hi, I have the following text:

USDC is a fully collateralized US dollar stablecoin. USDC is the bridge between dollars and trading on cryptocurrency exchanges. The technology behind CENTRE makes it possible to exchange value between people, businesses and financial institutions just like email between mail services and texts between SMS providers. We believe by removing artificial economic borders, we can create a more inclusive global economy.

and it's not showing up:

Using linkColor change the links color to the default WebView blue <a> color

If I don't set the .linkColor, the link color uses the RichText default light blue color. But when I try to set my custom color, it does not change to the desired color and fallbacks to the dark blue link color.

RichText(html: htmlString)
        .linkColor(light: Color.white, dark: Color.white)

I am not sure if is related but I am testing this on the latest Xcode 14 beta 5.

Rename the `.transition` modifier to `.animation`

You should rename the .transition modifier to .animation and introduce a new .transition modifier that is responsible for transitioning from the placeholder to the WebView.

Tailwind CSS Support

CSS click events

Hi does this support CSS click events? Like can I use a click event to reveal some text? Thanks!

I tried one but it didnt work when I tapped on it.

runtime failure: force unwrap

This happen on those circumstances where the view will be unallocated before the content was uploaded, there is a crash due to force unwrap of variable height.
Since we don't want to risk an accident, can i suggest to don't force unwrap an optional only to find that it could be void.

WebView content dynamic height evaluation not working when document changes height

Considering this situation:

struct MyHtmlView: View {
    let longHTML: String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est est, mattis vel ante sit amet, porttitor interdum dui. Nunc cursus lobortis ex, ut faucibus felis malesuada id. Vivamus in risus nec dolor ullamcorper tincidunt in at velit. Vestibulum nec mollis ipsum. Phasellus volutpat augue odio, ultricies accumsan magna eleifend tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque efficitur sem non dui ultricies sollicitudin eu eu sapien."
    let shortHTML: String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est est, mattis vel ante sit amet, porttitor interdum dui. Nunc cursus lobortis ex, ut faucibus felis malesuada id."
    
    @State private var isExpanded: Bool = false
    
    var body: some View {
        VStack {
            RichText(html: isExpanded ? longHTML : shortHTML)
                .lineHeight(120)
                .colorScheme(.auto)
                .transition(.easeOut)
                .background(Color.red)
            
            Button {
                isExpanded.toggle()
            } label: {
                Text("Show more/less")
            }
        }
    }
}

When the HTML changes from a long description to a short one the RichText frame's height remains equal to the bigger one calculated from the long description's height leaving a blank space underneath the RichText view

Feature: Additional type to LinkOpenType

Need:

• Handle clicked url without opening Safari

Possible Solution:

• Can be added a new type as custom and a parameter as closure which gets URL in order to execute when url selected.

<DETAILS>...</DETAILS>

I really like this package but I've run into an issue. I've got this code:

import SwiftUI
import RichText
struct MainView : View {
var body: some View { ScrollView { RichText(html: Documents.Welcome) }
}
and when it runs I get a bunch of warnings: [ViewportSizing] maximumViewportInset cannot be larger than frame (similarly for minimumViewportInset). Documents.Welcome is quite large but the warnings didn't seem to be a problem.

But today I added a "details" section:

CLICK HERE

There's a lot of text here.

and nothing renders after the details link. The same document loads in web browsers (Chrome, Safari, etc) perfectly ok.

Handling combine/state changes?

Hello and thank you for sharing this! It appears to be working really well for the initial render, but from your example in the readme, changes to the @State var html won't be reflected by the webview. It seems like this function updateUIView would need to get implemented yea? I took a quick pass at this, so lmk if this seems reasonable and ill make a PR:

public func updateUIView(_ uiView: WKWebView, context: Context) {
        let htmlStart = """
            <HTML>
            <head>
                <meta name='viewport' content='width=device-width, shrink-to-fit=YES, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
            </head>
            """
        let htmlEnd = "</BODY></HTML>"
        let htmlString = "\(htmlStart)\(css(colorScheme: self.colorScheme))\(html)\(htmlEnd)"
        uiView.loadHTMLString(htmlString, baseURL:  nil)
    }

I guess we might want to factor that bit out of makeUIView and updateUIView

Font doesn't work

Hi, when I add new font using fontType modifier nothing changes.