A promising gist: https://gist.github.com/vincent1086/1ca4df897efcf9bc0a4bda771af5636a

Another resource: https://github.com/SufficientlySecure/html-textview

By checking the current talk page UI, it looks like the wikitext toolbar has been limited and only provided some basic formatting methods:

In this case, some formats are not supported in the reply section, for example, the Headers. We will need to adjust the number of supported wikitext formats from the wikitext toolbar.

Hi @scblr, not sure if this needs the design signoff...but you can download the APK from the ticket description to see the changes.

Partial of the issues are fixed:

Indents should appear

Difficult to fix since the indents will be converted to a <dl> and <dd> HTML tags and somehow they are stay in the same line.

The images are not rendered correctly. Spacing and alignment are not working properly. Resized images do not appear. Image tables do not appear.

Limited image display is implemented. A SVG files is not supported and if the image HTML tag does not have specific width/height, the size of the image will become inaccurate.

No Musical Notation appears. For example: <score>\relative c' { fis d fis a d f e d c cis d e a g f ees }</score>

Done by rendering the image instead of the HTML tag.

Complicated formulae are not displayed correctly. For example: <math display=block>\sum_{n=0}^\infty \frac{x^n}{n!}</math>
Mathematical formulae do not appear properly.

The API response provides the HTML with CSS styles and also the SVG file, but since the app does not support the SVG, this issue will remain unsolved.

Egyptian hieroglyphs do not appear. For example: <hiero>P2</hiero>

Done by rendering the image from the API response, but the image size is inaccurate.

Syntax highlighting is not formatted properly with correct colors.

Not done yet. The highlight syntax will cause the app to crash.

Text should align appropriately and now it aligns only to the left.

Done.

Headers should be formatted properly.

The headers are not supported in the desktop version, we can simply disable the option from the wikitext keyboard.

Some screenshots:

To discuss:
The new implementation will slightly slow down the loading speed when the thread is long (e.g. Talk: Barack_Obama), not sure should we really need to apply the changes to the production. cc @JTannerWMF

Thanks @cooltey – I think @ABorbaWMF should primarily take a look at since he created the initial list. I’m moving it to his column. Please ping me if you need specific design input.

Respectively, I moved it to the Code review column – please move it to QA signoff / @ABorbaWMF once that is done.

@JTannerWMF

We have included the Wikitext keyboard for the Patroller Tasks, and it is originally for the articles edit page because the article page is showing in a WebView.

Now the "Compose response" input field in the "new topic" or "replay" screens also has the Wikitext keyboard, but the talk thread screen is still showing the content in TextView.

Since we have implemented the custom parsing logic for the HTML contents, as long as we add more logic to the custom parser, the overall loading speed will keep decreasing.

I agree we should bring more HTML tag supports to the TextView but also should consider only limiting it to the "basic" HTML tags.

The remaining improvements will be included in T348187, and this ticket will focus on the list order, number order and the <code> tag.

Testing on 2.7.50466-r-2024-01-09

Numbered lists including numbered sub-items seems to work. The code tag also seems to work. While testing unordered list items, I noticed that sub-items do not seem to work. Using the wikitext below, I am seeing items only on the first indentation. I'm not sure if this ticket should be moved to blocked/waiting or this issue should be tracked in a separate ticket. Moving to PM signoff for now.

Markup - Rendered text

But it renders as below

thanks @ABorbaWMF
For unordered lists (and other indentation-related issues) let's use T348187 (currently in backlog), and let this task go through.