@open-press/core 0.7.1 → 0.8.0

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("document/")) {
+    keys.push(normalized.replace(/^document\//, ""));
+  } else {
+    keys.push(`document/${normalized}`);
+  }
+  return Array.from(new Set(keys));
+}

package/src/openpress/workbench/actions/deploymentStatusModel.ts

@@ -0,0 +1,112 @@
+import type { DeploymentInfo } from "../../document-model";
+import type { DeployStatus, PdfActionStatus } from "../workbenchTypes";
+
+export function deployButtonText(info: DeploymentInfo, status: DeployStatus) {
+  if (info.configured === false || status === "setup") return "設定部署";
+  if (status === "deploying") return "部署中";
+  if (status === "failed") return "重試部署";
+  if (status === "unavailable") return "本機限定";
+  if (isDeploymentDirty(info, status)) return "重新部署";
+  return "部署";
+}
+
+export function workbenchPdfButtonText(localPdfEnabled: boolean, status: PdfActionStatus, staticPdfHref?: string) {
+  if (localPdfEnabled) {
+    if (status === "generating") return "產生中";
+    if (status === "opening") return "正在開啟";
+    if (status === "failed") return "重試 PDF";
+    return "產生 PDF";
+  }
+  return !staticPdfHref ? "PDF 未部署" : "開啟 PDF";
+}
+
+export function workbenchPdfStatusMessage(localPdfEnabled: boolean, status: PdfActionStatus) {
+  if (!localPdfEnabled) return null;
+  if (status === "generating") return "正在產生 PDF";
+  if (status === "opening") return "PDF 已完成，正在開啟";
+  if (status === "failed") return "PDF 產生失敗，請重試";
+  return null;
+}
+
+export function deploymentStatusKind(info: DeploymentInfo, status: DeployStatus) {
+  if (info.configured === false || status === "setup") return "failed";
+  if (status === "deploying") return "deploying";
+  if (status === "failed") return "failed";
+  if (status === "unavailable") return "unavailable";
+  if (isDeploymentDirty(info, status)) return "dirty";
+  if (status === "deployed" || hasOnlineDeployment(info)) return "online";
+  return "offline";
+}
+
+export function deploymentStatusSummary(info: DeploymentInfo, status: DeployStatus) {
+  const label = deploymentStatusLabel(info, status);
+  if ((status === "deployed" || hasOnlineDeployment(info)) && info.deployedAt) {
+    return `${label} · ${formatDeployTime(info.deployedAt)}`;
+  }
+  return label;
+}
+
+export function deploymentStatusText(info: DeploymentInfo, status: DeployStatus) {
+  if (info.configured === false || status === "setup") {
+    return info.setupMessage ?? "部署設定尚未完成，請先設定 deploy.projectName";
+  }
+  if (status === "deploying") return "部署中";
+  if (status === "failed") return "部署失敗，請查看終端機";
+  if (status === "unavailable") return "目前環境沒有本地部署服務";
+  if (isDeploymentDirty(info, status)) return "已上線但內容有更動，點擊重新部署";
+  if (status === "deployed" || hasOnlineDeployment(info)) {
+    return `已上線${info.deployedAt ? `，更新：${formatDeployTime(info.deployedAt)}` : ""}`;
+  }
+  return "未上線";
+}
+
+export function parseDeployError(text: string): {
+  message?: string;
+  deploy_configured?: boolean;
+  deploy_adapter?: string;
+  deploy_source?: string;
+  deploy_project_name?: string;
+} | null {
+  try {
+    return JSON.parse(text) as {
+      message?: string;
+      deploy_configured?: boolean;
+      deploy_adapter?: string;
+      deploy_source?: string;
+      deploy_project_name?: string;
+    };
+  } catch {
+    return null;
+  }
+}
+
+function deploymentStatusLabel(info: DeploymentInfo, status: DeployStatus) {
+  if (info.configured === false || status === "setup") return "缺少設定";
+  if (status === "deploying") return "正在部署";
+  if (status === "failed") return "部署失敗";
+  if (status === "unavailable") return "本機限定";
+  if (isDeploymentDirty(info, status)) return "有更新";
+  if (status === "deployed" || hasOnlineDeployment(info)) return "已上線";
+  return "未上線";
+}
+
+function hasOnlineDeployment(info: DeploymentInfo) {
+  if (info.configured === false) return false;
+  return Boolean(info.online || info.deployedAt || info.publicUrl || (info.pdf && /^https?:\/\//i.test(info.pdf)));
+}
+
+function isDeploymentDirty(info: DeploymentInfo, status: DeployStatus) {
+  return status === "idle" && hasOnlineDeployment(info) && info.dirty === true;
+}
+
+function formatDeployTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "時間未知";
+  return new Intl.DateTimeFormat("zh-TW", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(date);
+}

package/src/openpress/workbench/actions/index.ts

@@ -0,0 +1,5 @@
+export * from "./deploymentStatusModel";
+export * from "./DeploymentControl";
+export * from "./PageZoomControl";
+export * from "./SearchControl";
+export * from "./useDeploymentWorkbench";