Update revealjs v5 and dependencies

configuration

@@ -35,10 +35,11 @@ export POPPER_JS=2.11.7
 export CLIPBOARD_JS=2.0.11
 export TIPPY_JS=6.3.7
 export PDF_JS=2.8.335
-# Using commit to fix https://github.com/quarto-dev/quarto-cli/issues/2430 - revert to using a release tag when included
-export REVEAL_JS=e281b3234e7991283ce4dcca705dd9a6a9ebe5d2
+export REVEAL_JS=5.1.0
 export REVEAL_JS_MENU=2.1.0
-export REVEAL_JS_CHALKBOARD=a88c134e2cf3c7780448db003e7329c3cbd8cfb4
+# unrelease version needed for a fix with Reveal.js 5
+# https://github.com/rajgoel/reveal.js-plugins/pull/180
+export REVEAL_JS_CHALKBOARD=8408d5a265abf74a042122520bbb4fd0d31feaed
 export REVEAL_JS_PDFEXPORT=2.0.1
 export LIST_JS=2.3.1
 export DAY_JS=1.11.7

dev-docs/update-revealjs.md

@@ -0,0 +1,65 @@
+# Step to update revealjs
+
+- [ ] Update version of REVEALJS and plugins in [`configuration`](../configuration)
+- [ ] Run the update once (`package\src\quarto-bld.cmd update-html-dependencies`) and fix potential issue in theme patching
+- [ ] Manually check that [`settings.scss`](../src/resources/formats/revealjs/reveal/css/theme/template\settings.scss) does not have new item to add to [`quarto.scss`](../src/resources/formats/revealjs/quarto.scss). Look for `// -- START setting.scss --` and `// -- END setting.scss --`
+- [ ] Check that defaults value did not change in SASS variable mapping (e.g. `$backgroundColor` default in Revealjs is set to `$body-color` in Quarto) in the same files
+
+## Patching Themes
+
+It happens in [`update-html-dependencies.ts`](../package/src/common/update-html-dependencies.ts)
+
+- `sassVarsMap` contains the mapping between SASS variables in revealjs and quarto
+- `revealjsThemePatches` has the variables used to patch the specific theme
+
+### Quarto specifics
+
+- `default` theme is a custom quarto theme (`default.scss`)
+- `dark` theme is a cusom quarto theme (`dark.scss`)
+  - Default value are the one in the `quarto.scss` layer
+- `white` is aliased to `default`, so use `default.scss` - `white.scss` from reveal is ignored
+- `black` is aliased to `dark.scss`, so use `dark.scss` - `black.scss` from reveal is ignored
+
+#### About settings.scss
+
+- `settings.scss` is a file that contains the default value for the themes
+- However, `quarto.scss` contains some defaults for Quarto.
+- So part of settings.scss is inside the Quarto default, and others are in the revealjs theme ported to quarto theme
+
+#### About adaptation of theme files
+
+- Variables name are changed to match the quarto theme - this is done automatically through a mapping
+- Files are patched using git for more manual modification.
+
+  - Imports are removed
+    - `template/mixins.scss` will be added as part of framework layer
+    - `template/settings.scss` is manually inlined
+    - `template/theme.scss` will be added as part of framework layer
+  - `@include dark-bg-text-color` is removed as it is inlined in quarto.scss and `$dark-bg-text-color` allows to set it
+  - `@include light-bg-text-color` is removed as it is inlined in quarto.scss and `$light-bg-text-color` allows to set it
+
+  - some defaults from `settings.scss` are hand picked, and other are inline changed in `quarto.scss`
+
+  - For dark themes
+
+    - Check that the dark theme is correctly patched with
+      ```scss
+      $input-panel-bg: rgba(233, 236, 239, 0.2) !default;
+      ```
+    - Some themes have
+      ```scss
+      // code blocks
+      $code-block-bg: transparent !default;
+      ```
+      to avoid quarto default value which is body-bg
+
+  - Ignored default from settings.scss are
+    - `$presentation-h2-font-size:`
+    - `$presentation-h3-font-size:`
+    - `$presentation-h4-font-size:`
+    - `$font-family-monospace:`
+    - `$presentation-block-margin:`
+  - Values from `quarto.scss` are used even for ported themes
+
+  - `$presentation-heading-font`
+    - We remove Impact font if present as fallback

