Commit graph

144 commits

Author SHA1 Message Date
Bartosz Dziewoński 006e6c6f0f Fix styling for code blocks with copy buttons next to floated content
Make the wrapper div for code block create a block formatting
context. This changes how floated content is laid out: previously
the wrapper was taking 100% width and tried to wrap text around the
floated content, now its width is limited by the width of floated
content. This way absolutely positioned elements inside the code
block (like the copy buttons) won't overlap the floated content.
We've had this problem before when adding line numbers (T272853),
and the workaround we used there won't work for the copy buttons.
It also lets us remove the background-color override, previously
needed to avoid it leaking outside the code block (T126010).

Bug: T40932
Change-Id: I7f51ea78d7fcf07358c6ee45275b2bae2e1cbeb8
2024-10-09 21:48:52 +02:00
jenkins-bot e8d00cc402 Merge "Make line numbering appear dark in dark mode" 2024-09-29 17:01:57 +00:00
jenkins-bot 21a2d96102 Merge "copy: Make use of Less nesting features" 2024-09-29 16:37:47 +00:00
Taavi Väänänen 66622c60a5
Make line numbering appear dark in dark mode
This includes some changes to the colors in light mode to make them
match Codex tokens.

Bug: T365926
Change-Id: Ifa5d762bffa3c4ebdcfa451cc4a9965cd7b1b064
2024-09-29 14:39:10 +03:00
Taavi Väänänen 5a748da27c
copy: Make use of Less nesting features
Change-Id: Ieb38d425a29baaa95188f553959dc21b9cd31b7b
2024-09-29 14:26:22 +03:00
Siddharth VP b8dd28343c Support dark mode for code blocks
Update the CSS generation script to generate styles for both light and
dark modes. The Pygments style 'default' is used for light mode, as
before, and 'monokai' for dark mode.

Bug: T365926
Change-Id: I0cc1f9a10d4ff8e0c279a12cacbb1c300225328f
2024-09-28 23:06:30 +05:30
Siddharth VP 38cbb6fed6 copy button: use Codex colors for dark mode compatibility
Bug: T40932
Change-Id: I9a809954f64c6d3a14cc3e2b3c2fd38824f803f3
2024-09-28 23:06:30 +05:30
jenkins-bot e02476e0d2 Merge "Link page references in Scribunto modules" 2024-09-28 17:17:17 +00:00
jenkins-bot e259797d98 Merge "modules: Remove width limit for code block with copy button" 2024-09-27 15:49:38 +00:00
Ammarpad ba35957b9b ode-link: Fix link for URLs without protocol
Prepend '//' to relative URLs to turn them to real new (root)
addresses instead of relative paths in current domain

Bug: T368166
Follow-up: I999937c1f6303ecc64adb6285e73a9ce10f67bd8
Change-Id: I2cf901c7b0454517dc93ea8113dcf69832584c08
2024-09-26 20:03:22 +01:00
Ammarpad e4684a751c modules: Remove width limit for code block with copy button
Enabling copy button should not affect block width.

Bug: T40932
Follow-up: Ic8ef030514c3b6dd2cb9b137f032588869ab3762
Change-Id: I47475fa5e974eb999386bd612e16898ebfbd3046
2024-09-26 17:47:50 +00:00
jenkins-bot 4577cbe62f Merge "Fix bugs in link generation" 2024-09-24 23:33:22 +00:00
Siddharth VP 4c9ed25619 Link page references in Scribunto modules
In Scribunto modules, link page names used in require(), mw.loadData()
and mw.loadJsonData() invocations.

Inspired from the CodeLinks gadget[0] but rewritten for brevity,
avoiding Wiktionary specific code, making the code more generic,
and thereby adding support for mw.loadJsonData().

[0]: https://en.wiktionary.org/wiki/MediaWiki:Gadget-CodeLinks.js

