OCHtmlContentViewer

The OCHtmlContentViewer is a composable function that creates a dynamic UI component in your Android application using Jetpack Compose.

Parameters:

• htmlData: A string representing HTML content to be displayed in a WebView.
• shouldOpenExternalBrowser: A Boolean value determining if URL clicks should open in an external browser. The default is true.
• modifier: A Modifier to be applied to the layout and behavior of the WebView itself.
• onImageClicked: An optional callback function that is triggered when an image within the WebView is clicked. The clicked image's URL is returned.

Usage

 @Composable
 @ShowkaseComposable("HTML Content Viewer", "HTML Content Viewer")
 fun OCHtmlContentViewerPreview() {
    val data = ""

    OCTheme {
        OCHtmlContentViewer(htmlData = data, shouldOpenExternalBrowser = true) { imageUrl -> 
            // handle image click here. 'imageUrl' is the URL of the clicked image
        }
    }
}

Details

This function initializes a WebView and applies custom settings to enhance the user experience. It also applies custom CSS styling to various HTML elements contained within the htmlData string.

Style customization includes:

• Removing the margin and padding from the body, and specifying that images always fit the width of the WebView.
• Styling <strong> and <p> tags to ensure uniformity in text color, font size, font weight, and more.

If the shouldOpenExternalBrowser flag is set to false, all anchor tags in htmlData are modified to prevent them from opening in an external browser.

The function then wraps the modified htmlData in a full HTML structure and loads it into the WebView. A JavaScript interface is added to intercept image click events within the WebView and trigger the onImageClicked callback function, passing the URL of the clicked image.