feat: export as images #6987

Eetwalt · 2026-01-21T11:00:18Z

Summary

This introduces a new feature of exporting these elements as images by either downloading or copying to clipboard:

Brackets
Group tables
Cross tables
Match list

How did you test this change?

Locally compiled css & js. Can use dev tools too.

Dropdown examples

Export examples:

Co-authored-by: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>

Copilot

Pull request overview

This PR introduces an export-as-image feature that allows users to download or copy brackets, group tables, cross tables, and match lists as images to the clipboard.

Changes:

Added dropdown UI components for selecting export options (copy to clipboard or download)
Implemented image export functionality using html2canvas to capture content and compose branded images with headers and footers
Added Font Awesome icons for share, copy, and download actions

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
stylesheets/commons/Dropdown.scss	Styling for dropdown widget components with light/dark theme support
stylesheets/Main.scss	Imported Dropdown styles and removed basic body styling
lua/wikis/commons/Widget/Basic/Dropdown/Item.lua	Lua widget for individual dropdown menu items with optional icons and links
lua/wikis/commons/Widget/Basic/Dropdown/Container.lua	Lua widget for dropdown container with toggle button
lua/wikis/commons/Icon/Data.lua	Added icon definitions for share, copy, and download
lua/spec/dropdown_spec.lua	Test suite for dropdown widget functionality
javascript/commons/ExportImage.js	Core export functionality including canvas composition, image caching, and clipboard operations
javascript/commons/Dropdown.js	JavaScript for dropdown menu toggle behavior
javascript/Main.js	Registered new Dropdown and ExportImage modules

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

stylesheets/Main.scss

javascript/commons/ExportImage.js

mbergen · 2026-01-21T12:49:08Z

javascript/commons/ExportImage.js

+		);
+		context.fill();
+
+		const mainTitle = mw.config.get( 'wgTitle' );


Maybe retrieve the DISPLAYTITLE here instead of the MW Pagename?
Not sure if that is exposed in the config, or whether you'd need to get that from the h1.firstHeading.

It's not in the config rn, but it could be added if we want this.

tend to agree with Salt

agree that displaytitle seems more fitting

There's an argument to be made that only the pagename is a reliable way to get back to the page, with displayname you are always relying on the search.
But I think we'd probably value a nice display more than that.

mw.config.get('wgDisplayTitle'); this now returns the display title, either the one set by a user, or if none is set the default one built from the url

(mind pages need to be purged for it to be available)

using wgDisplayTitle with fallback to wgTitle now

javascript/commons/ExportImage.js

FO-nTTaX · 2026-01-21T13:33:45Z

javascript/commons/ExportImage.js

+		);
+		context.fill();
+
+		const mainTitle = mw.config.get( 'wgTitle' );


It's not in the config rn, but it could be added if we want this.

FO-nTTaX · 2026-01-21T13:35:55Z

javascript/commons/ExportImage.js

+	generateFilename( title ) {
+		const pageTitle = mw.config.get( 'wgTitle' );
+		return `Liquipedia ${ pageTitle } ${ title }`;
+	}


Maybe add something more to the file name like the current date and time in case someone wants to export more than one thing from the same page, say multiple groups etc

Good point, added

also do we have any thoughts on illegal characters in filenames? mediawiki titles can have / chars, which on most systems are not allowed in file names. Might need some research

could just gsub those to underscores

/ (forward slash) < (less than) > (greater than) : (colon - sometimes works, but is actually NTFS Alternate Data Streams) " (double quote) / (forward slash) \ (backslash) | (vertical bar or pipe) ? (question mark) * (asterisk)

come to mind from the top of my head

oh and windoofs has length restrictions too

If we used the display name for the file name too, would that work? Do those have illegal characters

yeah displayname allows those chars too

either way displaytitles are optional, so we need to be able to support page names, but hjpa correctly pointed out that displaytitles have few rules

Added illegal character sanitation and fallback to wgTitle if wgDisplayTitle is not available

javascript/commons/ExportImage.js

lua/wikis/commons/Widget/Basic/Dropdown/Container.lua

