@open-press/core 1.1.2 → 1.1.4

package/src/openpress/core/types.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, ReactNode } from "react";
-import type { EditableSourceRef, ObjectEntityKind } from "../document-model/documentTypes";
+import type { EditableSourceRef, ObjectEntityKind, PressType } from "../document-model/documentTypes";
 
 // ---------------------------------------------------------------------------
 // Frame / MdxArea / Press primitives
@@ -52,6 +52,9 @@ export interface PressProps {
   // Document title. Required in 1.0. Used for PDF metadata, HTML <title>,
   // OG tags, and the Workspace gallery / tab-bar label.
   title?: string;
+  // Creation mode. Pages are source-driven with MDX allocation; slides are
+  // explicit one-frame-per-page documents. Defaults to "pages".
+  type?: PressType;
   // Page geometry preset name or a custom geometry object. Optional;
   // workspace default applies if not set.
   page?: "a4" | "social-square" | "slide-16-9" | PageGeometry;
@@ -118,7 +121,7 @@ export type BaseCalloutProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
   children: ReactNode;
 };
 
-export type ObjectEntityElement = "span" | "div" | "section" | "article" | "figure" | "p";
+export type ObjectEntityElement = keyof HTMLElementTagNameMap;
 
 export type ObjectEntityProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
   as?: ObjectEntityElement;
@@ -135,9 +138,7 @@ export type ObjectEntityProps = Omit<HTMLAttributes<HTMLElement>, "children"> &
   children?: ReactNode;
 };
 
-export type TextProps = Omit<ObjectEntityProps, "kind"> & {
-  as?: "span" | "div" | "p";
-};
+export type TextProps = Omit<ObjectEntityProps, "kind">;
 
 // ---------------------------------------------------------------------------
 // Source descriptors and resolved sources
