@open-press/core 0.3.0

package/src/openpress/indexes.ts

@@ -0,0 +1,329 @@
+import type { BlockSource } from "./types";
+
+export type MediaAssetKind = "image" | "svg";
+
+export interface IndexedHtmlPage {
+  id: string;
+  html: string;
+  title: string;
+  pageNumber: number;
+  anchors?: string[];
+}
+
+export interface MediaAssetItem {
+  id: string;
+  kind: MediaAssetKind;
+  fileName: string;
+  src: string;
+  pageIndex: number;
+  sourceTitle: string;
+  usageCount: number;
+  references: Array<{
+    pageIndex: number;
+    sourceTitle: string;
+  }>;
+}
+
+export interface ContentSourceItem {
+  id: string;
+  file: string;
+  path: string;
+  kind?: string;
+  chapter?: number;
+  slug?: string;
+  title: string;
+  pageIndexes: number[];
+  sectionCount: number;
+}
+
+export interface BookmarkItem {
+  id: string;
+  title: string;
+  label?: string;
+  pageIndex: number;
+  endPageIndex: number;
+  subs: BookmarkSubItem[];
+}
+
+export interface BookmarkSubItem {
+  id: string;
+  title: string;
+  label?: string;
+  pageIndex: number;
+  endPageIndex: number;
+  subs: BookmarkTopicItem[];
+}
+
+export interface BookmarkTopicItem {
+  id: string;
+  title: string;
+  label?: string;
+  pageIndex: number;
+  endPageIndex: number;
+}
+
+export function collectBookmarkIndex(pages: IndexedHtmlPage[]): BookmarkItem[] {
+  const totalPages = pages.length;
+  const chapters: BookmarkItem[] = [];
+  let currentChapter: BookmarkItem | undefined;
+  let currentSub: BookmarkSubItem | undefined;
+  let pendingChapterOpener: { pageIndex: number } | undefined;
+  let tocAdded = false;
+
+  pages.forEach((page) => {
+    const html = parseHtmlPage(page.html);
+    if (!html) return;
+    const readerPage = html.querySelector<HTMLElement>(".reader-page");
+    if (!readerPage) return;
+    const pageIndex = page.pageNumber - 1;
+
+    if (pageKindOf(readerPage) === "toc") {
+      if (!tocAdded && readerPage.dataset.tocContinuation !== "true") {
+        tocAdded = true;
+        chapters.push({
+          id: `toc-bookmark-${page.pageNumber}`,
+          title: readerPage.dataset.pageTitle || readerPage.querySelector<HTMLElement>(".toc-heading, h2")?.textContent?.trim() || "目錄",
+          label: "00",
+          pageIndex,
+          endPageIndex: totalPages - 1,
+          subs: [],
+        });
+      }
+      return;
+    }
+
+    if (pageKindOf(readerPage) === "chapter-opener") {
+      pendingChapterOpener = { pageIndex };
+      return;
+    }
+
+    if (!isContentPage(readerPage)) return;
+
+    let pageStartedChapter = false;
+    html.querySelectorAll("h2, h3, h4").forEach((heading, headingIndex) => {
+      const id = bookmarkItemId(page, heading, headingIndex);
+      if (heading.tagName === "H2") {
+        const opener = pendingChapterOpener;
+        pendingChapterOpener = undefined;
+        pageStartedChapter = true;
+        currentChapter = {
+          id,
+          title: normalizeChapterTitle(heading.textContent ?? ""),
+          label: heading instanceof HTMLElement ? heading.dataset.chapter : undefined,
+          pageIndex: opener?.pageIndex ?? pageIndex,
+          endPageIndex: totalPages - 1,
+          subs: [],
+        };
+        chapters.push(currentChapter);
+        currentSub = undefined;
+        return;
+      }
+
+      if (heading.tagName === "H3" && currentChapter) {
+        currentSub = {
+          id,
+          title: normalizeSectionTitle(heading.textContent ?? ""),
+          label: heading instanceof HTMLElement ? heading.dataset.section : undefined,
+          pageIndex,
+          endPageIndex: totalPages - 1,
+          subs: [],
+        };
+        currentChapter.subs.push(currentSub);
+        return;
+      }
+
+      if (heading.tagName === "H4" && currentSub) {
+        currentSub.subs.push({
+          id,
+          title: normalizeTopicTitle(heading.textContent ?? ""),
+          label: heading instanceof HTMLElement ? heading.dataset.topic : undefined,
+          pageIndex,
+          endPageIndex: totalPages - 1,
+        });
+      }
+    });
+    if (!pageStartedChapter) pendingChapterOpener = undefined;
+  });
+
+  // Back-fill endPageIndex: each item ends where the next sibling starts (exclusive)
+  for (let i = 0; i < chapters.length; i++) {
+    const nextChapterStart = chapters[i + 1]?.pageIndex ?? totalPages;
+    chapters[i].endPageIndex = nextChapterStart - 1;
+
+    const subs = chapters[i].subs;
+    for (let j = 0; j < subs.length; j++) {
+      const nextSubStart = subs[j + 1]?.pageIndex ?? nextChapterStart;
+      subs[j].endPageIndex = Math.max(subs[j].pageIndex, nextSubStart - 1);
+
+      const topics = subs[j].subs;
+      for (let k = 0; k < topics.length; k++) {
+        const nextTopicStart = topics[k + 1]?.pageIndex ?? nextSubStart;
+        topics[k].endPageIndex = Math.max(topics[k].pageIndex, nextTopicStart - 1);
+      }
+    }
+  }
+
+  return chapters;
+}
+
+function pageKindOf(page: HTMLElement) {
+  return page.dataset.pageKind || "";
+}
+
+function isContentPage(page: HTMLElement) {
+  return pageKindOf(page) === "content";
+}
+
+function bookmarkItemId(page: IndexedHtmlPage, heading: Element, headingIndex: number) {
+  const anchor = heading.id || page.anchors?.[0] || page.id;
+  return `${anchor}-bookmark-${page.pageNumber}-${headingIndex + 1}`;
+}
+
+export function collectContentSourceIndex(
+  pages: Array<IndexedHtmlPage & { source?: BlockSource }>,
+): ContentSourceItem[] {
+  const items = new Map<string, ContentSourceItem>();
+
+  pages.forEach((page) => {
+    const source = page.source;
+    if (!source?.path) return;
+    const existing = items.get(source.path);
+    if (existing) {
+      existing.pageIndexes.push(page.pageNumber - 1);
+      existing.sectionCount += 1;
+      return;
+    }
+
+    items.set(source.path, {
+      id: `content-${items.size + 1}`,
+      file: source.file,
+      path: source.path,
+      kind: source.kind,
+      chapter: source.chapter,
+      slug: source.slug,
+      title: page.title,
+      pageIndexes: [page.pageNumber - 1],
+      sectionCount: 1,
+    });
+  });
+
+  return Array.from(items.values()).sort((a, b) => a.path.localeCompare(b.path, "zh-Hant"));
+}
+
+export function collectMediaAssetIndex(pages: IndexedHtmlPage[]): MediaAssetItem[] {
+  const assets = createMediaInventory();
+  const imagePattern = /<(img|image)\b([^>]*)>/gi;
+
+  pages.forEach((page) => {
+    let match: RegExpExecArray | null;
+    imagePattern.lastIndex = 0;
+    while ((match = imagePattern.exec(page.html)) !== null) {
+      const src = normalizeMediaAssetSrc(readHtmlAttribute(match[2], "src") ?? readHtmlAttribute(match[2], "href"));
+      if (!src) continue;
+      const existing = assets.get(src);
+      if (existing) {
+        existing.usageCount += 1;
+        existing.pageIndex = existing.usageCount === 1 ? page.pageNumber - 1 : existing.pageIndex;
+        existing.sourceTitle = existing.usageCount === 1 ? page.title : existing.sourceTitle;
+        existing.references.push({
+          pageIndex: page.pageNumber - 1,
+          sourceTitle: page.title,
+        });
+        continue;
+      }
+      const fileName = safeDecodeURIComponent(src.split("/").pop() ?? src);
+      assets.set(src, {
+        id: `asset-${assets.size + 1}`,
+        kind: fileName.toLowerCase().endsWith(".svg") ? "svg" : "image",
+        fileName,
+        src,
+        pageIndex: page.pageNumber - 1,
+        sourceTitle: page.title,
+        usageCount: 1,
+        references: [{
+          pageIndex: page.pageNumber - 1,
+          sourceTitle: page.title,
+        }],
+      });
+    }
+  });
+
+  return Array.from(assets.values()).sort((a, b) => a.fileName.localeCompare(b.fileName, "zh-Hant"));
+}
+
+const workspaceMediaFiles = import.meta.glob<string>("@workspace/media/*", {
+  eager: true,
+  query: "?url",
+  import: "default",
+});
+
+function createMediaInventory() {
+  const assets = new Map<string, MediaAssetItem>();
+
+  Object.keys(workspaceMediaFiles).forEach((path) => {
+    const fileName = safeDecodeURIComponent(path.split("/").pop() ?? path);
+    if (!isMediaFileName(fileName)) return;
+    const src = `/openpress/media/${fileName}`;
+    assets.set(src, {
+      id: `asset-${assets.size + 1}`,
+      kind: fileName.toLowerCase().endsWith(".svg") ? "svg" : "image",
+      fileName,
+      src,
+      pageIndex: -1,
+      sourceTitle: "未引用",
+      usageCount: 0,
+      references: [],
+    });
+  });
+
+  return assets;
+}
+
+function isMediaFileName(fileName: string) {
+  return /\.(png|jpe?g|gif|svg|webp)$/i.test(fileName);
+}
+
+function parseHtmlPage(html: string) {
+  if (typeof DOMParser === "undefined") return undefined;
+  return new DOMParser().parseFromString(html, "text/html");
+}
+
+function normalizeChapterTitle(value: string) {
+  return value
+    .trim()
+    .replace(/^[一二三四五六七八九十]+、\s*/, "");
+}
+
+function normalizeSectionTitle(value: string) {
+  return value
+    .trim()
+    .replace(/^[（(][一二三四五六七八九十]+[)）]、?\s*/, "")
+    .replace(/^\d+\.\d+\s+/, "");
+}
+
+function normalizeTopicTitle(value: string) {
+  return value
+    .trim()
+    .replace(/^\d+\.\d+\.\d+\s+/, "");
+}
+
+function readHtmlAttribute(attributes: string, name: string) {
+  const pattern = new RegExp(`\\b${name}=["']([^"']+)["']`, "i");
+  return attributes.match(pattern)?.[1];
+}
+
+function normalizeMediaAssetSrc(value?: string) {
+  if (!value) return undefined;
+  if (value.startsWith("/openpress/media/")) return value;
+  if (value.startsWith("media/")) return `/openpress/${value}`;
+  if (value.startsWith("./media/")) return `/openpress/${value.slice(2)}`;
+  return undefined;
+}
+
+function safeDecodeURIComponent(value: string) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}