* Add Metafy link * add metafy suffix and fix to alphab order in suffixes * Update Icons.scss --------- Co-authored-by: hjpalpha <75081997+hjpalpha@users.noreply.github.com> Co-authored-by: Eetu Rantanen <75437856+Eetwalt@users.noreply.github.com>

* create shopmerch module * add to all * add default for url * always show icon * add default icon * change defaults * chore: update visual snapshots * constant char pattern * fix * use I18n, lose option to customize text and icon * use mw existings methods when possible * remove redundant props Co-authored-by: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> * simplify by only allowing slug input and show errors on bad inputs * fix asserts and consider escaped chars by constructing the final url before check * plain Co-authored-by: SyntacticSalt <mail@mbergen.de> --------- Co-authored-by: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Co-authored-by: SyntacticSalt <mail@mbergen.de>

javascript/commons/ExportImage.js

Eetwalt and others added 13 commits January 19, 2026 10:54

widget markup js and css

8d5ff74

fixes

3a4f0cb

icons

55a478e

fix share icon

96d63b3

simplify

a1d3ac5

Merge branch 'main' into dropdown-widget

e9e58ff

restructure

1418e64

cleanup

b42ecd0

add field anno

8f6195b

Co-authored-by: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>

Merge branch 'dropdown-widget' into export-feature

c124ac1

main export image functionality

f61f095

fix dynamic tab exports

72ee70f

stack text if overlap

d3c396d

Eetwalt added the stylesheets Changes to stylesheets label Jan 21, 2026

Copilot AI review requested due to automatic review settings January 21, 2026 11:00

Eetwalt added the javascript Changes to JavaScript files label Jan 21, 2026

Copilot AI reviewed Jan 21, 2026

View reviewed changes

chore: update visual snapshots

64ef526

Eetwalt requested review from FO-nTTaX and liquidely January 21, 2026 11:10

Eetwalt added 2 commits January 21, 2026 13:39

cleanup

6946db8

cleanup

dcc9025

Eetwalt changed the base branch from main to dropdown-widget January 21, 2026 11:41

Eetwalt and others added 4 commits January 21, 2026 13:42

order

97919b3

change to png

09712f9

cleanup

d50fdd0

Merge branch 'dropdown-widget' into export-feature

5d5b740

Eetwalt changed the base branch from dropdown-widget to main January 21, 2026 12:07

fix indent

1180e6f

mbergen reviewed Jan 21, 2026

View reviewed changes

FO-nTTaX reviewed Jan 21, 2026

View reviewed changes

cleanup

d96cddf

ElectricalBoy reviewed Jan 22, 2026

View reviewed changes

lua/wikis/commons/Widget/Basic/Dropdown/Container.lua Outdated Show resolved Hide resolved

lua/wikis/commons/Widget/Basic/Dropdown/Container.lua Show resolved Hide resolved

Eetwalt and others added 9 commits January 22, 2026 22:17

use display title

aa6415e

sanitize illegal characters in filenames

08908fe

fallback to wgTitle if wgDisplayTitle is missing

7d0ac62

Add Metafy link (#6811)

ce08cdd

* Add Metafy link * add metafy suffix and fix to alphab order in suffixes * Update Icons.scss --------- Co-authored-by: hjpalpha <75081997+hjpalpha@users.noreply.github.com> Co-authored-by: Eetu Rantanen <75437856+Eetwalt@users.noreply.github.com>

Merge branch 'main' into export-feature

de146b0

revert body style removals

e5e8c1c

chore: update visual snapshots

a3dc536

fix annos on Dropdown container

77c5fd6

Eetwalt requested review from FO-nTTaX, hjpalpha and mbergen January 23, 2026 08:30

hjpalpha reviewed Jan 23, 2026

View reviewed changes

javascript/commons/ExportImage.js Show resolved Hide resolved

javascript/commons/ExportImage.js Show resolved Hide resolved

trim and slice

680367d

hjpalpha approved these changes Jan 23, 2026

View reviewed changes

FO-nTTaX approved these changes Jan 23, 2026

View reviewed changes

feat: export as images #6987

Are you sure you want to change the base?

feat: export as images #6987

Conversation

Eetwalt commented Jan 21, 2026

Summary

How did you test this change?

Dropdown examples

Export examples:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hjpalpha Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

hjpalpha Jan 22, 2026 •

edited

Loading