@open-press/core 0.7.0 → 0.8.0

package/src/openpress/workbench/Workbench.tsx

@@ -0,0 +1,407 @@
+import {
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import { ExternalLink, MousePointer2, Ruler } from "lucide-react";
+import {
+  getProjectIdentity,
+  resolveAnchorPageIndex,
+  type DeploymentInfo,
+  type HtmlPageBlock,
+  type ReaderDocument,
+} from "../document-model";
+import { InlineInspectorLayer, useInspector, useInspectorComments } from "./inspector";
+import { ProjectEntryPanel } from "./project";
+import {
+  Bookmarks,
+  CurrentPagePanel,
+  PUBLIC_DRAWER_BREAKPOINT,
+  PublicPage,
+  useReaderRuntime,
+  usePageViewportScale,
+  useViewMode,
+  type PageLayoutMode,
+} from "../reader";
+import {
+  ReaderStage,
+  InlineSourceEditorLayer,
+  useDocumentWorkbenchModel,
+  useInlineDocumentEditor,
+  type InlineDocumentEditStatus,
+  type InlineDocumentSourceTarget,
+} from "./document";
+import {
+  DeploymentControl,
+  PageZoomControl,
+  SearchControl,
+  useDeploymentWorkbench,
+} from "./actions";
+import { PendingCommentsPanel, WorkbenchControlPanel, type WorkbenchPanel } from "./panels";
+import { WorkbenchShell } from "./shell";
+import {
+  formatPageGeometrySpec,
+  formatInspectorSelection,
+} from "./workbenchFormatters";
+
+export function HtmlWorkbench({
+  document,
+  pages,
+  style,
+  devMode,
+  deploymentInfo,
+  onDocumentRefresh,
+  extraControlPanels,
+}: {
+  document: ReaderDocument;
+  pages: Array<HtmlPageBlock>;
+  style: CSSProperties;
+  devMode: boolean;
+  deploymentInfo: DeploymentInfo;
+  onDocumentRefresh?: () => void | Promise<void>;
+  // Append extra panels into the right-side control panel. Built-in panels
+  // (pending comments + project entry) render first; extra panels render
+  // after them in the supplied order.
+  extraControlPanels?: WorkbenchPanel[];
+}) {
+  const sourceContainerRef = useRef<HTMLDivElement | null>(null);
+  const displayPages = pages;
+  const { viewMode } = useViewMode();
+  const {
+    mediaAssets,
+    anchorPageMap,
+    projectComponentUsages,
+    bookmarks,
+    sourceBlockMap,
+    sourceBlocksByPath,
+    projectMentionItems,
+  } = useDocumentWorkbenchModel(document, displayPages);
+  const inspector = useInspector(document, { enabled: devMode });
+  const reader = useReaderRuntime({
+    pageCount: Math.max(displayPages.length, 1),
+    leftPanelBreakpoint: PUBLIC_DRAWER_BREAKPOINT,
+    rightPanelBreakpoint: PUBLIC_DRAWER_BREAKPOINT,
+  });
+  const [pageLayoutMode, setPageLayoutMode] = useState<PageLayoutMode>("single");
+  const pageViewport = usePageViewportScale({
+    stageRef: reader.stageRef,
+    pageContainerRef: sourceContainerRef,
+    pageCount: displayPages.length,
+    layoutMode: pageLayoutMode,
+  });
+  const deployment = useDeploymentWorkbench({ deploymentInfo });
+  const [inlineEditStatus, setInlineEditStatus] = useState<InlineDocumentEditStatus>({ state: "idle" });
+  const [sourceEditorTarget, setSourceEditorTarget] = useState<InlineDocumentSourceTarget | null>(null);
+
+  const projectIdentity = getProjectIdentity(document.meta);
+  const pageGeometry = formatPageGeometrySpec(document.theme);
+  const inspectorSelectionLabel = formatInspectorSelection(
+    inspector.selectedBlock,
+    inspector.selectedObjectEntity,
+  );
+  const inspectorToolbarExpanded = inspector.inspectorMode;
+  const editStatusMessage = formatInlineEditStatus(inlineEditStatus);
+
+  useInlineDocumentEditor({
+    enabled: devMode,
+    sourceContainerRef,
+    sourceBlockMap,
+    onStatusChange: setInlineEditStatus,
+    onOpenSourceBlock: setSourceEditorTarget,
+    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 comments = useInspectorComments({
+    devMode,
+    inspector,
+    sourceBlockMap,
+    sourceBlocksByPath,
+    sourceContainerRef,
+    onSelectWorkspacePage: selectWorkspacePage,
+  });
+
+  // Stabilize the controller objects so memoized InlineInspectorLayer can skip
+  // re-rendering when nothing observable changed.
+  const inspectorLayerComments = useMemo(() => ({
+    saved: comments.inlineSavedComments,
+    active: comments.activeInlineSavedComment ?? null,
+    status: comments.inspectorCommentStatus,
+    statusMessage: comments.inspectorCommentStatusMessage,
+    totalCount: comments.pendingComments.length,
+    onOpenSaved: comments.handleOpenInlineSavedComment,
+    onRemoveSaved: comments.handleRemoveInlineSavedComment,
+  }), [
+    comments.activeInlineSavedComment,
+    comments.handleOpenInlineSavedComment,
+    comments.handleRemoveInlineSavedComment,
+    comments.inlineSavedComments,
+    comments.inspectorCommentStatus,
+    comments.inspectorCommentStatusMessage,
+    comments.pendingComments.length,
+  ]);
+  const inspectorLayerComposer = useMemo(() => ({
+    text: comments.inspectorCommentText,
+    submitDisabled: comments.inspectorCommentDisabled,
+    mentionItems: projectMentionItems,
+    onTextChange: comments.setInspectorCommentText,
+    onSubmit: comments.handleSubmitInspectorComment,
+  }), [
+    comments.handleSubmitInspectorComment,
+    comments.inspectorCommentDisabled,
+    comments.inspectorCommentText,
+    comments.setInspectorCommentText,
+    projectMentionItems,
+  ]);
+
+  const currentSourcePath = displayPages[reader.currentPageIndex]?.source;
+  const builtInControlPanels: WorkbenchPanel[] = [
+    {
+      id: "pending-comments",
+      render: () => (
+        <PendingCommentsPanel
+          comments={comments.pendingComments}
+          status={comments.commentsStatus}
+          error={comments.commentsError}
+          onClear={comments.clearPendingComment}
+          onSelect={comments.handleSelectPendingComment}
+        />
+      ),
+    },
+    {
+      id: "project-entry",
+      render: () => (
+        <ProjectEntryPanel
+          mediaAssets={mediaAssets}
+          componentUsages={projectComponentUsages}
+          mentionItems={projectMentionItems}
+          currentSource={currentSourcePath}
+          onCommentSubmitted={comments.refreshPendingComments}
+        />
+      ),
+    },
+  ];
+  const controlPanels = extraControlPanels
+    ? [...builtInControlPanels, ...extraControlPanels]
+    : builtInControlPanels;
+
+  const toolbarActions = (
+    <>
+      <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>
+      </div>
+      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--page" aria-label="頁面規格">
+        <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>
+    </>
+  );
+
+  return (
+    <WorkbenchShell
+      style={style}
+      devMode={devMode}
+      viewMode={viewMode}
+      inspectorMode={inspector.inspectorMode}
+      editMode={devMode}
+      leftPanelOpen={reader.leftPanelOpen}
+      rightPanelOpen={reader.rightPanelOpen}
+      onToggleLeftPanel={reader.toggleLeftPanel}
+      onToggleRightPanel={reader.toggleRightPanel}
+    >
+      <WorkbenchShell.Toolbar>
+        {toolbarActions}
+      </WorkbenchShell.Toolbar>
+
+      <WorkbenchShell.LeftPanel>
+        <section className="openpress-public-identity" aria-label="文件資訊">
+          <strong>
+            <span className="openpress-public-title-main">{projectIdentity.name}</span>
+            {projectIdentity.subtitle ? <span className="openpress-public-title-sub">{projectIdentity.subtitle}</span> : null}
+          </strong>
+          {projectIdentity.label ? <span>{projectIdentity.label}</span> : null}
+        </section>
+
+        <section
+          id="openpress-bookmarks"
+          className="openpress-panel-section openpress-panel-section--bookmarks"
+          aria-label="章節書籤"
+        >
+          <nav className="reader-bookmarks" aria-label="章節導覽" data-openpress-react-bookmarks="true">
+            <div className="reader-bookmarks-rail" aria-hidden="true" />
+            <Bookmarks
+              items={bookmarks}
+              currentPageIndex={reader.currentPageIndex}
+              onSelectPage={selectWorkspacePage}
+            />
+          </nav>
+        </section>
+        <CurrentPagePanel
+          currentPageLabel={reader.currentPageLabel}
+          totalPageLabel={reader.totalPageLabel}
+          progressPercent={reader.progressPercent}
+          title={displayPages[reader.currentPageIndex]?.title || document.meta.title}
+          pageLabelPrefix="頁"
+          showHeading={false}
+          showTitle={false}
+        />
+      </WorkbenchShell.LeftPanel>
+
+      <WorkbenchShell.RightPanel>
+        <WorkbenchControlPanel panels={controlPanels} />
+      </WorkbenchShell.RightPanel>
+
+      <WorkbenchShell.MainContent>
+        <ReaderStage ref={reader.stageRef}>
+          <PublicPage
+            pages={displayPages}
+            currentPageIndex={reader.currentPageIndex}
+            devMode={devMode}
+            sourceContainerRef={sourceContainerRef}
+            registerPage={reader.registerPage}
+            exposeSourceData={devMode}
+            inspector={inspector}
+            onInternalAnchorNavigate={selectWorkspaceAnchor}
+            pageLayoutMode={pageLayoutMode}
+          />
+          {devMode ? (
+            <InlineInspectorLayer
+              sourceContainerRef={sourceContainerRef}
+              inspector={inspector}
+              comments={inspectorLayerComments}
+              composer={inspectorLayerComposer}
+              geometryVersion={`${pageViewport.scaleMode}:${pageViewport.scale}:${pageLayoutMode}`}
+            />
+          ) : null}
+          {devMode ? (
+            <InlineSourceEditorLayer
+              target={sourceEditorTarget}
+              onClose={() => setSourceEditorTarget(null)}
+              onStatusChange={setInlineEditStatus}
+              geometryVersion={`${pageViewport.scaleMode}:${pageViewport.scale}:${pageLayoutMode}`}
+            />
+          ) : null}
+        </ReaderStage>
+      </WorkbenchShell.MainContent>
+    </WorkbenchShell>
+  );
+}
+
+function formatInlineEditStatus(status: InlineDocumentEditStatus) {
+  if (status.state === "saving") return "儲存中";
+  if (status.state === "saved") return "已儲存";
+  if (status.state === "failed") return "儲存失敗";
+  return "";
+}

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

@@ -0,0 +1,157 @@
+import { useId, useState } from "react";
+import { Check, Rocket } from "lucide-react";
+import type { DeploymentInfo } from "../../document-model";
+import { WorkbenchDialog } from "../dialog";
+import type { DeployStatus } from "../workbenchTypes";
+import {
+  deployButtonText,
+  deploymentStatusKind,
+  deploymentStatusSummary,
+  deploymentStatusText,
+} from "./deploymentStatusModel";
+
+export function DeploymentControl({
+  info,
+  status,
+  onDeploy,
+}: {
+  info: DeploymentInfo;
+  status: DeployStatus;
+  onDeploy: () => void | Promise<void>;
+}) {
+  const titleId = useId();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const kind = deploymentStatusKind(info, status);
+  const buttonText = deployButtonText(info, status);
+  const description = deploymentStatusText(info, status);
+  const summary = deploymentStatusSummary(info, status);
+  const sourceLabel = deploymentSourceLabel(info);
+  const busy = status === "deploying";
+  const confirmDisabled = busy || status === "unavailable" || info.configured === false;
+
+  const confirmDeploy = () => {
+    if (confirmDisabled) return;
+    setDialogOpen(false);
+    void onDeploy();
+  };
+
+  const dialog = dialogOpen ? (
+    <WorkbenchDialog
+      titleId={titleId}
+      title="部署資訊"
+      eyebrow="Deployment"
+      titleMeta={<span className="openpress-deploy-dialog__source">{sourceLabel}</span>}
+      className="openpress-deploy-dialog"
+      backdropClassName="openpress-deploy-dialog-backdrop"
+      closeLabel="關閉部署資訊"
+      onClose={() => setDialogOpen(false)}
+      footer={(
+        <>
+          <button type="button" onClick={() => setDialogOpen(false)}>取消</button>
+          <button type="button" disabled={confirmDisabled} onClick={confirmDeploy}>
+            <Check aria-hidden="true" />
+            <span>{busy ? "部署中" : "確認部署"}</span>
+          </button>
+        </>
+      )}
+    >
+      <dl data-openpress-deploy-align="left-values">
+        <DeployStatusRow label="狀態" value={summary} kind={kind} />
+        <DeployLinkRow label="公開頁面" url={info.publicUrl} />
+        <DeployLinkRow label="PDF" url={info.pdf} />
+      </dl>
+      {info.configured === false ? (
+        <p className="openpress-deploy-dialog__message" role="status">
+          {info.setupMessage ?? "部署設定尚未完成。"}
+        </p>
+      ) : null}
+    </WorkbenchDialog>
+  ) : null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="openpress-workbench-toolbar-action"
+        data-openpress-deploy
+        data-openpress-deploy-status={kind}
+        data-openpress-toolbar-expanded="false"
+        data-openpress-toolbar-active="false"
+        data-deploy-status={status}
+        aria-busy={busy ? "true" : "false"}
+        aria-label={buttonText}
+        title={description}
+        onClick={() => setDialogOpen(true)}
+      >
+        <Rocket aria-hidden="true" />
+      </button>
+      {busy ? (
+        <span
+          className="openpress-dev-deploy-status openpress-dev-deploy-status--toolbar"
+          data-openpress-deploy-status={kind}
+          role="status"
+          aria-live="polite"
+        >
+          <span className="openpress-dev-deploy-status__dot" aria-hidden="true" />
+          <span>部署中</span>
+        </span>
+      ) : null}
+      {dialog}
+    </>
+  );
+}
+
+function DeployStatusRow({ label, value, kind }: { label: string; value: string; kind: string }) {
+  return (
+    <div>
+      <dt>{label}</dt>
+      <dd>
+        <span className="openpress-deploy-dialog__status" data-openpress-deploy-status={kind}>
+          {value}
+        </span>
+      </dd>
+    </div>
+  );
+}
+
+function DeployLinkRow({ label, url }: { label: string; url?: string }) {
+  return (
+    <div>
+      <dt>{label}</dt>
+      <dd>
+        {url ? (
+          <a href={url} target="_blank" rel="noreferrer">
+            {formatDeployUrl(url)}
+          </a>
+        ) : (
+          "尚未產生"
+        )}
+      </dd>
+    </div>
+  );
+}
+
+function deploymentSourceLabel(info: DeploymentInfo) {
+  const adapter = info.adapter?.trim().toLowerCase();
+
+  if (adapter === "cloudflare-pages" || adapter === "cloudflare") return "Cloudflare Pages";
+  if (adapter === "github-pages" || adapter === "github") return "GitHub Pages";
+  if (adapter === "zeabur" || adapter === "zebur") return "Zeabur";
+
+  return info.projectName?.trim() || info.source?.trim() || info.adapter?.trim() || "本機工作區";
+}
+
+function formatDeployUrl(value: string) {
+  try {
+    const url = new URL(value);
+    const pathname = url.pathname === "/" ? "" : url.pathname.replace(/\/$/, "");
+    return shortenDeployUrl(`${url.host}${pathname}`);
+  } catch {
+    return shortenDeployUrl(value);
+  }
+}
+
+function shortenDeployUrl(value: string) {
+  if (value.length <= 48) return value;
+  return `${value.slice(0, 30)}...${value.slice(-14)}`;
+}