collabmd 0.1.18 → 0.1.19

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

@@ -18,7 +18,8 @@ export const presenceFeature = {
 
     const hasEditorSession = Boolean(this.session);
     const isExcalidrawRoute = Boolean(this.currentFilePath && this.isExcalidrawFile?.(this.currentFilePath));
-    const shouldUseLobbyState = !hasEditorSession && (!this.currentFilePath || isExcalidrawRoute);
+    const isImageRoute = Boolean(this.currentFilePath && this.isImageFile?.(this.currentFilePath));
+    const shouldUseLobbyState = !hasEditorSession && (!this.currentFilePath || isExcalidrawRoute || isImageRoute);
     const effectiveConnectionState = shouldUseLobbyState
       ? this.lobby?.getConnectionState?.() ?? this.connectionState
       : this.connectionState;

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

@@ -1,6 +1,8 @@
 import { USER_NAME_MAX_LENGTH, normalizeUserName } from '../../domain/room.js';
 import { isMarkdownFilePath, supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
 
+const IMAGE_FILE_PICKER_ACCEPT = 'image/png,image/jpeg,image/webp,image/gif,image/svg+xml';
+
 export const uiFeature = {
   initialize() {
     this.themeController.initialize();
@@ -260,15 +262,125 @@ export const uiFeature = {
       return;
     }
 
+    if (action === 'image') {
+      void this.handleToolbarImageInsert();
+      return;
+    }
+
     const applied = this.session.applyMarkdownToolbarAction(action);
     if (!applied) {
       this.toastController.show('Formatting action is unavailable');
     }
   },
 
+  async handleToolbarImageInsert() {
+    const file = await this.pickImageFile();
+    if (!file) {
+      return;
+    }
+
+    await this.handleEditorImageInsert(file);
+  },
+
+  pickImageFile() {
+    return new Promise((resolve) => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = IMAGE_FILE_PICKER_ACCEPT;
+      input.style.position = 'fixed';
+      input.style.left = '-9999px';
+      document.body.appendChild(input);
+      let settled = false;
+      let focusTimer = null;
+
+      const cleanup = (value) => {
+        if (settled) {
+          return;
+        }
+
+        settled = true;
+        if (focusTimer) {
+          window.clearTimeout(focusTimer);
+        }
+        window.removeEventListener('focus', handleWindowFocus);
+        input.remove();
+        resolve(value);
+      };
+
+      const handleWindowFocus = () => {
+        focusTimer = window.setTimeout(() => {
+          if (settled || input.files?.length) {
+            return;
+          }
+
+          cleanup(null);
+        }, 250);
+      };
+
+      input.addEventListener('change', () => {
+        cleanup(input.files?.[0] ?? null);
+      }, { once: true });
+
+      input.addEventListener('cancel', () => {
+        cleanup(null);
+      }, { once: true });
+
+      window.addEventListener('focus', handleWindowFocus, { once: true });
+      input.click();
+    });
+  },
+
+  async handleEditorImageInsert(file) {
+    if (!this.session || !isMarkdownFilePath(this.currentFilePath)) {
+      console.warn('[ui] Ignoring image insert because there is no active markdown session.', {
+        currentFilePath: this.currentFilePath,
+        hasSession: Boolean(this.session),
+      });
+      return false;
+    }
+
+    const activeFilePath = this.currentFilePath;
+    const activeSession = this.session;
+
+    try {
+      console.debug('[ui] Uploading image attachment.', {
+        fileName: file?.name || '',
+        size: file?.size ?? null,
+        sourcePath: activeFilePath,
+        type: file?.type || '',
+      });
+      const result = await this.vaultApiClient.uploadImageAttachment({
+        file,
+        fileName: file?.name || '',
+        sourcePath: activeFilePath,
+      });
+
+      await this.fileExplorer.refresh();
+
+      if (
+        this.currentFilePath === activeFilePath
+        && this.session
+        && this.session === activeSession
+        && typeof result?.markdown === 'string'
+      ) {
+        console.debug('[ui] Inserting uploaded image markdown into the editor.', {
+          sourcePath: activeFilePath,
+          storedPath: result.path ?? '',
+        });
+        this.session.insertText(result.markdown);
+      }
+
+      return true;
+    } catch (error) {
+      console.error('[ui] Failed to insert image attachment:', error);
+      this.toastController.show(error.message || 'Failed to upload image');
+      return false;
+    }
+  },
+
   handleThemeChange(theme) {
     this.previewRenderer.applyTheme(theme);
-    if (!this.isExcalidrawFile(this.currentFilePath)) {
+    if (!this.isExcalidrawFile(this.currentFilePath) && !this.isImageFile?.(this.currentFilePath)) {
       this.previewRenderer.queueRender();
     }
     this.session?.applyTheme(theme);

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

@@ -1,5 +1,6 @@
 import {
   isExcalidrawFilePath,
+  isImageAttachmentFilePath,
   isMermaidFilePath,
   isPlantUmlFilePath,
   stripVaultFileExtension,
@@ -10,6 +11,10 @@ export const workspaceFeature = {
     return isExcalidrawFilePath(filePath);
   },
 
+  isImageFile(filePath) {
+    return isImageAttachmentFilePath(filePath);
+  },
+
   isMermaidFile(filePath) {
     return isMermaidFilePath(filePath);
   },
@@ -44,6 +49,10 @@ export const workspaceFeature = {
     this.workspacePreviewController.renderExcalidrawFilePreview(filePath);
   },
 
+  renderImageFilePreview(filePath) {
+    this.workspacePreviewController.renderImageFilePreview(filePath);
+  },
+
   createResizeHandler() {
     return this.workspacePreviewController.createResizeHandler(() => this.restoreSidebarState());
   },

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

@@ -1,7 +1,8 @@
 import markdownIt from 'markdown-it';
 import hljs from 'highlight.js';
 
-import { escapeHtml, resolveWikiTarget } from '../domain/vault-utils.js';
+import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
+import { escapeHtml, resolveVaultRelativePath, resolveWikiTarget } from '../domain/vault-utils.js';
 import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 
 const DIRECT_VIDEO_MIME_TYPES = Object.freeze({
@@ -189,6 +190,35 @@ function renderVideoEmbed(token, videoEmbedCounts) {
   });
 }
 
+function isAbsoluteOrExternalUrl(source = '') {
+  const normalized = String(source ?? '').trim();
+  return (
+    !normalized
+    || normalized.startsWith('data:')
+    || normalized.startsWith('blob:')
+    || normalized.startsWith('#')
+    || normalized.startsWith('//')
+    || /^[a-zA-Z][a-zA-Z\d+.-]*:/u.test(normalized)
+    || normalized.startsWith('/')
+  );
+}
+
+function resolveLocalAttachmentUrl(source = '', {
+  attachmentApiPath,
+  sourceFilePath,
+} = {}) {
+  if (!sourceFilePath || isAbsoluteOrExternalUrl(source)) {
+    return null;
+  }
+
+  const resolvedPath = resolveVaultRelativePath(sourceFilePath, source);
+  if (!resolvedPath || !isImageAttachmentFilePath(resolvedPath)) {
+    return null;
+  }
+
+  return `${attachmentApiPath}?path=${encodeURIComponent(resolvedPath)}`;
+}
+
 function renderInlineWikiText(content, {
   excalidrawEmbedCounts,
   fileList,
@@ -253,7 +283,10 @@ function renderInlineWikiText(content, {
   return html;
 }
 
-function createMarkdownRenderer(fileList = []) {
+function createMarkdownRenderer(fileList = [], {
+  attachmentApiPath = '/api/attachment',
+  sourceFilePath = '',
+} = {}) {
   const markdown = markdownIt({
     highlight(source, language) {
       if (language === 'mermaid' || language === 'plantuml' || language === 'puml') {
@@ -396,7 +429,16 @@ function createMarkdownRenderer(fileList = []) {
   };
 
   markdown.renderer.rules.image = (tokens, index, options, env, self) => {
-    const renderedVideo = renderVideoEmbed(tokens[index], videoEmbedCounts);
+    const token = tokens[index];
+    const localAttachmentUrl = resolveLocalAttachmentUrl(token.attrGet('src') || '', {
+      attachmentApiPath,
+      sourceFilePath,
+    });
+    if (localAttachmentUrl) {
+      token.attrSet('src', localAttachmentUrl);
+    }
+
+    const renderedVideo = renderVideoEmbed(token, videoEmbedCounts);
     if (renderedVideo) {
       return renderedVideo;
     }
@@ -415,9 +457,17 @@ function createMarkdownRenderer(fileList = []) {
   return markdown;
 }
 
-export function compilePreviewDocument({ fileList = [], markdownText = '' } = {}) {
+export function compilePreviewDocument({
+  attachmentApiPath = '/api/attachment',
+  fileList = [],
+  markdownText = '',
+  sourceFilePath = '',
+} = {}) {
   const normalizedMarkdown = String(markdownText);
-  const renderer = createMarkdownRenderer(fileList);
+  const renderer = createMarkdownRenderer(fileList, {
+    attachmentApiPath,
+    sourceFilePath,
+  });
 
   return {
     html: renderer.render(normalizedMarkdown),

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

@@ -10,17 +10,21 @@ function createPreviewWorker() {
 
 export class PreviewRenderExecutor {
   constructor({
+    attachmentApiPath = '/api/attachment',
     cancelIdleRenderFn = cancelIdleRender,
     compilePreviewDocumentLoader = () => import('./preview-render-compiler.js'),
     createWorkerFn = createPreviewWorker,
     getFileList,
+    getSourceFilePath = null,
     idleTimeoutMs = IDLE_RENDER_TIMEOUT_MS,
     requestIdleRenderFn = requestIdleRender,
   } = {}) {
+    this.attachmentApiPath = attachmentApiPath;
     this.cancelIdleRenderFn = cancelIdleRenderFn;
     this.compilePreviewDocumentLoader = compilePreviewDocumentLoader;
     this.createWorkerFn = createWorkerFn;
     this.getFileList = getFileList;
+    this.getSourceFilePath = getSourceFilePath;
     this.idleTimeoutMs = idleTimeoutMs;
     this.requestIdleRenderFn = requestIdleRenderFn;
     this.worker = null;
@@ -105,17 +109,21 @@ export class PreviewRenderExecutor {
       return new Promise((resolve, reject) => {
         this.workerJob = { reject, renderVersion, resolve };
         activeWorker.postMessage({
+          attachmentApiPath: this.attachmentApiPath,
           fileList: this.getFileList?.() ?? [],
           markdownText,
           renderVersion,
+          sourceFilePath: this.getSourceFilePath?.() ?? '',
         });
       });
     }
 
     const { compilePreviewDocument } = await this.compilePreviewDocumentLoader();
     return compilePreviewDocument({
+      attachmentApiPath: this.attachmentApiPath,
       fileList: this.getFileList?.() ?? [],
       markdownText,
+      sourceFilePath: this.getSourceFilePath?.() ?? '',
     });
   }
 

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

@@ -1,10 +1,21 @@
 import { compilePreviewDocument } from './preview-render-compiler.js';
 
 self.onmessage = (event) => {
-  const { fileList, markdownText, renderVersion } = event.data ?? {};
+  const {
+    attachmentApiPath,
+    fileList,
+    markdownText,
+    renderVersion,
+    sourceFilePath,
+  } = event.data ?? {};
 
   try {
-    const result = compilePreviewDocument({ fileList, markdownText });
+    const result = compilePreviewDocument({
+      attachmentApiPath,
+      fileList,
+      markdownText,
+      sourceFilePath,
+    });
     self.postMessage({
       html: result.html,
       renderVersion,

package/src/client/application/preview-renderer.js

@@ -4,11 +4,13 @@ import { IDLE_RENDER_TIMEOUT_MS } from './preview-diagram-utils.js';
 import { PreviewRenderExecutor } from './preview-render-executor.js';
 import { getRenderProfile, isLargeDocumentStats } from './preview-render-profile.js';
 import { PreviewRenderScheduler } from './preview-render-scheduler.js';
+import { resolveApiUrl } from '../domain/runtime-paths.js';
 
 export class PreviewRenderer {
   constructor({
     getContent,
     getFileList,
+    getSourceFilePath,
     onAfterRenderCommit,
     onBeforeRenderCommit,
     onRenderComplete,
@@ -18,6 +20,7 @@ export class PreviewRenderer {
   }) {
     this.getContent = getContent;
     this.getFileList = getFileList;
+    this.getSourceFilePath = getSourceFilePath;
     this.onAfterRenderCommit = onAfterRenderCommit;
     this.onBeforeRenderCommit = onBeforeRenderCommit;
     this.onRenderComplete = onRenderComplete;
@@ -67,7 +70,9 @@ export class PreviewRenderer {
     this.plantUmlHydrator = new PlantUmlPreviewHydrator(this);
     this.renderScheduler = new PreviewRenderScheduler({ getRenderProfileFn: getRenderProfile });
     this.renderExecutor = new PreviewRenderExecutor({
+      attachmentApiPath: resolveApiUrl('/attachment'),
       getFileList: () => this.getFileList?.() ?? [],
+      getSourceFilePath: () => this.getSourceFilePath?.() ?? '',
       idleTimeoutMs: IDLE_RENDER_TIMEOUT_MS,
     });
 

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

@@ -12,6 +12,7 @@ export class WorkspaceChromeController {
     onFileOpenError,
     onFileOpenReady,
     onRenderExcalidrawPreview,
+    onRenderImagePreview,
     onSyncWrapToggle,
     onUpdateActiveFile,
     onUpdateCurrentFile,
@@ -29,6 +30,7 @@ export class WorkspaceChromeController {
     this.onFileOpenError = onFileOpenError;
     this.onFileOpenReady = onFileOpenReady;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
+    this.onRenderImagePreview = onRenderImagePreview;
     this.onSyncWrapToggle = onSyncWrapToggle;
     this.onUpdateActiveFile = onUpdateActiveFile;
     this.onUpdateCurrentFile = onUpdateCurrentFile;
@@ -68,10 +70,19 @@ export class WorkspaceChromeController {
     this.onFileOpenReady(session);
   }
 
-  finalizeFileOpen({ filePath, isExcalidraw, session = null, supportsBacklinks }) {
+  finalizeFileOpen({
+    filePath,
+    isExcalidraw = false,
+    isImage = false,
+    session = null,
+    supportsBacklinks,
+  }) {
     if (isExcalidraw) {
       this.onRenderExcalidrawPreview(filePath);
     }
+    if (isImage) {
+      this.onRenderImagePreview(filePath);
+    }
     this.onSyncWrapToggle();
     if (supportsBacklinks && session) {
       this.loadBacklinks(filePath);

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

@@ -14,6 +14,7 @@ export class WorkspaceCoordinator {
     getStoredUserName,
     getTheme,
     isExcalidrawFile,
+    isImageFile,
     isMermaidFile,
     isPlantUmlFile,
     isTabActive,
@@ -26,9 +27,11 @@ export class WorkspaceCoordinator {
     onFileAwarenessChange,
     onFileOpenError,
     onFileOpenReady,
+    onImagePaste,
     onSelectionChange,
     onSessionAssigned = null,
     onRenderExcalidrawPreview,
+    onRenderImagePreview,
     onSyncWrapToggle,
     onUpdateActiveFile,
     onUpdateCurrentFile,
@@ -50,9 +53,10 @@ export class WorkspaceCoordinator {
     this.getLocalUser = getLocalUser;
     this.getStoredUserName = getStoredUserName;
     this.getTheme = getTheme;
-    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.isTabActive = isTabActive;
     this.loadEditorSessionClassPort = loadEditorSessionClass;
     this.loadBacklinks = loadBacklinks;
@@ -63,6 +67,7 @@ export class WorkspaceCoordinator {
     this.onFileAwarenessChange = onFileAwarenessChange;
     this.onFileOpenError = onFileOpenError;
     this.onFileOpenReady = onFileOpenReady;
+    this.onImagePaste = onImagePaste;
     this.onSelectionChange = onSelectionChange;
     this.onSessionAssigned = onSessionAssigned;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
@@ -88,6 +93,7 @@ export class WorkspaceCoordinator {
       onFileOpenError,
       onFileOpenReady,
       onRenderExcalidrawPreview,
+      onRenderImagePreview,
       onSyncWrapToggle,
       onUpdateActiveFile,
       onUpdateCurrentFile,
@@ -129,10 +135,11 @@ export class WorkspaceCoordinator {
     }
 
     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 || isExcalidraw)) {
+    if (filePath === this.stateStore.get('currentFilePath') && (this.session || isExcalidraw || isImage)) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
       return;
@@ -142,10 +149,10 @@ export class WorkspaceCoordinator {
 
     this.cleanupSession();
     const chromeState = this.chromeController.prepareForFileOpen(filePath, {
-      resetConnectionState: !isExcalidraw,
+      resetConnectionState: !isExcalidraw && !isImage,
     });
 
-    if (isExcalidraw) {
+    if (isExcalidraw || isImage) {
       this.onSessionAssigned?.(null);
 
       if (loadToken !== this.stateStore.get('sessionLoadToken')) {
@@ -155,7 +162,8 @@ export class WorkspaceCoordinator {
       this.chromeController.markFileOpenReady(null);
       this.chromeController.finalizeFileOpen({
         filePath,
-        isExcalidraw: true,
+        isExcalidraw,
+        isImage,
         session: null,
         supportsBacklinks: chromeState.supportsBacklinks,
       });
@@ -180,6 +188,7 @@ export class WorkspaceCoordinator {
           isPlantUml,
         });
       },
+      onImagePaste: (file) => this.onImagePaste?.(file),
       preferredUserName: this.getStoredUserName(),
       onSelectionChange: (anchor) => this.onSelectionChange?.(anchor),
       theme: this.getTheme(),

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();