@open-press/core 0.7.1 → 1.0.0

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

@@ -0,0 +1,96 @@
+import { useCallback, useState } from "react";
+import { Camera } from "lucide-react";
+import { toPng } from "html-to-image";
+
+type ExportStatus = "idle" | "exporting" | "done" | "error";
+
+// Exports the currently visible page as a PNG. Locates the page DOM via
+// the data-openpress-page-index attribute (set in PublicReaderPage) and
+// hands it to html-to-image, then triggers a browser download.
+//
+// Lives in the workbench toolbar so it's reachable for any Press shape
+// (manuscript / canvas / slide); for multi-page Press the user navigates
+// to the page first, then exports.
+export function ExportImageControl({
+  currentPageIndex,
+  currentPageLabel,
+  pressTitle,
+}: {
+  currentPageIndex: number;
+  currentPageLabel: string;
+  pressTitle: string;
+}) {
+  const [status, setStatus] = useState<ExportStatus>("idle");
+
+  const handleExport = useCallback(async () => {
+    if (status === "exporting") return;
+    setStatus("exporting");
+
+    try {
+      const pageEl = typeof window === "undefined"
+        ? null
+        : window.document.querySelector<HTMLElement>(
+            `[data-openpress-page-index="${currentPageIndex}"]`,
+          );
+      if (!pageEl) throw new Error("找不到目前頁面");
+
+      // pixelRatio: 2 — retina-ish; keeps text crisp without blowing the file size.
+      // cacheBust: true — force re-fetch of images so stale CORS doesn't taint the canvas.
+      const dataUrl = await toPng(pageEl, {
+        pixelRatio: 2,
+        cacheBust: true,
+        backgroundColor: "#ffffff",
+      });
+
+      const safeTitle = sanitizeFilename(pressTitle) || "openpress";
+      const safePage = sanitizeFilename(currentPageLabel) || String(currentPageIndex + 1);
+      const link = window.document.createElement("a");
+      link.href = dataUrl;
+      link.download = `${safeTitle}-${safePage}.png`;
+      window.document.body.appendChild(link);
+      link.click();
+      link.remove();
+
+      setStatus("done");
+      window.setTimeout(() => setStatus("idle"), 1600);
+    } catch (error) {
+      console.error("[openpress] page PNG export failed", error);
+      setStatus("error");
+      window.setTimeout(() => setStatus("idle"), 2400);
+    }
+  }, [currentPageIndex, currentPageLabel, pressTitle, status]);
+
+  const label = status === "exporting"
+    ? "匯出中…"
+    : status === "done"
+    ? "已下載"
+    : status === "error"
+    ? "匯出失敗"
+    : "PNG";
+  const title = "將目前頁面匯出為 PNG";
+
+  return (
+    <button
+      type="button"
+      className="openpress-workbench-toolbar-action"
+      data-openpress-page-png-export
+      data-openpress-export-status={status}
+      disabled={status === "exporting"}
+      onClick={handleExport}
+      title={title}
+      aria-label={title}
+    >
+      <Camera aria-hidden="true" />
+      <span className="openpress-workbench-toolbar-action__label">{label}</span>
+    </button>
+  );
+}
+
+function sanitizeFilename(value: string): string {
+  return value
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 80);
+}

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