package/src/openpress/inspector.ts

@@ -0,0 +1,282 @@
+import { useCallback, useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from "react";
+import { getSourceBlockMap } from "./reactDocumentMetadata";
+import type { ReaderDocument, SourceBlock } from "./types";
+
+const DEFAULT_INSPECTOR_STORAGE_KEY = "openpress:inspector-mode";
+
+export type InspectorIntent = "edit" | "delete" | "add";
+export type InspectorPlacement = "block" | "before";
+
+export interface InspectorTarget {
+  blockId: string;
+  placement: InspectorPlacement;
+}
+
+export interface InspectorState {
+  enabled: boolean;
+  inspectorMode: boolean;
+  selectedBlockId: string | null;
+  selectedBlock: SourceBlock | null;
+  selectedTarget: InspectorTarget | null;
+  commentIntent: InspectorIntent;
+  setInspectorMode: (enabled: boolean) => void;
+  toggleInspectorMode: () => void;
+  setCommentIntent: (intent: InspectorIntent) => void;
+  selectTarget: (target: InspectorTarget | null) => SourceBlock | null;
+  inspectTarget: (target: EventTarget | null) => SourceBlock | null;
+  handleClick: (event: ReactMouseEvent) => boolean;
+}
+
+export interface InspectorCommentResult {
+  ok: boolean;
+  comment?: {
+    id?: string;
+    timestamp?: string;
+    path?: string;
+    line?: number;
+    note?: string;
+    hint?: string;
+  };
+  message?: string;
+}
+
+export interface PendingComment {
+  id: string;
+  timestamp?: string;
+  path: string;
+  absolutePath?: string;
+  line: number;
+  marker?: string;
+  note: string;
+  hint?: string;
+}
+
+export interface CommentListResult {
+  ok: boolean;
+  comments?: PendingComment[];
+  message?: string;
+}
+
+export interface CommentClearResult {
+  ok: boolean;
+  removedCount: number;
+  comments?: PendingComment[];
+  message?: string;
+}
+
+export async function submitInspectorComment({
+  block,
+  note,
+  intent,
+  placement,
+  endpoint = "/__openpress/comment",
+  fetchImpl = globalThis.fetch?.bind(globalThis),
+}: {
+  block: SourceBlock | null;
+  note: string;
+  intent?: InspectorIntent;
+  placement?: InspectorPlacement;
+  endpoint?: string;
+  fetchImpl?: typeof fetch;
+}): Promise<InspectorCommentResult> {
+  if (!block) throw new Error("OpenPress inspector comment requires a selected block.");
+  const normalizedNote = note.trim();
+  if (!normalizedNote) throw new Error("OpenPress inspector comment note must not be empty.");
+  if (!block.path || !block.source?.line) throw new Error("OpenPress inspector selected block has no editable source location.");
+  if (typeof fetchImpl !== "function") throw new Error("OpenPress inspector comment endpoint is unavailable.");
+
+  const response = await fetchImpl(endpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      target: {
+        blockId: block.id,
+        path: block.path,
+        source: block.source,
+      },
+      note: normalizedNote,
+      hint: formatInspectorHint({ intent, placement }),
+    }),
+  });
+  const result = await response.json().catch(() => null) as InspectorCommentResult | null;
+  if (!response.ok) {
+    throw new Error(result?.message ?? `OpenPress inspector comment failed with status ${response.status}`);
+  }
+  return result ?? { ok: true };
+}
+
+export async function fetchInspectorComments({
+  endpoint = "/__openpress/comment",
+  fetchImpl = globalThis.fetch?.bind(globalThis),
+}: {
+  endpoint?: string;
+  fetchImpl?: typeof fetch;
+} = {}): Promise<PendingComment[]> {
+  if (typeof fetchImpl !== "function") throw new Error("OpenPress inspector comment endpoint is unavailable.");
+
+  const response = await fetchImpl(endpoint, { method: "GET" });
+  const result = await response.json().catch(() => null) as CommentListResult | null;
+  if (!response.ok) {
+    throw new Error(result?.message ?? `OpenPress inspector comment list failed with status ${response.status}`);
+  }
+  return Array.isArray(result?.comments) ? result.comments : [];
+}
+
+export async function clearInspectorComment({
+  id,
+  all = false,
+  endpoint = "/__openpress/comment",
+  fetchImpl = globalThis.fetch?.bind(globalThis),
+}: {
+  id?: string;
+  all?: boolean;
+  endpoint?: string;
+  fetchImpl?: typeof fetch;
+} = {}): Promise<CommentClearResult> {
+  if (typeof fetchImpl !== "function") throw new Error("OpenPress inspector comment endpoint is unavailable.");
+  if (!all && !id) throw new Error("OpenPress inspector comment clear requires an id or all=true.");
+
+  const response = await fetchImpl(endpoint, {
+    method: "DELETE",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(all ? { all: true } : { id }),
+  });
+  const result = await response.json().catch(() => null) as CommentClearResult | null;
+  if (!response.ok) {
+    throw new Error(result?.message ?? `OpenPress inspector comment clear failed with status ${response.status}`);
+  }
+  return result ?? { ok: true, removedCount: 0 };
+}
+
+export async function updateInspectorComment({
+  id,
+  note,
+  intent,
+  placement,
+  endpoint = "/__openpress/comment",
+  fetchImpl = globalThis.fetch?.bind(globalThis),
+}: {
+  id: string;
+  note: string;
+  intent?: InspectorIntent;
+  placement?: InspectorPlacement;
+  endpoint?: string;
+  fetchImpl?: typeof fetch;
+}): Promise<InspectorCommentResult> {
+  const normalizedNote = note.trim();
+  if (!id.trim()) throw new Error("OpenPress inspector comment update requires an id.");
+  if (!normalizedNote) throw new Error("OpenPress inspector comment note must not be empty.");
+  if (typeof fetchImpl !== "function") throw new Error("OpenPress inspector comment endpoint is unavailable.");
+
+  const response = await fetchImpl(endpoint, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      id,
+      note: normalizedNote,
+      hint: formatInspectorHint({ intent, placement }),
+    }),
+  });
+  const result = await response.json().catch(() => null) as InspectorCommentResult | null;
+  if (!response.ok) {
+    throw new Error(result?.message ?? `OpenPress inspector comment update failed with status ${response.status}`);
+  }
+  return result ?? { ok: true };
+}
+
+export function useInspector(
+  document: ReaderDocument,
+  {
+    enabled = false,
+    storageKey = DEFAULT_INSPECTOR_STORAGE_KEY,
+  }: {
+    enabled?: boolean;
+    storageKey?: string;
+  } = {},
+): InspectorState {
+  const blockMap = useMemo(() => getSourceBlockMap(document), [document]);
+  const [inspectorMode, setInspectorModeState] = useState(() => {
+    if (!enabled || typeof window === "undefined") return false;
+    return window.localStorage.getItem(storageKey) === "on";
+  });
+  const [selectedTarget, setSelectedTarget] = useState<InspectorTarget | null>(null);
+  const [commentIntent, setCommentIntent] = useState<InspectorIntent>("edit");
+
+  useEffect(() => {
+    if (!enabled && inspectorMode) setInspectorModeState(false);
+  }, [enabled, inspectorMode]);
+
+  const setInspectorMode = useCallback((nextEnabled: boolean) => {
+    setInspectorModeState(nextEnabled);
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(storageKey, nextEnabled ? "on" : "off");
+    }
+    if (!nextEnabled) setSelectedTarget(null);
+  }, [storageKey]);
+
+  const selectTarget = useCallback((target: InspectorTarget | null) => {
+    setSelectedTarget(target);
+    if (!target) return null;
+    setCommentIntent(target.placement === "before" ? "add" : "edit");
+    const sourceBlock = blockMap[target.blockId] ?? null;
+    return sourceBlock;
+  }, [blockMap]);
+
+  const inspectTarget = useCallback((target: EventTarget | null) => {
+    const inspectorTarget = findInspectorTarget(target);
+    return selectTarget(inspectorTarget);
+  }, [selectTarget]);
+
+  const handleClick = useCallback((event: ReactMouseEvent) => {
+    if (!enabled || !inspectorMode) return false;
+    const inspectorTarget = findInspectorTarget(event.target);
+    if (!inspectorTarget) return false;
+    selectTarget(inspectorTarget);
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }, [enabled, inspectorMode, selectTarget]);
+
+  const selectedBlockId = selectedTarget?.blockId ?? null;
+  const selectedBlock = selectedBlockId ? (blockMap[selectedBlockId] ?? null) : null;
+
+  return {
+    enabled,
+    inspectorMode: enabled && inspectorMode,
+    selectedBlockId,
+    selectedBlock,
+    selectedTarget,
+    commentIntent,
+    setInspectorMode,
+    toggleInspectorMode: () => setInspectorMode(!inspectorMode),
+    setCommentIntent,
+    selectTarget,
+    inspectTarget,
+    handleClick,
+  };
+}
+
+export function findInspectorTarget(target: EventTarget | null): InspectorTarget | null {
+  if (typeof Element === "undefined") return null;
+  if (!(target instanceof Element)) return null;
+  const insertTarget = target.closest<HTMLElement>("[data-openpress-insert-before-block-id]");
+  const insertBeforeBlockId = insertTarget?.dataset.openpressInsertBeforeBlockId;
+  if (insertBeforeBlockId) return { blockId: insertBeforeBlockId, placement: "before" };
+
+  const element = target.closest<HTMLElement>("[data-openpress-block-id]");
+  const blockId = element?.dataset.openpressBlockId;
+  return blockId ? { blockId, placement: "block" } : null;
+}
+
+export function formatInspectorHint({
+  intent,
+  placement,
+}: {
+  intent?: InspectorIntent;
+  placement?: InspectorPlacement;
+} = {}) {
+  const parts = ["openpress-react-inspector"];
+  if (intent) parts.push(`intent=${intent}`);
+  if (placement) parts.push(`placement=${placement}`);
+  return parts.join(" ");
+}

package/src/openpress/pageRoute.ts

@@ -0,0 +1,21 @@
+const PAGE_HASH_PATTERN = /^#page-(\d+)$/;
+
+export function pageHashFromIndex(pageIndex: number) {
+  return `#page-${String(Math.max(1, pageIndex + 1)).padStart(2, "0")}`;
+}
+
+export function pageIndexFromHash(hash: string, pageCount: number) {
+  const match = hash.match(PAGE_HASH_PATTERN);
+  if (!match) return null;
+
+  const pageNumber = Number.parseInt(match[1], 10);
+  if (!Number.isFinite(pageNumber) || pageNumber < 1 || pageNumber > pageCount) return null;
+  return pageNumber - 1;
+}
+
+export function replacePageRoute(pageIndex: number) {
+  if (typeof window === "undefined") return;
+  const hash = pageHashFromIndex(pageIndex);
+  if (window.location.hash === hash) return;
+  window.history.replaceState(null, "", hash);
+}