Phonos does not display correctly in Visual Editor
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	TheresNoTime
	Sep 6 2022, 1:32 PM

Description

Steps to replicate the issue (include links if applicable):

Edit a page with a phonos tag with VE on Beta (e.g. https://en.wikipedia.beta.wmflabs.org/w/index.php?title=User:TheresNoTime/sandbox&veaction=edit)

What happens?:
The HTML is displayed

What should have happened instead?:
Showing the rendered output instead of raw markup.

Software version (skip for WMF-hosted wikis like Wikipedia):

Deployed to Beta

Other information (browser name/version, screenshots, etc.):

Acceptance criteria

Since Parsoid doesn't support HTML parser functions (T279094), we should change Phonos to use a tag instead, ala <phonos ipa="[ipa]">[label]</phonos>. This will make it appear correctly in VisualEditor.
For now, we won't build a custom form for Phonos (i.e. when editing the tag in VisualEditor), but we may explore this in a separate ticket

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Use tag instead of a parser function	mediawiki/extensions/Phonos	master	+20 -39

Customize query in gerrit

Related Objects

Mentioned In: T366194: Migrate Community Wishlist to CommunityRequests extension
T315030: Allow Phonos parser tag to accept wikitext in the label
rEPHN26cb40e430bf: Use tag instead of a parser function
T284512: [EPIC] Empower others to develop new, and extend existing, editing experiences
Mentioned Here: T178588: Handle parser functions returning raw html
T268144: Add setFunctionHook equivalent support to Parsoid Extension API
T279094: Support for parser functions using "isHTML"?

Event Timeline

TheresNoTime created this task.Sep 6 2022, 1:32 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 6 2022, 1:32 PM

Any ideas, is this "just" a VisualEditor style issue?

TheresNoTime added a subscriber: VisualEditor.Sep 6 2022, 1:37 PM

MusikAnimal moved this task from Backlog to 🌟Top Priority on the MediaWiki-extensions-Phonos board.Sep 6 2022, 2:20 PM

MusikAnimal added a project: Community-Tech (CommTech-Sprint-32).Sep 6 2022, 2:29 PM

MusikAnimal claimed this task.Sep 6 2022, 9:17 PM

MusikAnimal moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-32) board.

Parsoid is outputting escaped HTML, not sure why: https://en.wikipedia.beta.wmflabs.org/api/rest_v1/page/html/User%3ATheresNoTime%2Fsandbox/559031?redirect=false&stash=true

Esanders added a project: Parsoid.Sep 6 2022, 10:38 PM

The sanitizer in Parsoid seems to be escaping the <a> tag coming from the parser function.

[subbu@earth:~/work/wmf/parsoid] echo "{{#phonos: ipa=həˈləʊ | text=Hello | lang=en}}" | php bin/parse.php --apiURL https://en.wikipedia.beta.wmflabs.org/w/api.php --trace sanitizer
...
0-[SANITY]     | {"type":"TagTk","name":"a","attribs":[{"k":"role","v":"button","srcOffsets":[623,627,629,635],"vsrc":"button"},{"k":"tabindex","v":"0","srcOffsets":[637,645,647,648],"vsrc":"0"},{"k":"data-x-rel","v":"nofollow","srcOffsets":[650,653,655,663],"vsrc":"nofollow"},{"k":"class","v":"oo-ui-buttonElement-button","srcOffsets":[665,670,672,698],"vsrc":"oo-ui-buttonElement-button"}],"dataAttribs":{"tmp":null,"stx":"html"}}
0-[SANITY]     |  ---> "<a role='button' tabindex='0' data-x-rel='nofollow' class='oo-ui-buttonElement-button'>"
...

To be investigated.

I think this is a known issue: T279094 (and maybe T178588 is a duplicate of that?).

It might be resolved by the work on T268144.

Thanks @matmarex for refreshing my memory. :)

ppelberg mentioned this in T284512: [EPIC] Empower others to develop new, and extend existing, editing experiences.Sep 6 2022, 11:06 PM

T279094 indeed is our issue. Thanks everyone for the help!