Bug: T368166
Change-Id: Idc554269ee52a05660fa41f065a2b3c73e2e1b9b
2024-09-24 22:47:56 +05:30
jenkins-bot e58d391b91 Merge "Implement copy buttons for code blocks" 2024-09-24 13:10:37 +00:00
Siddharth VP 341cd2bc37 Fix bugs in link generation
* Use mw.Title so that template links work for templates outside
template namespace, and so that titles are normalized.
* Use recursion instead of while loop so that both the segments before
and after the inserted link are searched for further linking
possibilities. Among other cases, this fixes the case where a template
link before a wikilink (on the same line) was not working. This also
avoids infinite iteration if mw.Title.newFromText() failed to create a
valid Title object.

Bug: T368166
Bug: T374693
Change-Id: I4d485340928b81df26ca035874422fdb5930710f
2024-09-15 11:57:26 +05:30
Siddharth VP 55630cc5ea Implement copy buttons for code blocks
<syntaxhighlight> blocks with a boolean "copy" param will now have a
button next to them for copying the code to the clipboard. Not
applicable for inline code blocks.

Adapted from the mediawiki.org gadget written by Krinkle.

Bug: T40932
Change-Id: Ic8ef030514c3b6dd2cb9b137f032588869ab3762
2024-09-11 01:31:14 +05:30
Siddharth VP 16538948ae Fix accidental use of IIFE
The function was being invoked immediately instead of as the jQuery
ready callback.

Change-Id: I08c5a5dad6652a598a2b4a6bed196ab18bee452a
2024-09-11 00:11:59 +05:30
jenkins-bot f2d0dde88c Merge "Enable clicking on wikilinks and external links in highlighted code" 2024-09-09 13:29:52 +00:00
Bartosz Dziewoński 91f3235ed9 Fix forced light mode background-color applied to the wrong element
Changes for T356956 applied the styles in the wrong place.

`<div class="mw-highlight">` should have no background (and we need
to override the default Pygments styles that add it).

`<div class="mw-highlight"><pre>` and `<code class="mw-highlight">`
should have background (and we need to override core MediaWiki styles
that adapt to light/dark mode with forced light mode colors).

Bug: T365927
Change-Id: I473203b12673f7bc004f953ab33fe36fb897e095
2024-08-29 20:43:40 +02:00
Siddharth VP 7fa3abe91e Enable clicking on wikilinks and external links in highlighted code
It's common practise to use [[wikilink]] syntax to mention page names
in comments of JS/CSS/Scribunto code where the links ordinarily don't
work. Using JavaScript to actually make the syntax clickable makes
navigation easier.

{{Templates links}} and external links are also supported.

Bug: T368166
Change-Id: I999937c1f6303ecc64adb6285e73a9ce10f67bd8
2024-06-22 12:35:22 +05:30
Ed Sanders cd421a4b1d build: Update eslint-config-wikimedia to 0.28.0
Change-Id: Ia565bd4d314b7b512a46c4bb2af74784d5c2edc1
2024-06-06 16:33:02 +01:00
Novem Linguae 859db0ef3d JSDoc: @mixins -> @mixes
Convert old JSDuck syntax to new JSDoc syntax

Bug: T366230
Change-Id: If1103a5945f6be02f9f6d81ec361e873e40d0192
2024-05-31 15:38:02 +00:00
Steven Rawson 8662badc21 SyntaxHighlight: Add color to override skin
Bug: T356956
Bug: T365774
Change-Id: I968aa7c9fe28ee83cb62dfd78575e426da5daf5e
2024-05-25 23:32:36 +00:00
Jon Robson 9ecaf3bd13 Apply background to pre tags
This overrides the default skin rule for pre elements as seen
on [[mw:MediaWiki-Docker%2FExtension%2FWikiLambda]]

Bug: T356956
Change-Id: I0a28323f4269e7afb89dce78927e048734f15a49
2024-05-17 14:37:43 +00:00
Novem Linguae e96144ff92 eslint: remove redundant ruleset wikimedia/jsdoc
The ruleset wikimedia/client-es6 already contains
the ruleset wikimedia/jsdoc. So wikimedia/jsdoc
doesn't need to be declared.

