⚓ T30684 Collapse templates in editor
Page MenuHomePhabricator

Collapse templates in editor
Closed, ResolvedPublic

Description

Presently most of wikis are using info box templates (http://en.wikipedia.org/wiki/Wikipedia:Infobox_templates) as an important tool. These templates are having two inadequacies for novice and non technical editors.

1)First is these templates usually occur at the top of edit page and a novice user gets confused with all wiki markup in those templates so please do enhance it with either wiki markup or template itself will not show up when page is opened for editing unless clicked as show.

2a) The second request is for a novice wiki user a template concept itself is new in that presently novice user has no way to understand that these info boxes are template pages and there are intricate templates within templates and there is no way for new user to understand that these templates are being reflected from some third page. The enhancement request is to give automated feature in tools which a new user can use to build a new info-box template

the way in vector skin new usability initiative we have given feature for creating tables in the same manner.

2b) Some easy way for new user to understand and reach easily to hidden template that lists the left side list in info-box template.

keywords: code folding

Acceptance criteria

  • When hovering over a template or its parameters, you should see a collapse icon appear above the cursor/selection (looks like )
    • Clicking this should collapse the template, i.e. from {{foo|bar=baz}} to {{foo|…}}
  • Clicking the ellipsis () of a collapsed template should then unfold it back to its original presentation.
    • Moving the cursor over the ellipsis using the arrow keys should also unfold the template
  • The following keystrokes should work:
    • ++[ – Fold the currently selected templates.
      • +alt+[ for MacOS
    • ++] – Unfold the any folded templates in the selection.
      • +alt+] for MacOS
    • +alt+[ – Fold all templates on the page
      • Same keystroke for MacOS, I hope...
    • +alt+] – Unfold all templates on the page
      • Same keystroke for MacOS

Event Timeline

bzimport raised the priority of this task from to Lowest.Nov 21 2014, 11:38 PM
bzimport set Reference to bz28684.
bzimport added a subscriber: Unknown Object (MLST).

This bug is basically asking for template collapsing, something we've half-implemented in WikiEditor but never got working properly in all browsers.

Is this bug more apropriate for MWextension VisualEditor ?

This is not likely to ever get implemented, with VisualEditor in the works.

There are a few gadgets that might be useful for people though:

https://www.mediawiki.org/wiki/User:Remember_the_dot/Syntax_highlighter
https://en.wikipedia.org/wiki/User:Cacycle/wikEd

Niharika subscribed.

I'm going to take community tech off of this ticket because we do not have the bandwidth to take this on right now.

Bhsd subscribed.

The default folding style in CodeMirror 6 is line-based. Either we should only focus on multi-line templates, or we may need to write our own implementation for template folding.

I have worked out one way to implement: There will be an icon displayed above the cursor inside a template. By clicking it, the template parameters become hidden and replaced by three dots, while the template name remains visible. Clicking the dots will unfold the template. Regarding the key bindings, foldAll (Ctrl-Alt-[) is likely to fail on a very long page, while others should work as expected.

I can claim this task if people are overall satisfied with my workaround.

IMG_4454.jpeg (122×472 px, 27 KB)

IMG_4455.jpeg (120×342 px, 20 KB)

Would it be possible to keep the | for the collapsed version? I feel it looks like the template name has been shortened without it.

Would it be possible to keep the | for the collapsed version? I feel it looks like the template name has been shortened without it.

Sure! I can do that.

Screen Shot 2024-02-20 at 9.28.29 PM.png (108×415 px, 13 KB)

Screen Shot 2024-02-20 at 9.29.02 PM.png (54×301 px, 9 KB)

That sounds great to me, @Bhsd! Side note -- the images at T30684#9531934 are not public, probably due to T310833.

Side note -- the images at T30684#9531934 are not public, probably due to T310833.

Thank you for pointing it out! I will claim this task then.

Change 1006475 had a related patch set uploaded (by Bhsd; author: Bhsd):

[mediawiki/extensions/CodeMirror@master] CodeMirror 6 template folding

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

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

[mediawiki/extensions/CodeMirror@master] tests: add selenium tests for CodeMirror 6 template folding

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

Change 1008585 abandoned by MusikAnimal:

[mediawiki/extensions/CodeMirror@master] tests: add selenium tests for CodeMirror 6 template folding

Reason:

test added back in parent patch

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

Change 1006475 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirror 6 template folding

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

Change rEMFR10098251fc14 had a related patch set uploaded (by Bhsd; author: Bhsd):

[mediawiki/extensions/CodeMirror@master] CodeMirror 6 template folding: foldAll

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

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

[mediawiki/extensions/CodeMirror@master] CM6: put template folding behind feature flag and rework config settings

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

Moving to my team's board so this can get some proper QA. First however, it'd be good to get some review on r1010280 as this was deemed a blocker to rolling out CM6 further.

I have not forgotten about r1009825 and will be reviewing that soon :)

Change 1010280 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CM6: put template folding behind feature flag and rework config settings

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

@Bhsd @MusikAnimal This looks really good! However, I noticed that when a folded template was delete from the end or the beginning, the folded part was still there -- I think it should be automatically unfolded (like in VSCode) because it's no longer part of a template.

I think it should be automatically unfolded (like in VSCode) because it's no longer part of a template.

