collabmd 0.1.21 → 0.1.25

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

@@ -15,6 +15,7 @@ import { LOBBY_CHAT_MESSAGE_MAX_LENGTH, LobbyPresence } from '../infrastructure/
 import { BrowserNavigationPort } from '../infrastructure/browser-navigation-port.js';
 import { BrowserNotificationPort } from '../infrastructure/browser-notification-port.js';
 import { BrowserPreferencesPort } from '../infrastructure/browser-preferences-port.js';
+import { AppVersionMonitor } from '../infrastructure/app-version-monitor.js';
 import { getRuntimeConfig } from '../infrastructure/runtime-config.js';
 import { TabActivityLock } from '../infrastructure/tab-activity-lock.js';
 import { vaultApiClient } from '../infrastructure/vault-api-client.js';
@@ -23,6 +24,7 @@ import { BacklinksPanel } from '../presentation/backlinks-panel.js';
 import { CommentUiController } from '../presentation/comment-ui-controller.js';
 import { ExcalidrawEmbedController } from '../presentation/excalidraw-embed-controller.js';
 import { FileExplorerController } from '../presentation/file-explorer-controller.js';
+import { FileHistoryViewController } from '../presentation/file-history-view-controller.js';
 import { GitDiffViewController } from '../presentation/git-diff-view-controller.js';
 import { GitPanelController } from '../presentation/git-panel-controller.js';
 import { LayoutController } from '../presentation/layout-controller.js';
