Fix print mode not showing content in Markdown slides and Animated slides (#1299)

Author: carloskelly13

.changeset/dull-books-provide.md

@@ -0,0 +1,5 @@
+---
+'spectacle': patch
+---
+
+Fix print mode not showing content for Markdown and Animated item slides.

packages/spectacle/src/components/appear.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useContext } from 'react';
 import { animated, useSpring } from 'react-spring';
 import { useSteps } from '../hooks/use-steps';
 import { SlideContext } from './slide/slide';
+import { DeckContext } from './deck/deck';
 
 const SteppedComponent = (props: SteppedComponentProps): JSX.Element => {
   const {
@@ -17,6 +18,8 @@ const SteppedComponent = (props: SteppedComponentProps): JSX.Element => {
     inactiveStyle = { opacity: '0' }
   } = props;
   const slideContext = useContext(SlideContext);
+  const { inPrintMode, inOverviewMode } = useContext(DeckContext);
+
   if (slideContext === null) {
     throw new Error(
       'This component must be used within a SlideContext.Provider. Did you' +
@@ -51,7 +54,7 @@ const SteppedComponent = (props: SteppedComponentProps): JSX.Element => {
       {placeholder}
       <AnimatedEl
         style={
-          alwaysAppearActive
+          alwaysAppearActive || inPrintMode || inOverviewMode
             ? (activeStyle as React.CSSProperties)
             : springStyle
         }

packages/spectacle/src/components/deck/deck.tsx

@@ -86,10 +86,10 @@ DeckContext.displayName = 'DeckContext';
 const noop = () => {};
 
 /**
- * The PDF DPI is 96. We want to scale the slide down because it's a 1:1 px to 1/100th of an inch.
- * However there are some unchangeable margins that make 0.96 too big, so we use 0.959 to prevent overflow.
+ * By default, Spectacle will maintain a 100% zoom on print/export mode. This can be customized if the
+ * user wants to select a different paper size.
  */
-const DEFAULT_PRINT_SCALE = 0.959;
+const DEFAULT_PRINT_SCALE = 1.0;
 const DEFAULT_OVERVIEW_SCALE = 0.25;
 
 type PortalProps = {

packages/spectacle/src/components/print-mode/index.tsx

@@ -10,15 +10,14 @@ const Backdrop = styled.div`
   background-color: white;
 `;
 
-type PrintStyleProps = { pageSize: string; pageOrientation: string };
+type PrintStyleProps = { pageSize: string };
 const PrintStyle = createGlobalStyle<PrintStyleProps>`
   @media print {
     body, html {
       margin: 0;
     }
     @page {
-      size: ${({ pageSize, pageOrientation }) =>
-        `${pageSize} ${pageOrientation}`.trim()};
+      size: ${({ pageSize }) => pageSize};
     }
     ${AnimatedDiv} {
       @page {
@@ -33,19 +32,15 @@ export default function PrintMode({
   theme,
   exportMode,
   pageSize,
-  pageOrientation = '',
   backgroundImage,
   template
 }: PrintModeProps) {
   const width = theme?.size?.width || defaultTheme.size.width;
   const height = theme?.size?.height || defaultTheme.size.height;
-  const computedPageSize = pageSize || `${width / 100}in ${height / 100}in`;
+  const computedPageSize = pageSize || `${width}px ${height}px`;
   return (
     <>
-      <PrintStyle
-        pageSize={computedPageSize}
-        pageOrientation={pageOrientation}
-      />
+      <PrintStyle pageSize={computedPageSize} />
       <DeckInternal
         printMode
         exportMode={exportMode}