@file-viewer/pptx 2.2.8 → 2.3.0

package/dist/viewer.d.ts

@@ -1,3 +1,4 @@
+import type { PptxPresentationState } from './presentation';
 import type { PptxViewerOptions } from './types';
 export declare class PptxViewer {
     static open(buffer: ArrayBuffer, target: HTMLElement, options?: PptxViewerOptions): Promise<PptxViewer>;
@@ -16,6 +17,9 @@ export declare class PptxViewer {
     private previewThumbnailDataUrl;
     private slideSize;
     private slideRecords;
+    private totalSlides;
+    private savedScroll;
+    private pendingScrollRestore;
     private slideWindowTarget;
     private slideWindowListeners;
     private slideWindowFrame;
@@ -24,10 +28,38 @@ export declare class PptxViewer {
     private readonly mediaRecords;
     private disposed;
     private completed;
+    private presentation;
     private readonly handleSlideWindowChange;
     private constructor();
     get zoomPercent(): number;
     get thumbnailDataUrl(): string | null;
+    get slideCount(): number;
+    get slideDimensions(): {
+        width: number;
+        height: number;
+    } | null;
+    get presenting(): boolean;
+    get presentationSlideNumber(): number;
+    private get styleRoot();
+    /**
+     * Where the slideshow overlay is mounted. It has to share a root with the injected slide styles,
+     * or the engine's scoped CSS stops applying once the slides move into the overlay.
+     */
+    get presentationRoot(): ShadowRoot | HTMLElement;
+    /** Force a slide out of the virtualized window so the slideshow can show it immediately. */
+    ensureSlideRendered(slideNumber: number): Element | null;
+    refreshLayout(): void;
+    /**
+     * Remember where the deck was scrolled before the slideshow moves the scale
+     * box into the overlay. Moving it collapses the scroller and clamps scrollTop
+     * to zero, so the position has to be captured up front and restored on exit.
+     */
+    saveScrollPosition(): void;
+    restoreScrollPosition(): void;
+    emitPresentationChange(state: PptxPresentationState): void;
+    enterPresentation(slideNumber?: number): Promise<void>;
+    exitPresentation(): void;
+    togglePresentation(slideNumber?: number): Promise<void>;
     open(): Promise<void>;
     setZoom(percent: number): Promise<void>;
     destroy(): void;

package/dist/viewer.js

@@ -1,6 +1,8 @@
 import { renderPptxPostProcessing } from './chart.js';
 import { resolvePptxEngineOptions, RECOMMENDED_ZIP_LIMITS } from './options.js';
-import { ensurePptxViewerStyles, scopePptxContentStyleText } from './styles.js';
+import { PptxPresentation } from './presentation.js';
+import { sanitizePptxCss, sanitizePptxMarkup } from './sanitize.js';
+import { ensurePptxViewerStyles } from './styles.js';
 import { createPptxWorker } from './worker.js';
 const clamp = (value, min, max) => {
     return Math.min(max, Math.max(min, value));
@@ -45,10 +47,9 @@ const ensureZipWithinLimits = (buffer, options) => {
     }
 };
 const appendHtml = (container, html) => {
-    const template = container.ownerDocument.createElement('template');
-    template.innerHTML = html;
-    const nodes = Array.from(template.content.children);
-    container.append(template.content);
+    const fragment = sanitizePptxMarkup(container.ownerDocument, html);
+    const nodes = Array.from(fragment.children);
+    container.append(fragment);
     return nodes[0] || null;
 };
 const escapeHtml = (value) => String(value !== null && value !== void 0 ? value : '')
@@ -96,6 +97,13 @@ export class PptxViewer {
         this.previewThumbnailDataUrl = null;
         this.slideSize = null;
         this.slideRecords = [];
+        // Total slides received from the worker. The windowed path mirrors this in
+        // slideRecords, but the default (non-windowed) path appends slides straight
+        // into the content node without creating records, so the deck size has to be
+        // counted independently of the virtualization bookkeeping.
+        this.totalSlides = 0;
+        this.savedScroll = null;
+        this.pendingScrollRestore = null;
         this.slideWindowTarget = null;
         this.slideWindowListeners = [];
         this.slideWindowFrame = 0;
@@ -104,6 +112,7 @@ export class PptxViewer {
         this.mediaRecords = new Map();
         this.disposed = false;
         this.completed = false;
+        this.presentation = null;
         this.handleSlideWindowChange = () => this.scheduleSlideWindowUpdate();
         this.buffer = buffer;
         this.target = target;
@@ -124,9 +133,111 @@ export class PptxViewer {
     get thumbnailDataUrl() {
         return this.previewThumbnailDataUrl;
     }
+    get slideCount() {
+        return this.totalSlides;
+    }
+    get slideDimensions() {
+        var _a, _b;
+        const width = Number((_a = this.slideSize) === null || _a === void 0 ? void 0 : _a.width);
+        const height = Number((_b = this.slideSize) === null || _b === void 0 ? void 0 : _b.height);
+        return Number.isFinite(width) && width > 0 && Number.isFinite(height) && height > 0
+            ? { width, height }
+            : null;
+    }
+    get presenting() {
+        var _a;
+        return Boolean((_a = this.presentation) === null || _a === void 0 ? void 0 : _a.active);
+    }
+    get presentationSlideNumber() {
+        var _a, _b;
+        return (_b = (_a = this.presentation) === null || _a === void 0 ? void 0 : _a.slideNumber) !== null && _b !== void 0 ? _b : 1;
+    }
+    get styleRoot() {
+        var _a;
+        if (this.options.styleRoot) {
+            return this.options.styleRoot;
+        }
+        const documentRef = this.target.ownerDocument || document;
+        const root = this.target.getRootNode();
+        const ShadowRootCtor = (_a = documentRef.defaultView) === null || _a === void 0 ? void 0 : _a.ShadowRoot;
+        return ShadowRootCtor && root instanceof ShadowRootCtor
+            ? root
+            : documentRef;
+    }
+    /**
+     * Where the slideshow overlay is mounted. It has to share a root with the injected slide styles,
+     * or the engine's scoped CSS stops applying once the slides move into the overlay.
+     */
+    get presentationRoot() {
+        const documentRef = this.target.ownerDocument || document;
+        const styleRoot = this.styleRoot;
+        if (styleRoot !== documentRef) {
+            return styleRoot;
+        }
+        return documentRef.body || documentRef.documentElement;
+    }
+    /** Force a slide out of the virtualized window so the slideshow can show it immediately. */
+    ensureSlideRendered(slideNumber) {
+        const record = this.slideRecords.find(item => item.slideNumber === slideNumber);
+        if (!record) {
+            return null;
+        }
+        if (!record.rendered) {
+            this.renderSlideRecord(record);
+        }
+        return record.element;
+    }
+    refreshLayout() {
+        this.scheduleResize();
+    }
+    /**
+     * Remember where the deck was scrolled before the slideshow moves the scale
+     * box into the overlay. Moving it collapses the scroller and clamps scrollTop
+     * to zero, so the position has to be captured up front and restored on exit.
+     */
+    saveScrollPosition() {
+        const view = this.target.ownerDocument.defaultView || window;
+        const HTMLElementCtor = view.HTMLElement;
+        const scroller = this.slideWindowTarget || this.findSlideWindowTarget();
+        if (scroller instanceof HTMLElementCtor) {
+            this.savedScroll = { top: scroller.scrollTop, left: scroller.scrollLeft };
+        }
+        else {
+            this.savedScroll = { top: view.scrollY, left: view.scrollX };
+        }
+    }
+    restoreScrollPosition() {
+        if (this.savedScroll) {
+            this.pendingScrollRestore = this.savedScroll;
+            this.savedScroll = null;
+        }
+        this.scheduleResize();
+    }
+    emitPresentationChange(state) {
+        var _a, _b;
+        (_b = (_a = this.options).onPresentationChange) === null || _b === void 0 ? void 0 : _b.call(_a, state);
+    }
+    async enterPresentation(slideNumber) {
+        if (this.disposed || this.totalSlides === 0) {
+            return;
+        }
+        this.presentation || (this.presentation = new PptxPresentation(this, this.options.presentationLabels, this.options.presentationFullscreen));
+        await this.presentation.enter(slideNumber);
+    }
+    exitPresentation() {
+        var _a;
+        (_a = this.presentation) === null || _a === void 0 ? void 0 : _a.exit();
+    }
+    async togglePresentation(slideNumber) {
+        if (this.presenting) {
+            this.exitPresentation();
+            return;
+        }
+        await this.enterPresentation(slideNumber);
+    }
     async open() {
         ensureZipWithinLimits(this.buffer, this.options);
-        ensurePptxViewerStyles(this.target.ownerDocument || document, this.options.styleRoot);
+        ensurePptxViewerStyles(this.target.ownerDocument || document, this.styleRoot);
         this.target.replaceChildren(this.scaleBox);
         this.attachResizeObserver();
         this.attachSlideWindowListeners();
@@ -138,20 +249,22 @@ export class PptxViewer {
         this.scheduleResize();
     }
     destroy() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         this.disposed = true;
+        (_a = this.presentation) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.presentation = null;
         this.previewThumbnailDataUrl = null;
         this.releaseCharts();
         this.releaseMedia();
-        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        (_b = this.worker) === null || _b === void 0 ? void 0 : _b.terminate();
         this.worker = null;
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
         this.resizeObserver = null;
         if (this.resizeFrame) {
-            (_c = this.target.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.cancelAnimationFrame(this.resizeFrame);
+            (_d = this.target.ownerDocument.defaultView) === null || _d === void 0 ? void 0 : _d.cancelAnimationFrame(this.resizeFrame);
         }
         if (this.slideWindowFrame) {
-            (_d = this.target.ownerDocument.defaultView) === null || _d === void 0 ? void 0 : _d.cancelAnimationFrame(this.slideWindowFrame);
+            (_e = this.target.ownerDocument.defaultView) === null || _e === void 0 ? void 0 : _e.cancelAnimationFrame(this.slideWindowFrame);
         }
         this.detachSlideWindowListeners();
         this.target.replaceChildren();
@@ -166,6 +279,7 @@ export class PptxViewer {
         this.previewThumbnailDataUrl = null;
         this.slideSize = null;
         this.slideRecords = [];
+        this.totalSlides = 0;
         this.content.replaceChildren();
         this.content.dataset.renderState = 'loading';
         try {
@@ -196,6 +310,7 @@ export class PptxViewer {
         switch (message.type) {
             case 'slide': {
                 this.clearThumbnail();
+                this.totalSlides += 1;
                 if (this.shouldWindowSlides()) {
                     this.appendWindowedSlide(String(message.data || ''), Number(message.slide_num || 0));
                 }
@@ -215,6 +330,7 @@ export class PptxViewer {
                 const error = message.data;
                 const html = buildSlideErrorHtml(slideNumber, error);
                 this.clearThumbnail();
+                this.totalSlides += 1;
                 if (this.shouldWindowSlides()) {
                     this.appendWindowedSlide(html, slideNumber);
                 }
@@ -257,11 +373,12 @@ export class PptxViewer {
         }
     }
     appendGlobalCss(css) {
-        if (!css) {
+        const sanitized = sanitizePptxCss(this.target.ownerDocument, css);
+        if (!sanitized) {
             return;
         }
         const style = this.target.ownerDocument.createElement('style');
-        style.textContent = scopePptxContentStyleText(css);
+        style.textContent = sanitized;
         this.content.append(style);
     }
     showThumbnail(base64Jpeg) {
@@ -419,6 +536,19 @@ export class PptxViewer {
         }
         const windowOptions = this.getSlideWindowOptions();
         const indexesToRender = this.getWindowedSlideIndexes(windowOptions);
+        // While presenting, the active slide and its neighbour live inside the fixed
+        // overlay, outside the scroll-view geometry the windowing code measures. Keep
+        // them mounted so a resize cannot unmount the slide that is on screen.
+        const presentation = this.presentation;
+        if (presentation === null || presentation === void 0 ? void 0 : presentation.active) {
+            const activeIndex = this.slideRecords.findIndex(record => record.slideNumber === presentation.slideNumber);
+            if (activeIndex >= 0) {
+                indexesToRender.add(activeIndex);
+                if (activeIndex + 1 < this.slideRecords.length) {
+                    indexesToRender.add(activeIndex + 1);
+                }
+            }
+        }
         let changed = false;
         this.slideRecords.forEach((record, index) => {
             if (indexesToRender.has(index)) {
@@ -747,15 +877,20 @@ export class PptxViewer {
         this.resizeFrame = view.requestAnimationFrame(() => this.resize());
     }
     resize() {
-        var _a, _b;
+        var _a, _b, _c;
+        // While presenting, the slideshow owns the transform of the same nodes.
+        if ((_a = this.presentation) === null || _a === void 0 ? void 0 : _a.active) {
+            this.presentation.layout();
+            return;
+        }
         const slides = this.getMountedSlideElements();
-        const sizeWidth = Number((_a = this.slideSize) === null || _a === void 0 ? void 0 : _a.width);
+        const sizeWidth = Number((_b = this.slideSize) === null || _b === void 0 ? void 0 : _b.width);
         const fallbackWidth = Number.isFinite(sizeWidth) && sizeWidth > 0 ? sizeWidth : 0;
         const slideWidth = Math.max(...slides.map(slide => slide.offsetWidth), fallbackWidth);
         if (!slideWidth) {
             return;
         }
-        const viewportWidth = this.target.clientWidth || ((_b = this.target.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) || slideWidth;
+        const viewportWidth = this.target.clientWidth || ((_c = this.target.parentElement) === null || _c === void 0 ? void 0 : _c.clientWidth) || slideWidth;
         this.fitScale = this.options.fitMode === 'none'
             ? 1
             : Math.min(1, viewportWidth / slideWidth);
@@ -766,6 +901,22 @@ export class PptxViewer {
         this.scaleBox.style.width = `${Math.ceil(slideWidth * effectiveScale)}px`;
         this.scaleBox.style.height = `${Math.ceil(this.content.scrollHeight * effectiveScale)}px`;
         this.scaleBox.style.minHeight = '';
+        // The scale box height is recomputed above; only now can the saved scroll
+        // position be applied without the scroller clamping it back to zero.
+        if (this.pendingScrollRestore) {
+            const { top, left } = this.pendingScrollRestore;
+            this.pendingScrollRestore = null;
+            const view = this.target.ownerDocument.defaultView || window;
+            const HTMLElementCtor = view.HTMLElement;
+            const scroller = this.slideWindowTarget || this.findSlideWindowTarget();
+            if (scroller instanceof HTMLElementCtor) {
+                scroller.scrollTop = top;
+                scroller.scrollLeft = left;
+            }
+            else {
+                view.scrollTo(left, top);
+            }
+        }
     }
     getMountedSlideElements() {
         var _a;