feat(export): editable PPTX export with native shapes and text (#2722)

Co-authored-by: Anthony Fu <github@antfu.me>
Co-authored-by: Anthony Fu (via agent) <reg-github-bot@antfu.me>

Author: 3 people

docs/builtin/cli.md

@@ -70,7 +70,7 @@ Export slides to PDF (or other format). See <LinkInline link="guide/exporting" /
 Options:
 
 - `--output` (`string`, default: use `exportFilename` (see https://sli.dev/custom/#frontmatter-configures) or use `[entry]-export`): path to the output.
-- `--format` (`'pdf', 'png', 'pptx', 'md'`, default: `'pdf'`): output format.
+- `--format` (`'pdf', 'png', 'pptx', 'pptx-editable', 'md'`, default: `'pdf'`): output format. `pptx` exports each slide as an image; `pptx-editable` rebuilds them as native PowerPoint shapes with selectable text.
 - `--timeout` (`number`, default: `30000`): timeout for rendering the print page (see https://playwright.dev/docs/api/class-page#page-goto).
 - `--range` (`string`): page ranges to export (example: `'1,4-5,6'`).
 - `--dark` (`boolean`, default: `false`): export as dark theme.

docs/guide/exporting.md

@@ -72,6 +72,28 @@ Note that all the slides in the PPTX file will be exported as images, so the tex
 
 In this mode, the `--with-clicks` option is enabled by default. To disable it, pass `--with-clicks false`.
 
+### Editable PPTX
+
+If the recipient needs to edit the deck rather than only present it, export it with native shapes instead of pictures:
+
+```bash
+$ slidev export --format pptx-editable
+```
+
+The slides are measured in the browser and rebuilt as PowerPoint shapes, so text is selectable and editable, boxes can be moved and recolored, and presenter notes are carried over as usual. This does not replace `--format pptx`, which stays the most visually faithful option.
+
+What stays a picture: anything PowerPoint has no equivalent for. That includes SVG (so Mermaid diagrams and icons), `<canvas>`, `<iframe>`, videos, KaTeX formulas, CSS gradients, `filter`, `backdrop-filter`, `mix-blend-mode` and `clip-path`. Only the element concerned becomes a picture, not the whole slide.
+
+If a slide cannot be rebuilt safely, or ends up mostly pictures anyway, it falls back to the same image export used by `--format pptx`, for that slide alone, and the reason is printed.
+
+Worth knowing before you send the file on:
+
+- A `.pptx` names fonts, it does not embed them. The export prints which font families it referenced; recipients need those installed or PowerPoint will substitute.
+- PowerPoint does not measure text exactly as a browser does, so a long paragraph may wrap onto a different number of lines.
+- Decorations a theme draws with `::before` or `::after` in normal flow are left out, and the export lists them. Code block line numbers are one of these: they come from a CSS counter, which has no text and no box that a computed style can report.
+
+Like `--format pptx`, this exports one slide per click step unless you pass `--with-clicks false`. `--per-slide` is not supported with it.
+
 ### PNGs and Markdown
 
 When passing in the `--format png` option, Slidev will export PNG images for each slide instead of a PDF:

packages/slidev/node/cli.ts

@@ -642,7 +642,7 @@ function exportOptions<T>(args: Argv<T>) {
     })
     .option('format', {
       type: 'string',
-      choices: ['pdf', 'png', 'pptx', 'md'],
+      choices: ['pdf', 'png', 'pptx', 'pptx-editable', 'md'],
       describe: 'output format',
     })
     .option('timeout', {

packages/slidev/node/commands/export.ts

@@ -21,7 +21,7 @@ export interface ExportOptions {
   slides: SlideInfo[]
   port?: number
   base?: string
-  format?: 'pdf' | 'png' | 'pptx' | 'md'
+  format?: 'pdf' | 'png' | 'pptx' | 'pptx-editable' | 'md'
   output?: string
   timeout?: number
   wait?: number
@@ -221,6 +221,9 @@ export async function exportSlides({
       const buffers = await genPagePng(false)
       await genPagePptx(buffers)
     }
+    else if (format === 'pptx-editable') {
+      await genPagePptxEditable()
+    }
     else {
       throw new Error(`[slidev] Unsupported exporting format "${format}"`)
     }
@@ -544,6 +547,26 @@ export async function exportSlides({
     await fs.writeFile(output, buffer)
   }
 
+  // Native shapes and editable text, rather than one picture per slide. The
+  // walker, normalizer and builder live in ./pptx, so this is a delegation.
+  async function genPagePptxEditable() {
+    if (perSlide) {
+      // Per-slide mode never renders the print page the measurement depends
+      // on. Failing beats writing a deck missing every slide but the first.
+      throw new Error('[slidev] `--per-slide` is not supported with `--format pptx-editable`')
+    }
+
+    const { exportPptxEditable, reportEditableExport } = await import('./pptx')
+    const result = await exportPptxEditable({ page, slides, width, height, pages, go }, output)
+    // So the "exported to ..." line names the file that was actually written.
+    output = result.output
+
+    // The progress bar repaints on a timer with the cursor hidden, so anything
+    // written while it runs is interleaved with it or overwritten.
+    progress.stop()
+    reportEditableExport(result)
+  }
+
   // Adds metadata (title, author, keywords) to PDF document, mutating it
   function addPdfMetadata(pdf: PDFDocument): void {
     const titleSlide = slides[0]
@@ -612,7 +635,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     slides: options.data.slides,
     total: options.data.slides.length,
     range,
-    format: (format || 'pdf') as 'pdf' | 'png' | 'pptx' | 'md',
+    format: (format || 'pdf') as 'pdf' | 'png' | 'pptx' | 'pptx-editable' | 'md',
     timeout: timeout ?? 30000,
     wait: wait ?? 0,
     waitUntil: waitUntil === 'none' ? undefined : (waitUntil ?? 'networkidle') as 'networkidle' | 'load' | 'domcontentloaded',
@@ -621,7 +644,9 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     routerMode: options.data.config.routerMode === 'memory' ? 'history' : options.data.config.routerMode,
     width: options.data.config.canvasWidth,
     height: Math.round(options.data.config.canvasWidth / options.data.config.aspectRatio),
-    withClicks: withClicks ?? format === 'pptx',
+    // Both pptx formats default to one slide per click step. Testing the
+    // exact string here silently collapsed click steps for the editable one.
+    withClicks: withClicks ?? !!format?.startsWith('pptx'),
     executablePath,
     withToc: withToc || false,
     perSlide: perSlide || false,