Extension talk:VisualEditor/Skin requirements

Previous discussion was archived at Extension talk:VisualEditor/Skin requirements/Archive 1 on 2019-05-16.

Hi. I am working on a new skin written in Mustache (see source code here) meant for MediaWiki 1.41 and 1.42. After some fidgeting around, I managed to add VisualEditor support with the following bit of code (an excerpt from templates/skin.mustache in my repo):

<div id="content">
<button id="ca-edit">Edit</button>
{{{html-body-content}}}
</div>

This gets a (mostly working, except for a weird bug where you have to reload the page) VisualEditor. However, #content seems deprecated, and my #ca-button is (by intent) just a non-functional placeholder meant to test the minimum requirements of VisualEditor.

I also notice that neither a tag with #content nor #ca-edit is in the example Mustache skin provided by Wikimedia (see skin here), and yet VisualEditor works perfectly fine in this skin. I am thus wondering if there is a separate best practice for Mustache skins (as the current requirements seem to be more oriented to tradition PHP skins).

Thank you for your hard work in making MediaWiki more accessible and for taking the time to look over my question. Have a swell [insert whatever time of day it is for you].

The Example skin outputs both a #content and a #ca-edit element for me.

Okay. Thanks. I’ll look into that and see which bit of Mustache it comes from.

Okay. After analyzing the Example skin, I found it does generate those tags, and how it does it. You do have to write in your mustache a tag with the id "content", which I already had. What I was missing was I was forgetting to add IDs, so I fixed it by adding "id={{id}}" nested in {{#array-links}} in {{#data-views}} in the portlets as so:

{{#data-portlets}}
{{#data-views}}
...
    {{#array-items}}
        {{#array-links}}
            <li id={{id}}><a {{#array-attributes}}{{key}}="{{value}}"{{/array-attributes}}>{{text}}</a></li>
        {{/array-links}}
    {{/array-items}}
...
{{/data-views}}
{{/data-portlets}}

Fixed in recent versions of VisualEditor.

Hi! As the developer of Skin:Poncho, I followed this guide to make it compatible with the visual editor. However, there's one detail that I couldn't manage. When I click Edit on the Vector skin, the visual editor loads without reloading the page. However, when I do so on the Poncho skin, the page reloads. See https://www.appropedia.org/Special:Random for a live site using Poncho. What am I missing? Thanks!

It looks like there are two elements with id="ca-ve-edit" on your pages, one of which is invisible and unclickable, and VE is hooking to the invisible one.

Right, I forgot about that. BTW, the reason why there're two elements with id "ca-ve-edit" is because Poncho outputs page actions as OOUI buttons rather than links, but VisualEditor assumes links and changes its content for plain text via JavaScript. Since I found no way to prevent this, I did this hack to trick VisualEditor. Perhaps when we update to MediaWiki 1.42+ I'll be able to use Codex or some other new figure this out.

VisualEditor assumes links and changes its content for plain text via JavaScript

That may be fixed by https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/963423.

Ah, interesting! I tried to cherry pick the change at https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/995231 but I'm not sure how to resolve conflicts, honestly. Perhaps you can take care? Else I'll try on Monday, cheers!

I resolved the conflicts but Jenkins now complains about a selenium test not passing. I shared my thoughts on the patchset. Cheers!

I got it working and approved it. Thanks for doing most of the work!

Thanks so much!! On the contrary, thanks for sharing your time and knowledge on this! I was able to remove the hack on Poncho and deployed all the new versions on Appropedia, yay!

VisualEditor is supposed to support Minerva. Using 1.36.2, and latest VE (0.1.2) and Minerva (– (7203827) 17:04, 4 September 2021).

Have the minimum requirements or recommendations changed now that VE is part of MW core?

No, they didn't, as far as I know. I wonder what led to this question though, is there some context that I'm missing?

@Matma Rex Hi Matma! Thanks for the quick response. The context is, I'm on MW 1.35 LTS and trying to use Skin:Metrolook branch REL1_35 and have discovered that it has lots of little CSS issues with VE integration. The Metrolook folks said [1] that they seek to be in compliance with the requirements of this page, but that is all they are willing to commit to for their purposes. But they also admitted that this page hasn't been updated for a while and so I got the sense that if this page had more requirements then it might motivate them to meet them.

[1] https://phabricator.wikimedia.org/T171480

Interestingly.. I see now that you are the one who shared the VE requirements to the phabricator ticket T171480. Cool. In your response., you mentioned that if we needed help we could reach out to the VE folks. What's the best way to do that? In phabricator? Here? .. Eager to reach out. Thanks!

On Phabricator is probably the most reliable way (or on IRC, if anyone happens to be around). To clarify, I'm also one of the VE folks :) I'm not willing to commit to help in fixing various CSS issues though, sorry – I think the responsibility on that falls on the skin, and it's probably far easier for the skin's author to resolve than us (although probably somewhat tedious).

Completely agree, but their response was.. ~ "we meet the requirements of VE as stated on Extension talk:VisualEditor/Skin requirements" .. so that's why I posted this question here.

Right. These are just the requirements that make it possible for the VE interface to appear when you click "Edit". But how it appears is mostly the skin's business.

Understood. Thanks!