Reasonable request, but unfortunately this kind of automatic unfolding is not directly available from the CM6 library. We may have to implement it on our own, and I suggest creating a new task for it.

Change #1009825 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirror 6 template folding: foldAll

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

When doing a global unfolding on https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Fox&action=edit I saw the below error. I have only seen it happen once so far. Browser was Firefox 115.

Uncaught InternalError: too much recursion
    bindTextareaListener https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.disambiguator&skin=vector-2022&version=btivb:3
    jQuery 8
    bindTextareaListener https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.disambiguator&skin=vector-2022&version=btivb:2
    js https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.disambiguator&skin=vector-2022&version=btivb:3
    fire https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=mediawiki.base&skin=vector-2022&version=14z8h:4
    value https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.CodeMirror.v6.WikiEditor&skin=vector-2022&version=j5jxo:2
    value https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.CodeMirror.v6.WikiEditor&skin=vector-2022&version=j5jxo:3
    js https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.CodeMirror.v6.WikiEditor&skin=vector-2022&version=j5jxo:4
    fire https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=mediawiki.base&skin=vector-2022&version=14z8h:4
    build https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.wikiEditor&skin=vector-2022&version=1dc58:40
    setTimeout handler*build https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.wikiEditor&skin=vector-2022&version=1dc58:40
    create https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.wikiEditor&skin=vector-2022&version=1dc58:27
    addModule https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.wikiEditor&skin=vector-2022&version=1dc58:18
    wikiEditor https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.wikiEditor&skin=vector-2022&version=1dc58:23
    addWikiEditor https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.wikiEditor&skin=vector-2022&version=1dc58:4
    js https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.wikiEditor&skin=vector-2022&version=1dc58:4
    jQuery 11
    js https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=ext.wikiEditor&skin=vector-2022&version=1dc58:1
    runScript https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:11
    cssHandle https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:12
    flushCssBuffer https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:4
    addEmbeddedCSS https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:4
    execute https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:12
    doPropagation https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:5
    requestIdleCallback handler*setAndPropagate https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:6
    markModuleReady https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:11
    runScript https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:11
    cssHandle https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:12
    flushCssBuffer https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:4
    addEmbeddedCSS https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:4
    execute https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:12
    doPropagation https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:5
    requestIdleCallback handler*setAndPropagate https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:6
    markModuleReady https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:11
    runScript https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:11
    cssHandle https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:12
    flushCssBuffer https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:4
    addEmbeddedCSS https://en.wikipedia.beta.wmflabs.org/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022:4
load.php:3:115

@dom_walden Does CodeMirror stop functioning after the error? Sorry, I am unable to reproduce it on my MacBook Firefox, so I would like to learn more about it.

@dom_walden Does CodeMirror stop functioning after the error? Sorry, I am unable to reproduce it on my MacBook Firefox, so I would like to learn more about it.

After a brief period of unresponsiveness, it continues to work fine as far as I can see, including the folding/unfolding functionality.

I have yet to reproduce this in another browser or environment, either Chromium on this machine, Firefox on another computer or Safari on Browserstack.

@MusikAnimal What do you think? The unfoldAll functionality is provided by the @codemirror/language library, so we may have little room to improve. Should we disable it, or warn its usage in the documentation?

I would much prefer the errors are captured, at least, but as it stands now barring a means to reproduce, I'm in favor of keeping unfoldAll -- especially if everything continues to function just fine despite it hiccuping. The (un)fold all features are only available via keystroke, so I suspect most users won't use them anyway. As we roll out to more wikis, we'll monitor the error logs and should have a better idea of how widespread the issue is.

I have tested code folding on several browsers on LTR and RTL wikis. I have mostly been checking that the folding/unfolding functions and that the wikitext is not modified in the process.

I have a few observations.

I find CodeMirror to be lazily loaded (if that is the correct term), i.e. for a long article it will load as you scroll down. If you try to use global (un)fold it may not (un)fold all the templates in the article if they are too far down the page. In some cases, for a single long template, it may not fold if the template has not all been loaded already. For example, the first template here https://ar.wikipedia.beta.wmflabs.org/w/index.php?title=%D8%A5%D8%AB%D9%8A%D9%88%D8%A8%D9%8A%D8%A7&action=edit. I don't know if this is just a technical limitation we can do nothing about.

If you have a template across several lines and the closing }} is on its own line, placing the cursor before the }} does not allow you to close it (the - does not appear and the keyboard shortcut does not work). When you unfold a template the cursor is automatically placed here, so you have to move the cursor in order to fold the template again. I don't know if we want to raise this as a usability bug.

Test environments: https://en.wikipedia.beta.wmflabs.org and https://ar.wikipedia.beta.wmflabs.org CodeMirror 5.0.0 (ca6eb17) 07:18, 24 April 2024 (last version tested).
Browsers: Firefox 115, Chromium 120, Safari 17.3.

I find CodeMirror to be lazily loaded (if that is the correct term), i.e. for a long article it will load as you scroll down. If you try to use global (un)fold it may not (un)fold all the templates in the article if they are too far down the page. In some cases, for a single long template, it may not fold if the template has not all been loaded already.

Indeed, we may change CodeMirror's lazy behavior if it is really desired, perhaps at the cost of performance.