@@ -103,6 +105,8 @@ export class CollabMdAppShell {
     this._previewHydrationPaused = false;
     this._previewLayoutResizeObserver = null;
     this._previewLayoutSyncTimer = null;
+    this._reloadPromptShown = false;
+    this._staticPreviewDocument = null;
     this.pendingGitResetPath = null;
     this.chatTimeFormatter = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' });
     this.chatNotificationsEnabled = this.preferences.getChatNotificationsEnabled();
@@ -113,6 +117,12 @@ export class CollabMdAppShell {
     this.fileExplorerReadyPromise = Promise.resolve();
     this.mobileBreakpointQuery = window.matchMedia('(max-width: 768px)');
     this.pendingWorkspaceRequestIds = new Set();
+    this._fileOpenPerf = null;
+    this.versionMonitor = new AppVersionMonitor({
+      currentBuildId: this.runtimeConfig.build?.id,
+      onUpdateAvailable: (payload) => this.promptForVersionReload(payload),
+      runtimeConfig: this.runtimeConfig,
+    });
 
     this.lobby = new LobbyPresence({
       preferredUserName: this.getStoredUserName(),
@@ -136,8 +146,10 @@ export class CollabMdAppShell {
     this.toastController = new ToastController(this.elements.toastContainer);
     this.chatToastController = new ToastController(this.elements.chatToastContainer);
     this.fileExplorer = new FileExplorerController({
+      mobileBreakpointQuery: this.mobileBreakpointQuery,
       onFileDelete: () => this.navigation.navigateToFile(null),
       onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
+      pendingWorkspaceRequestIds: this.pendingWorkspaceRequestIds,
       toastController: this.toastController,
     });
     this.gitPanel = new GitPanelController({
@@ -148,6 +160,7 @@ export class CollabMdAppShell {
       onPushBranch: () => this.pushGitBranch(),
       onRepoChange: (isGitRepo, status) => this.handleGitRepoChange(isGitRepo, status),
       onResetFile: (filePath, { scope }) => this.openGitResetDialog(filePath, { scope }),
+      onSelectCommit: (hash, { path }) => this.handleGitCommitSelection(hash, { closeSidebarOnMobile: true, path }),
       onSelectDiff: (filePath, { scope }) => this.handleGitDiffSelection(filePath, { closeSidebarOnMobile: true, scope }),
       onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
       onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
@@ -175,6 +188,10 @@ export class CollabMdAppShell {
       getFileList: () => this.fileExplorer.flatDocumentFiles,
       getSourceFilePath: () => this.currentFilePath,
       onAfterRenderCommit: (_previewElement, stats) => {
+        this.recordFileOpenMetric('preview_committed', {
+          chars: stats?.chars ?? 0,
+          renderVersion: stats?.renderVersion ?? 0,
+        });
         this.videoEmbed.reconcileEmbeds(this.elements.previewContent);
         this.videoEmbed.syncLayout();
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
@@ -266,12 +283,35 @@ export class CollabMdAppShell {
       vaultApiClient: this.vaultApiClient,
     });
     this.gitDiffView = new GitDiffViewController({
+      onBackToHistory: ({ historyFilePath } = {}) => {
+        if (historyFilePath) {
+          this.navigation.navigateToGitFileHistory({ filePath: historyFilePath });
+          return;
+        }
+        this.navigation.navigateToGitHistory();
+      },
       onCommitStaged: () => this.openGitCommitDialog(),
       onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
       onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
       onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
       toastController: this.toastController,
     });
+    this.fileHistoryView = new FileHistoryViewController({
+      diffRenderer: this.gitDiffView,
+      onOpenCommitDiff: (hash, { historyFilePath, path }) => this.handleGitCommitSelection(hash, {
+        closeSidebarOnMobile: false,
+        historyFilePath,
+        path,
+      }),
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onOpenPreview: ({ hash, path, currentFilePath }) => this.handleGitFilePreviewSelection({
+        hash,
+        path,
+        currentFilePath,
+      }),
+      onOpenWorkspaceDiff: (filePath) => this.handleGitDiffSelection(filePath, { closeSidebarOnMobile: false, scope: 'all' }),
+      toastController: this.toastController,
+    });
     this.tabActivityLock = new TabActivityLock({
       onActivated: ({ takeover }) => this.handleTabActivated({ takeover }),
       onBlocked: () => this.handleTabBlocked({ reason: 'active-elsewhere' }),
@@ -313,6 +353,10 @@ export class CollabMdAppShell {
       isMermaidFile: (filePath) => this.isMermaidFile(filePath),
       isPlantUmlFile: (filePath) => this.isPlantUmlFile(filePath),
       isTabActive: () => this.isTabActive,
+      loadBootstrapContent: async (filePath) => {
+        const response = await this.vaultApiClient.readFile(filePath);
+        return typeof response?.content === 'string' ? response.content : null;
+      },
       loadEditorSessionClass: () => this.loadEditorSessionClass(),
       loadBacklinks: (filePath) => this.backlinksPanel.load(filePath),
       onBeforeFileOpen: () => {
@@ -345,6 +389,7 @@ export class CollabMdAppShell {
       },
       onSelectionChange: (anchor) => this.handleCommentSelectionChange(anchor),
       onImagePaste: (file) => this.handleEditorImageInsert(file),
+      onFileOpenMetric: (name, payload) => this.recordFileOpenMetric(name, payload),
       onSessionAssigned: (session) => {
         this.session = session;
         this.commentUi.attachSession(session);
@@ -360,6 +405,7 @@ export class CollabMdAppShell {
       onUpdateVisibleChrome: (filePath, { displayName }) => {
         this.syncFileChrome(filePath);
         this.syncCommentChrome(filePath);
+        this.syncFileHistoryButton({ filePath, mode: 'editor' });
         if (this.elements.activeFileName) {
           this.elements.activeFileName.textContent = displayName;
         }
@@ -373,9 +419,11 @@ export class CollabMdAppShell {
     this.workspaceRouteController = new WorkspaceRouteController({
       backlinksPanel: this.backlinksPanel,
       clearInitialFileBootstrap: () => this.clearInitialFileBootstrap(),
+      clearStaticPreviewDocument: () => this.clearStaticPreviewDocument(),
       closeSidebarOnMobile: () => this.closeSidebarOnMobile(),
       elements: this.elements,
       excalidrawEmbed: this.excalidrawEmbed,
+      fileHistoryView: this.fileHistoryView,
       fileExplorer: this.fileExplorer,
       getIsTabActive: () => this.isTabActive,
       getSessionLoadToken: () => this.sessionLoadToken,
@@ -406,7 +454,11 @@ export class CollabMdAppShell {
         this.sessionLoadToken = value;
       },
       setSidebarTab: (value) => this.setSidebarTab(value),
+      showGitCommit: (route) => this.showGitCommit(route),
       showGitDiff: (route) => this.showGitDiff(route),
+      showGitFileHistory: (route) => this.showGitFileHistory(route),
+      showGitFilePreview: (route) => this.showGitFilePreview(route),
+      showGitHistory: () => this.showGitHistory(),
       syncMainChrome: (payload) => this.syncMainChrome(payload),
       videoEmbed: this.videoEmbed,
       workspaceCoordinator: this.workspaceCoordinator,
@@ -452,6 +504,58 @@ export class CollabMdAppShell {
   get followedCursorSignature() { return this.stateStore.get('followedCursorSignature'); }
   set followedCursorSignature(value) { this.stateStore.set('followedCursorSignature', value); }
 
+  publishFileOpenPerf() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.__COLLABMD_PERF__ ??= {};
+    window.__COLLABMD_PERF__.fileOpen = this._fileOpenPerf
+      ? {
+        ...this._fileOpenPerf,
+        details: { ...this._fileOpenPerf.details },
+        marks: { ...this._fileOpenPerf.marks },
+      }
+      : null;
+  }
+
+  recordFileOpenMetric(name, payload = {}) {
+    if (name === 'open_started') {
+      this._fileOpenPerf = {
+        details: {
+          filePath: payload.filePath || this.currentFilePath || '',
+          loadToken: payload.loadToken ?? 0,
+        },
+        marks: {
+          open_started: performance.now(),
+        },
+      };
+      this.publishFileOpenPerf();
+      return;
+    }
+
+    if (!this._fileOpenPerf) {
+      return;
+    }
+
+    const metricLoadToken = payload.loadToken ?? this._fileOpenPerf.details.loadToken;
+    if (metricLoadToken !== this._fileOpenPerf.details.loadToken) {
+      return;
+    }
+
+    this._fileOpenPerf.marks[name] = performance.now();
+    if (payload.filePath) {
+      this._fileOpenPerf.details.filePath = payload.filePath;
+    }
+    Object.entries(payload).forEach(([key, value]) => {
+      if (key === 'filePath' || key === 'loadToken') {
+        return;
+      }
+      this._fileOpenPerf.details[key] = value;
+    });
+    this.publishFileOpenPerf();
+  }
+
   loadEditorSessionClass() {
     if (!this._editorSessionModulePromise) {
       this._editorSessionModulePromise = import('../infrastructure/editor-session.js')

package/src/client/domain/markdown-formatting.js

@@ -14,7 +14,13 @@ const VIDEO_URL_PLACEHOLDER = 'https://';
 const CODE_BLOCK_PLACEHOLDER = 'code';
 const TABLE_HEADERS = Object.freeze(['Column 1', 'Column 2']);
 const TABLE_CELL_PLACEHOLDER = 'Value';
-
+const BLOCK_PREFIX_PATTERNS = Object.freeze({
+  heading: /^#{1,6}\s+/,
+  quote: /^>\s+/,
+  bulletList: /^[-*+]\s+/,
+  numberedList: /^\d+\.\s+/,
+  taskList: /^-\s\[(?: |x|X)\]\s+/,
+});
 function normalizeRange(range, textLength) {
   const from = Math.max(0, Math.min(range.from, range.to, textLength));
   const to = Math.max(0, Math.min(Math.max(range.from, range.to), textLength));
@@ -54,6 +60,21 @@ function getLineSelection(text, range) {
 
 function wrapInline(text, range, token, placeholder) {
   const selected = text.slice(range.from, range.to);
+  if (
+    selected.length > (token.length * 2)
+    && selected.startsWith(token)
+    && selected.endsWith(token)
+  ) {
+    const unwrapped = selected.slice(token.length, selected.length - token.length);
+    return {
+      anchor: range.from,
+      from: range.from,
+      head: range.from + unwrapped.length,
+      insert: unwrapped,
+      to: range.to,
+    };
+  }
+
   if (selected.length > 0) {
     return {
       anchor: range.from + token.length,
@@ -174,12 +195,101 @@ function formatVideo(text, range) {
   };
 }
 
-function prefixSelectedLines(text, range, prefixFactory, matcher) {
+function stripSupportedBlockPrefix(line) {
+  if (BLOCK_PREFIX_PATTERNS.taskList.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.taskList, '');
+  }
+
+  if (BLOCK_PREFIX_PATTERNS.numberedList.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.numberedList, '');
+  }
+
+  if (BLOCK_PREFIX_PATTERNS.bulletList.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.bulletList, '');
+  }
+
+  if (BLOCK_PREFIX_PATTERNS.quote.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.quote, '');
+  }
+
+  if (BLOCK_PREFIX_PATTERNS.heading.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.heading, '');
+  }
+
+  return line;
+}
+
+function matchesBlockAction(line, action) {
+  switch (action) {
+    case 'paragraph':
+      return !(
+        BLOCK_PREFIX_PATTERNS.taskList.test(line)
+        || BLOCK_PREFIX_PATTERNS.numberedList.test(line)
+        || BLOCK_PREFIX_PATTERNS.bulletList.test(line)
+        || BLOCK_PREFIX_PATTERNS.quote.test(line)
+        || BLOCK_PREFIX_PATTERNS.heading.test(line)
+      );
+    case 'heading-1':
+      return /^#\s+/.test(line);
+    case 'heading-2':
+      return /^##\s+/.test(line);
+    case 'heading-3':
+      return /^###\s+/.test(line);
+    case 'heading-4':
+      return /^####\s+/.test(line);
+    case 'heading-5':
+      return /^#####\s+/.test(line);
+    case 'heading-6':
+      return /^######\s+/.test(line);
+    case 'quote':
+      return BLOCK_PREFIX_PATTERNS.quote.test(line);
+    case 'bullet-list':
+      return BLOCK_PREFIX_PATTERNS.bulletList.test(line) && !BLOCK_PREFIX_PATTERNS.taskList.test(line);
+    case 'numbered-list':
+      return BLOCK_PREFIX_PATTERNS.numberedList.test(line);
+    case 'task-list':
+      return BLOCK_PREFIX_PATTERNS.taskList.test(line);
+    default:
+      return false;
+  }
+}
+
+function prefixForBlockAction(action, index) {
+  switch (action) {
+    case 'heading-1':
+      return '# ';
+    case 'heading-2':
+      return '## ';
+    case 'heading-3':
+      return '### ';
+    case 'heading-4':
+      return '#### ';
+    case 'heading-5':
+      return '##### ';
+    case 'heading-6':
+      return '###### ';
+    case 'quote':
+      return '> ';
+    case 'bullet-list':
+      return '- ';
+    case 'numbered-list':
+      return `${index + 1}. `;
+    case 'task-list':
+      return '- [ ] ';
+    default:
+      return '';
+  }
+}
+
+function normalizeBlockLines(text, range, action) {
   const lineRange = getLineSelection(text, range);
   const block = text.slice(lineRange.from, lineRange.to);
   const lines = block.split('\n');
-  const matchesPrefix = (line) => matcher.test(line);
-  const shouldUnprefix = lines.every((line) => line.trim().length === 0 || matchesPrefix(line));
+  const nonEmptyLines = lines.filter((line) => line.trim().length > 0);
+  const shouldResetToParagraph = action !== 'paragraph'
+    && nonEmptyLines.length > 0
+    && nonEmptyLines.every((line) => matchesBlockAction(line, action));
+  const targetAction = shouldResetToParagraph ? 'paragraph' : action;
   let visibleLineIndex = 0;
 
   const nextLines = lines.map((line) => {
@@ -187,13 +297,14 @@ function prefixSelectedLines(text, range, prefixFactory, matcher) {
       return line;
     }
 
-    if (shouldUnprefix) {
-      return matchesPrefix(line) ? line.replace(matcher, '') : line;
+    const normalizedLine = stripSupportedBlockPrefix(line);
+    if (targetAction === 'paragraph') {
+      return normalizedLine;
     }
 
-    const prefix = prefixFactory(visibleLineIndex);
+    const prefix = prefixForBlockAction(targetAction, visibleLineIndex);
     visibleLineIndex += 1;
-    return `${prefix}${line}`;
+    return `${prefix}${normalizedLine}`;
   });
 
   return {
@@ -205,50 +316,41 @@ function prefixSelectedLines(text, range, prefixFactory, matcher) {
   };
 }
 
-function formatHeading(text, range) {
-  return prefixSelectedLines(text, range, () => '## ', /^#{1,6}\s+/);
+function formatHeading(text, range, level) {
+  return normalizeBlockLines(text, range, `heading-${level}`);
 }
 
 function formatBulletList(text, range) {
-  return prefixSelectedLines(text, range, () => '- ', /^[-*+]\s+/);
+  return normalizeBlockLines(text, range, 'bullet-list');
 }
 
 function formatQuote(text, range) {
-  return prefixSelectedLines(text, range, () => '> ', /^>\s+/);
+  return normalizeBlockLines(text, range, 'quote');
 }
 
 function formatTaskList(text, range) {
-  return prefixSelectedLines(text, range, () => '- [ ] ', /^-\s\[(?: |x|X)\]\s+/);
+  return normalizeBlockLines(text, range, 'task-list');
 }
 
 function formatNumberedList(text, range) {
+  return normalizeBlockLines(text, range, 'numbered-list');
+}
+
+function formatParagraph(text, range) {
   const lineRange = getLineSelection(text, range);
   const block = text.slice(lineRange.from, lineRange.to);
-  const lines = block.split('\n');
-  const shouldUnprefix = lines.every((line) => line.trim().length === 0 || /^\d+\.\s+/.test(line));
-  let counter = 1;
-
-  const nextLines = lines.map((line) => {
-    if (line.trim().length === 0) {
-      return line;
-    }
-
-    if (shouldUnprefix) {
-      return line.replace(/^\d+\.\s+/, '');
-    }
-
-    const nextLine = `${counter}. ${line}`;
-    counter += 1;
-    return nextLine;
-  });
+  const unwrapped = unwrapCodeFence(block);
+  if (unwrapped !== null) {
+    return {
+      anchor: lineRange.from,
+      from: lineRange.from,
+      head: lineRange.from + unwrapped.length,
+      insert: unwrapped,
+      to: lineRange.to,
+    };
+  }
 
-  return {
-    anchor: lineRange.from,
-    from: lineRange.from,
-    head: lineRange.from + nextLines.join('\n').length,
-    insert: nextLines.join('\n'),
-    to: lineRange.to,
-  };
+  return normalizeBlockLines(text, range, 'paragraph');
 }
 
 function unwrapCodeFence(block) {
@@ -332,39 +434,82 @@ function formatHorizontalRule(text, range) {
 export function createMarkdownToolbarEdit(documentText, selectionRange, action) {
   const text = String(documentText ?? '');
   const range = normalizeRange(selectionRange, text.length);
+  let edit = null;
 
   switch (action) {
     case 'bold':
-      return wrapInline(text, range, '**', INLINE_PLACEHOLDERS.bold);
+      edit = wrapInline(text, range, '**', INLINE_PLACEHOLDERS.bold);
+      break;
     case 'italic':
-      return wrapInline(text, range, '_', INLINE_PLACEHOLDERS.italic);
+      edit = wrapInline(text, range, '_', INLINE_PLACEHOLDERS.italic);
+      break;
     case 'strikethrough':
-      return wrapInline(text, range, '~~', INLINE_PLACEHOLDERS.strikethrough);
+      edit = wrapInline(text, range, '~~', INLINE_PLACEHOLDERS.strikethrough);
+      break;
     case 'code':
-      return wrapInline(text, range, '`', INLINE_PLACEHOLDERS.code);
+      edit = wrapInline(text, range, '`', INLINE_PLACEHOLDERS.code);
+      break;
     case 'link':
-      return formatLink(text, range);
+      edit = formatLink(text, range);
+      break;
     case 'image':
-      return formatImage(text, range);
+      edit = formatImage(text, range);
+      break;
     case 'video':
-      return formatVideo(text, range);
+      edit = formatVideo(text, range);
+      break;
+    case 'paragraph':
+      edit = formatParagraph(text, range);
+      break;
     case 'heading':
-      return formatHeading(text, range);
+      edit = formatHeading(text, range, 2);
+      break;
+    case 'heading-1':
+      edit = formatHeading(text, range, 1);
+      break;
+    case 'heading-2':
+      edit = formatHeading(text, range, 2);
+      break;
+    case 'heading-3':
+      edit = formatHeading(text, range, 3);
+      break;
+    case 'heading-4':
+      edit = formatHeading(text, range, 4);
+      break;
+    case 'heading-5':
+      edit = formatHeading(text, range, 5);
+      break;
+    case 'heading-6':
+      edit = formatHeading(text, range, 6);
+      break;
     case 'quote':
-      return formatQuote(text, range);
+      edit = formatQuote(text, range);
+      break;
     case 'bullet-list':
-      return formatBulletList(text, range);
+      edit = formatBulletList(text, range);
+      break;
     case 'numbered-list':
-      return formatNumberedList(text, range);
+      edit = formatNumberedList(text, range);
+      break;
     case 'task-list':
-      return formatTaskList(text, range);
+      edit = formatTaskList(text, range);
+      break;
     case 'code-block':
-      return formatCodeBlock(text, range);
+      edit = formatCodeBlock(text, range);
+      break;
     case 'table':
-      return formatTable(text, range);
+      edit = formatTable(text, range);
+      break;
     case 'horizontal-rule':
-      return formatHorizontalRule(text, range);
+      edit = formatHorizontalRule(text, range);
+      break;
     default:
       return null;
   }
+
+  if (!edit) {
+    return null;
+  }
+
+  return text.slice(edit.from, edit.to) === edit.insert ? null : edit;
 }