Bug: T365047
Change-Id: I59c8f9a244ff727273783b4a3104929232801819
2024-05-15 18:08:16 +00:00
James D. Forrester 5e92671865 eslint: Configure to lint against JSDoc, not old JSDuck
Bug: T138401
Change-Id: I82ae6840c1a37ce9b71e946674eb078c98f84c4b
2024-05-01 08:15:32 +01:00
Ed Sanders e69f76ffc8 Use ES6 syntax (arrow callbacks and let/const)
Change-Id: I494f8ee3ab3d805aafbc1c95a5b19b34de598d2b
2024-04-29 21:09:27 +01:00
Jon Robson dda5d1e788 Adjust colors for remaining color contrast issues in night mode
Fixes the remaining issues on
https://en.m.wikipedia.beta.wmflabs.org/wiki/SyntaxHighlight?minervanightmode=1

Follow up to Ic58482b73e520505bde26a47e74f131dd8a51671

Bug: T356956
Change-Id: I71e74980a1ff276d61d2320cfedd92a55b659c7f
2024-04-17 16:52:26 +00:00
Jon Robson 92f155db14 Make syntax highlighting readable in night mode
The existing color of background if set to inherit will not work
in night mode. There does seem to be a background set in pygments.generated
so this probably doesn't need to be defined at all, but I erred on the side
of caution.

When defining a background that is not using a Codex design token
we also want to define a color to avoid the status quo of unreadable
text.

Note: this is a short term fix for making the content readable.
We can theme this in night mode later after further analysis.

Bug: T356956
Change-Id: Ic58482b73e520505bde26a47e74f131dd8a51671
2024-04-16 00:10:42 +00:00
jenkins-bot e3cfcbd571 Merge "Allow line ranges to be selected using shift+click" 2024-03-11 19:14:46 +00:00
Ed Sanders d6cc861de7 Allow line ranges to be selected using shift+click
Change-Id: I224de2d2d72525b61608d7b6d0f13ce84a699ef7
2024-03-06 22:30:51 +00:00
Ed Sanders 963859f8c9 VE integration: Remove copyright dates
Change-Id: I424e7bb7ac64297b55a47db058605f528084c35e
2024-02-29 15:13:03 +00:00
Ed Sanders e350f10a7e Don't let native scroll happen when clicking on line links
Update the page hash with history.replaceState instead.

Change-Id: I9d7bc25876aaae929646cd7e5960a8f76ede94f3
2024-02-06 16:33:46 +00:00
thiemowmde 040f45302b Fix GeSHi support, update PHP/JSDocs, use modern PHP
The PHPDoc/JSDoc updates are mostly about generic "array" types that
can be made more specific.

In PHP we can remove documentation when it is 100% identical to the
type declarations in the code.

A few mistakes are fixed as well, e.g. a missing "null".

This patch also made a major mistake visible. It looks like the
$geshi2pygments compatibility map was broken since 2018. The array was
changed from values to keys via I7a852dd and some usages updated, but
one was forgotten.

Change-Id: I480999d21f2f69cba84166bb877aa75882778966
2024-01-22 20:10:04 +01:00
Bryan Davis 99ce3504ba Update Pygments to 2.16.1
Bump embedded Pygments version from 2.15.0 to 2.16.1. Changes
<https://github.com/pygments/pygments/compare/2.15.0...2.16.1>.

New lexers: asn1, blueprint, bqn, desktop, graphql, openscad, ptx,
systemd, tls, urlencoded, verifpal, yar, yara, zon

Bug: T335460
Change-Id: I9577e2f38c8404698c5079033c3cd9742e8b383f
2023-08-15 04:03:17 +00:00
Umherirrender 00595fd798 stylelint: Enable selector-pseudo-element-colon-notation
Via stylelint --fix

Change-Id: I544aaa852df15c2b3088c65115f812e75c93f994
2023-03-30 01:00:39 +02:00
thiemowmde 0b13847937 Avoid dirty diffs when editing code blocks with line numbers
Steps to reproduce:
* Make a wikitext page with <syntaxhighlight line="sure">…</…>.
* Edit with VisualEditor and make an unrelated change to the content.
* Save.
* Before the attribute was always replaced with line="1".
* With this patch the old value stays untouched.