One workaround is to change Phonos to be a tag extension instead of a parser function, i.e. with <phonos ipa="/həˈvænə/" />. I tested this and it looks good in VisualEditor, and it even has the built-in attributes editor like you see with some other tags and templates (I don't think we want to bother building a custom Phonos editor for VE, since communities are most likely to put the parser function/tag in a template rather than use it directly). We almost switched to a tag before, now I'm wondering if we should as I suspect T279094/T268144 will take some time to be addressed.

I'm marking this stalled for now.

Change 830310 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/Phonos@master] [POC] Use tag instead of a parser function

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

gerritbot added a project: Patch-For-Review.Sep 7 2022, 12:16 AM

Change 830310 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Use tag instead of a parser function

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

MusikAnimal mentioned this in rEPHN26cb40e430bf: Use tag instead of a parser function.Sep 7 2022, 8:35 AM

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.1; 2022-09-12).Sep 7 2022, 9:00 AM

Maintenance_bot removed a project: Patch-For-Review.Sep 7 2022, 9:30 AM

Huh, I tested this locally with VE, worked as expected

But having just tested something on beta in prep for a deployment:

Ignore the above, it now appears correctly on Beta

As evidenced above, we've decided to go the route of changing Phonos to use a tag. Re-assigning, and I think this is ready for QA now?

To reiterate what was said on Slack, and just to be crystal clear on what's changing:

{{#phonos: ipa=[IPA notation] |text=[plain text] |lang=[language] |file=[filename] |label=[label] }}

is now:

<phonos ipa="[IPA notation]" text="[plain text]" lang="[language]" file="[filename]">[label]</phonos>

Note self-closing tags should also work if there's no label:

<phonos ipa="[IPA notation]" text="[plain text]" lang="[language]" file="[filename]" />

There are test cases of these in the parser tests which are all passing, so everything should work fine. I'm primarily just want to make sure QA knows the syntax changed, since that's going to effect all of your testing moving forward :)

As a side note, we can now make a customized form for Phonos rather than the automatic one created by VE. We need product input to determine priority on that, but in my opinion it is quite low (for now) since on the WMF farm most wikis use templates and would rarely add a <phonos> tag directly into pages. Either way this should be a different ticket.

MusikAnimal updated the task description. (Show Details)Sep 7 2022, 3:15 PM

MusikAnimal removed a project: Parsoid.

MusikAnimal set the point value for this task to 3.Sep 7 2022, 3:22 PM

matmarex added a project: VisualEditor.Sep 7 2022, 4:44 PM

matmarex removed a subscriber: VisualEditor.

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-33); removed Community-Tech (CommTech-Sprint-32).Sep 12 2022, 3:00 PM

• JMcLeod_WMF moved this task from Ready 🎬 to QA 🐛 on the Community-Tech (CommTech-Sprint-33) board.Sep 12 2022, 3:02 PM

Tested it out on Patch Demo and there are no more issues showing the rendered output when selecting Visual Editor as seen in the screenshot.

GMikesell-WMF moved this task from QA 🐛 to Product sign-off 🤘 on the Community-Tech (CommTech-Sprint-33) board.Sep 16 2022, 6:51 PM

VPuffetMichel moved this task from To Triage to Triaged on the VisualEditor board.Sep 22 2022, 3:42 PM

dom_walden mentioned this in T315030: Allow Phonos parser tag to accept wikitext in the label.Sep 23 2022, 8:00 AM

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-34); removed Community-Tech (CommTech-Sprint-33).Sep 26 2022, 8:26 PM

• JMcLeod_WMF moved this task from Ready 🎬 to Product sign-off 🤘 on the Community-Tech (CommTech-Sprint-34) board.Sep 26 2022, 8:29 PM

Looking great <3

• JMcLeod_WMF moved this task from Product sign-off 🤘 to Done 🏁 on the Community-Tech (CommTech-Sprint-34) board.Oct 11 2022, 10:09 AM

MusikAnimal mentioned this in T366194: Migrate Community Wishlist to CommunityRequests extension.Mar 10 2025, 7:48 PM

	F35545646: image.png
	Oct 3 2022, 9:08 PM

	F35522461: Phonos_VE_Pass.png
	Sep 16 2022, 6:50 PM

	F35512082: image.png
	Sep 7 2022, 12:56 PM

	F35512087: image.png
	Sep 7 2022, 12:56 PM

Phonos does not display correctly in Visual EditorClosed, ResolvedPublic3 Estimated Story PointsBUG REPORTActions

Description

Details

Related Objects

Event Timeline

Phonos does not display correctly in Visual Editor
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions