[Feature]: Support newly added rich text formatting

[j-f1]

Description

Mastodon recently added support for several new HTML elements in incoming posts: https://github.com/mastodon/mastodon/pull/23913. The iOS app should support rendering these elements to the biggest extent possible.

Suggested Solution

I just opened a PR to our text rendering dependency, MetaTextKit, with support for many of the new elements: https://github.com/TwidereProject/MetaTextKit/pull/5

This adds support for: del, pre, code, b, strong, u, i, em

Not supported:

• blockquote requires some sort of custom rendering to inject the vertical bar to the left side (or for the design folks to come up with an acceptable blockquote style that fits better within the constraints of NSAttributedString)
• ul/ol, li require rewriting the plain text content of the post to add in markers (e.g. 1. or •). This doesn’t pose any visual challenges, but there are some thorny issues:
  • indices in the rendered string will no longer be matched with the indices in the meta objects so the formatting code will need to be checked to ensure it handles injected markers gracefully
  • HTML formats list items such that the content of the item stays to the right of the marker when it wraps onto multiple lines. We’d need to manually handle this using NSParagraphStyle (including computing the width of the marker????) or just accept the bullets being rendered more like inline strings.

    HTML style:

    • Mastodon is a free and open-source social networking platform that allows users to create their own independent social networks. It is often referred to as a decentralized alternative to platforms like Twitter.
      1. Mastodon is a free and open-source social networking platform that allows users to create their own independent social networks. It is often referred to as a decentralized alternative to platforms like Twitter.

    
    NSAttributedString style:

    ▪︎ Mastodon is a free and open-source social networking platform that allows users to create their own independent social networks. It is often referred to as a decentralized alternative to platforms like Twitter. a. Mastodon is a free and open-source social networking platform that allows users to create their own independent social networks. It is often referred to as a decentralized alternative to platforms like Twitter.

  • Nested lists? We could probably indent the paragraph

Alternatives

• Switch to a web view for rendering post content. This would make it super easy to support new formatting styles (since we could just write/steal a little CSS to match the web app). Downsides:
  • font rendering (it’s harder to use system fonts to their fullest extent from CSS)
  • performance (I have to assume web views are heavier than UITextView but I don’t know by how much, especially since the web has had a ton of investment put into it. But they definitely have some latency which could result in briefly seeing the wrong post content when scrolling rapidly)
  • layout (sizing a web view to match its content is … complicated)
  • accessibility (maybe? I have no idea)
• Switch to whatever other apps are using to do this.
  • Do any other native iOS Mastodon apps support rich text like this??
  • Do any other apps of other sorts support full rich text/Markdown using a native renderer?

Additional Context

It would be great to have this at least partially supported before the changes are published in a stable release.

[MainasuK]

Hi @j-f1. That's a challenge. :)

The recent v4.1.2 still does not have this feature. I'd like to know where I could try this (an alpha server?) or if some examples in HTML cover all the cases. So the parser could make a unit test for all the edge cases. Please let me know. 😄

And the NSAttributedString (also AttributedString) is some raw material string with an additional meta dictionary. Then you customized the render of the TextKit layout engine.

• TextKit 1: NSLayoutManager
• TextKit 2: NSTextViewportLayoutControllerDelegate

I believe the TextKit could handle all the tags. Just calculate the region and draw the background or border.

WebView

Not sure placing so many WebView in the table view could still performance smooth.

Other apps

I don't know. But there are some repos that may help.

• STTextView: Not dive into it yet and looks great. (it working on iOS ???)
• YYText: A awesome text framework based on CoreText.

P.S.

The target of MetaTextKit is a text view that could highlight the meta content and work with AutoLayout. But I found some tricks to layout the cell more efficacy. The idea is UITableView always gives you the accurate readable content width. So the problem is to calculate the layout height in the given width. I'm not sure whether the AutoLayout is still required because I'm already migrating to the SwiftUI (in Twidere X).

Whatever, I will check it later, and happy WWDC.

[j-f1]

Thanks for the reply and happy WWDC! I don’t know of a good example post to check, but if you sign up for/spin up a server running glitch-soc you should be able to create one

[MainasuK]

https://github.com/TwidereProject/MetaTextKit/tree/2.3.0

The MetaTextKit v2.3.0 finish the inline format supports now. The UI is based on the glitch-soc web app. I test the framework on iOS 16 with some inputs but not fully test. So please update to this version only after the Mastodon fully support the rich text and test it with more inputs and old iOS version.

For the implementation detail. Please check this PR

[j-f1]

Thank you for finishing that up @MainasuK! Unfortunately I won’t be able to open a PR but hopefully one of the other maintainers can give it a shot.