ZhgChgLi/ZMarkupParser

Digging into table rendering

07akioni opened this issue · 2 comments

I'm currently exploring markdown rendering (to implement a ChatGPT like app) on iOS and find it's hard to implement a basic table in text view.

However I found it's implemented in an App called 豆包(a ByteDance app, the company who made TikTok) in China mainland & CiCi outside China mainland.

豆包:https://www.doubao.com/
Cici:https://www.ciciai.com/

豆包 table
IMG_0504 IMG_0503

As you mentioned in your article https://medium.com/zrealm-ios-dev/%E6%89%8B%E5%B7%A5%E6%89%93%E9%80%A0-html-%E8%A7%A3%E6%9E%90%E5%99%A8%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B-2724f02f6e7

實測原生的 NSAttributedString.DocumentType.html 是用 Private macOS API NSTextBlock 來完成顯示,因此能完整顯示 HTML 表格樣式及內容。
有點作弊!我們無法用 Private API

Would you like to tell about your thought about how they achieved it?

I've also explored ChatGPT's app. They haven't implement table rendering in their iOS App.

I got a very hack way to make a table with rich text inside:

However the problem is round corner can't be achieved by border radius CSS property.

CleanShot 2024-03-26 at 18 39 45@2x

CleanShot 2024-03-26 at 18 39 02@2x

ZMarkupParser serves as a converter from HTML strings to NSAttributedString. If you can use the styles set by NSAttributedString.Key(attributes), there is a chance to implement them in ZMarkupParser, and vice versa. Unfortunately, I couldn't find a perfect way to adapt HTML table styles in ZMarkupParser after searching through the documentation.

Using NSAttributedString.DocumentType.HTML renders HTML using the original NSAttributedString approach. I speculate that it is rendered through WebKit and uses NSTextBlock, which is not available in the iOS Public API. Therefore, I'm unable to utilize it.

Currently, the only solution is to fallback to using NSAttributedString.DocumentType.HTML or create a new project to explore TextKit-related content (more low-level) or simply use ASCII tables as a substitute for tables.

ZMarkupParser 只作為一個 HTML String to NSAttributedString 的轉換器,如果能使用NSAttributedString+ NSAttributedString.Key(attributes) 設定的樣式,都有機會在 ZMarkupParser 實現,反之亦然;很遺憾的我翻片了文件找不到能完美適配 HTML Table 樣式的方式。

使用 NSAttributedString.DocumentType.HTML 就是原始的 NSAttributedString 渲染 HTML 方式,我猜測是透過 WebKit 渲染,他所使用的物件是 NSTextBlock,這不存在在 iOS Public API 中,因此我無法調用實踐。

目前的解決辦法只有回頭使用 NSAttributedString.DocumentType.HTML 或是新建立另一個專案研究 TextKit 相關內容(更底層) 或是簡單使用 ASCII-Table 替代表格。

謝謝.