collabmd 0.1.26 → 0.1.29

package/src/client/application/app-shell/ui-feature-toolbar.js

@@ -41,7 +41,7 @@ function renderBlockMenuMarkup(activeAction) {
     <div class="markdown-toolbar-block-menu-shell">
       <button
         type="button"
-        class="ui-button btn btn-ghost markdown-toolbar-block-trigger"
+        class="ui-button ui-button--ghost markdown-toolbar-block-trigger"
         data-markdown-block-menu-toggle
         aria-haspopup="menu"
         aria-expanded="false"

package/src/client/application/app-shell/workspace-feature.js

@@ -48,7 +48,9 @@ export const workspaceFeature = {
       return String(previewDocument.content ?? '');
     }
 
-    return this.workspacePreviewController.getPreviewSource(this.currentFilePath);
+    return this.workspacePreviewController.getPreviewSource(this.currentFilePath, {
+      drawioMode: this.currentDrawioMode ?? null,
+    });
   },
 
   getStaticPreviewDocument() {
@@ -88,8 +90,34 @@ export const workspaceFeature = {
     this.workspacePreviewController.resetPreviewMode();
   },
 
-  syncFileChrome(filePath) {
-    this.workspacePreviewController.syncFileChrome(filePath);
+  syncFileChrome(filePath, options = {}) {
+    this.workspacePreviewController.syncFileChrome(filePath, options);
+  },
+
+  handleLayoutViewRequest(view) {
+    if (!this.currentFilePath || !this.isDrawioFile(this.currentFilePath)) {
+      return true;
+    }
+
+    if (this.currentDrawioMode === 'text') {
+      if (view !== 'preview') {
+        return true;
+      }
+
+      if (this.layoutController.isMobileViewport?.()) {
+        this.layoutController.primeView(view);
+      }
+      this.navigation.navigateToFile(this.currentFilePath);
+      return false;
+    }
+
+    if (view === 'preview') {
+      return true;
+    }
+
+    this.layoutController.primeView(view);
+    this.navigation.navigateToFile(this.currentFilePath, { drawioMode: 'text' });
+    return false;
   },
 
   renderExcalidrawFilePreview(filePath) {

package/src/client/application/app-shell-elements.js

@@ -34,6 +34,9 @@ export function bindAppShellElements(doc = document) {
     displayNameTitle: doc.getElementById('displayNameTitle'),
     editNameButton: doc.getElementById('editNameBtn'),
     editorContainer: doc.getElementById('editorContainer'),
+    exportDocxButton: doc.getElementById('exportDocxBtn'),
+    exportMenuGroup: doc.getElementById('exportMenuGroup'),
+    exportPdfButton: doc.getElementById('exportPdfBtn'),
     markdownToolbar: doc.getElementById('markdownToolbar'),
     editorPage: doc.getElementById('editor-page'),
     diffPage: doc.getElementById('diff-page'),

package/src/client/application/preview-render-compiler.js

@@ -161,12 +161,14 @@ function createVideoEmbedPlaceholder({
   kind,
   label,
   mimeType = '',
+  originalUrl = '',
   source,
   url,
 }) {
   const subtitle = kind === 'youtube' ? 'YouTube video' : 'Video file';
   const mimeTypeAttribute = mimeType ? ` data-video-embed-mime-type="${escapeHtml(mimeType)}"` : '';
-  return `<span class="video-embed-placeholder video-embed-shell diagram-preview-shell" data-video-embed-key="${escapeHtml(embedKey)}" data-video-embed-kind="${escapeHtml(kind)}" data-video-embed-label="${escapeHtml(label)}" data-video-embed-source="${escapeHtml(source)}" data-video-embed-url="${escapeHtml(url)}"${mimeTypeAttribute}><span class="video-embed-placeholder-card diagram-preview-placeholder-card"><span class="video-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>${escapeHtml(subtitle)}</span></span></span></span>`;
+  const originalUrlAttribute = originalUrl ? ` data-video-embed-original-url="${escapeHtml(originalUrl)}"` : '';
+  return `<span class="video-embed-placeholder video-embed-shell diagram-preview-shell" data-video-embed-key="${escapeHtml(embedKey)}" data-video-embed-kind="${escapeHtml(kind)}" data-video-embed-label="${escapeHtml(label)}" data-video-embed-source="${escapeHtml(source)}" data-video-embed-url="${escapeHtml(url)}"${mimeTypeAttribute}${originalUrlAttribute}><span class="video-embed-placeholder-card diagram-preview-placeholder-card"><span class="video-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>${escapeHtml(subtitle)}</span></span></span></span>`;
 }
 
 function renderVideoEmbed(token, videoEmbedCounts) {
@@ -189,6 +191,7 @@ function renderVideoEmbed(token, videoEmbedCounts) {
     kind: classification.type,
     label: title || 'Embedded video',
     mimeType: classification.mimeType,
+    originalUrl: source,
     source: preserveSource,
     url: classification.type === 'youtube' ? classification.embedUrl : classification.sourceUrl,
   });
@@ -411,7 +414,7 @@ function createMarkdownRenderer(fileList = [], {
     const content = tokens[index].content;
 
     if (content.startsWith('[x] ') || content.startsWith('[X] ')) {
-      return `<input type="checkbox" checked disabled> ${renderInlineWikiText(content.slice(4), {
+      return `<input type="checkbox" checked data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
         drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
@@ -421,7 +424,7 @@ function createMarkdownRenderer(fileList = [], {
     }
 
     if (content.startsWith('[ ] ')) {
-      return `<input type="checkbox" disabled> ${renderInlineWikiText(content.slice(4), {
+      return `<input type="checkbox" data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
         drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,

package/src/client/application/workspace-chrome-controller.js

@@ -44,19 +44,21 @@ export class WorkspaceChromeController {
     this.stateStore = stateStore;
   }
 
-  prepareForFileOpen(filePath, { resetConnectionState = true } = {}) {
+  prepareForFileOpen(filePath, { drawioMode = null, resetConnectionState = true } = {}) {
     this.onViewModeReset();
     this.onBeforeFileOpen();
     this.stateStore.set('connectionHelpShown', false);
     if (resetConnectionState) {
       this.stateStore.set('connectionState', { status: 'connecting', unreachable: false });
     }
+    this.stateStore.set('currentDrawioMode', drawioMode ?? null);
     this.stateStore.set('currentFilePath', filePath);
     this.onUpdateCurrentFile(filePath);
     this.onUpdateLobbyCurrentFile(filePath);
     this.onUpdateActiveFile(filePath);
     this.onUpdateVisibleChrome(filePath, {
       displayName: this.getDisplayName(filePath),
+      drawioMode,
       isMarkdown: isMarkdownFilePath(filePath),
     });
     this.showEditorLoading();

package/src/client/application/workspace-coordinator.js

@@ -160,13 +160,19 @@ export class WorkspaceCoordinator {
       return;
     }
 
+    const normalizedDrawioMode = drawioMode ?? null;
+    const currentDrawioMode = this.stateStore.get('currentDrawioMode') ?? null;
     const isDrawio = this.isDrawioFile(filePath) && drawioMode !== 'text' && this.shouldUseDrawioPreview(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
 
-    if (filePath === this.stateStore.get('currentFilePath') && (this.session || isDrawio || isExcalidraw || isImage)) {
+    if (
+      filePath === this.stateStore.get('currentFilePath')
+      && normalizedDrawioMode === currentDrawioMode
+      && (this.session || isDrawio || isExcalidraw || isImage)
+    ) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
       return;
@@ -177,6 +183,7 @@ export class WorkspaceCoordinator {
 
     this.cleanupSession();
     const chromeState = this.chromeController.prepareForFileOpen(filePath, {
+      drawioMode: normalizedDrawioMode,
       resetConnectionState: !isDrawio && !isExcalidraw && !isImage,
     });
     this.reportFileOpenMetric('open_started', loadToken, { filePath });

package/src/client/application/workspace-preview-controller.js

@@ -58,7 +58,7 @@ export class WorkspacePreviewController {
     return `${fence}${language}\n${text}\n${fence}`;
   }
 
-  getPreviewSource(filePath) {
+  getPreviewSource(filePath, { drawioMode = null } = {}) {
     const source = this.getSession()?.getText() ?? '';
     if (this.isMermaidFile(filePath)) {
       return this.createDiagramPreviewDocument('mermaid', source);
@@ -68,6 +68,10 @@ export class WorkspacePreviewController {
       return this.createDiagramPreviewDocument('plantuml', source);
     }
 
+    if (this.isDrawioFile(filePath) && drawioMode === 'text') {
+      return this.createDiagramPreviewDocument('xml', source);
+    }
+
     return source;
   }
 
@@ -79,7 +83,7 @@ export class WorkspacePreviewController {
     this.elements.previewContent?.classList.remove('is-plantuml-file-preview');
   }
 
-  syncFileChrome(filePath) {
+  syncFileChrome(filePath, { drawioMode = null } = {}) {
     const isDrawio = this.isDrawioFile(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isImage = this.isImageFile(filePath);
@@ -89,11 +93,12 @@ export class WorkspacePreviewController {
     const isDiagramFile = isDiagramFilePath(filePath);
 
     this.elements.markdownToolbar?.classList.toggle('hidden', !isMarkdown);
+    this.elements.exportMenuGroup?.classList.toggle('hidden', !isMarkdown);
     this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage);
     this.elements.previewContent?.classList.toggle('is-mermaid-file-preview', isMermaid);
     this.elements.previewContent?.classList.toggle('is-plantuml-file-preview', isPlantUml);
 
-    if (isDrawio || isExcalidraw || isImage) {
+    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isImage) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();

package/src/client/application/workspace-state-store.js

@@ -9,6 +9,7 @@ export class WorkspaceStateStore {
       chatUnreadCount: 0,
       connectionHelpShown: false,
       connectionState: { status: 'disconnected', unreachable: false },
+      currentDrawioMode: null,
       currentFilePath: null,
       fileExplorerReady: false,
       followedCursorSignature: '',

package/src/client/bootstrap/collabmd-app-shell.js

@@ -7,6 +7,7 @@ import { WorkspaceStateStore } from '../application/workspace-state-store.js';
 import { bindAppShellElements } from '../application/app-shell-elements.js';
 import { chatFeature } from '../application/app-shell/chat-feature.js';
 import { commentsFeature } from '../application/app-shell/comments-feature.js';
+import { exportFeature } from '../application/app-shell/export-feature.js';
 import { gitFeature } from '../application/app-shell/git-feature.js';
 import { presenceFeature } from '../application/app-shell/presence-feature.js';
 import { uiFeature } from '../application/app-shell/ui-feature.js';
@@ -35,10 +36,12 @@ import { ThemeController } from '../presentation/theme-controller.js';
 import { ToastController } from '../presentation/toast-controller.js';
 import { VideoEmbedController } from '../presentation/video-embed-controller.js';
 import { ImageLightboxController } from '../presentation/image-lightbox-controller.js';
+import { renderAppShell } from '../presentation/app-shell-renderer.js';
 
 const APP_SHELL_FEATURES = Object.freeze({
   chat: chatFeature,
   comments: commentsFeature,
+  export: exportFeature,
   git: gitFeature,
   presence: presenceFeature,
   ui: uiFeature,
@@ -87,6 +90,7 @@ function installAppShellFeatures(appShell) {
 export class CollabMdAppShell {
   constructor() {
     installAppShellFeatures(this);
+    renderAppShell(document);
     this.elements = bindAppShellElements(document);
     this.runtimeConfig = getRuntimeConfig();
     this.stateStore = new WorkspaceStateStore();
@@ -223,6 +227,7 @@ export class CollabMdAppShell {
     this.layoutController = new LayoutController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
       onMeasureEditor: () => this.session?.requestMeasure(),
+      onViewRequest: (view) => this.handleLayoutViewRequest(view),
     });
     this.scrollSyncController = new ScrollSyncController({
       getEditorLineNumber: () => this.session?.getTopVisibleLineNumber(0.35) ?? 1,
@@ -421,7 +426,7 @@ export class CollabMdAppShell {
       },
       onUpdateLobbyCurrentFile: (filePath) => this.lobby.setCurrentFile(filePath),
       onUpdateVisibleChrome: (filePath, { displayName }) => {
-        this.syncFileChrome(filePath);
+        this.syncFileChrome(filePath, { drawioMode: this.currentDrawioMode });
         this.syncCommentChrome(filePath);
         this.syncFileHistoryButton({ filePath, mode: 'editor' });
         if (this.elements.activeFileName) {
@@ -493,6 +498,8 @@ export class CollabMdAppShell {
   set session(value) { this._session = value; }
   get currentFilePath() { return this.stateStore.get('currentFilePath'); }
   set currentFilePath(value) { this.stateStore.set('currentFilePath', value); }
+  get currentDrawioMode() { return this.stateStore.get('currentDrawioMode'); }
+  set currentDrawioMode(value) { this.stateStore.set('currentDrawioMode', value ?? null); }
   get globalUsers() { return this.stateStore.get('globalUsers'); }
   set globalUsers(value) { this.stateStore.set('globalUsers', value); }
   get connectionState() { return this.stateStore.get('connectionState'); }

package/src/client/drawio-editor.js

@@ -1,3 +1,6 @@
+import './styles/surfaces/embedded-editor-base.css';
+import './styles/surfaces/drawio-editor.css';
+
 import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
 import { DrawioLeaseClient } from './infrastructure/drawio-lease-client.js';
 import { getRuntimeConfig } from './infrastructure/runtime-config.js';
@@ -50,7 +53,7 @@ banner.innerHTML = `
     <span class="drawio-banner-copy" id="drawioBannerText">Connecting…</span>
   </div>
   <div class="drawio-banner-actions">
-    <button type="button" class="drawio-btn" id="claimEditBtn" hidden>Claim edit</button>
+    <button type="button" class="drawio-toolbar-btn" id="claimEditBtn" hidden>Claim edit</button>
   </div>
 `;
 

package/src/client/excalidraw-editor.js

@@ -14,6 +14,8 @@ import {
   mergeAwarenessUserPatch,
   resolveLocalAwarenessUser,
 } from './domain/excalidraw-collaboration.js';
+import './styles/surfaces/embedded-editor-base.css';
+import './styles/surfaces/excalidraw-editor.css';
 import {
   normalizeScene,
   parseSceneJson,
@@ -70,6 +72,10 @@ const roomClient = new ExcalidrawRoomClient({
   vaultClient: vaultApiClient,
 });
 
+function applySurfaceTheme(theme = currentTheme) {
+  document.body.dataset.theme = theme === 'light' ? 'light' : 'dark';
+}
+
 function getNativeHistoryButton(type) {
   const button = document.querySelector(`[data-testid="button-${type}"]`);
   return button instanceof HTMLButtonElement ? button : null;
@@ -521,6 +527,7 @@ window.addEventListener('message', (event) => {
 
   if (message.type === 'set-theme') {
     currentTheme = message.theme || 'dark';
+    applySurfaceTheme(currentTheme);
     if (excalidrawAPI) {
       suppressOnChange = true;
       excalidrawAPI.updateScene({
@@ -613,6 +620,7 @@ async function init() {
   const loadingElement = document.getElementById('loadingState');
 
   try {
+    applySurfaceTheme(currentTheme);
     await ensureClientAuthenticated();
     const initialScene = await roomClient.connect({ initialUser: localAwarenessUser });
     const initialData = sceneToInitialData(initialScene, { theme: currentTheme });

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

@@ -0,0 +1,193 @@
+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 pendingJobs = new Map();
+let exportBridgeErrorHandler = null;
+
+function createJobId() {
+  return `export-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function normalizeFormat(format) {
+  return format === 'pdf' ? 'pdf' : '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({
+  fileList = [],
+  filePath,
+  format,
+  jobId,
+  markdownText = '',
+  title = '',
+}) {
+  return {
+    action: normalizeFormat(format),
+    fileList: Array.isArray(fileList) ? fileList.slice() : [],
+    filePath: String(filePath ?? ''),
+    jobId,
+    markdownText: String(markdownText ?? ''),
+    source: EXPORT_HOST_SOURCE,
+    title: String(title ?? ''),
+    type: 'bootstrap',
+  };
+}
+
+function clearPendingJobTimers(pendingJob) {
+  if (!pendingJob) {
+    return;
+  }
+
+  if (pendingJob.closePollId) {
+    window.clearInterval(pendingJob.closePollId);
+  }
+
+  if (pendingJob.timeoutId) {
+    window.clearTimeout(pendingJob.timeoutId);
+  }
+}
+
+function finishPendingJob(jobId, {
+  notifyError = false,
+  message = '',
+} = {}) {
+  const pendingJob = pendingJobs.get(jobId);
+  if (!pendingJob) {
+    return;
+  }
+
+  clearPendingJobTimers(pendingJob);
+  pendingJobs.delete(jobId);
+
+  if (notifyError && message) {
+    exportBridgeErrorHandler?.(message);
+  }
+}
+
+export function initializeExportBridge({
+  onError = null,
+} = {}) {
+  exportBridgeErrorHandler = typeof onError === 'function' ? onError : null;
+
+  if (window.__collabmdExportBridgeInitialized) {
+    return;
+  }
+
+  window.addEventListener('message', (event) => {
+    if (event.origin !== window.location.origin) {
+      return;
+    }
+
+    const payload = event.data;
+    if (!payload || payload.source !== EXPORT_PAGE_SOURCE) {
+      return;
+    }
+
+    const jobId = String(payload.jobId ?? '').trim();
+    if (!jobId) {
+      return;
+    }
+
+    const pendingJob = pendingJobs.get(jobId);
+    if (!pendingJob) {
+      return;
+    }
+
+    if (payload.type === 'ready') {
+      if (pendingJob.window?.closed) {
+        finishPendingJob(jobId, {
+          message: 'Export window was closed before the export completed',
+          notifyError: true,
+        });
+        return;
+      }
+
+      try {
+        pendingJob.window?.postMessage(pendingJob.payload, window.location.origin);
+      } catch (error) {
+        finishPendingJob(jobId, {
+          message: error instanceof Error ? error.message : 'Failed to send export data',
+          notifyError: true,
+        });
+      }
+      return;
+    }
+
+    if (payload.type === 'complete' || payload.type === 'error') {
+      finishPendingJob(jobId, {
+        message: payload.type === 'error' && payload.message ? String(payload.message) : '',
+        notifyError: payload.type === 'error' && Boolean(payload.message),
+      });
+    }
+  });
+
+  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');
+  }
+
+  const jobId = createJobId();
+  const url = buildExportUrl({
+    filePath: normalizedFilePath,
+    format,
+    jobId,
+  });
+
+  const exportWindow = window.open(url, '_blank');
+  if (!exportWindow) {
+    throw new Error('Export popup was blocked');
+  }
+
+  pendingJobs.set(jobId, {
+    closePollId: window.setInterval(() => {
+      if (!exportWindow.closed) {
+        return;
+      }
+
+      finishPendingJob(jobId, {
+        message: 'Export window was closed before the export completed',
+        notifyError: true,
+      });
+    }, EXPORT_JOB_CLOSE_POLL_MS),
+    payload: createBootstrapPayload({
+      fileList,
+      filePath: normalizedFilePath,
+      format,
+      jobId,
+      markdownText,
+      title,
+    }),
+    timeoutId: window.setTimeout(() => {
+      finishPendingJob(jobId, {
+        message: 'Export timed out before it completed',
+        notifyError: true,
+      });
+    }, EXPORT_JOB_TIMEOUT_MS),
+    window: exportWindow,
+  });
+
+  exportWindow.focus?.();
+  return jobId;
+}

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

@@ -0,0 +1,60 @@
+import { runExportAdapter, postExportPageMessage, prepareExportSnapshot, waitForBootstrapPayload } from './export-pipeline.js';
+import { groupHeadingWithFollowingBlock } from './export-print-layout.js';
+
+function setStatus(message) {
+  const status = document.getElementById('exportStatus');
+  if (status) {
+    status.textContent = message;
+  }
+}
+
+function renderWarnings(snapshot) {
+  const warningsList = document.getElementById('exportWarnings');
+  const warningsSection = document.getElementById('exportWarningsSection');
+  if (!warningsList || !warningsSection) {
+    return;
+  }
+
+  warningsList.replaceChildren();
+  const warnings = snapshot.warnings ?? [];
+  warningsSection.hidden = warnings.length === 0;
+  warnings.forEach((warning) => {
+    const item = document.createElement('li');
+    item.textContent = warning;
+    warningsList.appendChild(item);
+  });
+}
+
+function renderSnapshot(snapshot) {
+  const mount = document.getElementById('exportContent');
+  if (!mount) {
+    return;
+  }
+
+  document.title = `${snapshot.title} — Export`;
+  mount.innerHTML = snapshot.html;
+  groupHeadingWithFollowingBlock(mount);
+  renderWarnings(snapshot);
+}
+
+async function bootstrap() {
+  try {
+    setStatus('Loading export content…');
+    const payload = await waitForBootstrapPayload();
+    const snapshot = await prepareExportSnapshot(payload);
+    renderSnapshot(snapshot);
+    setStatus(payload.action === 'pdf' ? 'Opening print dialog…' : 'Preparing DOCX download…');
+    await runExportAdapter(snapshot, payload.action);
+    setStatus(payload.action === 'pdf' ? 'Print dialog opened.' : 'DOCX download started.');
+    postExportPageMessage('complete', { jobId: new URL(window.location.href).searchParams.get('job') || '' });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Export failed';
+    setStatus(message);
+    postExportPageMessage('error', {
+      jobId: new URL(window.location.href).searchParams.get('job') || '',
+      message,
+    });
+  }
+}
+
+void bootstrap();