[revealjs] pin to commit hash version to get fix on slide scaling for JS lib (#2437)

Current version use `zoom` attributes which messes up JS lib like plotly. This new version using `scale()` transform only.

Fixes #2430

Author: cderv

configuration

@@ -26,7 +26,8 @@ export POPPER_JS=2.11.4
 export CLIPBOARD_JS=2.0.10
 export TIPPY_JS=6.3.7
 export PDF_JS=2.8.335
-export REVEAL_JS=4.2.0
+# 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_MENU=2.1.0
 export REVEAL_JS_CHALKBOARD=a88c134e2cf3c7780448db003e7329c3cbd8cfb4
 export REVEAL_JS_PDFEXPORT=2.0.1

package/src/common/update-html-dependencies.ts

@@ -273,7 +273,7 @@ export async function updateHtmlDepedencies(config: Configuration) {
         join(revealJs, "plugin"),
       );
     },
-    false,
+    true,
     false,
   );
 
@@ -664,7 +664,8 @@ async function updatePandocHighlighting(config: Configuration) {
     "pandoc",
     "highlight-styles",
   );
-  const pandoc = Deno.env.get("QUARTO_PANDOC") || join(config.directoryInfo.bin, "tools", "pandoc");
+  const pandoc = Deno.env.get("QUARTO_PANDOC") ||
+    join(config.directoryInfo.bin, "tools", "pandoc");
 
   // List  the styles
   const result = await runCmd(pandoc, ["--list-highlight-styles"]);

src/resources/formats/revealjs/reveal/css/layout.scss

@@ -16,7 +16,7 @@
 	box-sizing: border-box;
 }
 
