collabmd 0.1.18 → 0.1.19

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,
@@ -152,9 +153,13 @@ export class CollabMdAppShell {
     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();
@@ -217,6 +222,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 +232,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 +243,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 +278,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 +287,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 +328,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 +365,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);
   }

package/src/client/infrastructure/editor-view-adapter.js

@@ -11,7 +11,7 @@ import {
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
-import { Compartment, EditorSelection, EditorState } from '@codemirror/state';
+import { Compartment, EditorSelection, EditorState, Prec } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
   EditorView,
@@ -30,6 +30,7 @@ import { normalizeCommentQuote } from '../../domain/comment-threads.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
 import { wikiLinkCompletions } from '../domain/wiki-link-completions.js';
 import { plantUmlLanguage, plantUmlLanguageDescription } from '../domain/plantuml-language.js';
+import { handleImagePasteEvent } from './editor-paste-utils.js';
 
 const markdownCodeLanguages = [...languages, plantUmlLanguageDescription];
 
@@ -127,6 +128,7 @@ export class EditorViewAdapter {
     lineInfoElement,
     lineWrappingEnabled = true,
     onDocChanged = null,
+    onImagePaste = null,
     onSelectionChanged = null,
     onViewportChanged = null,
   }) {
@@ -136,6 +138,7 @@ export class EditorViewAdapter {
     this.lineInfoElement = lineInfoElement;
     this.lineWrappingEnabled = lineWrappingEnabled;
     this.onDocChanged = onDocChanged;
+    this.onImagePaste = onImagePaste;
     this.onSelectionChanged = onSelectionChanged;
     this.onViewportChanged = onViewportChanged;
     this.editorView = null;
@@ -208,6 +211,9 @@ export class EditorViewAdapter {
           EditorView.contentAttributes.of({
             'aria-label': 'Markdown editor',
           }),
+          Prec.highest(EditorView.domEventHandlers({
+            paste: (event) => handleImagePasteEvent(event, this.onImagePaste),
+          })),
           createLanguageExtension(filePath),
           this.themeCompartment.of(createEditorTheme(this.initialTheme)),
           this.syntaxThemeCompartment.of(this.initialTheme === 'dark' ? oneDark : []),
@@ -561,6 +567,33 @@ export class EditorViewAdapter {
     return true;
   }
 
+  insertText(text) {
+    if (!this.editorView) {
+      return false;
+    }
+
+    const insertValue = String(text ?? '');
+    const { state } = this.editorView;
+    const range = state.selection.main;
+    const anchor = range.from + insertValue.length;
+
+    this.editorView.dispatch({
+      changes: {
+        from: range.from,
+        insert: insertValue,
+        to: range.to,
+      },
+      scrollIntoView: true,
+      selection: {
+        anchor,
+        head: anchor,
+      },
+      userEvent: 'input',
+    });
+    this.editorView.focus();
+    return true;
+  }
+
   updateCursorInfo(state) {
     if (!this.lineInfoElement) {
       return;

package/src/client/infrastructure/vault-api-client.js

@@ -1,5 +1,9 @@
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
+function encodeHeaderMetadata(value) {
+  return encodeURIComponent(String(value ?? ''));
+}
+
 async function parseApiResponse(response, fallbackError) {
   const data = await response.json().catch(() => ({}));
   if (!response.ok || data.ok === false) {
@@ -56,6 +60,19 @@ export class VaultApiClient {
     });
     return parseApiResponse(response, 'Failed to create folder');
   }
+
+  async uploadImageAttachment({ file, fileName = '', sourcePath }) {
+    const response = await fetch(resolveApiUrl('/attachments'), {
+      body: file,
+      headers: {
+        'Content-Type': file?.type || 'application/octet-stream',
+        'X-CollabMD-File-Name': encodeHeaderMetadata(fileName),
+        'X-CollabMD-Source-Path': encodeHeaderMetadata(sourcePath),
+      },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to upload image');
+  }
 }
 
 export const vaultApiClient = new VaultApiClient();

package/src/client/presentation/comment-markdown-renderer.js

@@ -0,0 +1,68 @@
+import markdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+
+import { escapeHtml } from '../domain/vault-utils.js';
+
+function renderToken(renderer, tokens, index, options, env, self) {
+  return renderer?.(tokens, index, options, env, self) ?? self.renderToken(tokens, index, options);
+}
+
+function renderPlainTextCommentHtml(text = '') {
+  const escaped = escapeHtml(String(text ?? ''));
+  return `<p>${escaped.replace(/\n/g, '<br>')}</p>`;
+}
+
+function createCommentMarkdownRenderer() {
+  const markdown = markdownIt({
+    breaks: true,
+    highlight(source, language) {
+      try {
+        if (language && hljs.getLanguage(language)) {
+          return hljs.highlight(source, {
+            ignoreIllegals: true,
+            language,
+          }).value;
+        }
+
+        return hljs.highlightAuto(source).value;
+      } catch {
+        return escapeHtml(source);
+      }
+    },
+    html: false,
+    linkify: true,
+    typographer: true,
+  });
+
+  const fallbackLinkOpen = markdown.renderer.rules.link_open;
+  const fallbackTableOpen = markdown.renderer.rules.table_open;
+  const fallbackTableClose = markdown.renderer.rules.table_close;
+
+  markdown.renderer.rules.link_open = (tokens, index, options, env, self) => {
+    tokens[index].attrSet('target', '_blank');
+    tokens[index].attrSet('rel', 'noopener noreferrer');
+    return renderToken(fallbackLinkOpen, tokens, index, options, env, self);
+  };
+
+  markdown.renderer.rules.table_open = (tokens, index, options, env, self) => (
+    `<div class="comment-markdown-table">${renderToken(fallbackTableOpen, tokens, index, options, env, self)}`
+  );
+
+  markdown.renderer.rules.table_close = (tokens, index, options, env, self) => (
+    `${renderToken(fallbackTableClose, tokens, index, options, env, self)}</div>`
+  );
+
+  return markdown;
+}
+
+const commentMarkdownRenderer = createCommentMarkdownRenderer();
+
+export function renderCommentMarkdownToHtml(markdownText = '') {
+  const normalizedMarkdown = String(markdownText ?? '');
+
+  try {
+    return commentMarkdownRenderer.render(normalizedMarkdown);
+  } catch {
+    return renderPlainTextCommentHtml(normalizedMarkdown);
+  }
+}