Page MenuHomePhabricator

Display Z89/HTML fragments as rich content on Wikifunctions.org, after sanitisation
Closed, ResolvedPublic

Description

Description

We show Z89/HTML fragments in raw code form to users on Wikifunctions.org. This is inimical to usage. Now that we have a sanitisation API, we should re-design how the component works on the front-end so that users can see the rich content, but there are use cases that also want the raw HTML, so we should provide for a mechanism to show that too / instead.

Desired behavior/Acceptance criteria

  • As a user, I should be able to see the rich text form when Z89/HTML fragment components are available, on evaluator results, on test cases, and elsewhere.
  • As a sysadmin, I should be confident that all rendered rich text fragments have been consistently sanitised to avoid XSS / etc. concerns.
  • As a user, I should be able to inspect the raw HTML underlying the fragment, so e.g. I can check the output of a Test case is exactly correct.

Devices and Design (URLs or screenshots)

  • Desktop: ...
  • Small screens/mobile: ...

Completion checklist

  • Functionality:
    • The solution meets the expected behavior/acceptance criteria described above
    • All the child tasks are closed
    • The issue has been peer reviewed
    • The issue has been merged
  • Engineering:
    • There are existing and passing unit/integration tests effectively testing its success and its failure
    • All new classes/methods are covered by unit tests
  • Design:
    • Design review of live version in accordance to design standards
  • Documentation:
    • All new functions/methods are annotated
  • Accessibility:
    • New functionality is compared against the Accessibility guide for developers
    • Accessibility concerns are either address or, if the work is sufficiently large, a new Phabricator ticket is created and linked to this ticket
    • All user facing strings are internationalized

Event Timeline

Here are some considerations to take into account when working on this:
• CSS isolation and maintenance – Either we use a minimal generic styling (safe but not representative), or we try to approximate wiki styling. The latter is tricky: wiki CSS varies by skin, wiki, and extensions, and changes over time, so keeping a preview in sync would be a maintenance burden.
Apart from this we get also the risk of previews that are visually misleading.
• User experience/design considerations – Deciding how the toggle works (raw vs. rendered), how prominent it is, and what expectations users should have about its accuracy needs design input.

So9q renamed this task from Let Z89/HTML fragments to be displayed as rich content on Wikifunctions.org, after sanitisation to Display Z89/HTML fragments as rich content on Wikifunctions.org, after sanitisation.Nov 19 2025, 5:31 PM
So9q awarded a token.

I did some sketches on this:

Screenshot 2025-12-12 at 15.51.43.png (1,284×1,018 px, 112 KB)
Screenshot 2025-12-12 at 15.51.39.png (1,272×1,074 px, 92 KB)
Wikifunctions: Show sourceWikifunctions: Show rendered
Screenshot 2025-12-12 at 15.40.26.png (1,416×1,010 px, 144 KB)
Screenshot 2025-12-12 at 15.40.46.png (1,418×1,010 px, 120 KB)
Visual Editor: Show sourceVisual Editor: Show rendered

I did some sketches on this:

Screenshot 2025-12-12 at 15.51.43.png (1,284×1,018 px, 112 KB)
Screenshot 2025-12-12 at 15.51.39.png (1,272×1,074 px, 92 KB)
Wikifunctions: Show sourceWikifunctions: Show rendered
Screenshot 2025-12-12 at 15.40.26.png (1,416×1,010 px, 144 KB)
Screenshot 2025-12-12 at 15.40.46.png (1,418×1,010 px, 120 KB)
Visual Editor: Show sourceVisual Editor: Show rendered

Looks great! This is now ready to be done whenever someone has the time.

Change #1217769 had a related patch set uploaded (by Jforrester; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] wip on html render toggle

https://gerrit.wikimedia.org/r/1217769

DSmit-WMF changed the task status from Open to In Progress.Jan 13 2026, 4:03 PM
DSmit-WMF claimed this task.

Change #1217769 had a related patch set uploaded (by Jforrester; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] Add HTML fragment render toggle with sanitization

https://gerrit.wikimedia.org/r/1217769