-// Text that auto-fits it's container
+// Text that auto-fits its container
 .reveal .r-fit-text {
 	display: inline-block; // https://github.com/rikschennink/fitty#performance
 	white-space: nowrap;

src/resources/formats/revealjs/reveal/css/reveal.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /**
  * reveal.js
  * http://revealjs.com
@@ -31,6 +33,16 @@ html.reveal-full-page {
 	color: #000;
 }
 
+// Force the presentation to cover the full viewport when we
+// enter fullscreen mode. Fixes sizing issues in Safari.
+.reveal-viewport:fullscreen {
+	top: 0 !important;
+	left: 0 !important;
+	width: 100% !important;
+	height: 100% !important;
+	transform: none !important;
+}
+
 
 /*********************************************
  * VIEW FRAGMENTS
@@ -247,11 +259,11 @@ $controlsArrowAngleActive: 36deg;
 
 @mixin controlsArrowTransform( $angle ) {
 	&:before {
-		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle );
 	}
 
 	&:after {
-		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( -$angle );
 	}
 }
 
@@ -300,11 +312,11 @@ $controlsArrowAngleActive: 36deg;
 		left: 0;
 		width: $controlArrowLength;
 		height: $controlArrowThickness;
-		border-radius: $controlArrowThickness/2;
+		border-radius: $controlArrowThickness*0.5;
 		background-color: currentColor;
 
 		transition: all 0.15s ease, background-color 0.8s ease;
-		transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
+		transform-origin: math.div(floor(($controlArrowThickness*0.5)*10), 10) 50%;
 		will-change: transform;
 	}
 
@@ -326,7 +338,7 @@ $controlsArrowAngleActive: 36deg;
 
 	.navigate-left {
 		right: $controlArrowSize + $controlArrowSpacing*2;
-		bottom: $controlArrowSpacing + $controlArrowSize/2;
+		bottom: $controlArrowSpacing + $controlArrowSize*0.5;
 		transform: translateX( -10px );
 
 		&.highlight {
@@ -336,7 +348,7 @@ $controlsArrowAngleActive: 36deg;
 
 	.navigate-right {
 		right: 0;
-		bottom: $controlArrowSpacing + $controlArrowSize/2;
+		bottom: $controlArrowSpacing + $controlArrowSize*0.5;
 		transform: translateX( 10px );
 
 		.controls-arrow {
@@ -349,7 +361,7 @@ $controlsArrowAngleActive: 36deg;
 	}
 
 	.navigate-up {
-		right: $controlArrowSpacing + $controlArrowSize/2;
+		right: $controlArrowSpacing + $controlArrowSize*0.5;
 		bottom: $controlArrowSpacing*2 + $controlArrowSize;
 		transform: translateY( -10px );
 
@@ -359,7 +371,7 @@ $controlsArrowAngleActive: 36deg;
 	}
 
 	.navigate-down {
-		right: $controlArrowSpacing + $controlArrowSize/2;
+		right: $controlArrowSpacing + $controlArrowSize*0.5;
 		bottom: -$controlArrowSpacing;
 		padding-bottom: $controlArrowSpacing;
 		transform: translateY( 10px );
@@ -515,25 +527,25 @@ $controlsArrowAngleActive: 36deg;
 		.navigate-left {
 			top: 50%;
 			left: $spacing;
-			margin-top: -$controlArrowSize/2;
+			margin-top: -$controlArrowSize*0.5;
 		}
 
 		.navigate-right {
 			top: 50%;
 			right: $spacing;
-			margin-top: -$controlArrowSize/2;
+			margin-top: -$controlArrowSize*0.5;
 		}
 
 		.navigate-up {
 			top: $spacing;
 			left: 50%;
-			margin-left: -$controlArrowSize/2;
+			margin-left: -$controlArrowSize*0.5;
 		}
 
 		.navigate-down {
 			bottom: $spacing - $controlArrowSpacing + 0.3em;
 			left: 50%;
-			margin-left: -$controlArrowSize/2;
+			margin-left: -$controlArrowSize*0.5;
 		}
 	}
 
@@ -769,9 +781,6 @@ $controlsArrowAngleActive: 36deg;
  *********************************************/
 
 @each $stylename in slide, linear {
-	.reveal.#{$stylename} section {
-		backface-visibility: hidden;
-	}
 	@include transition-horizontal-past(#{$stylename}) {
 		transform: translate(-150%, 0);
 	}
@@ -1167,7 +1176,6 @@ $controlsArrowAngleActive: 36deg;
 .reveal[data-background-transition=slide]>.backgrounds .slide-background:not([data-background-transition]),
 .reveal>.backgrounds .slide-background[data-background-transition=slide] {
 	opacity: 1;
-	backface-visibility: hidden;
 }
 	.reveal[data-background-transition=slide]>.backgrounds .slide-background.past:not([data-background-transition]),
 	.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
@@ -1701,7 +1709,7 @@ $notesWidthPercent: 25%;
 .reveal .speaker-notes {
 	display: none;
 	position: absolute;
-	width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
+	width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent,100))) * 1%;
 	height: 100%;
 	top: 0;
 	left: 100%;
@@ -1764,7 +1772,6 @@ $notesWidthPercent: 25%;
 		top: 100%;
 		left: 0;
 		width: 100%;
-		height: (30/0.7)*1%;
 		height: 30vh;
 		border: 0;
 	}
@@ -1778,7 +1785,6 @@ $notesWidthPercent: 25%;
 
 	.reveal.show-notes .speaker-notes {
 		top: 100%;
-		height: (40/0.6)*1%;
 		height: 40vh;
 	}
 

src/resources/formats/revealjs/reveal/dist/reveal.css

@@ -106,7 +106,7 @@ const Plugin = {
 
 			var scrollState = { currentBlock: block };
 
-			// If there is at least one highlight step, generate
+			// If there is more than one highlight step, generate
 			// fragments
 			var highlightSteps = Plugin.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
 			if( highlightSteps.length > 1 ) {
@@ -142,7 +142,7 @@ const Plugin = {
 
 				} );
 
-				block.removeAttribute( 'data-fragment-index' )
+				block.removeAttribute( 'data-fragment-index' );
 				block.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlightSteps[0] ] ) );
 
 			}