news/changelog-1.6.md

@@ -12,6 +12,10 @@ All changes included in 1.6:
 - ([#10328](https://github.com/quarto-dev/quarto-cli/issues/10328)): Interpret subcells as subfloats when subcap count matches subcell count.
 - ([#10624](https://github.com/quarto-dev/quarto-cli/issues/10624)): Don't crash when proof environments are empty in `pdf`.
 
+## `revealjs` Format
+
+- Update to Reveal JS 5.1.0.
+
 ## `typst` Format
 
 - ([#10168](https://github.com/quarto-dev/quarto-cli/issues/10168)): Support `csl` bibliography style.

package/src/common/patches/revealjs-plugin-0001-pdfexport-to-export-toggle-fun.patch

@@ -0,0 +1,14 @@
+diff --git a/src/resources/formats/revealjs/plugins/pdfexport/pdfexport.js b/src/resources/formats/revealjs/plugins/pdfexport/pdfexport.js
+index c399fa9de..bf9104c8e 100644
+--- a/src/resources/formats/revealjs/plugins/pdfexport/pdfexport.js
++++ b/src/resources/formats/revealjs/plugins/pdfexport/pdfexport.js
+@@ -100,6 +100,9 @@ var PdfExport = ( function( _Reveal ){
+ 		Plugin.init = function( _Reveal ){
+ 			Reveal = _Reveal;
+ 			install();
++		};
++		Plugin.togglePdfExport = function () {
++      togglePdfExport();
+     };
+ 	}
+

package/src/common/patches/revealjs-theme-0001-beige.patch

@@ -0,0 +1,73 @@
+diff --git a/src/resources/formats/revealjs/themes/beige.scss b/src/resources/formats/revealjs/themes/beige.scss
+index 06957c42d..193eac567 100644
+--- a/src/resources/formats/revealjs/themes/beige.scss
++++ b/src/resources/formats/revealjs/themes/beige.scss
+@@ -2,43 +2,40 @@
+  * Beige theme for reveal.js.
+  *
+  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
++ * 
++ * Adapted for Quarto by Posit, PBC
++ * Copyright (C) 2024 Posit, PBC
+  */
+
+-
+-// Default mixins and settings -----------------
+-@import "../template/mixins";
+-@import "../template/settings";
+-// ---------------------------------------------
+-
+-
++/*-- scss:defaults --*/
+
+ // Include theme-specific fonts
+ @import url(./fonts/league-gothic/league-gothic.css);
+ @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
++// fonts
++$font-family-sans-serif: Lato, sans-serif !default;
+
+-// Override theme settings (see ../template/settings.scss)
+-$body-color: #333;
+-$presentation-heading-color: #333;
+-$presentation-heading-text-shadow: none;
+-$body-bg: #f7f3de;
+-$link-color: #8b743d;
+-$link-color-hover: lighten( $linkColor, 20% );
+-$selection-bg: rgba(79, 64, 28, 0.99);
+-$presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+-
+-$overlayElementBgColor: 0, 0, 0;
+-$overlayElementFgColor: 240, 240, 240;
++// Override theme settings
++$body-color: #333 !default;
++$body-bg: #f7f3de !default;
++$link-color: #8b743d !default;
++$selection-bg: rgba(79, 64, 28, 0.99) !default;
+
+-// Background generator
+-@mixin bodyBackground() {
+-	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
+-}
++$presentation-heading-font: "League Gothic", sans-serif !default;
++$presentation-heading-text-transform: uppercase !default;
++$presentation-h1-font-size: 3.77em !default;
++$presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
++  0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
++  0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
++  0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
++  0 20px 20px rgba(0, 0, 0, 0.15) !default;
+
+-// Change text colors against dark slide backgrounds
+-@include dark-bg-text-color(#fff);
++$overlayElementBgColor: 0, 0, 0 !default;
++$overlayElementFgColor: 240, 240, 240 !default;
+
++/*-- scss:mixins --*/
+
+-// Theme template ------------------------------
+-@import "../template/theme";
+-// ---------------------------------------------
++@mixin bodyBackground() {
++  @include radial-gradient(rgba(247, 242, 211, 1), rgba(255, 255, 255, 1));
++}

package/src/common/patches/revealjs-theme-0001-blood.patch

@@ -0,0 +1,125 @@
+diff --git a/src/resources/formats/revealjs/themes/blood.scss b/src/resources/formats/revealjs/themes/blood.scss
+index c64acd1b7..fe4addaf4 100644
+--- a/src/resources/formats/revealjs/themes/blood.scss
++++ b/src/resources/formats/revealjs/themes/blood.scss
+@@ -6,82 +6,73 @@
+  * "monokai_sublime.css" available from
+  * https://github.com/isagalaev/highlight.js/
+  *
+- * For other themes, change $code-bg accordingly.
++ * For other themes, change $codeBackground accordingly.
+  *
++ * Adapted for Quarto by Posit, PBC
++ * Copyright (C) 2024 Posit, PBC
+  */
+
+- // Default mixins and settings -----------------
+-@import "../template/mixins";
+-@import "../template/settings";
+-// ---------------------------------------------
++/*-- scss:defaults --*/
+
+ // Include theme-specific fonts
+-
+ @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
+
+ // Colors used in the theme
+ $blood: #a23;
+ $coal: #222;
+-$codeBackground: #23241f;
++$code-bg: #23241f !default;
+
+-$body-bg: $coal;
++$body-bg: $coal !default;
+
+ // Main text
+-$font-family-sans-serif: Ubuntu, 'sans-serif';
+-$body-color: #eee;
++$font-family-sans-serif: Ubuntu, "sans-serif" !default;
++$body-color: #eee !default;
+
+ // Headings
+-$presentation-heading-font: Ubuntu, 'sans-serif';
+-$presentation-heading-text-shadow: 2px 2px 2px $coal;
++$presentation-heading-font: Ubuntu, "sans-serif" !default;
++$presentation-heading-text-shadow: 2px 2px 2px $body-bg !default;
++$presentation-heading-font-weight: 700 !default;
++$presentation-h1-font-size: 3.77em !default;
+
+-// h1 shadow, borrowed humbly from 
++// h1 shadow, borrowed humbly from
+ // (c) Default theme by Hakim El Hattab
+-$presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
++$presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
++  0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
++  0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
++  0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
++  0 20px 20px rgba(0, 0, 0, 0.15) !default;
++$presentation-heading-text-transform: uppercase !default;
+
+ // Links
+-$link-color: $blood;
+-$link-color-hover: lighten( $linkColor, 20% );
++$link-color: $blood !default;
+
+ // Text selection
+-$selection-bg: $blood;
+-$selection-color: #fff;
+-
+-// Change text colors against dark slide backgrounds
+-@include light-bg-text-color(#222);
+-
+-
+-// Theme template ------------------------------
+-@import "../template/theme";
+-// ---------------------------------------------
++$selection-bg: $link-color !default;
++$selection-color: #fff !default;
+
+-// some overrides after theme template import
++/*-- scss:rules --*/
+
+ .reveal p {
+-    font-weight: 300;
+-    text-shadow: 1px 1px $coal;
++  font-weight: 300;
++  text-shadow: 1px 1px $body-bg;
+ }
+
+ section.has-light-background {
+-	p, h1, h2, h3, h4 {
+-		text-shadow: none;
+-	}
+-}
+-
+-.reveal h1,
+-.reveal h2,
+-.reveal h3,
+-.reveal h4,
+-.reveal h5,
+-.reveal h6 {
+-    font-weight: 700;
++  p,
++  h1,
++  h2,
++  h3,
++  h4 {
++    text-shadow: none;
++  }
+ }
+
+ .reveal p code {
+-    background-color: $codeBackground;
+-    display: inline-block;
+-    border-radius: 7px;
++  background-color: $code-bg;
++  display: inline-block;
++  border-radius: 7px;
+ }
+
+ .reveal small code {
+-    vertical-align: baseline;
+-}
+\ No newline at end of file
++  vertical-align: baseline;
++}