Topic on Extension talk:VisualEditor/Skin requirements

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}}