collabmd 0.1.43 → 0.1.44

package/src/client/presentation/comment-ui/comment-ui-layout.js

@@ -229,6 +229,22 @@ function renderPreviewLayer() {
   }
 
   const previewRect = this.previewElement.getBoundingClientRect();
+  if (this.activeCard?.mode === 'create' && this.activeCard.origin === 'preview') {
+    const selectionRects = Array.from(this.activeCard.previewRange?.getClientRects?.() ?? []);
+    const highlightRects = selectionRects.length > 0
+      ? selectionRects
+      : [this.resolvePreviewTarget(this.activeCard.anchor)?.bubbleRect].filter(Boolean);
+    highlightRects.forEach((rect) => {
+      const highlight = document.createElement('div');
+      highlight.className = 'comment-preview-highlight is-active';
+      highlight.style.left = `${rect.left - previewRect.left}px`;
+      highlight.style.top = `${rect.top - previewRect.top}px`;
+      highlight.style.width = `${rect.width}px`;
+      highlight.style.height = `${rect.height}px`;
+      this.previewHighlightLayer?.appendChild(highlight);
+    });
+  }
+
   const groups = this.getThreadGroups();
   const occupiedTops = [];
   const hoverRegions = [];
@@ -304,6 +320,37 @@ function renderPreviewLayer() {
     previewBubbles.push(bubble);
   });
 
+  if (this.previewSelection && this.activeCard?.mode !== 'create') {
+    const previewSelection = this.previewSelection;
+    const selectionRect = createRectFromRects(Array.from(previewSelection.range?.getClientRects?.() ?? []))
+      || previewSelection.rect;
+    if (selectionRect) {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'ui-chip-button ui-chip-button--comment comment-preview-selection-chip';
+      button.textContent = 'Comment';
+      button.setAttribute('aria-label', 'Comment on selected preview text');
+      button.style.left = `${clamp(
+        selectionRect.left - previewRect.left,
+        8,
+        Math.max(this.previewElement.clientWidth - 88, 8),
+      )}px`;
+      button.style.top = `${clamp(
+        selectionRect.bottom - previewRect.top + 8,
+        8,
+        Math.max(this.previewElement.clientHeight - COMMENT_CONTROL_SLOT_HEIGHT, 8),
+      )}px`;
+      button.addEventListener('pointerdown', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      });
+      button.addEventListener('click', () => {
+        this.openComposerForSelection('preview', button.getBoundingClientRect(), previewSelection);
+      });
+      this.previewLayer?.appendChild(button);
+    }
+  }
+
   this.previewHoverRegions = hoverRegions;
   const maxBubbleWidth = previewBubbles.reduce(
     (maxWidth, bubble) => Math.max(maxWidth, bubble.offsetWidth || COMMENT_PREVIEW_BADGE_MIN_WIDTH),
@@ -319,6 +366,12 @@ function renderPreviewLayer() {
   }
 }
 