@@ -233,4 +234,3 @@ export interface ResolvedSource {
 // Per-frame, per-chain, ordered list of React nodes assigned to each
 // MdxArea by area index.
 export type FrameAllocation = Record<string, Record<string, ReactNode[]>>;
-

package/src/openpress/document-model/documentTypes.ts

@@ -18,6 +18,8 @@ export interface ReaderDocument {
   blocks: HtmlPageBlock[];
 }
 
+export type PressType = "pages" | "slides";
+
 export interface DocumentSource {
   type: string;
   contentDir?: string;
@@ -57,6 +59,7 @@ export interface SourceBlock {
 
 export interface DocumentMeta {
   title: string;
+  type?: PressType;
   subtitle?: string;
   organization?: string;
   version?: string;

package/src/openpress/document-model/workspaceManifestModel.ts

@@ -5,6 +5,7 @@
 // Single-Press workspaces emit one entry with slug = "" and the
 // legacy /openpress/document.json path. Multi-Press emits one entry
 // per slug; each `documentUrl` resolves to /openpress/<slug>/document.json.
+import type { PressType } from "./documentTypes";
 
 export interface WorkspaceManifest {
   version: 1;
@@ -20,6 +21,9 @@ export interface WorkspaceManifestPress {
   slug: string;
   // <Press title="..."> prop. Required in v1.0 contract.
   title: string;
+  // Creation mode declared by <Press type>. Defaults to "pages" for older
+  // documents. The reader uses this for mode-specific navigation affordances.
+  type: PressType;
   // Page geometry summary. Same shape as the reader's
   // ReaderDocument.theme — readers can show a thumb in the gallery
   // without loading the full document.json.

package/src/openpress/reader/SlidePresentationPage.tsx

@@ -0,0 +1,221 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent } from "react";
+import { Maximize2, X } from "lucide-react";
+import { createPageObjectEntityId } from "../document-model";
+import type { HtmlPageBlock, ReaderDocument } from "../document-model";
+import { pageIndexFromHash, replacePageRoute } from "./readerPageRoute";
+import { clampReaderPageIndex, formatReaderPageNumber, normalizeReaderPageCount } from "./readerStateModel";
+import { usePageViewportScale } from "./usePageViewportScale";
+
+type PresentationUiMode = "chrome" | "immersive";
+
+export function SlidePresentationPage({
+  document,
+  pages,
+  style,
+  onExitPresentation,
+}: {
+  document: ReaderDocument;
+  pages: HtmlPageBlock[];
+  style: CSSProperties;
+  onExitPresentation?: (pageIndex: number) => void;
+}) {
+  const sourceContainerRef = useRef<HTMLDivElement | null>(null);
+  const stageRef = useRef<HTMLElement | null>(null);
+  const currentPageIndexRef = useRef(0);
+  const normalizedPageCount = normalizeReaderPageCount(pages.length);
+  const [currentPageIndex, setCurrentPageIndex] = useState(() => {
+    if (typeof window === "undefined") return 0;
+    return pageIndexFromHash(window.location.hash, normalizedPageCount) ?? 0;
+  });
+  const [uiMode, setUiMode] = useState<PresentationUiMode>(() => (
+    shouldStartImmersive() ? "immersive" : "chrome"
+  ));
+  const pageViewport = usePageViewportScale({
+    stageRef,
+    pageContainerRef: sourceContainerRef,
+    pageCount: pages.length,
+    layoutMode: "single",
+  });
+  const currentPage = pages[clampReaderPageIndex(currentPageIndex, normalizedPageCount)];
+  const currentPageLabel = formatReaderPageNumber(currentPageIndex + 1);
+  const totalPageLabel = formatReaderPageNumber(normalizedPageCount);
+  const setPage = useCallback((pageIndex: number) => {
+    const target = clampReaderPageIndex(pageIndex, normalizedPageCount);
+    setCurrentPageIndex(target);
+    replacePageRoute(target);
+  }, [normalizedPageCount]);
+
+  currentPageIndexRef.current = currentPageIndex;
+
+  useEffect(() => {
+    setCurrentPageIndex((idx) => clampReaderPageIndex(idx, normalizedPageCount));
+  }, [normalizedPageCount]);
+
+  useEffect(() => {
+    const syncPageFromHash = () => {
+      const fromHash = pageIndexFromHash(window.location.hash, normalizedPageCount);
+      if (fromHash !== null) setCurrentPageIndex(fromHash);
+    };
+
+    syncPageFromHash();
+    window.addEventListener("hashchange", syncPageFromHash);
+    return () => window.removeEventListener("hashchange", syncPageFromHash);
+  }, [normalizedPageCount]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isEditableTarget(event.target)) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        const activeDocument = globalThis.document;
+        if (activeDocument.fullscreenElement && activeDocument.exitFullscreen) {
+          void activeDocument.exitFullscreen();
+          return;
+        }
+        onExitPresentation?.(currentPageIndexRef.current);
+        return;
+      }
+      if (event.key === " " || event.code === "Space") {
+        event.preventDefault();
+        setPage(currentPageIndexRef.current + 1);
+      } else if (event.key === "ArrowRight" || event.key === "PageDown") {
+        event.preventDefault();
+        setPage(currentPageIndexRef.current + 1);
+      } else if (event.key === "ArrowLeft" || event.key === "PageUp") {
+        event.preventDefault();
+        setPage(currentPageIndexRef.current - 1);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        setPage(0);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        setPage(normalizedPageCount - 1);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [normalizedPageCount, onExitPresentation, setPage]);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setUiMode(globalThis.document.fullscreenElement ? "immersive" : "chrome");
+    };
+
+    globalThis.document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => globalThis.document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+
+  useEffect(() => {
+    if (!shouldStartImmersive()) return;
+    enterImmersive({ keepOnFailure: true });
+  }, []);
+
+  const handleStageClick = (event: ReactMouseEvent<HTMLElement>) => {
+    if (event.defaultPrevented) return;
+    if (!(event.target instanceof Element)) return;
+    if (event.target.closest("a, button, input, textarea, select, [contenteditable]")) return;
+    setPage(currentPageIndex + 1);
+  };
+
+  const handleFullscreen = () => {
+    enterImmersive({ keepOnFailure: false });
+  };
+
+  const enterImmersive = ({ keepOnFailure }: { keepOnFailure: boolean }) => {
+    const stage = stageRef.current;
+    if (!stage?.requestFullscreen) {
+      setUiMode("immersive");
+      return;
+    }
+    setUiMode("immersive");
+    void stage.requestFullscreen().catch(() => {
+      if (!keepOnFailure) setUiMode("chrome");
+    });
+  };
+
+  const pageHtml = useMemo(() => currentPage?.html ?? "", [currentPage?.html]);
+
+  return (
+    <main
+      className="openpress-workbench openpress-reader-app openpress-slide-presenter"
+      style={style}
+      data-openpress-react-runtime="true"
+      data-openpress-view-mode="paged"
+      data-openpress-press-type="slides"
+      data-openpress-presentation-mode="on"
+      data-openpress-present-ui={uiMode}
+      data-openpress-slide-presenter
+      aria-label={`${document.meta.title} 放映模式`}
+    >
+      <section
+        className="openpress-slide-presenter__stage"
+        data-openpress-present-stage
+        aria-label="投影片放映區"
+        onClick={handleStageClick}
+      >
+        <main className="reader-stage" tabIndex={-1} ref={stageRef}>
+          <div
+            className="reader-pages openpress-public-page openpress-slide-presenter__pages"
+            ref={sourceContainerRef}
+            data-openpress-public-page="true"
+            data-openpress-page-layout="single"
+          >
+            {currentPage ? (
+              <div
+                key={currentPage.id}
+                id={`page-${String(currentPage.pageNumber).padStart(2, "0")}`}
+                className="openpress-html-page"
+                data-openpress-object-id={currentPage.frameKey ? createPageObjectEntityId(currentPage.frameKey) : undefined}
+                data-openpress-page-index={currentPage.pageNumber - 1}
+                data-openpress-active="true"
+              >
+                <div className="openpress-html-page__html" dangerouslySetInnerHTML={{ __html: pageHtml }} />
+              </div>
+            ) : null}
+          </div>
+        </main>
+      </section>
+
+      <div className="openpress-slide-presenter__hud" aria-label="放映控制">
+        <span
+          className="openpress-slide-presenter__progress"
+          data-openpress-present-progress
+          data-openpress-present-scale={pageViewport.scaleMode}
+        >
+          {currentPageLabel} / {totalPageLabel}
+        </span>
+        <button
+          type="button"
+          className="openpress-slide-presenter__button"
+          data-openpress-present-fullscreen
+          onClick={handleFullscreen}
+          aria-label="進入全螢幕"
+          title="進入全螢幕"
+        >
+          <Maximize2 aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          className="openpress-slide-presenter__button"
+          data-openpress-present-exit
+          onClick={() => onExitPresentation?.(currentPageIndex)}
+          aria-label="回到工作台"
+          title="回到工作台"
+        >
+          <X aria-hidden="true" />
+        </button>
+      </div>
+    </main>
+  );
+}
+
+function isEditableTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+  return Boolean(target.closest("input, textarea, select, button, [contenteditable]"));
+}
+
+function shouldStartImmersive() {
+  if (typeof window === "undefined") return false;
+  return new URLSearchParams(window.location.search).get("fullscreen") === "1";
+}

package/src/openpress/reader/index.ts

@@ -1,6 +1,7 @@
 export * from "./PageThumbnailsPanel";
 export * from "./PublicReaderPage";
 export * from "./ReaderNavigationPanel";
+export * from "./SlidePresentationPage";
 export * from "./pageViewportScaleModel";
 export * from "./readerPageRegistry";
 export * from "./readerPageRoute";

package/src/openpress/reader/usePanelState.ts

@@ -35,9 +35,12 @@ export function usePanelState({
     if (typeof window === "undefined") return undefined;
 
     const handleResize = () => {
-      setLeftPanelOpen((open) => (open && !shouldOpenLeftPanel() ? false : open));
-      setRightPanelOpen((open) => (open && !shouldOpenRightPanel() ? false : open));
-      onAfterResize?.();
+      const closeLeftPanel = leftPanelOpen && !shouldOpenLeftPanel();
+      const closeRightPanel = rightPanelOpen && !shouldOpenRightPanel();
+
+      if (closeLeftPanel) setLeftPanelOpen(false);
+      if (closeRightPanel) setRightPanelOpen(false);
+      if (closeLeftPanel || closeRightPanel) onAfterResize?.();
     };
 
     handleResize();
@@ -47,7 +50,7 @@ export function usePanelState({
       window.removeEventListener("resize", handleResize);
       window.visualViewport?.removeEventListener("resize", handleResize);
     };
-  }, [shouldOpenLeftPanel, shouldOpenRightPanel, onAfterResize]);
+  }, [leftPanelOpen, rightPanelOpen, shouldOpenLeftPanel, shouldOpenRightPanel, onAfterResize]);
 
   const toggleLeftPanel = useCallback(() => setLeftPanelOpen((open) => !open), []);
   const toggleRightPanel = useCallback(() => setRightPanelOpen((open) => !open), []);

package/src/openpress/shared/runtimeMode.ts

@@ -10,6 +10,13 @@ export function isWorkspaceModeLocation(location: Pick<Location, "hostname" | "p
   return segments.length === 2 && segments[1] === "preview";
 }
 
+export function isPresentationModeLocation(location: Pick<Location, "hostname" | "pathname">) {
+  if (!isLocalWorkspaceHost(location.hostname)) return false;
+  const pathname = normalizePathname(location.pathname);
+  const segments = pathname.split("/").filter(Boolean);
+  return segments.length === 2 && segments[1] === "present";
+}
+
 export function isPrintModeLocation(location: Pick<Location, "search">) {
   return new URLSearchParams(location.search).has("print");
 }

package/src/openpress/workbench/Workbench.tsx

@@ -4,7 +4,7 @@ import {
   useState,
   type CSSProperties,
 } from "react";
-import { ExternalLink, Home, MousePointer2, Ruler } from "lucide-react";
+import { ExternalLink, Home, MousePointer2, Play, Ruler } from "lucide-react";
 import {
   getProjectIdentity,
   resolveAnchorPageIndex,
@@ -55,6 +55,7 @@ export function HtmlWorkbench({
   deploymentInfo,
   onDocumentRefresh,
   onBackToWorkspace,
+  onOpenPresentation,
   extraControlPanels,
 }: {
   document: ReaderDocument;
@@ -64,6 +65,7 @@ export function HtmlWorkbench({
   deploymentInfo: DeploymentInfo;
   onDocumentRefresh?: () => void | Promise<void>;
   onBackToWorkspace?: () => void;
+  onOpenPresentation?: (pageIndex: number) => 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.
@@ -99,6 +101,8 @@ export function HtmlWorkbench({
   const [sourceEditorTarget, setSourceEditorTarget] = useState<InlineDocumentSourceTarget | null>(null);
 
   const projectIdentity = getProjectIdentity(document.meta);
+  const pressType = normalizePressType(document.meta.type);
+  const isSlidePress = pressType === "slides";
   const pageGeometry = formatPageGeometrySpec(document.theme);
   const inspectorSelectionLabel = formatInspectorSelection(
     inspector.selectedBlock,
@@ -284,6 +288,22 @@ export function HtmlWorkbench({
         />
       </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"
@@ -386,8 +406,10 @@ export function HtmlWorkbench({
     pageViewport.scaleMode,
     pageViewport.setScaleMode,
     selectWorkspacePage,
+    isSlidePress,
     sourceBlocksByPath,
     onBackToWorkspace,
+    onOpenPresentation,
     reader.currentPageIndex,
     reader.currentPageLabel,
     projectIdentity.name,
@@ -398,6 +420,8 @@ export function HtmlWorkbench({
       style={style}
       devMode={devMode}
       viewMode={viewMode}
+      pressType={pressType}
+      presentationMode={false}
       inspectorMode={inspector.inspectorMode}
       editMode={inlineEditEnabled}
       leftPanelOpen={reader.leftPanelOpen}
@@ -418,7 +442,7 @@ export function HtmlWorkbench({
           {projectIdentity.label ? <span>{projectIdentity.label}</span> : null}
         </section>
 
-        {bookmarks.length > 0 ? (
+        {!isSlidePress && bookmarks.length > 0 ? (
           <section
             id="openpress-bookmarks"
             className="openpress-panel-section openpress-panel-section--bookmarks"
@@ -504,3 +528,7 @@ function formatInlineEditStatus(status: InlineDocumentEditStatus) {
   if (status.state === "failed") return "儲存失敗";
   return "";
 }
+
+function normalizePressType(value: ReaderDocument["meta"]["type"]) {
+  return value === "slides" ? "slides" : "pages";
+}

package/src/openpress/workbench/document/hooks/useInlineDocumentEditor.ts

@@ -32,6 +32,8 @@ type DocumentWithCaretFromPoint = Document & {
 
 const EDITABLE_SELECTOR = "[data-openpress-editable-block='true']";
 const SOURCE_SELECTOR = "[data-openpress-source-editable-block='true']";
+const EDITABLE_OBJECT_TEXT_SELECTOR = "[data-openpress-object-kind='text'][data-openpress-object-source]";
+const EDITABLE_SOURCE_TARGET_SELECTOR = `[data-openpress-block-id], ${EDITABLE_OBJECT_TEXT_SELECTOR}`;
 const SAVED_EDIT_STATE_RESET_DELAY_MS = 900;
 const UNSAFE_EDITABLE_CHILDREN = [
   "a",
@@ -50,7 +52,6 @@ const UNSAFE_EDITABLE_CHILDREN = [
   "ul",
   "video",
 ].join(",");
-const EDITABLE_COMPONENT_CAPTION_NAMES = new Set(["MediaFigure", "ImageFigure"]);
 
 export function useInlineDocumentEditor({
   enabled,
@@ -233,7 +234,7 @@ function markEditableElements(
   sourceBlockMap: Record<string, SourceBlock>,
   markedElements: Set<HTMLElement>,
 ) {
-  root.querySelectorAll<HTMLElement>("[data-openpress-block-id]").forEach((element) => {
+  root.querySelectorAll<HTMLElement>(EDITABLE_SOURCE_TARGET_SELECTOR).forEach((element) => {
     const sourceBlock = blockFromElement(element, sourceBlockMap);
     if (sourceBlock?.kind === "table-row") {
       markEditableTableCells(element, sourceBlock, markedElements);
@@ -244,6 +245,15 @@ function markEditableElements(
       return;
     }
 
+    if (sourceBlock?.kind === "object-text") {
+      element.dataset.openpressBlockId = sourceBlock.id;
+      element.dataset.openpressInheritedBlockId = "true";
+      element.dataset.openpressEditKind = "object-text";
+      element.dataset.openpressEditName = "text";
+      markEditableTextElement(element, markedElements, { label: "編輯文字" });
+      return;
+    }
+
     if (isEditableTextBlockElement(element, sourceBlockMap)) {
       markEditableTextElement(element, markedElements, {
         label: sourceBlock?.name === "pre" ? "編輯程式碼文字" : "編輯文字",
@@ -267,7 +277,6 @@ function markEditableComponentCaption(
   markedElements: Set<HTMLElement>,
 ) {
   if (sourceBlock.kind !== "component") return false;
-  if (!EDITABLE_COMPONENT_CAPTION_NAMES.has(String(sourceBlock.name))) return false;
   if (!sourceBlock.path || !sourceBlock.source?.line) return false;
 
   const caption = componentElement.querySelector<HTMLElement>("figcaption");
@@ -407,7 +416,76 @@ function eventTargetElement(event: Event) {
 
 function blockFromElement(element: HTMLElement, sourceBlockMap: Record<string, SourceBlock>) {
   const blockId = element.dataset.openpressBlockId;
-  return blockId ? sourceBlockMap[blockId] : undefined;
+  if (blockId && sourceBlockMap[blockId]) return sourceBlockMap[blockId];
+  return sourceBlockFromObjectElement(element);
+}
+
+function sourceBlockFromObjectElement(element: HTMLElement): SourceBlock | undefined {
+  if (element.dataset.openpressObjectKind !== "text") return undefined;
+  const sourceRef = parseObjectSourceRef(element.dataset.openpressObjectSource);
+  if (typeof sourceRef?.path !== "string" || !sourceRef.path) return undefined;
+  const source = sourceLocationFromSourceRef(sourceRef);
+  if (!source?.line) return undefined;
+  const objectId = element.dataset.openpressObjectId || (typeof sourceRef.objectId === "string" ? sourceRef.objectId : undefined);
+  if (!objectId) return undefined;
+  return {
+    id: `object-text:${objectId}`,
+    kind: "object-text",
+    name: "text",
+    path: sourceRef.path,
+    source,
+    frameKey: element.dataset.openpressObjectFrameKey,
+    chainId: element.dataset.openpressObjectChainId,
+  };
+}
+
+type ObjectSourceRefCandidate = {
+  path?: unknown;
+  objectId?: unknown;
+  source?: unknown;
+  line?: unknown;
+  column?: unknown;
+  endLine?: unknown;
+  endColumn?: unknown;
+};
+
+type SourceLocationCandidate = {
+  line?: unknown;
+  column?: unknown;
+  endLine?: unknown;
+  endColumn?: unknown;
+};
+
+function parseObjectSourceRef(value: string | undefined): ObjectSourceRefCandidate | undefined {
+  if (!value) return undefined;
+  try {
+    const parsed = JSON.parse(value) as unknown;
+    return parsed && typeof parsed === "object" ? parsed : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function sourceLocationFromSourceRef(sourceRef: ReturnType<typeof parseObjectSourceRef>): SourceBlock["source"] | undefined {
+  if (!sourceRef) return undefined;
+  const nestedSource = sourceLocationCandidate(sourceRef.source);
+  const line = numberValue(sourceRef.line) ?? numberValue(nestedSource?.line);
+  if (line === undefined) return undefined;
+  return {
+    line,
+    column: numberValue(sourceRef.column) ?? numberValue(nestedSource?.column) ?? 1,
+    endLine: numberValue(sourceRef.endLine) ?? numberValue(nestedSource?.endLine),
+    endColumn: numberValue(sourceRef.endColumn) ?? numberValue(nestedSource?.endColumn),
+  };
+}
+
+function sourceLocationCandidate(value: unknown): SourceLocationCandidate | undefined {
+  if (!value || typeof value !== "object") return undefined;
+  return value;
+}
+
+function numberValue(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value) ? value : undefined;
 }
 
 async function persistElementEdit(
@@ -417,8 +495,8 @@ async function persistElementEdit(
   onStatusChange: InlineDocumentEditorOptions["onStatusChange"],
   onDocumentEdited: InlineDocumentEditorOptions["onDocumentEdited"],
 ) {
-  const blockId = element.dataset.openpressBlockId;
-  const sourceBlock = blockId ? sourceBlockMap[blockId] : undefined;
+  const sourceBlock = blockFromElement(element, sourceBlockMap);
+  const blockId = sourceBlock?.id ?? element.dataset.openpressBlockId;
   const preserveLineBreaks = element.dataset.openpressPreserveLineBreaks === "true";
   const originalText = normalizeEditableText(element.dataset.openpressOriginalText ?? "", { preserveLineBreaks });
   const nextText = normalizeEditableText(readableElementText(element), { preserveLineBreaks });

package/src/openpress/workbench/shell/WorkbenchShell.tsx

@@ -20,6 +20,8 @@ function WorkbenchShellRoot({
   style,
   devMode,
   viewMode,
+  pressType = "pages",
+  presentationMode = false,
   inspectorMode,
   editMode = false,
   leftPanelOpen,
@@ -31,6 +33,8 @@ function WorkbenchShellRoot({
   style: CSSProperties;
   devMode: boolean;
   viewMode: string;
+  pressType?: string;
+  presentationMode?: boolean;
   inspectorMode: boolean;
   editMode?: boolean;
   leftPanelOpen: boolean;
@@ -45,6 +49,7 @@ function WorkbenchShellRoot({
     "reader-app openpress-reader-app openpress-public-viewer openpress-dev-public-viewer openpress-workbench-shell is-ready",
     leftPanelOpen ? "" : "is-closed-left",
     rightPanelOpen ? "" : "is-closed-right",
+    presentationMode ? "is-presentation-mode" : "",
   ].filter(Boolean).join(" ");
 
   return (
@@ -54,6 +59,8 @@ function WorkbenchShellRoot({
           className={shellClassName}
           data-openpress-react-runtime="true"
           data-openpress-view-mode={viewMode}
+          data-openpress-press-type={pressType}
+          data-openpress-presentation-mode={presentationMode ? "on" : "off"}
           data-openpress-inspector-mode={inspectorMode ? "on" : "off"}
           data-openpress-edit-mode={editMode ? "on" : "off"}
           data-openpress-workbench-shell