@open-press/core 1.1.4 → 1.2.1

package/src/openpress/workbench/Workbench.tsx

@@ -4,10 +4,8 @@ import {
   useState,
   type CSSProperties,
 } from "react";
-import { ExternalLink, Home, MousePointer2, Play, Ruler } from "lucide-react";
 import {
   getProjectIdentity,
-  resolveAnchorPageIndex,
   type DeploymentInfo,
   type HtmlPageBlock,
   type ReaderDocument,
@@ -34,14 +32,12 @@ import {
   type InlineDocumentSourceTarget,
 } from "./document";
 import {
-  DeploymentControl,
-  ExportImageControl,
-  PageZoomControl,
-  SearchControl,
   useDeploymentWorkbench,
 } from "./actions";
 import { PendingCommentsPanel, WorkbenchControlPanel, type WorkbenchPanel } from "./panels";
 import { WorkbenchShell } from "./shell";
+import { WorkbenchToolbarActions } from "./shell/WorkbenchToolbarActions";
+import { useWorkbenchNavigation } from "./hooks/useWorkbenchNavigation";
 import {
   formatPageGeometrySpec,
   formatInspectorSelection,
@@ -51,8 +47,9 @@ export function HtmlWorkbench({
   document,
   pages,
   style,
-  devMode,
+  workspaceMode,
   deploymentInfo,
+  pressSlug = null,
   onDocumentRefresh,
   onBackToWorkspace,
   onOpenPresentation,
@@ -61,8 +58,12 @@ export function HtmlWorkbench({
   document: ReaderDocument;
   pages: Array<HtmlPageBlock>;
   style: CSSProperties;
-  devMode: boolean;
+  workspaceMode: boolean;
   deploymentInfo: DeploymentInfo;
+  // Active Press slug — threaded down to useDeploymentWorkbench so the
+  // local PDF export endpoint can pick the right Press in multi-Press
+  // workspaces. Null when the workspace is at the gallery root.
+  pressSlug?: string | null;
   onDocumentRefresh?: () => void | Promise<void>;
   onBackToWorkspace?: () => void;
   onOpenPresentation?: (pageIndex: number) => void;
@@ -83,7 +84,7 @@ export function HtmlWorkbench({
     sourceBlocksByPath,
     projectMentionItems,
   } = useDocumentWorkbenchModel(document, displayPages);
-  const inspector = useInspector(document, { enabled: devMode });
+  const inspector = useInspector(document, { enabled: workspaceMode });
   const reader = useReaderRuntime({
     pageCount: Math.max(displayPages.length, 1),
     leftPanelBreakpoint: PUBLIC_DRAWER_BREAKPOINT,
@@ -96,7 +97,7 @@ export function HtmlWorkbench({
     pageCount: displayPages.length,
     layoutMode: pageLayoutMode,
   });
-  const deployment = useDeploymentWorkbench({ deploymentInfo });
+  const deployment = useDeploymentWorkbench({ deploymentInfo, pressSlug });
   const [inlineEditStatus, setInlineEditStatus] = useState<InlineDocumentEditStatus>({ state: "idle" });
   const [sourceEditorTarget, setSourceEditorTarget] = useState<InlineDocumentSourceTarget | null>(null);
 
@@ -117,7 +118,7 @@ export function HtmlWorkbench({
   // text cursor active would (a) show the I-beam instead of the inspector
   // crosshair, (b) allow accidental text selection that paints the whole
   // page (notably covers) with the browser ::selection color.
-  const inlineEditEnabled = devMode && !inspector.inspectorMode;
+  const inlineEditEnabled = workspaceMode && !inspector.inspectorMode;
   useInlineDocumentEditor({
     enabled: inlineEditEnabled,
     sourceContainerRef,
@@ -127,26 +128,16 @@ export function HtmlWorkbench({
     onDocumentEdited: onDocumentRefresh,
   });
 
-  const selectWorkspacePage = (pageIndex: number, options?: { behavior?: ScrollBehavior }) => {
-    reader.setPage(pageIndex, options);
-    if (
-      typeof window !== "undefined"
-      && window.innerWidth < PUBLIC_DRAWER_BREAKPOINT
-      && reader.rightPanelOpen
-    ) {
-      reader.toggleRightPanel();
-    }
-  };
-
-  const selectWorkspaceAnchor = (anchorId: string, pageIndex?: number) => {
-    const targetPageIndex = resolveAnchorPageIndex(anchorPageMap, displayPages.length, anchorId, pageIndex);
-    if (targetPageIndex === null) return false;
-    selectWorkspacePage(targetPageIndex, { behavior: "smooth" });
-    return true;
-  };
+  const { selectWorkspaceAnchor, selectWorkspacePage } = useWorkbenchNavigation({
+    anchorPageMap,
+    pages: displayPages,
+    rightPanelOpen: reader.rightPanelOpen,
+    setPage: reader.setPage,
+    toggleRightPanel: reader.toggleRightPanel,
+  });
 
   const comments = useInspectorComments({
-    devMode,
+    workspaceMode,
     inspector,
     sourceBlockMap,
     sourceBlocksByPath,
@@ -239,145 +230,41 @@ export function HtmlWorkbench({
   // don't rebuild the toolbar JSX. The toolbar depends on deploy/page/zoom
   // state and inspector mode, but never on the composer draft text.
   const toolbarActions = useMemo(() => (
-    <>
-      {onBackToWorkspace ? (
-        <div className="openpress-workbench-toolbar__group" aria-label="工作台導覽">
-          <button
-            type="button"
-            className="openpress-workbench-toolbar-action openpress-workbench-toolbar-action--back"
-            data-openpress-back-to-workspace
-            onClick={onBackToWorkspace}
-            title="回到工作台"
-            aria-label="回到工作台"
-          >
-            <Home aria-hidden="true" />
-            <span className="openpress-workbench-toolbar-action__label">工作台</span>
-          </button>
-        </div>
-      ) : null}
-      <div className="openpress-workbench-toolbar__group" aria-label="輸出">
-        <button
-          type="button"
-          className="openpress-workbench-toolbar-action"
-          data-openpress-public-export
-          data-openpress-toolbar-expanded={deployment.pdfToolbarExpanded ? "true" : "false"}
-          data-openpress-toolbar-active={deployment.pdfToolbarExpanded ? "true" : "false"}
-          disabled={deployment.pdfButtonDisabled}
-          onClick={deployment.handleOpenWorkbenchPdf}
-          title={deployment.pdfButtonText}
-          aria-label={deployment.pdfButtonText}
-        >
-          <ExternalLink aria-hidden="true" />
-          <span className="openpress-workbench-toolbar-action__label">{deployment.pdfButtonText}</span>
-          {deployment.pdfStatusMessage ? (
-            <span
-              className="openpress-dev-pdf-status"
-              data-openpress-pdf-status={deployment.pdfActionStatus}
-              role="status"
-              aria-live="polite"
-            >
-              <span className="openpress-dev-pdf-status__spinner" aria-hidden="true" />
-              <span>{deployment.pdfStatusMessage}</span>
-            </span>
-          ) : null}
-        </button>
-        <ExportImageControl
-          currentPageIndex={reader.currentPageIndex}
-          currentPageLabel={reader.currentPageLabel}
-          pressTitle={projectIdentity.name}
-        />
-      </div>
-      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--page" aria-label="頁面規格">
-        {isSlidePress && onOpenPresentation ? (
-          <button
-            type="button"
-            className="openpress-workbench-toolbar-action"
-            data-openpress-slide-present
-            data-openpress-toolbar-expanded="false"
-            data-openpress-toolbar-active="false"
-            aria-pressed="false"
-            title="進入放映模式"
-            aria-label="進入放映模式"
-            onClick={() => onOpenPresentation?.(reader.currentPageIndex)}
-          >
-            <Play aria-hidden="true" />
-            <span className="openpress-workbench-toolbar-action__label">放映</span>
-          </button>
-        ) : null}
-        <button
-          type="button"
-          className="openpress-workbench-page-geometry"
-          data-openpress-page-geometry
-          title={pageGeometry.title}
-          aria-label={`頁面規格 ${pageGeometry.title}`}
-        >
-          <Ruler aria-hidden="true" />
-          <span className="openpress-workbench-page-geometry__label">{pageGeometry.label}</span>
-          <span className="openpress-workbench-page-geometry__dimensions">{pageGeometry.dimensions}</span>
-        </button>
-        <PageZoomControl
-          scaleMode={pageViewport.scaleMode}
-          scaleLabel={pageViewport.scaleLabel}
-          pageLayoutMode={pageLayoutMode}
-          onScaleModeChange={pageViewport.setScaleMode}
-          onPageLayoutModeChange={setPageLayoutMode}
-        />
-      </div>
-      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--right" aria-label="工作台狀態與發布">
-        {devMode ? (
-          <SearchControl
-            sourceBlocksByPath={sourceBlocksByPath}
-            onSelectPage={selectWorkspacePage}
-          />
-        ) : null}
-        {devMode && editStatusMessage ? (
-          <span
-            className="openpress-dev-edit-status openpress-dev-edit-status--toolbar"
-            data-openpress-edit-status={inlineEditStatus.state}
-            role="status"
-            aria-live="polite"
-          >
-            {inlineEditStatus.state === "saving" ? <span className="openpress-dev-edit-status__spinner" aria-hidden="true" /> : null}
-            <span>{editStatusMessage}</span>
-          </span>
-        ) : null}
-        {devMode ? (
-          <button
-            type="button"
-            className="openpress-workbench-toolbar-action"
-            data-openpress-inspector-toggle
-            data-openpress-inspector-active={inspector.inspectorMode ? "true" : "false"}
-            data-openpress-toolbar-expanded={inspectorToolbarExpanded ? "true" : "false"}
-            data-openpress-toolbar-active={inspectorToolbarExpanded ? "true" : "false"}
-            onClick={() => inspector.setInspectorMode(!inspector.inspectorMode)}
-            aria-pressed={inspector.inspectorMode}
-            title={inspector.inspectorMode ? "關閉註解" : "開啟註解"}
-            aria-label={inspector.inspectorMode ? "關閉註解" : "開啟註解"}
-          >
-            <MousePointer2 aria-hidden="true" />
-            <span className="openpress-workbench-toolbar-action__label">{inspector.inspectorMode ? "註解中" : "註解"}</span>
-            <span className="openpress-dev-inspector-status">{inspectorSelectionLabel}</span>
-          </button>
-        ) : null}
-        {devMode && inspector.inspectorMode ? (
-          <span
-            className="openpress-dev-inspector-status"
-            role="status"
-            aria-live="polite"
-            data-openpress-inspector-comment-status={comments.inspectorCommentStatus}
-          >
-            {comments.inspectorCommentStatusMessage}
-          </span>
-        ) : null}
-        {deployment.localDeployEnabled ? (
-          <DeploymentControl
-            info={deployment.currentDeploymentInfo}
-            status={deployment.status}
-            onDeploy={deployment.handleDeploy}
-          />
-        ) : null}
-      </div>
-    </>
+    <WorkbenchToolbarActions
+      pages={displayPages}
+      currentPageIndex={reader.currentPageIndex}
+      pressTitle={projectIdentity.name}
+      theme={document.theme}
+      workspaceMode={workspaceMode}
+      sourceBlocksByPath={sourceBlocksByPath}
+      onSelectPage={selectWorkspacePage}
+      onBackToWorkspace={onBackToWorkspace}
+      isSlidePress={isSlidePress}
+      onOpenPresentation={onOpenPresentation}
+      pageGeometry={pageGeometry}
+      scaleMode={pageViewport.scaleMode}
+      scaleLabel={pageViewport.scaleLabel}
+      pageLayoutMode={pageLayoutMode}
+      onScaleModeChange={pageViewport.setScaleMode}
+      onPageLayoutModeChange={setPageLayoutMode}
+      inlineEditStatus={inlineEditStatus}
+      editStatusMessage={editStatusMessage}
+      inspectorMode={inspector.inspectorMode}
+      inspectorToolbarExpanded={inspectorToolbarExpanded}
+      inspectorSelectionLabel={inspectorSelectionLabel}
+      onInspectorModeChange={inspector.setInspectorMode}
+      inspectorCommentStatus={comments.inspectorCommentStatus}
+      inspectorCommentStatusMessage={comments.inspectorCommentStatusMessage}
+      deploymentInfo={deployment.currentDeploymentInfo}
+      deploymentStatus={deployment.status}
+      localDeployEnabled={deployment.localDeployEnabled}
+      onDeploy={deployment.handleDeploy}
+      onExportPdf={deployment.handleOpenWorkbenchPdf}
+      pdfDisabled={deployment.pdfButtonDisabled}
+      pdfLabel={deployment.pdfButtonText}
+      pdfStatusMessage={deployment.pdfStatusMessage}
+      pdfActionStatus={deployment.pdfActionStatus}
+    />
   ), [
     comments.inspectorCommentStatus,
     comments.inspectorCommentStatusMessage,
@@ -389,9 +276,10 @@ export function HtmlWorkbench({
     deployment.pdfButtonDisabled,
     deployment.pdfButtonText,
     deployment.pdfStatusMessage,
-    deployment.pdfToolbarExpanded,
     deployment.status,
-    devMode,
+    displayPages,
+    document.theme,
+    workspaceMode,
     editStatusMessage,
     inlineEditStatus.state,
     inspector.inspectorMode,
@@ -411,14 +299,12 @@ export function HtmlWorkbench({
     onBackToWorkspace,
     onOpenPresentation,
     reader.currentPageIndex,
-    reader.currentPageLabel,
     projectIdentity.name,
   ]);
 
   return (
     <WorkbenchShell
       style={style}
-      devMode={devMode}
       viewMode={viewMode}
       pressType={pressType}
       presentationMode={false}
@@ -491,15 +377,14 @@ export function HtmlWorkbench({
           <PublicPage
             pages={displayPages}
             currentPageIndex={reader.currentPageIndex}
-            devMode={devMode}
             sourceContainerRef={sourceContainerRef}
             registerPage={reader.registerPage}
-            exposeSourceData={devMode}
+            exposeSourceData={workspaceMode}
             inspector={inspector}
             onInternalAnchorNavigate={selectWorkspaceAnchor}
             pageLayoutMode={pageLayoutMode}
           />
-          {devMode ? (
+          {workspaceMode ? (
             <InlineInspectorLayer
               sourceContainerRef={sourceContainerRef}
               inspector={inspector}
@@ -508,7 +393,7 @@ export function HtmlWorkbench({
               geometryVersion={`${pageViewport.scaleMode}:${pageViewport.scale}:${pageLayoutMode}`}
             />
           ) : null}
-          {devMode ? (
+          {workspaceMode ? (
             <InlineSourceEditorLayer
               target={sourceEditorTarget}
               onClose={() => setSourceEditorTarget(null)}

package/src/openpress/workbench/actions/DeploymentControl.tsx

@@ -75,9 +75,9 @@ export function DeploymentControl({
         className="openpress-workbench-toolbar-action"
         data-openpress-deploy
         data-openpress-deploy-status={kind}
+        data-openpress-deploy-state={status}
         data-openpress-toolbar-expanded="false"
         data-openpress-toolbar-active="false"
-        data-deploy-status={status}
         aria-busy={busy ? "true" : "false"}
         aria-label={buttonText}
         title={description}

package/src/openpress/workbench/actions/ExportControl.tsx

@@ -0,0 +1,267 @@
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { ChevronDown, Download, FileDown, FileText, Image as ImageIcon } from "lucide-react";
+import { toPng } from "html-to-image";
+import type { HtmlPageBlock, Theme } from "../../document-model";
+import { PageThumbnails } from "../../reader";
+import { WorkbenchDialog } from "../dialog";
+
+type ExportDialog = "none" | "pdf" | "png";
+type PngExportStatus = "idle" | "exporting" | "done" | "error";
+
+export function ExportControl({
+  pages,
+  currentPageIndex,
+  pressTitle,
+  theme,
+  pdfHref,
+  onExportPdf,
+  pdfDisabled = false,
+  pdfLabel,
+  pdfStatusMessage,
+  pdfActionStatus,
+}: {
+  pages: HtmlPageBlock[];
+  currentPageIndex: number;
+  pressTitle: string;
+  theme?: Theme;
+  pdfHref?: string;
+  onExportPdf?: () => void;
+  pdfDisabled?: boolean;
+  pdfLabel?: string;
+  pdfStatusMessage?: string | null;
+  pdfActionStatus?: string;
+}) {
+  const menuId = useId();
+  const pdfTitleId = useId();
+  const pngTitleId = useId();
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [activeDialog, setActiveDialog] = useState<ExportDialog>("none");
+  const [pngPageIndex, setPngPageIndex] = useState(currentPageIndex);
+  const [selectedPngPageIndexes, setSelectedPngPageIndexes] = useState<Set<number>>(() => new Set());
+  const [pngStatus, setPngStatus] = useState<PngExportStatus>("idle");
+
+  useEffect(() => {
+    if (!dropdownOpen) return undefined;
+    const handlePointerDown = (event: PointerEvent) => {
+      if (event.target instanceof Node && rootRef.current?.contains(event.target)) return;
+      setDropdownOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setDropdownOpen(false);
+    };
+    window.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [dropdownOpen]);
+
+  const openPdf = () => { setDropdownOpen(false); setActiveDialog("pdf"); };
+  const openPng = () => {
+    setDropdownOpen(false);
+    setPngPageIndex(currentPageIndex);
+    setSelectedPngPageIndexes(createAllPageIndexSet(pages));
+    setPngStatus("idle");
+    setActiveDialog("png");
+  };
+  const closeDialog = () => setActiveDialog("none");
+
+  const togglePngPage = (pageIndex: number) => {
+    setSelectedPngPageIndexes((current) => {
+      const next = new Set(current);
+      if (next.has(pageIndex)) next.delete(pageIndex);
+      else next.add(pageIndex);
+      return next;
+    });
+  };
+
+  const selectAllPngPages = () => setSelectedPngPageIndexes(createAllPageIndexSet(pages));
+  const clearPngPages = () => setSelectedPngPageIndexes(new Set());
+
+  const handleExportPng = useCallback(async () => {
+    if (pngStatus === "exporting") return;
+    const pageIndexes = pages
+      .map((page) => page.pageNumber - 1)
+      .filter((pageIndex) => selectedPngPageIndexes.has(pageIndex));
+    if (pageIndexes.length === 0) return;
+    setPngStatus("exporting");
+    try {
+      const safeTitle = sanitizeFilename(pressTitle) || "openpress";
+      for (const pageIndex of pageIndexes) {
+        const pageEl = typeof window === "undefined"
+          ? null
+          : window.document.querySelector<HTMLElement>(`[data-openpress-page-index="${pageIndex}"]`);
+        if (!pageEl) throw new Error(`找不到第 ${pageIndex + 1} 頁元素`);
+        const dataUrl = await toPng(pageEl, { pixelRatio: 2, cacheBust: true, backgroundColor: "#ffffff" });
+        const safePage = String(pageIndex + 1).padStart(2, "0");
+        const link = window.document.createElement("a");
+        link.href = dataUrl;
+        link.download = `${safeTitle}-${safePage}.png`;
+        window.document.body.appendChild(link);
+        link.click();
+        link.remove();
+      }
+      setPngStatus("done");
+      window.setTimeout(() => setPngStatus("idle"), 1600);
+    } catch (error) {
+      console.error("[openpress] PNG export failed", error);
+      setPngStatus("error");
+      window.setTimeout(() => setPngStatus("idle"), 2400);
+    }
+  }, [pages, pngStatus, pressTitle, selectedPngPageIndexes]);
+
+  const hasPdf = Boolean(pdfHref ?? onExportPdf);
+  const selectedPngCount = selectedPngPageIndexes.size;
+  const pngButtonLabel = pngStatus === "exporting" ? "匯出中…"
+    : pngStatus === "done" ? "已下載"
+    : pngStatus === "error" ? "匯出失敗"
+    : selectedPngCount === 0 ? "請選擇圖片"
+    : `匯出 ${selectedPngCount} 張`;
+
+  return (
+    <div ref={rootRef} className="openpress-workbench-zoom-control-wrap" data-openpress-export-control>
+      <button
+        type="button"
+        className="openpress-workbench-zoom-control"
+        aria-label="匯出"
+        title="匯出"
+        aria-haspopup="menu"
+        aria-expanded={dropdownOpen}
+        aria-controls={dropdownOpen ? menuId : undefined}
+        onClick={() => setDropdownOpen((v) => !v)}
+      >
+        <FileDown aria-hidden="true" />
+        <span>匯出</span>
+        <ChevronDown className="openpress-workbench-zoom-control__chevron" aria-hidden="true" />
+      </button>
+
+      {dropdownOpen ? (
+        <div id={menuId} className="openpress-workbench-zoom-menu" role="menu" aria-label="匯出選項">
+          <div className="openpress-workbench-zoom-menu__section" role="group">
+            {hasPdf ? (
+              <button type="button" className="openpress-workbench-zoom-menu__item" role="menuitem" onClick={openPdf}>
+                <span className="openpress-workbench-zoom-menu__check" aria-hidden="true" />
+                <FileText aria-hidden="true" />
+                <span>PDF</span>
+              </button>
+            ) : null}
+            <button type="button" className="openpress-workbench-zoom-menu__item" role="menuitem" onClick={openPng}>
+              <span className="openpress-workbench-zoom-menu__check" aria-hidden="true" />
+              <ImageIcon aria-hidden="true" />
+              <span>PNG 圖片</span>
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {activeDialog === "pdf" ? (
+        <WorkbenchDialog
+          titleId={pdfTitleId}
+          eyebrow="匯出"
+          title="PDF"
+          closeLabel="關閉"
+          className="openpress-export-dialog"
+          onClose={closeDialog}
+          footer={
+            pdfHref ? (
+              <a
+                href={pdfHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="openpress-export-dialog__action"
+                onClick={closeDialog}
+              >
+                <Download aria-hidden="true" />
+                <span>下載 PDF</span>
+              </a>
+            ) : onExportPdf ? (
+              <button
+                type="button"
+                className="openpress-export-dialog__action"
+                disabled={pdfDisabled}
+                onClick={onExportPdf}
+              >
+                <Download aria-hidden="true" />
+                <span>{pdfLabel ?? "生成 PDF"}</span>
+                {pdfStatusMessage ? (
+                  <span
+                    className="openpress-dev-pdf-status"
+                    data-openpress-pdf-status={pdfActionStatus}
+                    role="status"
+                    aria-live="polite"
+                  >
+                    <span className="openpress-dev-pdf-status__spinner" aria-hidden="true" />
+                    <span>{pdfStatusMessage}</span>
+                  </span>
+                ) : null}
+              </button>
+            ) : null
+          }
+        >
+          <div className="openpress-export-dialog__body">
+            <p className="openpress-export-dialog__summary">共 {pages.length} 頁</p>
+          </div>
+        </WorkbenchDialog>
+      ) : null}
+
+      {activeDialog === "png" ? (
+        <WorkbenchDialog
+          titleId={pngTitleId}
+          eyebrow="匯出"
+          title="PNG 圖片"
+          closeLabel="關閉"
+          className="openpress-export-dialog openpress-export-png-dialog"
+          onClose={closeDialog}
+          footer={
+            <button
+              type="button"
+              className="openpress-export-dialog__action"
+              disabled={pngStatus === "exporting" || selectedPngCount === 0}
+              data-openpress-export-status={pngStatus}
+              onClick={handleExportPng}
+            >
+              <Download aria-hidden="true" />
+              <span>{pngButtonLabel}</span>
+            </button>
+          }
+        >
+          <div className="openpress-export-dialog__selection-bar">
+            <span>{selectedPngCount} / {pages.length} 張已選</span>
+            <div className="openpress-export-dialog__selection-actions">
+              <button type="button" onClick={selectAllPngPages}>全選</button>
+              <button type="button" onClick={clearPngPages}>清除</button>
+            </div>
+          </div>
+          <div className="openpress-export-dialog__thumbs">
+            <PageThumbnails
+              pages={pages}
+              currentPageIndex={pngPageIndex}
+              selectedPageIndexes={selectedPngPageIndexes}
+              onTogglePage={(idx) => {
+                setPngPageIndex(idx);
+                togglePngPage(idx);
+              }}
+              onSelectPage={(idx) => setPngPageIndex(idx)}
+              theme={theme}
+            />
+          </div>
+        </WorkbenchDialog>
+      ) : null}
+    </div>
+  );
+}
+
+function sanitizeFilename(value: string): string {
+  return value
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 80);
+}
+
+function createAllPageIndexSet(pages: HtmlPageBlock[]) {
+  return new Set(pages.map((page) => page.pageNumber - 1));
+}