+function clearPreviewSelection() {
+  this.previewSelection = null;
+  window.getSelection()?.removeAllRanges();
+  this.scheduleLayoutRefresh();
+}
+
 /** @this {any} */
 function resolvePreviewTarget(anchor) {
   if (!this.previewElement || !anchor) {
@@ -435,6 +488,7 @@ function shouldRenderPassivePreviewMarkers() {
 }
 
 export const commentUiLayoutMethods = {
+  clearPreviewSelection,
   ensureEditorLayer,
   ensurePreviewLayer,
   getPreviewGroupKeysAtPoint,

package/src/client/presentation/comment-ui/comment-ui-render.js

@@ -78,6 +78,7 @@ function renderDrawer() {
       event.preventDefault();
     });
     button.addEventListener('click', () => {
+      this.onNavigateToLine?.(group.anchor?.startLine ?? 1);
       this.openThreadGroup(group, {
         anchor: group.anchor,
         origin: 'drawer',

package/src/client/presentation/comment-ui/comment-ui-shared.js

@@ -1,10 +1,12 @@
 import {
   COMMENT_BODY_MAX_LENGTH,
+  normalizeCommentQuote,
   normalizeCommentQuoteForComparison,
 } from '../../../domain/comment-threads.js';
+import { clamp } from '../../domain/vault-utils.js';
 import { renderCommentMarkdownToHtml } from '../comment-markdown-renderer.js';
 
-export { COMMENT_BODY_MAX_LENGTH };
+export { COMMENT_BODY_MAX_LENGTH, clamp };
 
 export const COMMENT_CARD_OFFSET = 14;
 export const COMMENT_CARD_WIDTH = 520;
@@ -18,10 +20,6 @@ export const COMMENT_PREVIEW_RAIL_BREAKPOINT = 769;
 export const COMMENT_REACTION_PRESET_EMOJIS = Object.freeze(['👍', '❤️', '🎉', '👀', '🚀']);
 export const COMMENT_REACTION_MORE_EMOJIS = Object.freeze(['😂', '🔥', '✅', '🙏', '💡', '🤔', '👏', '😄', '🎯', '🙌']);
 
-export function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-
 export function sortThreads(threads = []) {
   return [...threads].sort((left, right) => (
     (left.anchor?.startLine ?? 0) - (right.anchor?.startLine ?? 0)
@@ -155,6 +153,89 @@ export function overlapsAnchorRange(element, anchor) {
   return anchor.startLine <= endLine && anchor.endLine >= startLine;
 }
 
+export function createPreviewSelection(selection, previewElement, sourceText = '') {
+  if (
+    !selection
+    || selection.isCollapsed
+    || selection.rangeCount === 0
+    || !previewElement?.contains(selection.anchorNode)
+    || !previewElement.contains(selection.focusNode)
+  ) {
+    return null;
+  }
+
+  const range = selection.getRangeAt(0);
+  const selectedText = String(selection.toString()).trim();
+  const quote = normalizeCommentQuote(selectedText);
+  const endpointElement = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+    ? range.commonAncestorContainer
+    : range.commonAncestorContainer.parentElement;
+  if (!quote || endpointElement?.closest?.('.diagram-preview-shell')) {
+    return null;
+  }
+
+  const blocks = Array.from(previewElement.querySelectorAll('[data-source-line]'))
+    .filter((element) => isLeafSourceBlock(element) && range.intersectsNode(element));
+  if (blocks.length === 0) {
+    return null;
+  }
+
+  const sourceLines = String(sourceText).split('\n');
+  const startLine = Math.min(Math.max(Math.min(
+    ...blocks.map((element) => parseLineNumber(element.getAttribute('data-source-line')) ?? sourceLines.length),
+  ), 1), sourceLines.length);
+  const endLine = Math.min(Math.max(
+    ...blocks.map((element) => (
+      parseLineNumber(element.getAttribute('data-source-line-end'))
+      ?? parseLineNumber(element.getAttribute('data-source-line'))
+      ?? 1
+    )),
+  ), sourceLines.length);
+  const lineStartIndex = sourceLines
+    .slice(0, startLine - 1)
+    .reduce((index, line) => index + line.length + 1, 0);
+  const lineEndIndex = sourceLines
+    .slice(startLine - 1, endLine)
+    .reduce((index, line, lineIndex) => index + line.length + (lineIndex === 0 ? 0 : 1), lineStartIndex);
+
+  let anchorKind = 'line';
+  let startIndex = lineStartIndex;
+  let endIndex = lineEndIndex;
+  let fallbackToLines = true;
+  if (blocks.length === 1) {
+    const sourceRange = String(sourceText).slice(lineStartIndex, lineEndIndex);
+    const matchIndex = sourceRange.indexOf(selectedText);
+    if (matchIndex >= 0 && matchIndex === sourceRange.lastIndexOf(selectedText)) {
+      anchorKind = 'text';
+      startIndex = lineStartIndex + matchIndex;
+      endIndex = startIndex + selectedText.length;
+      fallbackToLines = false;
+    }
+  }
+
+  const lineNumberAt = (index) => String(sourceText).slice(0, index).split('\n').length;
+  const anchorStartLine = fallbackToLines ? startLine : lineNumberAt(startIndex);
+  const anchorEndLine = fallbackToLines ? endLine : lineNumberAt(Math.max(endIndex - 1, startIndex));
+  const rect = createRectFromRects(Array.from(range.getClientRects()))
+    || createRectFromRects(blocks.map((element) => element.getBoundingClientRect()));
+
+  return {
+    anchor: {
+      anchorKind,
+      anchorQuote: quote,
+      endIndex,
+      endLine: anchorEndLine,
+      fallbackToLines,
+      kind: anchorKind,
+      quote,
+      startIndex,
+      startLine: anchorStartLine,
+    },
+    range: range.cloneRange(),
+    rect,
+  };
+}
+
 export function createNormalizedTextIndex(root) {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
   let normalized = '';

package/src/client/presentation/comment-ui/comment-ui-state.js

@@ -56,6 +56,7 @@ function attachSession(session) {
   this.selectionAnchor = session?.getCurrentSelectionCommentAnchor?.() ?? null;
   this.pendingSelectionAnchor = null;
   this.committedSelectionAnchor = null;
+  this.previewSelection = null;
   this.reactionPicker = null;
   this.clearSelectionRevealTimer();
   this.pointerSelecting = false;
@@ -82,6 +83,7 @@ function setCurrentFile(filePath, { fileKind = 'markdown', supported = false } =
     this.updateHoveredPreviewGroups([]);
     this.previewHoverRegions = [];
     this.lastPreviewPointerPosition = null;
+    this.previewSelection = null;
     this.reactionPicker = null;
   }
   if (!this.supported) {
@@ -97,6 +99,7 @@ function setCurrentFile(filePath, { fileKind = 'markdown', supported = false } =
     this.updateHoveredPreviewGroups([]);
     this.previewHoverRegions = [];
     this.lastPreviewPointerPosition = null;
+    this.previewSelection = null;
     this.reactionPicker = null;
   }
   this.render();

package/src/client/presentation/comment-ui-controller.js

@@ -2,7 +2,7 @@ import { commentUiCardMethods } from './comment-ui/comment-ui-card.js';
 import { commentUiLayoutMethods } from './comment-ui/comment-ui-layout.js';
 import { commentUiRenderMethods } from './comment-ui/comment-ui-render.js';
 import { commentUiStateMethods } from './comment-ui/comment-ui-state.js';
-import { isTextSelectionAnchor } from './comment-ui/comment-ui-shared.js';
+import { createPreviewSelection, isTextSelectionAnchor } from './comment-ui/comment-ui-shared.js';
 
 export class CommentUiController {
   constructor({
@@ -54,6 +54,7 @@ export class CommentUiController {
     this.hoveredPreviewGroupKeysSignature = '';
     this.previewHoverRegions = [];
     this.lastPreviewPointerPosition = null;
+    this.previewSelection = null;
     this.editorLayer = null;
     this.previewLayer = null;
     this.previewHighlightLayer = null;
@@ -84,6 +85,15 @@ export class CommentUiController {
     this.handlePreviewFocusOut = (event) => {
       this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(event.relatedTarget));
     };
+    this.handleDocumentSelectionChange = () => {
+      if (this.activeCard?.mode === 'create' && this.activeCard.origin === 'preview') {
+        return;
+      }
+      this.previewSelection = this.supported && this.fileKind === 'markdown'
+        ? createPreviewSelection(window.getSelection(), this.previewElement, this.session?.getText?.() ?? '')
+        : null;
+      this.scheduleLayoutRefresh();
+    };
     this.handleCommentSelectionButtonPointerDown = (event) => {
       event.preventDefault();
     };
@@ -173,6 +183,9 @@ export class CommentUiController {
       if (event.key === 'Escape' && this.activeCard) {
         this.closeCard();
       }
+      if (event.key === 'Escape' && this.previewSelection) {
+        this.clearPreviewSelection();
+      }
       if (event.key === 'Escape' && this.committedSelectionAnchor) {
         this.clearSelectionRevealTimer();
         this.pendingSelectionAnchor = null;
@@ -200,6 +213,7 @@ export class CommentUiController {
     document.addEventListener('pointercancel', this.handleDocumentPointerUp);
     document.addEventListener('pointerdown', this.handleDocumentPointerDown);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
+    document.addEventListener('selectionchange', this.handleDocumentSelectionChange);
   }
 
   destroy() {
@@ -221,7 +235,9 @@ export class CommentUiController {
     document.removeEventListener('pointercancel', this.handleDocumentPointerUp);
     document.removeEventListener('pointerdown', this.handleDocumentPointerDown);
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    document.removeEventListener('selectionchange', this.handleDocumentSelectionChange);
     this.previewHoverRegions = [];
+    this.previewSelection = null;
     this.cardRoot?.remove();
     this.editorLayer?.remove();
     this.previewLayer?.remove();

package/src/client/presentation/components/ui/button.js

@@ -51,28 +51,3 @@ export function buttonClassNames(options = {}) {
     extra,
   );
 }
-
-/**
- * @param {{ toolbar?: boolean, action?: boolean, surface?: boolean, hidden?: boolean, extra?: string|string[] }} [options]
- * @returns {string}
- */
-export function iconButtonClassNames(options = {}) {
-  const {
-    toolbar = false,
-    action = false,
-    surface = false,
-    hidden = false,
-    extra = [],
-  } = options;
-
-  return classNames(
-    'ui-icon-button',
-    {
-      'ui-icon-button--toolbar': toolbar,
-      'ui-icon-button--action': action,
-      'ui-icon-button--surface': surface,
-      hidden,
-    },
-    extra,
-  );
-}

package/src/client/presentation/components/ui/class-names.js

@@ -1,30 +1,11 @@
 export function classNames(...parts) {
-  const tokens = [];
-
-  for (const part of parts) {
-    if (!part) {
-      continue;
-    }
-
-    if (Array.isArray(part)) {
-      const nested = classNames(...part);
-      if (nested) {
-        tokens.push(nested);
-      }
-      continue;
-    }
-
-    if (typeof part === 'object') {
-      Object.entries(part).forEach(([className, enabled]) => {
-        if (enabled) {
-          tokens.push(className);
-        }
-      });
-      continue;
-    }
-
-    tokens.push(String(part));
-  }
+  return parts.flat().flatMap((part) => (
+    part && typeof part === 'object'
+      ? Object.keys(part).filter((className) => part[className])
+      : part || []
+  )).join(' ');
+}
 
-  return tokens.join(' ');
+export function inputClassNames(options = {}) {
+  return classNames('ui-input', options.extra ?? []);
 }

package/src/client/presentation/drawio-embed-controller.js

@@ -1,44 +1,17 @@
 import { createDrawioLeaseRoomName } from '../../domain/drawio-room.js';
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { resolveAppUrl } from '../domain/runtime-paths.js';
-import { vaultApiClient } from '../domain/vault-api-client.js';
+import {
+  cancelIdleRender,
+  isNearViewport,
+  requestIdleRender,
+} from '../browser-utils.js';
 
 const HYDRATE_VIEWPORT_MARGIN_PX = 360;
 const DRAWIO_VIEWER_SCRIPT_URL = 'https://viewer.diagrams.net/js/viewer-static.min.js';
 
 let drawioViewerLoadPromise = null;
 
-function requestIdleRender(callback, timeout) {
-  if (typeof window.requestIdleCallback === 'function') {
-    return window.requestIdleCallback(callback, { timeout });
-  }
-
-  return window.setTimeout(() => callback({ didTimeout: false, timeRemaining: () => 0 }), 1);
-}
-
-function cancelIdleRender(id) {
-  if (id === null) {
-    return;
-  }
-
-  if (typeof window.cancelIdleCallback === 'function') {
-    window.cancelIdleCallback(id);
-    return;
-  }
-
-  window.clearTimeout(id);
-}
-
-function isNearViewport(element, root, marginPx) {
-  if (!element || !root) {
-    return false;
-  }
-
-  const rootRect = root.getBoundingClientRect();
-  const elementRect = element.getBoundingClientRect();
-  return elementRect.bottom >= (rootRect.top - marginPx) && elementRect.top <= (rootRect.bottom + marginPx);
-}
-
 function ensureDrawioViewerLoaded() {
   if (window.GraphViewer?.processElements) {
     return Promise.resolve(window.GraphViewer);
@@ -102,6 +75,7 @@ export class DrawioEmbedController {
     previewContainer,
     previewElement,
     toastController,
+    vaultApiClient,
   }) {
     this.getLocalUser = getLocalUser;
     this.getTheme = getTheme;
@@ -111,6 +85,7 @@ export class DrawioEmbedController {
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
     this.toastController = toastController;
+    this.vaultApiClient = vaultApiClient;
     this.embedEntries = new Map();
     this.hydrationQueue = [];
     this.hydrationIdleId = null;
@@ -376,7 +351,7 @@ export class DrawioEmbedController {
 
   async renderViewerEntry(entry) {
     const [{ content }, viewer] = await Promise.all([
-      vaultApiClient.readFile(entry.filePath),
+      this.vaultApiClient.readFile(entry.filePath),
       ensureDrawioViewerLoaded(),
     ]);
 

package/src/client/presentation/excalidraw-embed-controller.js

@@ -1,6 +1,11 @@
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { reconcileEmbedEntries } from './excalidraw-embed-reconciler.js';
 import { resolveAppUrl } from '../domain/runtime-paths.js';
+import {
+  cancelIdleRender,
+  isNearViewport,
+  requestIdleRender,
+} from '../browser-utils.js';
 
 const DEFAULT_HEIGHT = 420;
 const HYDRATE_TIMEOUT_MS = 500;
@@ -10,46 +15,6 @@ const MAX_IFRAME_BOOT_ATTEMPTS = 3;
 const MIN_HEIGHT = 200;
 const EDITOR_IFRAME_PATH = '/excalidraw-editor.html';
 
-function requestIdleRender(callback, timeout) {
-  if (typeof window.requestIdleCallback === 'function') {
-    return window.requestIdleCallback(callback, { timeout });
-  }
-
-  return window.setTimeout(() => {
-    callback({
-      didTimeout: false,
-      timeRemaining: () => 0,
-    });
-  }, 1);
-}
-
-function cancelIdleRender(id) {
-  if (id === null) {
-    return;
-  }
-
-  if (typeof window.cancelIdleCallback === 'function') {
-    window.cancelIdleCallback(id);
-    return;
-  }
-
-  window.clearTimeout(id);
-}
-
-function isNearViewport(element, root, marginPx) {
-  if (!element || !root) {
-    return false;
-  }
-
-  const rootRect = root.getBoundingClientRect();
-  const elementRect = element.getBoundingClientRect();
-
-  return (
-    elementRect.bottom >= (rootRect.top - marginPx)
-    && elementRect.top <= (rootRect.bottom + marginPx)
-  );
-}
-
 export class ExcalidrawEmbedController {
   constructor({
     getTheme,
@@ -254,10 +219,10 @@ export class ExcalidrawEmbedController {
     });
   }
 
-  prepareFileDisconnect(filePath, { timeoutMs = 250 } = {}) {
+  prepareFileDisconnect(filePath, { timeoutMs = 10000 } = {}) {
     const entry = this._findEntryByFilePath(filePath);
     if (!entry?.iframe?.contentWindow) {
-      return Promise.resolve(false);
+      return Promise.resolve(true);
     }
 
     const requestId = `disconnect-${++this.disconnectRequestCounter}`;
@@ -274,7 +239,29 @@ export class ExcalidrawEmbedController {
       };
 
       const timeoutId = window.setTimeout(() => {
-        finish(false);
+        const shouldDiscard = window.confirm(
+          'This diagram has not reconnected, so its latest queued changes may not be saved. Discard pending changes and leave?',
+        );
+        if (!shouldDiscard) {
+          this._postMessageToEntry(entry, {
+            source: 'collabmd-host',
+            type: 'cancel-disconnect',
+            requestId,
+          });
+          this.toastController?.show?.('Stayed on the diagram while it reconnects');
+          finish(false);
+          return;
+        }
+
+        this._postMessageToEntry(entry, {
+          source: 'collabmd-host',
+          type: 'discard-and-disconnect',
+          requestId,
+        });
+        const request = this.pendingDisconnectRequests.get(requestId);
+        if (request) {
+          request.timeoutId = window.setTimeout(() => finish(true), 1000);
+        }
       }, timeoutMs);
 
       this.pendingDisconnectRequests.set(requestId, {
@@ -657,6 +644,9 @@ export class ExcalidrawEmbedController {
     if (hostSearchParams.has('syncTimeoutMs')) {
       iframeUrl.searchParams.set('syncTimeoutMs', hostSearchParams.get('syncTimeoutMs'));
     }
+    if (hostSearchParams.get('excalidrawDebug') === '1') {
+      iframeUrl.searchParams.set('excalidrawDebug', '1');
+    }
 
     return iframeUrl;
   }
@@ -1199,6 +1189,23 @@ export class ExcalidrawEmbedController {
       if (request?.entry === entry) {
         request.resolve(true);
       }
+      return;
+    }
+
+    if (msg.type === 'disconnect-blocked') {
+      entry.authorityState = msg.state || 'reconnecting-readonly';
+      this.toastController?.show?.('Waiting for the diagram to reconnect before leaving');
+      return;
+    }
+
+    if (msg.type === 'excalidraw-authority-state') {
+      entry.authorityState = msg.state || 'closed';
+      entry.hasPendingWrites = Boolean(msg.hasPendingWrites);
+      return;
+    }
+
+    if (msg.type === 'park-blocked') {
+      entry.authorityState = msg.state || 'reconnecting-readonly';
     }
   }
 

package/src/client/presentation/file-action-controller.js

@@ -9,26 +9,13 @@ import {
   createMermaidStarter,
   createPlantUmlStarter,
   ensureVaultExtension,
+  getVaultPathLeaf,
+  getVaultPathParent,
   normalizeVaultPathInput,
 } from '../domain/vault-paths.js';
-import { createWorkspaceRequestId } from '../domain/workspace-request-id.js';
 import { buttonClassNames } from './components/ui/button.js';
 import { CreateMenuPresenter } from './create-menu-presenter.js';
 
-function getPathLeaf(path) {
-  return String(path ?? '')
-    .replace(/\/+$/u, '')
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-function getParentPath(pathValue) {
-  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
-  const separatorIndex = normalized.lastIndexOf('/');
-  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
-}
-
 function replacePathPrefix(pathValue, oldPrefix, newPrefix) {
   if (pathValue === oldPrefix) {
     return newPrefix;
@@ -264,16 +251,12 @@ export class FileActionController {
     this.showToast(error?.message ? `${message}: ${error.message}` : message);
   }
 
-  ensureExtension(pathValue, extension) {
-    return ensureVaultExtension(pathValue, extension);
-  }
-
   createPendingWorkspaceRequestId() {
     if (!this.pendingWorkspaceRequestIds) {
       return null;
     }
 
-    const requestId = createWorkspaceRequestId();
+    const requestId = crypto.randomUUID();
     this.pendingWorkspaceRequestIds.add(requestId);
     return requestId;
   }
@@ -538,7 +521,7 @@ export class FileActionController {
     const finalPath = requestedExtension
       ? normalizedPath
       : `${normalizedPath}${extension}`;
-    if (!getPathLeaf(finalPath)) {
+    if (!getVaultPathLeaf(finalPath)) {
       this.showToast('File path is required');
       return false;
     }
@@ -642,8 +625,8 @@ export class FileActionController {
   planMoveEntryByDrop({ destinationDirectory = '', sourcePath = '', sourceType = 'file' } = {}) {
     const normalizedSourcePath = normalizeVaultPathInput(sourcePath);
     const normalizedDestinationDirectory = normalizeVaultPathInput(destinationDirectory);
-    const currentParentPath = getParentPath(normalizedSourcePath);
-    const entryName = getPathLeaf(normalizedSourcePath);
+    const currentParentPath = getVaultPathParent(normalizedSourcePath);
+    const entryName = getVaultPathLeaf(normalizedSourcePath);
 
     if (!normalizedSourcePath || !entryName) {
       return { ok: false, reason: 'Invalid item to move' };
@@ -761,7 +744,7 @@ export class FileActionController {
           return false;
         }
 
-        const filePath = this.ensureExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.md');
+        const filePath = ensureVaultExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.md');
         return this.createVaultFile(filePath, createMarkdownStarter(filePath), {
           errorMessage: 'Failed to create file',
           openAfterCreate: true,
@@ -839,7 +822,7 @@ export class FileActionController {
           return false;
         }
 
-        const filePath = this.ensureExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.excalidraw');
+        const filePath = ensureVaultExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.excalidraw');
         return this.createVaultFile(filePath, createEmptyExcalidrawScene(), {
           errorMessage: 'Failed to create drawing',
           openAfterCreate: true,

package/src/client/presentation/file-explorer-controller.js

@@ -1,5 +1,4 @@
 import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
-import { vaultApiClient } from '../domain/vault-api-client.js';
 import { FileActionController } from './file-action-controller.js';
 import { FileTreeState } from './file-tree-state.js';
 import { FileExplorerView } from './file-explorer-view.js';
@@ -11,7 +10,7 @@ export class FileExplorerController {
     onFileDelete,
     pendingWorkspaceRequestIds = null,
     toastController,
-    vaultClient = vaultApiClient,
+    vaultClient,
   }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;