collabmd 0.1.18 → 0.1.20

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

@@ -2,6 +2,7 @@ import {
   isDiagramFilePath,
   isMarkdownFilePath,
 } from '../../domain/file-kind.js';
+import { resolveApiUrl } from '../domain/runtime-paths.js';
 
 export class WorkspacePreviewController {
   constructor({
@@ -11,6 +12,7 @@ export class WorkspacePreviewController {
     getDisplayName,
     getSession,
     isExcalidrawFile,
+    isImageFile,
     isMermaidFile,
     isPlantUmlFile,
     layoutController,
@@ -25,9 +27,10 @@ export class WorkspacePreviewController {
     this.excalidrawEmbed = excalidrawEmbed;
     this.getDisplayName = getDisplayName;
     this.getSession = getSession;
-    this.isExcalidrawFile = isExcalidrawFile;
-    this.isMermaidFile = isMermaidFile;
-    this.isPlantUmlFile = isPlantUmlFile;
+    this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
+    this.isImageFile = isImageFile ?? (() => false);
+    this.isMermaidFile = isMermaidFile ?? (() => false);
+    this.isPlantUmlFile = isPlantUmlFile ?? (() => false);
     this.layoutController = layoutController;
     this.outlineController = outlineController;
     this.previewRenderer = previewRenderer;
@@ -58,23 +61,25 @@ export class WorkspacePreviewController {
 
   resetPreviewMode() {
     this.elements.previewContent?.classList.remove('is-excalidraw-file-preview');
+    this.elements.previewContent?.classList.remove('is-image-file-preview');
     this.elements.previewContent?.classList.remove('is-mermaid-file-preview');
     this.elements.previewContent?.classList.remove('is-plantuml-file-preview');
   }
 
   syncFileChrome(filePath) {
     const isExcalidraw = this.isExcalidrawFile(filePath);
+    const isImage = this.isImageFile(filePath);
     const isMarkdown = isMarkdownFilePath(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
     const isDiagramFile = isDiagramFilePath(filePath);
 
     this.elements.markdownToolbar?.classList.toggle('hidden', !isMarkdown);
-    this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile);
+    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 (isExcalidraw) {
+    if (isExcalidraw || isImage) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();
@@ -124,6 +129,41 @@ export class WorkspacePreviewController {
     this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
   }
 
+  renderImageFilePreview(filePath) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+
+    this.videoEmbed?.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    previewElement.classList.add('is-image-file-preview');
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+
+    const shell = document.createElement('figure');
+    shell.className = 'image-file-preview-shell';
+
+    const image = document.createElement('img');
+    image.className = 'image-file-preview-image';
+    image.alt = this.getDisplayName(filePath);
+    image.src = resolveApiUrl(`/attachment?path=${encodeURIComponent(filePath)}`);
+    shell.appendChild(image);
+
+    if (renderHost) {
+      renderHost.replaceChildren(shell);
+      renderHost.style.minHeight = '';
+    }
+
+    previewElement.dataset.renderPhase = 'ready';
+    this.outlineController.refresh();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+    this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
+
   createResizeHandler(restoreSidebarState) {
     let resizeTimer = null;
     return () => {

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

@@ -10,6 +10,7 @@ export class WorkspaceRouteController {
     getSessionLoadToken,
     gitDiffView,
     gitPanel,
+    imageLightbox = null,
     lobby,
     navigation,
     previewRenderer,
@@ -37,6 +38,7 @@ export class WorkspaceRouteController {
     this.getSessionLoadToken = getSessionLoadToken;
     this.gitDiffView = gitDiffView;
     this.gitPanel = gitPanel;
+    this.imageLightbox = imageLightbox;
     this.lobby = lobby;
     this.navigation = navigation;
     this.previewRenderer = previewRenderer;
@@ -140,6 +142,7 @@ export class WorkspaceRouteController {
   }
 
   async openFile(filePath) {
+    this.imageLightbox?.close?.();
     this.gitPanel.setSelection();
     this.gitDiffView.hide();
     this.syncMainChrome({ mode: 'editor' });
@@ -161,6 +164,7 @@ export class WorkspaceRouteController {
   }
 
   resetPreviewSurface() {
+    this.imageLightbox?.close?.();
     this.previewRenderer.setHydrationPaused(false);
     this.excalidrawEmbed.setHydrationPaused(false);
     this.videoEmbed?.detachForCommit();

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

@@ -30,6 +30,7 @@ import { ScrollSyncController } from '../presentation/scroll-sync-controller.js'
 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';
 
 const APP_SHELL_FEATURES = Object.freeze({
   chat: chatFeature,
@@ -130,6 +131,7 @@ export class CollabMdAppShell {
     this.gitPanel = new GitPanelController({
       enabled: this.runtimeConfig.gitEnabled !== false,
       onCommitStaged: () => this.openGitCommitDialog(),
+      onOpenPullBackup: (filePath) => filePath && this.navigation.navigateToFile(filePath),
       onPullBranch: () => this.pullGitBranch(),
       onPushBranch: () => this.pushGitBranch(),
       onRepoChange: (isGitRepo, status) => this.handleGitRepoChange(isGitRepo, status),
@@ -148,13 +150,18 @@ export class CollabMdAppShell {
         this.scrollSyncController.suspendSync(250);
         this.session?.scrollToLine(sourceLine, 0);
       },
+      onWillOpen: () => this.commentUi?.closeDrawer(),
     });
     this.videoEmbed = new VideoEmbedController({
       previewElement: this.elements.previewContent,
     });
+    this.imageLightbox = new ImageLightboxController({
+      previewElement: this.elements.previewContent,
+    });
     this.previewRenderer = new PreviewRenderer({
       getContent: () => this.getPreviewSource(),
-      getFileList: () => this.fileExplorer.flatFiles,
+      getFileList: () => this.fileExplorer.flatDocumentFiles,
+      getSourceFilePath: () => this.currentFilePath,
       onAfterRenderCommit: (_previewElement, stats) => {
         this.videoEmbed.reconcileEmbeds(this.elements.previewContent);
         this.videoEmbed.syncLayout();
@@ -191,6 +198,7 @@ export class CollabMdAppShell {
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
     });
     this.backlinksPanel = new BacklinksPanel({
+      inlinePanelElement: this.elements.backlinksInlinePanel,
       onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
       panelElement: this.elements.backlinksPanel,
     });
@@ -209,6 +217,7 @@ export class CollabMdAppShell {
       commentsDrawerList: this.elements.commentsDrawerList,
       commentsToggleButton: this.elements.commentsToggleButton,
       editorContainer: this.elements.editorContainer,
+      onWillOpenDrawer: () => this.outlineController.close(),
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
       onCreateThread: ({ anchor, body }) => this.session?.createCommentThread({ anchor, body }),
@@ -217,6 +226,7 @@ export class CollabMdAppShell {
         this.session?.scrollToLine(lineNumber, 0.2);
       },
       onReplyToThread: (threadId, body) => this.session?.replyToCommentThread(threadId, body),
+      onToggleReaction: (threadId, messageId, emoji) => this.session?.toggleCommentReaction(threadId, messageId, emoji),
       onResolveThread: (threadId) => this.session?.deleteCommentThread(threadId),
     });
     this.workspacePreviewController = new WorkspacePreviewController({
@@ -226,6 +236,7 @@ export class CollabMdAppShell {
       getDisplayName: (filePath) => this.getDisplayName(filePath),
       getSession: () => this.session,
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
+      isImageFile: (filePath) => this.isImageFile(filePath),
       isMermaidFile: (filePath) => this.isMermaidFile(filePath),
       isPlantUmlFile: (filePath) => this.isPlantUmlFile(filePath),
       layoutController: this.layoutController,
@@ -236,7 +247,7 @@ export class CollabMdAppShell {
       videoEmbed: this.videoEmbed,
     });
     this.wikiLinkFileController = new WikiLinkFileController({
-      getFileList: () => this.fileExplorer.flatFiles,
+      getFileList: () => this.fileExplorer.flatDocumentFiles,
       navigation: this.navigation,
       refreshExplorer: () => this.fileExplorer.refresh(),
       toastController: this.toastController,
@@ -271,6 +282,7 @@ export class CollabMdAppShell {
         lineInfoElement: this.elements.lineInfo,
         lineWrappingEnabled: options.lineWrappingEnabled,
         localUser: options.localUser,
+        onImagePaste: options.onImagePaste,
         onAwarenessChange: options.onAwarenessChange,
         onCommentsChange: options.onCommentsChange,
         onConnectionChange: options.onConnectionChange,
@@ -279,12 +291,13 @@ export class CollabMdAppShell {
         preferredUserName: options.preferredUserName,
       }),
       getDisplayName: (filePath) => this.getDisplayName(filePath),
-      getFileList: () => this.fileExplorer.flatFiles,
+      getFileList: () => this.fileExplorer.flatDocumentFiles,
       getLineWrappingEnabled: () => this.getStoredLineWrapping(),
       getLocalUser: () => this.lobby.getLocalUser(),
       getStoredUserName: () => this.getStoredUserName(),
       getTheme: () => this.themeController.getTheme(),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
+      isImageFile: (filePath) => this.isImageFile(filePath),
       isMermaidFile: (filePath) => this.isMermaidFile(filePath),
       isPlantUmlFile: (filePath) => this.isPlantUmlFile(filePath),
       isTabActive: () => this.isTabActive,
@@ -319,11 +332,13 @@ export class CollabMdAppShell {
         this.hideEditorLoading();
       },
       onSelectionChange: (anchor) => this.handleCommentSelectionChange(anchor),
+      onImagePaste: (file) => this.handleEditorImageInsert(file),
       onSessionAssigned: (session) => {
         this.session = session;
         this.commentUi.attachSession(session);
       },
       onRenderExcalidrawPreview: (filePath) => this.renderExcalidrawFilePreview(filePath),
+      onRenderImagePreview: (filePath) => this.renderImageFilePreview(filePath),
       onSyncWrapToggle: () => this.syncWrapToggle(),
       onUpdateActiveFile: (filePath) => this.fileExplorer.setActiveFile(filePath),
       onUpdateCurrentFile: (filePath) => {
@@ -354,6 +369,7 @@ export class CollabMdAppShell {
       getSessionLoadToken: () => this.sessionLoadToken,
       gitDiffView: this.gitDiffView,
       gitPanel: this.gitPanel,
+      imageLightbox: this.imageLightbox,
       layoutController: this.layoutController,
       lobby: this.lobby,
       navigation: this.navigation,

package/src/client/domain/room.js

@@ -8,6 +8,7 @@ const USER_COLORS = [
   '#6366f1', '#10b981', '#f43f5e', '#0ea5e9', '#a855f7',
 ];
 export const USER_NAME_MAX_LENGTH = 24;
+const LOCAL_USER_ID_STORAGE_KEY = 'collabmd-user-id';
 
 function pickRandom(items) {
   return items[Math.floor(Math.random() * items.length)];
@@ -19,8 +20,17 @@ function generatePeerId() {
   return Array.from(array, (b) => b.toString(16).padStart(2, '0')).join('');
 }
 
+function generateUserId() {
+  if (globalThis.crypto?.randomUUID) {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `${generatePeerId()}-${Date.now().toString(36)}`;
+}
+
 // A stable peer ID for this browser tab, shared across lobby and per-file sessions.
 let _localPeerId = null;
+let _localUserId = null;
 
 export function getLocalPeerId() {
   if (!_localPeerId) {
@@ -29,6 +39,32 @@ export function getLocalPeerId() {
   return _localPeerId;
 }
 
+export function getLocalUserId(storage = globalThis.localStorage) {
+  if (_localUserId) {
+    return _localUserId;
+  }
+
+  try {
+    const stored = storage?.getItem?.(LOCAL_USER_ID_STORAGE_KEY);
+    if (stored) {
+      _localUserId = stored;
+      return stored;
+    }
+  } catch {
+    // Ignore storage access errors.
+  }
+
+  _localUserId = generateUserId();
+
+  try {
+    storage?.setItem?.(LOCAL_USER_ID_STORAGE_KEY, _localUserId);
+  } catch {
+    // Ignore storage access errors.
+  }
+
+  return _localUserId;
+}
+
 export function normalizeUserName(value) {
   const normalized = String(value ?? '')
     .trim()
@@ -45,5 +81,6 @@ export function createRandomUser(preferredName = null) {
     colorLight: `${color}33`,
     name: normalizeUserName(preferredName) ?? pickRandom(USER_NAMES),
     peerId: getLocalPeerId(),
+    userId: getLocalUserId(),
   };
 }

package/src/client/domain/vault-utils.js

@@ -47,3 +47,49 @@ export function resolveWikiTarget(target, files) {
 export function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
+
+function normalizePathSegments(pathValue) {
+  return String(pathValue ?? '')
+    .replace(/\\/g, '/')
+    .split('/')
+    .filter(Boolean);
+}
+
+export function resolveVaultRelativePath(fromFilePath, relativePath) {
+  const sourceSegments = normalizePathSegments(fromFilePath);
+  const targetSegments = String(relativePath ?? '')
+    .split('/')
+    .map((segment) => {
+      try {
+        return decodeURIComponent(segment);
+      } catch {
+        return segment;
+      }
+    });
+
+  if (targetSegments.length === 0) {
+    return '';
+  }
+
+  sourceSegments.pop();
+  const resolvedSegments = [...sourceSegments];
+
+  for (const rawSegment of targetSegments) {
+    const segment = String(rawSegment ?? '').trim();
+    if (!segment || segment === '.') {
+      continue;
+    }
+
+    if (segment === '..') {
+      if (resolvedSegments.length === 0) {
+        return '';
+      }
+      resolvedSegments.pop();
+      continue;
+    }
+
+    resolvedSegments.push(segment);
+  }
+
+  return resolvedSegments.join('/');
+}

package/src/client/infrastructure/comment-thread-store.js

@@ -16,11 +16,36 @@ function createCommentMessage({ body, user }) {
     createdAt: Date.now(),
     id: createCommentId('comment'),
     peerId: user?.peerId ?? '',
+    reactions: [],
     userColor: user?.color ?? '',
     userName: user?.name ?? 'Anonymous',
   };
 }
 
+function readRecordValue(record, key) {
+  if (record instanceof Y.Map) {
+    return record.get(key);
+  }
+
+  return record?.[key];
+}
+
+function cloneReactionGroups(source = []) {
+  return Array.isArray(source)
+    ? source.map((group) => ({
+      emoji: typeof group?.emoji === 'string' ? group.emoji : '',
+      users: Array.isArray(group?.users)
+        ? group.users.map((user) => ({
+          reactedAt: Number.isFinite(user?.reactedAt) ? user.reactedAt : Date.now(),
+          userColor: typeof user?.userColor === 'string' ? user.userColor : '',
+          userId: typeof user?.userId === 'string' ? user.userId : '',
+          userName: typeof user?.userName === 'string' && user.userName ? user.userName : 'Anonymous',
+        })).filter((user) => user.userId)
+        : [],
+    })).filter((group) => group.emoji && group.users.length > 0)
+    : [];
+}
+
 function normalizeSelectionAnchorPayload(payload, state) {
   const doc = state?.doc;
   if (!doc) {
@@ -188,6 +213,79 @@ export class CommentThreadStore {
     return message.id;
   }
 
+  toggleCommentReaction(threadId, messageId, emoji) {
+    if (!this.ydoc || !threadId || !messageId || typeof emoji !== 'string' || !emoji.trim()) {
+      return false;
+    }
+
+    const localUser = this.getLocalUser?.();
+    const localUserId = typeof localUser?.userId === 'string' ? localUser.userId : '';
+    if (!localUserId) {
+      return false;
+    }
+
+    const thread = this.findSharedCommentThread(threadId);
+    const messages = thread?.get('messages');
+    if (!(messages instanceof Y.Array)) {
+      return false;
+    }
+
+    const items = messages.toArray();
+    const messageIndex = items.findIndex((message) => readRecordValue(message, 'id') === messageId);
+    if (messageIndex < 0) {
+      return false;
+    }
+
+    const messageRecord = items[messageIndex] instanceof Y.Map
+      ? items[messageIndex].toJSON()
+      : { ...items[messageIndex] };
+    const reactions = cloneReactionGroups(messageRecord.reactions);
+    const reactionIndex = reactions.findIndex((reaction) => reaction.emoji === emoji);
+
+    if (reactionIndex >= 0) {
+      const nextUsers = reactions[reactionIndex].users.filter((user) => user.userId !== localUserId);
+      if (nextUsers.length === reactions[reactionIndex].users.length) {
+        nextUsers.push({
+          reactedAt: Date.now(),
+          userColor: localUser?.color ?? '',
+          userId: localUserId,
+          userName: localUser?.name ?? 'Anonymous',
+        });
+      }
+
+      if (nextUsers.length === 0) {
+        reactions.splice(reactionIndex, 1);
+      } else {
+        reactions[reactionIndex] = {
+          ...reactions[reactionIndex],
+          users: nextUsers,
+        };
+      }
+    } else {
+      reactions.push({
+        emoji,
+        users: [{
+          reactedAt: Date.now(),
+          userColor: localUser?.color ?? '',
+          userId: localUserId,
+          userName: localUser?.name ?? 'Anonymous',
+        }],
+      });
+    }
+
+    const nextMessage = {
+      ...messageRecord,
+      reactions,
+    };
+
+    this.ydoc.transact(() => {
+      messages.delete(messageIndex, 1);
+      messages.insert(messageIndex, [nextMessage]);
+    }, 'comment-reaction-toggle');
+
+    return true;
+  }
+
   deleteCommentThread(threadId) {
     if (!this.commentThreads || !this.ydoc) {
       return false;

package/src/client/infrastructure/editor-paste-utils.js

@@ -0,0 +1,45 @@
+function extractPastedImageFile(event) {
+  const clipboardFiles = Array.from(event?.clipboardData?.files ?? []);
+  for (const file of clipboardFiles) {
+    if (file?.type?.startsWith?.('image/')) {
+      return file;
+    }
+  }
+
+  const clipboardItems = Array.from(event?.clipboardData?.items ?? []);
+  for (const item of clipboardItems) {
+    if (item.kind !== 'file' || !item.type?.startsWith?.('image/')) {
+      continue;
+    }
+
+    const file = item.getAsFile?.();
+    if (file) {
+      return file;
+    }
+  }
+
+  return null;
+}
+
+export function handleImagePasteEvent(event, onImagePaste) {
+  const imageFile = extractPastedImageFile(event);
+  if (!imageFile) {
+    return false;
+  }
+
+  if (typeof onImagePaste !== 'function') {
+    console.warn('[editor] Ignoring pasted image because no image paste handler is registered.');
+    return false;
+  }
+
+  console.debug('[editor] Detected pasted image.', {
+    name: imageFile.name ?? '',
+    size: imageFile.size ?? null,
+    type: imageFile.type ?? '',
+  });
+  event.preventDefault?.();
+  void Promise.resolve(onImagePaste(imageFile)).catch((error) => {
+    console.error('[editor] Failed to process pasted image:', error);
+  });
+  return true;
+}

package/src/client/infrastructure/editor-session.js

@@ -14,6 +14,7 @@ export class EditorSession {
     onConnectionChange,
     onCommentsChange,
     onContentChange,
+    onImagePaste,
     onSelectionChange,
     preferredUserName,
     localUser,
@@ -43,6 +44,7 @@ export class EditorSession {
       onDocChanged: () => {
         this.emitContentChange();
       },
+      onImagePaste,
       onViewportChanged: (viewport) => {
         this.collaborationClient.setLocalViewport(viewport);
       },
@@ -157,6 +159,10 @@ export class EditorSession {
     return this.commentThreadStore.replyToCommentThread(threadId, body);
   }
 
+  toggleCommentReaction(threadId, messageId, emoji) {
+    return this.commentThreadStore.toggleCommentReaction(threadId, messageId, emoji);
+  }
+
   deleteCommentThread(threadId) {
     return this.commentThreadStore.deleteCommentThread(threadId);
   }
@@ -219,6 +225,10 @@ export class EditorSession {
     return this.viewAdapter.applyMarkdownToolbarAction(action);
   }
 
+  insertText(text) {
+    return this.viewAdapter.insertText(text);
+  }
+
   waitForInitialSync(timeoutMs = 1500) {
     return this.collaborationClient.waitForInitialSync(timeoutMs);
   }