@@ -0,0 +1,182 @@
+import { useEffect, useId, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { Check, ChevronDown, Columns2, File, ZoomIn } from "lucide-react";
+import {
+  PAGE_VIEWPORT_SCALE_OPTIONS,
+  type PageLayoutMode,
+  type PageViewportScaleMode,
+} from "../../reader";
+
+export function PageZoomControl({
+  scaleMode,
+  scaleLabel,
+  pageLayoutMode,
+  onScaleModeChange,
+  onPageLayoutModeChange,
+}: {
+  scaleMode: PageViewportScaleMode;
+  scaleLabel: string;
+  pageLayoutMode: PageLayoutMode;
+  onScaleModeChange: (mode: PageViewportScaleMode) => void;
+  onPageLayoutModeChange: (mode: PageLayoutMode) => void;
+}) {
+  const menuId = useId();
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const fixedOptions = PAGE_VIEWPORT_SCALE_OPTIONS.filter((option) => option.value.startsWith("scale-"));
+  const fitOptions = PAGE_VIEWPORT_SCALE_OPTIONS.filter((option) => option.value.startsWith("fit-"));
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const handlePointerDown = (event: PointerEvent) => {
+      if (event.target instanceof Node && rootRef.current?.contains(event.target)) return;
+      setOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
+  const selectScale = (mode: PageViewportScaleMode) => {
+    onScaleModeChange(mode);
+    setOpen(false);
+  };
+  const selectLayout = (mode: PageLayoutMode) => {
+    onPageLayoutModeChange(mode);
+    setOpen(false);
+  };
+
+  return (
+    <div className="openpress-workbench-zoom-control-wrap" ref={rootRef} data-openpress-page-zoom-control>
+      <button
+        type="button"
+        className="openpress-workbench-zoom-control"
+        data-openpress-page-zoom
+        data-openpress-scale-mode={scaleMode}
+        data-openpress-toolbar-active={scaleMode === "fit-width" ? "false" : "true"}
+        title={`頁面縮放 ${scaleLabel}`}
+        aria-label={`頁面縮放 ${scaleLabel}`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={open ? menuId : undefined}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <ZoomIn aria-hidden="true" />
+        <span>{scaleLabel}</span>
+        <ChevronDown className="openpress-workbench-zoom-control__chevron" aria-hidden="true" />
+      </button>
+      {open ? (
+        <div
+          id={menuId}
+          className="openpress-workbench-zoom-menu"
+          data-openpress-page-zoom-menu
+          role="menu"
+          aria-label="頁面顯示與縮放"
+        >
+          <div className="openpress-workbench-zoom-menu__section" role="group" aria-label="頁面模式">
+            <PageLayoutOption
+              mode="single"
+              active={pageLayoutMode === "single"}
+              icon={<File aria-hidden="true" />}
+              label="一頁"
+              onSelect={selectLayout}
+            />
+            <PageLayoutOption
+              mode="spread"
+              active={pageLayoutMode === "spread"}
+              icon={<Columns2 aria-hidden="true" />}
+              label="雙頁"
+              onSelect={selectLayout}
+            />
+          </div>
+          <div className="openpress-workbench-zoom-menu__divider" role="presentation" />
+          <div className="openpress-workbench-zoom-menu__section" role="group" aria-label="固定縮放">
+            {fixedOptions.map((option) => (
+              <ZoomOption
+                key={option.value}
+                mode={option.value}
+                active={scaleMode === option.value}
+                label={option.label}
+                onSelect={selectScale}
+              />
+            ))}
+          </div>
+          <div className="openpress-workbench-zoom-menu__divider" role="presentation" />
+          <div className="openpress-workbench-zoom-menu__section" role="group" aria-label="符合顯示">
+            {fitOptions.map((option) => (
+              <ZoomOption
+                key={option.value}
+                mode={option.value}
+                active={scaleMode === option.value}
+                label={option.label}
+                onSelect={selectScale}
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function PageLayoutOption({
+  mode,
+  active,
+  icon,
+  label,
+  onSelect,
+}: {
+  mode: PageLayoutMode;
+  active: boolean;
+  icon: ReactNode;
+  label: string;
+  onSelect: (mode: PageLayoutMode) => void;
+}) {
+  return (
+    <button
+      type="button"
+      className="openpress-workbench-zoom-menu__item"
+      data-openpress-page-layout-option={mode}
+      role="menuitemcheckbox"
+      aria-checked={active}
+      onClick={() => onSelect(mode)}
+    >
+      <span className="openpress-workbench-zoom-menu__check">{active ? <Check aria-hidden="true" /> : null}</span>
+      {icon}
+      <span>{label}</span>
+    </button>
+  );
+}
+
+function ZoomOption({
+  mode,
+  active,
+  label,
+  onSelect,
+}: {
+  mode: PageViewportScaleMode;
+  active: boolean;
+  label: string;
+  onSelect: (mode: PageViewportScaleMode) => void;
+}) {
+  return (
+    <button
+      type="button"
+      className="openpress-workbench-zoom-menu__item"
+      data-openpress-zoom-option={mode}
+      role="menuitemradio"
+      aria-checked={active}
+      onClick={() => onSelect(mode)}
+    >
+      <span className="openpress-workbench-zoom-menu__check">{active ? <Check aria-hidden="true" /> : null}</span>
+      <span className="openpress-workbench-zoom-menu__spacer" aria-hidden="true" />
+      <span>{label}</span>
+    </button>
+  );
+}

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

@@ -0,0 +1,345 @@
+import { useCallback, useEffect, useId, useMemo, useRef, useState, type FormEvent } from "react";
+import { FileText, Loader2, Search } from "lucide-react";
+import type { SourceBlock } from "../../document-model";
+import { WorkbenchDialog } from "../dialog";
+
+type SearchScope = "content" | "all";
+type SearchStatus = "idle" | "loading" | "success" | "error";
+const SEARCH_SCOPE: SearchScope = "all";
+const LIVE_SEARCH_DEBOUNCE_MS = 280;
+
+type SearchFile = {
+  scope: string;
+  file: string;
+  path: string;
+  matchCount: number;
+};
+
+type SearchMatch = {
+  id: string;
+  scope: string;
+  file: string;
+  path: string;
+  line: number;
+  column: number;
+  index: number;
+  text: string;
+  preview: string;
+};
+
+type SearchReport = {
+  ok?: boolean;
+  kind: "search";
+  query: string;
+  scope: SearchScope;
+  caseSensitive: boolean;
+  matchCount: number;
+  files: Array<SearchFile>;
+  matches: Array<SearchMatch>;
+  message?: string;
+};
+
+type SearchJumpTarget = {
+  blockId: string;
+  pageIndex: number;
+  pageNumber: number;
+};
+
+export function SearchControl({
+  sourceBlocksByPath = {},
+  onSelectPage,
+}: {
+  sourceBlocksByPath?: Record<string, SourceBlock[]>;
+  onSelectPage?: (pageIndex: number, options?: { behavior?: ScrollBehavior }) => void;
+}) {
+  const titleId = useId();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState<SearchStatus>("idle");
+  const [report, setReport] = useState<SearchReport | null>(null);
+  const [error, setError] = useState("");
+  const activeSearchControllerRef = useRef<AbortController | null>(null);
+  const searchRequestIdRef = useRef(0);
+  const submittedQueryRef = useRef<string | null>(null);
+  const matchesByPath = useMemo(() => groupMatchesByPath(report?.matches ?? []), [report]);
+
+  const jumpToMatch = (match: SearchMatch) => {
+    const target = resolveSearchJumpTarget(match, sourceBlocksByPath);
+    if (!target || !onSelectPage) return;
+    onSelectPage(target.pageIndex, { behavior: "smooth" });
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+
+  const runSearch = useCallback(async (rawQuery: string, controller: AbortController) => {
+    const trimmedQuery = rawQuery.trim();
+    if (!trimmedQuery) {
+      activeSearchControllerRef.current?.abort();
+      activeSearchControllerRef.current = null;
+      setReport(null);
+      setError("");
+      setStatus("idle");
+      return;
+    }
+
+    activeSearchControllerRef.current?.abort();
+    activeSearchControllerRef.current = controller;
+    const requestId = searchRequestIdRef.current + 1;
+    searchRequestIdRef.current = requestId;
+    setStatus("loading");
+    setError("");
+
+    try {
+      const params = new URLSearchParams();
+      params.set("q", trimmedQuery);
+      params.set("scope", SEARCH_SCOPE);
+      const response = await fetch(`/__openpress/search?${params.toString()}`, {
+        cache: "no-store",
+        signal: controller.signal,
+      });
+      const data = await response.json().catch(() => null) as (Partial<SearchReport> & { message?: string }) | null;
+      if (controller.signal.aborted || requestId !== searchRequestIdRef.current) return;
+      if (!response.ok || data?.ok === false || !isSearchReport(data)) {
+        throw new Error(data?.message ?? "搜尋失敗。");
+      }
+      setReport(data);
+      setStatus("success");
+    } catch (searchError) {
+      if (controller.signal.aborted || requestId !== searchRequestIdRef.current) return;
+      setError(searchError instanceof Error ? searchError.message : String(searchError));
+      setStatus("error");
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const trimmedQuery = query.trim();
+    if (!trimmedQuery) {
+      activeSearchControllerRef.current?.abort();
+      activeSearchControllerRef.current = null;
+      setReport(null);
+      setError("");
+      setStatus("idle");
+      return undefined;
+    }
+
+    const controller = new AbortController();
+    const timer = window.setTimeout(() => {
+      if (submittedQueryRef.current === trimmedQuery) {
+        submittedQueryRef.current = null;
+        return;
+      }
+      void runSearch(trimmedQuery, controller);
+    }, LIVE_SEARCH_DEBOUNCE_MS);
+
+    return () => {
+      window.clearTimeout(timer);
+      controller.abort();
+    };
+  }, [open, query, runSearch]);
+
+  const submitSearch = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const trimmedQuery = query.trim();
+    submittedQueryRef.current = trimmedQuery;
+    await runSearch(trimmedQuery, new AbortController());
+  };
+
+  const dialog = open ? (
+    <WorkbenchDialog
+      titleId={titleId}
+      title="搜尋文件"
+      eyebrow="Search"
+      className="openpress-search-dialog"
+      backdropClassName="openpress-search-dialog-backdrop"
+      headerClassName="openpress-search-dialog__header"
+      closeLabel="關閉搜尋"
+      onClose={() => setOpen(false)}
+    >
+      <form className="openpress-search-dialog__form" role="search" aria-label="文件搜尋" onSubmit={submitSearch}>
+        <div className="openpress-search-dialog__input-row">
+          <Search aria-hidden="true" />
+          <input
+            type="search"
+            value={query}
+            autoFocus
+            aria-label="搜尋文字"
+            placeholder="搜尋所有來源"
+            onChange={(event) => setQuery(event.currentTarget.value)}
+          />
+          <button type="submit" disabled={status === "loading"}>
+            {status === "loading" ? <Loader2 aria-hidden="true" /> : <Search aria-hidden="true" />}
+            <span>搜尋</span>
+          </button>
+        </div>
+      </form>
+      <SearchResults
+        status={status}
+        report={report}
+        error={error}
+        matchesByPath={matchesByPath}
+        sourceBlocksByPath={sourceBlocksByPath}
+        onJumpToMatch={jumpToMatch}
+      />
+    </WorkbenchDialog>
+  ) : null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="openpress-workbench-toolbar-action"
+        data-openpress-search
+        data-openpress-toolbar-expanded="false"
+        data-openpress-toolbar-active={open ? "true" : "false"}
+        aria-label="搜尋文件"
+        title="搜尋文件"
+        onClick={() => setOpen(true)}
+      >
+        <Search aria-hidden="true" />
+      </button>
+      {dialog}
+    </>
+  );
+}
+
+function SearchResults({
+  status,
+  report,
+  error,
+  matchesByPath,
+  sourceBlocksByPath,
+  onJumpToMatch,
+}: {
+  status: SearchStatus;
+  report: SearchReport | null;
+  error: string;
+  matchesByPath: Map<string, Array<SearchMatch>>;
+  sourceBlocksByPath: Record<string, SourceBlock[]>;
+  onJumpToMatch: (match: SearchMatch) => void;
+}) {
+  if (status === "idle") {
+    return <p className="openpress-search-dialog__empty">輸入關鍵字即可搜尋文件內容、元件與設定來源。</p>;
+  }
+
+  if (status === "loading") {
+    return (
+      <p className="openpress-search-dialog__empty" role="status">
+        <Loader2 aria-hidden="true" />
+        <span>搜尋中</span>
+      </p>
+    );
+  }
+
+  if (status === "error") {
+    return <p className="openpress-search-dialog__error" role="alert">{error || "搜尋失敗。"}</p>;
+  }
+
+  if (!report || report.matchCount === 0) {
+    return <p className="openpress-search-dialog__empty">沒有符合的來源文字。</p>;
+  }
+
+  return (
+    <div className="openpress-search-dialog__results" aria-live="polite">
+      <p className="openpress-search-dialog__summary">{report.matchCount} 個符合結果</p>
+      {report.files.map((file) => (
+        <section className="openpress-search-dialog__file" key={file.path}>
+          <h3>
+            <FileText aria-hidden="true" />
+            <span>{file.path}</span>
+            <small>{file.matchCount}</small>
+          </h3>
+          <ol>
+            {(matchesByPath.get(file.path) ?? []).map((match) => {
+              const jumpTarget = resolveSearchJumpTarget(match, sourceBlocksByPath);
+              return (
+                <li key={match.id}>
+                  <button
+                    type="button"
+                    className="openpress-search-dialog__result"
+                    data-openpress-search-result-jump={jumpTarget ? "true" : "false"}
+                    disabled={!jumpTarget}
+                    onClick={() => onJumpToMatch(match)}
+                  >
+                    <span className="openpress-search-dialog__line">{match.line}:{match.column}</span>
+                    <span className="openpress-search-dialog__preview">{match.preview}</span>
+                    <span className="openpress-search-dialog__page">
+                      {jumpTarget ? `P${String(jumpTarget.pageNumber).padStart(2, "0")}` : "source"}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ol>
+        </section>
+      ))}
+    </div>
+  );
+}
+
+function groupMatchesByPath(matches: Array<SearchMatch>) {
+  const grouped = new Map<string, Array<SearchMatch>>();
+  for (const match of matches) {
+    const existing = grouped.get(match.path) ?? [];
+    existing.push(match);
+    grouped.set(match.path, existing);
+  }
+  return grouped;
+}
+
+function isSearchReport(value: unknown): value is SearchReport {
+  if (!value || typeof value !== "object") return false;
+  const report = value as Partial<SearchReport>;
+  return report.kind === "search"
+    && typeof report.query === "string"
+    && typeof report.matchCount === "number"
+    && Array.isArray(report.files)
+    && Array.isArray(report.matches);
+}
+
+function resolveSearchJumpTarget(
+  match: SearchMatch,
+  sourceBlocksByPath: Record<string, SourceBlock[]>,
+): SearchJumpTarget | null {
+  const blocks = sourcePathKeys(match.path)
+    .flatMap((key) => sourceBlocksByPath[key] ?? []);
+  if (!blocks.length) return null;
+
+  let selectedBlock: SourceBlock | null = null;
+  for (const block of blocks) {
+    const line = block.source?.line;
+    if (typeof line !== "number") continue;
+    if (line <= match.line) {
+      selectedBlock = block;
+      continue;
+    }
+    break;
+  }
+
+  const targetBlock = selectedBlock ?? blocks[0] ?? null;
+  if (!targetBlock || typeof targetBlock.pageIndex !== "number") return null;
+  return {
+    blockId: targetBlock.id,
+    pageIndex: targetBlock.pageIndex,
+    pageNumber: targetBlock.pageNumber ?? targetBlock.pageIndex + 1,
+  };
+}
+
+function sourcePathKeys(value: string) {
+  const normalized = value.trim().replaceAll("\\", "/").replace(/^\.\//, "");
+  const keys = [normalized];
+  if (normalized.startsWith("press/")) {
+    keys.push(normalized.replace(/^press\//, ""));
+  } else {
+    keys.push(`press/${normalized}`);
+  }
+  return Array.from(new Set(keys));
+}