@open-press/core 1.1.1 → 1.1.3

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

package/src/styles/openpress/reader-runtime.css

@@ -75,93 +75,51 @@
 }
 
 .openpress-reader-app[data-openpress-inspector-mode="on"] .openpress-html-page__html [data-openpress-block-id]:hover {
-  outline: 2px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 70%, transparent);
-  outline-offset: 4px;
+  cursor: crosshair;
 }
 
 .openpress-reader-app[data-openpress-inspector-mode="on"] .openpress-html-page__html [data-openpress-inspector-selected="true"] {
-  outline: 2px solid var(--openpress-accent, #df4b21);
-  outline-offset: 5px;
-  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 16%, transparent);
+  cursor: crosshair;
 }
 
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-editable-block="true"] {
-  border-radius: 3px;
-  background: transparent;
   cursor: text;
   caret-color: var(--openpress-accent, #df4b21);
-  outline: none;
-  transition:
-    background 140ms ease,
-    box-shadow 140ms ease,
-    color 140ms ease;
+  /* Chrome applies break-word to contenteditable editing hosts. That changes
+     fixed-layout canvas line breaks, so OpenPress owns the edit-mode wrapping. */
+  overflow-wrap: normal;
+  word-break: normal;
 }
 
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-editable-block="true"]:hover {
-  background:
-    linear-gradient(90deg, color-mix(in srgb, var(--openpress-accent, #df4b21) 9%, transparent), transparent 88%),
-    color-mix(in srgb, var(--openpress-accent, #df4b21) 5%, transparent);
-  box-shadow: inset 0 -0.18em 0 color-mix(in srgb, var(--openpress-accent, #df4b21) 16%, transparent);
+  cursor: text;
 }
 
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-editable-block="true"][data-openpress-editing="true"],
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-editable-block="true"]:focus {
-  background:
-    linear-gradient(90deg, color-mix(in srgb, var(--openpress-accent, #df4b21) 13%, transparent), transparent 90%),
-    color-mix(in srgb, var(--openpress-accent, #df4b21) 7%, transparent);
-  box-shadow: inset 0 -0.2em 0 color-mix(in srgb, var(--openpress-accent, #df4b21) 20%, transparent);
+  cursor: text;
 }
 
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-editable-block="true"][data-openpress-edit-state="saving"] {
-  background:
-    linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--openpress-accent, #df4b21) 7%, transparent) 0%,
-      color-mix(in srgb, var(--openpress-accent, #df4b21) 18%, transparent) 45%,
-      color-mix(in srgb, var(--openpress-accent, #df4b21) 7%, transparent) 90%
-    );
-  background-size: 220% 100%;
-  box-shadow: none;
-  color: transparent;
-  text-shadow: none;
-  animation: openpress-inline-edit-skeleton 920ms linear infinite;
   pointer-events: none;
   user-select: none;
 }
 
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-editable-block="true"][data-openpress-edit-state="saved"] {
-  background: color-mix(in srgb, #22c55e 14%, transparent);
-  box-shadow: inset 0 -0.18em 0 color-mix(in srgb, #22c55e 24%, transparent);
+  cursor: text;
 }
 
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-editable-block="true"][data-openpress-edit-state="failed"] {
-  background: color-mix(in srgb, #ef4444 12%, transparent);
-  box-shadow: inset 0 -0.18em 0 color-mix(in srgb, #ef4444 24%, transparent);
+  cursor: text;
 }
 
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-source-editable-block="true"] {
   cursor: pointer;
-  outline: 1px dashed transparent;
-  outline-offset: 5px;
-  transition:
-    background 140ms ease,
-    outline-color 140ms ease;
 }
 
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-source-editable-block="true"]:hover,
 .openpress-reader-app[data-openpress-edit-mode="on"] .openpress-html-page__html [data-openpress-source-editable-block="true"]:focus {
-  outline-color: color-mix(in srgb, var(--openpress-accent, #df4b21) 42%, transparent);
-  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 7%, transparent);
-}
-
-@keyframes openpress-inline-edit-skeleton {
-  from {
-    background-position: 120% 0;
-  }
-
-  to {
-    background-position: -120% 0;
-  }
+  cursor: pointer;
 }
 
 .openpress-inline-inspector-layer {

package/src/styles/openpress/workbench-panels.css

@@ -50,6 +50,7 @@
 
 .openpress-control-panel {
   display: grid;
+  grid-auto-rows: max-content;
   align-content: start;
   min-height: 0;
   gap: 22px;
@@ -597,24 +598,36 @@
    (canvas-style Press: social posts, slides). Renders the actual page
    HTML scaled down so the user can navigate by visual recognition. */
 .openpress-reader-app .openpress-panel-section--thumbnails {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 8px 14px 16px;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
   min-height: 0;
+  overflow: hidden;
+  padding: 8px 14px 12px;
 }
 
 .openpress-reader-app .openpress-thumb-list {
   display: flex;
+  min-height: 0;
   flex-direction: column;
   gap: 10px;
   margin: 0;
-  padding: 0;
+  overflow: auto;
+  padding: 0 0 10px;
   list-style: none;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.openpress-reader-app .openpress-thumb-list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
 }
 
 .openpress-reader-app .openpress-thumb-card {
   display: grid;
+  width: 100%;
+  min-width: 0;
   grid-template-columns: 20px minmax(0, 1fr);
   align-items: stretch;
   gap: 6px;

package/src/styles/openpress/workbench.css

@@ -31,6 +31,141 @@
   display: none;
 }
 
+.openpress-slide-presenter {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  width: 100%;
+  height: 100dvh;
+  min-height: 100dvh;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% 0, rgb(255 255 255 / 8%), transparent 42%),
+    #070707;
+  color: rgb(245 245 242 / 92%);
+  overscroll-behavior: none;
+}
+
+.openpress-slide-presenter__stage {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.openpress-reader-app.openpress-slide-presenter .reader-stage {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: transparent;
+  overscroll-behavior: contain;
+  scroll-snap-type: none;
+  scrollbar-width: none;
+}
+
+.openpress-reader-app.openpress-slide-presenter .reader-stage::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.openpress-reader-app.openpress-slide-presenter .reader-pages {
+  --openpress-page-gap: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  align-content: center;
+  padding: 0;
+  align-items: center;
+  justify-items: center;
+}
+
+.openpress-reader-app.openpress-slide-presenter .openpress-html-page {
+  min-height: 0;
+  scroll-margin-top: 0;
+  scroll-snap-align: center;
+}
+
+.openpress-reader-app.openpress-slide-presenter .openpress-html-page__html {
+  box-shadow:
+    0 28px 80px rgb(0 0 0 / 34%),
+    0 0 0 1px rgb(255 255 255 / 10%);
+}
+
+.openpress-slide-presenter__hud {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 999px;
+  padding: 6px;
+  background: rgb(18 18 18 / 74%);
+  box-shadow: 0 18px 44px rgb(0 0 0 / 28%);
+  backdrop-filter: blur(18px);
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.openpress-slide-presenter[data-openpress-present-ui="immersive"] {
+  cursor: none;
+}
+
+.openpress-slide-presenter[data-openpress-present-ui="immersive"] .openpress-slide-presenter__stage {
+  cursor: none;
+}
+
+.openpress-slide-presenter[data-openpress-present-ui="immersive"] .openpress-slide-presenter__hud {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(8px);
+}
+
+.openpress-slide-presenter__progress {
+  min-width: 64px;
+  padding: 0 10px;
+  color: rgb(245 245 242 / 72%);
+  font-family: var(--openpress-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  line-height: 30px;
+  text-align: center;
+}
+
+.openpress-slide-presenter__button {
+  display: inline-flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 999px;
+  padding: 0;
+  background: transparent;
+  color: rgb(245 245 242 / 68%);
+  cursor: pointer;
+}
+
+.openpress-slide-presenter__button:hover,
+.openpress-slide-presenter__button:focus-visible {
+  background: rgb(255 255 255 / 10%);
+  color: rgb(245 245 242 / 96%);
+}
+
+.openpress-slide-presenter__button svg {
+  width: 15px;
+  height: 15px;
+}
+
 .openpress-public-viewer.openpress-workbench-shell.openpress-reader-app,
 .openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-left,
 .openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-right,
@@ -58,6 +193,10 @@
   grid-template-columns: 0 minmax(0, 1fr) 0;
 }
 
+.openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-presentation-mode {
+  grid-template-columns: 0 minmax(0, 1fr) 0;
+}
+
 .openpress-workbench-toolbar {
   z-index: 30;
   display: flex;
@@ -1228,6 +1367,16 @@
   opacity: 0;
 }
 
+.openpress-reader-app.is-presentation-mode .openpress-workbench-left-panel,
+.openpress-reader-app.is-presentation-mode .openpress-workbench-right-panel {
+  pointer-events: none;
+}
+
+.openpress-reader-app.is-presentation-mode .openpress-workbench-left-panel > *,
+.openpress-reader-app.is-presentation-mode .openpress-workbench-right-panel > * {
+  opacity: 0;
+}
+
 .openpress-reader-app .reader-stage {
   position: relative;
   width: 100%;