collabmd 0.1.47 → 0.1.48

package/src/client/excalidraw-editor.js

@@ -469,6 +469,32 @@ function buildExcalidrawProps({ initialData, renderTopRightUI, viewModeEnabled }
 }
 
 const diagramCommentsContext = React.createContext(null);
+const presentationContext = React.createContext(null);
+
+function PresentationToolbar() {
+  const context = React.useContext(presentationContext);
+  if (!context) {
+    return null;
+  }
+
+  const label = context.active ? 'Exit presentation' : 'Start presentation';
+  const icon = context.active ? '×' : '▶';
+  let title = context.active ? 'Exit presentation' : 'Present frames';
+  if (context.frameCount === 0) {
+    title = 'Add a frame to create slides';
+  }
+
+  return React.createElement('button', {
+    'aria-label': label,
+    'aria-pressed': context.active,
+    className: `diagram-comment-button excalidraw-presentation-toggle sidebar-trigger${context.active ? ' is-active' : ''}`,
+    'data-testid': 'excalidraw-presentation-toggle',
+    disabled: context.frameCount === 0,
+    onClick: context.toggle,
+    title,
+    type: 'button',
+  }, React.createElement('span', { 'aria-hidden': 'true' }, icon));
+}
 
 function DiagramCommentsToolbar() {
   const context = React.useContext(diagramCommentsContext);
@@ -518,7 +544,12 @@ function DiagramCommentsToolbar() {
 
 const DiagramCommentsExcalidraw = React.memo(function DiagramCommentsExcalidraw({ initialData = null, renderKey = 0, viewModeEnabled }) {
   const renderTopRightUI = React.useCallback(
-    () => React.createElement(DiagramCommentsToolbar),
+    () => React.createElement('div', {
+      className: 'excalidraw-editor-toolbar',
+    }, [
+      React.createElement(PresentationToolbar, { key: 'presentation' }),
+      React.createElement(DiagramCommentsToolbar, { key: 'comments' }),
+    ]),
     [],
   );
 
@@ -566,7 +597,13 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const [draft, setDraft] = React.useState('');
   const [replyDraft, setReplyDraft] = React.useState('');
+  const [presentationFrameId, setPresentationFrameId] = React.useState(null);
   const [, setViewportRevision] = React.useState(0);
+  const presentationFrames = (
+    getMountedExcalidrawAPI()?.getSceneElementsIncludingDeleted?.() || []
+  ).filter((element) => element?.type === 'frame' && !element.isDeleted);
+  const presentationIndex = presentationFrames.findIndex((frame) => frame.id === presentationFrameId);
+  const presentationMode = presentationFrameId !== null;
 
   React.useEffect(() => {
     const api = getMountedExcalidrawAPI();
@@ -588,6 +625,76 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
 
   useCloseDiagramCommentsOnCanvas(drawerOpen, setDrawerOpen);
 
+  const goToPresentationFrame = React.useCallback((index) => {
+    const targetIndex = Math.min(Math.max(index, 0), presentationFrames.length - 1);
+    const frame = presentationFrames[targetIndex];
+    const api = getMountedExcalidrawAPI();
+    if (!api || !frame) {
+      return;
+    }
+
+    setPresentationFrameId(frame.id);
+    api.setViewport({
+      animation: true,
+      fit: 'contain',
+      offsets: { ui: true },
+      target: frame,
+    });
+  }, [presentationFrames]);
+
+  const togglePresentation = React.useCallback(() => {
+    if (presentationMode) {
+      setPresentationFrameId(null);
+      return;
+    }
+
+    setDrawerOpen(false);
+    setComposerOpen(false);
+    setActiveThreadId(null);
+    goToPresentationFrame(0);
+  }, [goToPresentationFrame, presentationMode]);
+
+  React.useEffect(() => {
+    if (!presentationFrameId || presentationIndex >= 0) {
+      return;
+    }
+
+    if (presentationFrames.length > 0) {
+      goToPresentationFrame(0);
+    } else {
+      setPresentationFrameId(null);
+    }
+  }, [goToPresentationFrame, presentationFrameId, presentationFrames.length, presentationIndex]);
+
+  React.useEffect(() => {
+    if (!presentationMode) {
+      return undefined;
+    }
+
+    const handlePresentationKeyDown = (event) => {
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) {
+        return;
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setPresentationFrameId(null);
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        event.stopPropagation();
+        goToPresentationFrame(presentationIndex + 1);
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        event.stopPropagation();
+        goToPresentationFrame(presentationIndex - 1);
+      }
+    };
+
+    document.addEventListener('keydown', handlePresentationKeyDown, true);
+    return () => document.removeEventListener('keydown', handlePresentationKeyDown, true);
+  }, [goToPresentationFrame, presentationIndex, presentationMode]);
+
   React.useEffect(() => {
     if (activeThreadId && !threads.some((thread) => thread.id === activeThreadId)) {
       setActiveThreadId(null);
@@ -833,7 +940,8 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
     ]);
   };
 
-  const renderCommentsOverlay = visible && room
+  const commentsVisible = visible && !presentationMode;
+  const renderCommentsOverlay = commentsVisible && room
     ? React.createElement('div', {
       'aria-label': 'Diagram comments overlay',
       className: 'diagram-comments-overlay',
@@ -865,7 +973,44 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
     ])
     : null;
 
-  return React.createElement(diagramCommentsContext.Provider, {
+  const renderPresentationNavigation = presentationMode
+    ? React.createElement('div', {
+      'aria-label': 'Presentation navigation',
+      className: 'excalidraw-presentation-navigation',
+      key: 'presentation-navigation',
+      role: 'toolbar',
+    }, [
+      React.createElement('button', {
+        'aria-label': 'Previous slide',
+        className: 'diagram-comment-button',
+        disabled: presentationIndex <= 0,
+        key: 'previous',
+        onClick: () => goToPresentationFrame(presentationIndex - 1),
+        type: 'button',
+      }, '←'),
+      React.createElement('span', {
+        'aria-live': 'polite',
+        className: 'excalidraw-presentation-status',
+        key: 'status',
+      }, `${presentationFrames[presentationIndex]?.name || `Slide ${presentationIndex + 1}`} · ${presentationIndex + 1} / ${presentationFrames.length}`),
+      React.createElement('button', {
+        'aria-label': 'Next slide',
+        className: 'diagram-comment-button',
+        disabled: presentationIndex >= presentationFrames.length - 1,
+        key: 'next',
+        onClick: () => goToPresentationFrame(presentationIndex + 1),
+        type: 'button',
+      }, '→'),
+    ])
+    : null;
+
+  return React.createElement(presentationContext.Provider, {
+    value: {
+      active: presentationMode,
+      frameCount: presentationFrames.length,
+      toggle: togglePresentation,
+    },
+  }, React.createElement(diagramCommentsContext.Provider, {
     value: {
       canWrite,
       drawerOpen,
@@ -874,17 +1019,18 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
       selectedElement,
       threads,
       toggleDrawer: () => setDrawerOpen((open) => !open),
-      visible,
+      visible: commentsVisible,
     },
   }, [
     React.createElement(DiagramCommentsExcalidraw, {
       initialData,
       key: 'excalidraw',
       renderKey: editorRenderKey,
-      viewModeEnabled: getDocumentViewState().viewModeEnabled,
+      viewModeEnabled: presentationMode || getDocumentViewState().viewModeEnabled,
     }),
     renderCommentsOverlay,
-  ]);
+    renderPresentationNavigation,
+  ]));
 }
 
 function renderExcalidrawApp({ initialData } = {}) {

package/src/client/export/export-host.js

@@ -3,7 +3,7 @@ import { resolveAppUrl } from '../infrastructure/runtime-config.js';
 const EXPORT_PAGE_SOURCE = 'collabmd-export-page';
 const EXPORT_HOST_SOURCE = 'collabmd-export-host';
 const EXPORT_JOB_CLOSE_POLL_MS = 500;
-const EXPORT_JOB_TIMEOUT_MS = 60_000;
+const EXPORT_JOB_TIMEOUT_MS = 300_000;
 const pendingJobs = new Map();
 let exportBridgeErrorHandler = null;
 
@@ -15,31 +15,29 @@ function normalizeFormat(format) {
   return ['html', 'pdf'].includes(format) ? format : 'docx';
 }
 
-function buildExportUrl({ filePath, format, jobId }) {
-  const url = new URL(resolveAppUrl('/export-document.html'), window.location.origin);
-  url.searchParams.set('action', normalizeFormat(format));
-  url.searchParams.set('job', jobId);
-  if (filePath) {
-    url.searchParams.set('file', filePath);
-  }
-  return url.toString();
-}
-
 function createBootstrapPayload({
+  currentFilePath = '',
+  currentMarkdownText = '',
+  directoryPath = '',
   fileList = [],
   filePath,
   format,
   jobId,
   markdownText = '',
+  theme = 'light',
   title = '',
 }) {
   return {
     action: normalizeFormat(format),
+    currentFilePath: String(currentFilePath ?? ''),
+    currentMarkdownText: String(currentMarkdownText ?? ''),
+    directoryPath: String(directoryPath ?? ''),
     fileList: Array.isArray(fileList) ? fileList.slice() : [],
     filePath: String(filePath ?? ''),
     jobId,
     markdownText: String(markdownText ?? ''),
     source: EXPORT_HOST_SOURCE,
+    theme: theme === 'dark' ? 'dark' : 'light',
     title: String(title ?? ''),
     type: 'bootstrap',
   };
@@ -136,26 +134,9 @@ export function initializeExportBridge({
   window.__collabmdExportBridgeInitialized = true;
 }
 
-export async function exportDocument({
-  fileList = [],
-  filePath,
-  format,
-  markdownText = '',
-  title = '',
-} = {}) {
-  const normalizedFilePath = String(filePath ?? '').trim();
-  if (!normalizedFilePath) {
-    throw new Error('No markdown note is open');
-  }
-
+async function startExport(payload) {
   const jobId = createJobId();
-  const url = buildExportUrl({
-    filePath: normalizedFilePath,
-    format,
-    jobId,
-  });
-
-  const exportWindow = window.open(url, '_blank');
+  const exportWindow = globalThis.open('', jobId);
   if (!exportWindow) {
     throw new Error('Export popup was blocked');
   }
@@ -172,12 +153,9 @@ export async function exportDocument({
       });
     }, EXPORT_JOB_CLOSE_POLL_MS),
     payload: createBootstrapPayload({
-      fileList,
-      filePath: normalizedFilePath,
-      format,
+      ...payload,
       jobId,
-      markdownText,
-      title,
+      theme: document.documentElement.dataset.theme,
     }),
     timeoutId: window.setTimeout(() => {
       finishPendingJob(jobId, {
@@ -188,6 +166,49 @@ export async function exportDocument({
     window: exportWindow,
   });
 
+  exportWindow.location.replace(resolveAppUrl('/export-document.html'));
   exportWindow.focus?.();
   return jobId;
 }
+
+export async function exportDirectory({
+  currentFilePath = '',
+  currentMarkdownText = '',
+  directoryPath,
+  fileList = [],
+  format,
+} = {}) {
+  const normalizedDirectoryPath = String(directoryPath ?? '').replace(/\\/gu, '/').replace(/^\/+|\/+$/gu, '').trim();
+  if (!normalizedDirectoryPath) {
+    throw new Error('No folder was selected');
+  }
+
+  return startExport({
+    currentFilePath,
+    currentMarkdownText,
+    directoryPath: normalizedDirectoryPath,
+    fileList,
+    format,
+  });
+}
+
+export async function exportDocument({
+  fileList = [],
+  filePath,
+  format,
+  markdownText = '',
+  title = '',
+} = {}) {
+  const normalizedFilePath = String(filePath ?? '').trim();
+  if (!normalizedFilePath) {
+    throw new Error('No markdown note is open');
+  }
+
+  return startExport({
+    fileList,
+    filePath: normalizedFilePath,
+    format,
+    markdownText,
+    title,
+  });
+}

package/src/client/export/export-page.js

@@ -1,5 +1,6 @@
 import {
   postExportPageMessage,
+  prepareDirectoryExportSnapshot,
   prepareExportSnapshot,
   runExportAdapter,
   waitForBootstrapPayload,
@@ -7,6 +8,10 @@ import {
 } from './export-pipeline.js';
 import { groupHeadingWithFollowingBlock } from './export-print-layout.js';
 
+function getExportJobId() {
+  return new URLSearchParams(window.location.search).get('job') || window.name || '';
+}
+
 function setStatus(message) {
   const status = document.getElementById('exportStatus');
   if (status) {
@@ -38,7 +43,8 @@ function renderSnapshot(snapshot) {
   }
 
   document.title = `${snapshot.title} — Export`;
-  mount.innerHTML = snapshot.html;
+  const parsed = new DOMParser().parseFromString(`<body>${snapshot.html}</body>`, 'text/html');
+  mount.replaceChildren(...parsed.body.childNodes);
   groupHeadingWithFollowingBlock(mount);
   renderWarnings(snapshot);
   return mount;
@@ -48,7 +54,11 @@ async function bootstrap() {
   try {
     setStatus('Loading export content…');
     const payload = await waitForBootstrapPayload();
-    const snapshot = await prepareExportSnapshot(payload);
+    document.documentElement.dataset.theme = payload.theme;
+    document.body.dataset.theme = payload.theme;
+    const snapshot = payload.directoryPath
+      ? await prepareDirectoryExportSnapshot(payload)
+      : await prepareExportSnapshot(payload);
     const mount = renderSnapshot(snapshot);
     snapshot.html = await waitForRenderedExportContent(mount);
     setStatus(payload.action === 'pdf'
@@ -58,12 +68,12 @@ async function bootstrap() {
     setStatus(payload.action === 'pdf'
       ? 'Print dialog opened.'
       : `${payload.action.toUpperCase()} download started.`);
-    postExportPageMessage('complete', { jobId: new URL(window.location.href).searchParams.get('job') || '' });
+    postExportPageMessage('complete', { jobId: getExportJobId() });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Export failed';
     setStatus(message);
     postExportPageMessage('error', {
-      jobId: new URL(window.location.href).searchParams.get('job') || '',
+      jobId: getExportJobId(),
       message,
     });
   }