Change-Id: I433a206905c1a0a1bc06ef8b4037f6db9d935810
2022-10-26 12:59:32 +00:00
Ed Sanders f2613d589c Line number highlight: Use getTargetFromFragment
Bug: T315872
Depends-On: I605a24c708e60ccffde9dce524485f61fd5c7b06
Change-Id: I48c1aaf56ccea232dca7cb52f24a29a421b94d86
2022-08-31 13:10:18 +00:00
Ed Sanders 0345688a4f build: Update devDependencies
Change-Id: Id4d2eaaa8a5faa567e7f978eb21921b9644c7500
2022-03-20 15:05:03 +00:00
Ori Livneh a4273571da Update Pygments to 2.11.2
New lexers: BDD, Elpi, LilyPond, Maxima, Rita, Savi, Sed, Sophia, Spice, .SRCINFO.

Full upstream changelogs:

* https://github.com/pygments/pygments/releases/tag/2.11.0
* https://github.com/pygments/pygments/releases/tag/2.11.1
* https://github.com/pygments/pygments/releases/tag/2.11.2

Bug: T298399
Change-Id: I1177cb8a5c697852856b676c857939e73acb3f6c
2022-01-17 23:51:19 +00:00
Ed Sanders e2a95de1ce Move var delcarations inline
Change-Id: I4546e0bd18845fa21b7aaca2b50d11e16e637229
2021-10-07 14:34:55 +01:00
Timo Tijhof 7d9c268ffd pygments.linenumbers: Avoid deep jQuery loops on unrelated interactions
Follows-up 42c97fa (I82ed4ade), 63c5943a9 (Ic71346196).

This commit makes no functional changes, but it reduces overhead
from the SyntaxHighlight code when interacting with other features,
such as elaborate modals or other hashchange-heavy code paths that
a gadget might produce.

It uses vanilla DOM instead of jQuery where possible, and adds an
early return rather than fairly deep continuation no-ops.

Change-Id: I2264f6f398193802f05c738bad4c294da007fb27
2021-02-19 03:43:24 +00:00
Prod c9892df300 Update pygments to 2.8.0
Changes:
  <https://github.com/pygments/pygments/blob/2.8.0/CHANGES#L10-L150>

The 2.8.0 release contains fixes to existing lexers, as well as the
following new lexers:
  amdgpu, cddl, futhark, graphviz/dot, markdown

Bug: T274741
Change-Id: I84c32591a06aac5e1afe46dab1f80bb53d981bb3
2021-02-18 16:12:33 +00:00
jenkins-bot fc0ded34e1 Merge "Avoid console warning when hash is empty" 2021-01-25 22:54:36 +00:00
Ed Sanders 42c97fa448 Avoid console warning when hash is empty
Bug: T272844
Change-Id: I82ed4ade24ed9e61e654cc7ea1ce19c7607086e1
2021-01-25 22:30:48 +00:00
Ed Sanders 173491fa6f VE: Fix highlight of block syntax next to floats
Bug: T272864
Change-Id: Ifb8a36bb0f7fee93711c07ebc4efa8c0da244469
2021-01-25 15:13:31 +00:00
Ed Sanders 1a15a8832c Move position:relative to inner wrapper
The outer wrapper is 100% width, so making it position:relative
causes it to stack above floated elements.

Bug: T272853
Change-Id: I20a73b5086ebb03673f0435e27ca93432dcd000c
2021-01-25 14:43:18 +00:00
Ed Sanders e793626d52 Line number selection: Remove user-select:none
These rules were being kept for cached content, but were
actually breaking Firefox by triggering a multi-part selection.

Bug: T271614
Change-Id: I83fb4aab88fe1f34bc59d1da18ae8a6a4838a831
2021-01-19 20:32:39 +00:00
jenkins-bot 49043547f2 Merge "Line numbers use mw-content-ltr/rtl direction" 2021-01-15 21:39:51 +00:00
jenkins-bot 8824036ea9 Merge "Remove unused directionality styles" 2021-01-15 21:39:34 +00:00