collabmd 0.1.44 → 0.1.46

package/src/client/export/export-pipeline.js

@@ -1,6 +1,11 @@
 import { exportToSvg as exportExcalidrawToSvg } from '@excalidraw/excalidraw';
 
-import { sanitizeSvgMarkup } from '../application/preview-diagram-utils.js';
+import {
+  encodeSvgDataUrl,
+  loadImage,
+  resolveSvgDimensions,
+  sanitizeSvgMarkup,
+} from '../application/preview-diagram-utils.js';
 import { compilePreviewDocument } from '../application/preview-render-compiler.js';
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { parseSceneJson, sceneToInitialData } from '../domain/excalidraw-scene.js';
@@ -60,10 +65,6 @@ function createDocumentTitle(filePath, title = '') {
   return stripVaultFileExtension(leaf) || 'document';
 }
 
-function encodeSvgDataUrl(svgMarkup) {
-  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
-}
-
 function encodeSvgBase64DataUrl(svgMarkup) {
   const bytes = new TextEncoder().encode(String(svgMarkup ?? ''));
   const chunkSize = 0x8000;
@@ -87,35 +88,6 @@ function blobToDataUrl(blob) {
   });
 }
 
-function loadImage(src) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.decoding = 'async';
-    image.addEventListener('load', () => resolve(image), { once: true });
-    image.addEventListener('error', () => reject(new Error(`Failed to load image: ${src}`)), { once: true });
-    image.src = src;
-  });
-}
-
-function resolveSvgDimensions(svgElement) {
-  const widthAttr = Number.parseFloat(svgElement.getAttribute('width') || '');
-  const heightAttr = Number.parseFloat(svgElement.getAttribute('height') || '');
-  const viewBox = svgElement.getAttribute('viewBox') || '';
-  const viewBoxParts = viewBox.split(/\s+/).map((value) => Number.parseFloat(value));
-
-  const width = Number.isFinite(widthAttr) && widthAttr > 0
-    ? widthAttr
-    : (Number.isFinite(viewBoxParts[2]) && viewBoxParts[2] > 0 ? viewBoxParts[2] : 1200);
-  const height = Number.isFinite(heightAttr) && heightAttr > 0
-    ? heightAttr
-    : (Number.isFinite(viewBoxParts[3]) && viewBoxParts[3] > 0 ? viewBoxParts[3] : 800);
-
-  return {
-    height,
-    width,
-  };
-}
-
 function trimSvgCanvas(svgMarkup, { padding = 16 } = {}) {
   const probe = document.createElement('div');
   probe.style.position = 'fixed';

package/src/client/infrastructure/auth-client.js

@@ -1,5 +1,6 @@
 import '../styles/features/auth-gate.css';
 
+import { getHashParamsFromRaw } from '../domain/hash-routes.js';
 import { getRuntimeConfig } from './runtime-config.js';
 
 const DEFAULT_AUTH_CONFIG = {
@@ -24,19 +25,12 @@ function getClientAuthConfig() {
   };
 }
 
-function getHashParams() {
-  const rawHash = window.location.hash.startsWith('#')
-    ? window.location.hash.slice(1)
-    : window.location.hash;
-  return new URLSearchParams(rawHash);
-}
-
 function getPasswordFromHash() {
-  return getHashParams().get('auth_password') || '';
+  return getHashParamsFromRaw(window.location.hash).get('auth_password') || '';
 }
 
 function removePasswordFromHash() {
-  const params = getHashParams();
+  const params = getHashParamsFromRaw(window.location.hash);
   if (!params.has('auth_password')) {
     return;
   }
@@ -48,7 +42,7 @@ function removePasswordFromHash() {
 }
 
 function consumeHashParam(name) {
-  const params = getHashParams();
+  const params = getHashParamsFromRaw(window.location.hash);
   const value = params.get(name) || '';
   if (!value) {
     return '';

package/src/client/infrastructure/browser-notification-port.js

@@ -1,36 +1,49 @@
 export class BrowserNotificationPort {
-  constructor({
-    NotificationImpl = globalThis.Notification,
-    focusWindow = () => globalThis.window?.focus?.(),
-  } = {}) {
-    this.NotificationImpl = NotificationImpl;
-    this.focusWindow = focusWindow;
+  getApi() {
+    return typeof globalThis.Notification === 'function'
+      ? globalThis.Notification
+      : null;
   }
 
   getPermission() {
-    return typeof this.NotificationImpl === 'function'
-      ? this.NotificationImpl.permission
-      : 'unsupported';
+    return this.getApi()?.permission ?? 'unsupported';
   }
 
   async requestPermission() {
-    return typeof this.NotificationImpl === 'function'
-      ? this.NotificationImpl.requestPermission()
-      : 'unsupported';
+    const api = this.getApi();
+    if (!api || typeof api.requestPermission !== 'function') {
+      return 'unsupported';
+    }
+
+    if (api.permission !== 'default') {
+      return api.permission;
+    }
+
+    try {
+      return await api.requestPermission();
+    } catch {
+      return api.permission ?? 'default';
+    }
   }
 
-  createNotification({ body, onClick, tag, title }) {
-    if (typeof this.NotificationImpl !== 'function') {
+  show({ body, onClick, tag, title } = {}) {
+    const api = this.getApi();
+    if (!api || api.permission !== 'granted' || !body) {
       return null;
     }
 
-    const notification = new this.NotificationImpl(title, { body, tag });
-    if (typeof onClick === 'function') {
-      notification.addEventListener('click', () => {
-        this.focusWindow();
-        onClick();
+    try {
+      const notification = new api(title, {
+        body,
+        renotify: true,
+        tag,
       });
+      if (onClick) {
+        notification.onclick = onClick;
+      }
+      return notification;
+    } catch {
+      return null;
     }
-    return notification;
   }
 }

package/src/client/infrastructure/browser-preferences-port.js

@@ -15,19 +15,25 @@ function writeStorage(storage, key, value) {
   }
 }
 
+const MAX_RECENT_FILES = 20;
+
 export class BrowserPreferencesPort {
   constructor({
-    chatNotificationsKey,
+    fileTreeShowExtensionsKey,
     lineWrappingKey,
+    recentFilesKey = 'collabmd-recent-files',
+    vimModeKey = 'collabmd-editor-vim-mode',
     sidebarVisibleKey,
     userNameKey,
     storage = globalThis.localStorage,
   }) {
-    this.chatNotificationsKey = chatNotificationsKey;
+    this.fileTreeShowExtensionsKey = fileTreeShowExtensionsKey;
     this.lineWrappingKey = lineWrappingKey;
+    this.recentFilesKey = recentFilesKey;
     this.sidebarVisibleKey = sidebarVisibleKey;
     this.storage = storage;
     this.userNameKey = userNameKey;
+    this.vimModeKey = vimModeKey;
   }
 
   getUserName() {
@@ -38,6 +44,14 @@ export class BrowserPreferencesPort {
     writeStorage(this.storage, this.userNameKey, name);
   }
 
+  getFileTreeShowExtensions() {
+    return readStorage(this.storage, this.fileTreeShowExtensionsKey, null) === 'true';
+  }
+
+  setFileTreeShowExtensions(showFileExtensions) {
+    writeStorage(this.storage, this.fileTreeShowExtensionsKey, showFileExtensions ? 'true' : 'false');
+  }
+
   getLineWrappingEnabled() {
     return readStorage(this.storage, this.lineWrappingKey, null) !== 'false';
   }
@@ -46,6 +60,36 @@ export class BrowserPreferencesPort {
     writeStorage(this.storage, this.lineWrappingKey, String(enabled));
   }
 
+  getVimModeEnabled() {
+    return readStorage(this.storage, this.vimModeKey, null) === 'true';
+  }
+
+  setVimModeEnabled(enabled) {
+    writeStorage(this.storage, this.vimModeKey, String(enabled));
+  }
+
+  getRecentFiles() {
+    const stored = readStorage(this.storage, this.recentFilesKey, '[]');
+    try {
+      const recentFiles = JSON.parse(stored);
+      return Array.isArray(recentFiles)
+        ? [...new Set(recentFiles.filter((filePath) => typeof filePath === 'string' && filePath))]
+        : [];
+    } catch {
+      return [];
+    }
+  }
+
+  recordRecentFile(filePath) {
+    if (!filePath) return;
+
+    const recentFiles = [
+      filePath,
+      ...this.getRecentFiles().filter((recentFilePath) => recentFilePath !== filePath),
+    ];
+    writeStorage(this.storage, this.recentFilesKey, JSON.stringify(recentFiles.slice(0, MAX_RECENT_FILES)));
+  }
+
   getSidebarVisible() {
     return readStorage(this.storage, this.sidebarVisibleKey, null);
   }
@@ -54,11 +98,4 @@ export class BrowserPreferencesPort {
     writeStorage(this.storage, this.sidebarVisibleKey, showSidebar ? 'true' : 'false');
   }
 
-  getChatNotificationsEnabled() {
-    return readStorage(this.storage, this.chatNotificationsKey, null) === 'true';
-  }
-
-  setChatNotificationsEnabled(enabled) {
-    writeStorage(this.storage, this.chatNotificationsKey, String(enabled));
-  }
 }

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

@@ -83,15 +83,21 @@ function normalizeSelectionAnchorPayload(payload, state) {
 
 export class CommentThreadStore {
   constructor({
+    canWrite = () => true,
+    createAnchor = null,
     getDoc,
     getEditorState,
     getLocalUser,
     onCommentsChange = null,
+    resolveThread = null,
   }) {
+    this.canWrite = canWrite;
+    this.createAnchor = createAnchor;
     this.getDoc = getDoc;
     this.getEditorState = getEditorState;
     this.getLocalUser = getLocalUser;
     this.onCommentsChange = onCommentsChange;
+    this.resolveThread = resolveThread;
     this.commentThreads = null;
     this.ydoc = null;
     this.ytext = null;
@@ -144,33 +150,44 @@ export class CommentThreadStore {
     }
 
     return serializeCommentThreads(this.commentThreads)
-      .map((thread) => this.resolveCommentThread(thread))
+      .map((thread) => this.resolveThread
+        ? this.resolveThread(thread)
+        : this.resolveCommentThread(thread))
       .filter(Boolean);
   }
 
   createCommentThread({ anchor, body }) {
-    const state = this.getEditorState();
-    if (!state || !this.commentThreads || !this.ytext || !this.ydoc) {
+    if (!this.canWrite() || !this.commentThreads || !this.ydoc) {
       return null;
     }
 
+    const state = this.getEditorState?.();
     const normalizedBody = normalizeCommentBody(body);
-    const normalizedAnchor = normalizeSelectionAnchorPayload(anchor, state);
+    if (!this.createAnchor && (!state || !this.ytext)) {
+      return null;
+    }
+
+    const normalizedAnchor = this.createAnchor
+      ? this.createAnchor(anchor)
+      : normalizeSelectionAnchorPayload(anchor, state);
     if (!normalizedBody || !normalizedAnchor) {
       return null;
     }
 
     const thread = createCommentThreadSharedType({
-      anchorEnd: Y.relativePositionToJSON(
-        Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.endIndex),
-      ),
-      anchorEndLine: normalizedAnchor.anchorEndLine,
+      ...normalizedAnchor,
+      ...(this.createAnchor ? {} : {
+        anchorEnd: Y.relativePositionToJSON(
+          Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.endIndex),
+        ),
+      }),
       anchorKind: normalizedAnchor.anchorKind,
       anchorQuote: normalizedAnchor.anchorQuote,
-      anchorStart: Y.relativePositionToJSON(
-        Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.startIndex),
-      ),
-      anchorStartLine: normalizedAnchor.anchorStartLine,
+      ...(this.createAnchor ? {} : {
+        anchorStart: Y.relativePositionToJSON(
+          Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.startIndex),
+        ),
+      }),
       createdAt: Date.now(),
       createdByColor: this.getLocalUser()?.color ?? '',
       createdByName: this.getLocalUser()?.name ?? 'Anonymous',
@@ -194,6 +211,10 @@ export class CommentThreadStore {
   }
 
   replyToCommentThread(threadId, body) {
+    if (!this.canWrite()) {
+      return null;
+    }
+
     const normalizedBody = normalizeCommentBody(body);
     if (!normalizedBody || !this.ydoc) {
       return null;
@@ -291,7 +312,7 @@ export class CommentThreadStore {
   }
 
   deleteCommentThread(threadId) {
-    if (!this.commentThreads || !this.ydoc) {
+    if (!this.canWrite() || !this.commentThreads || !this.ydoc) {
       return false;
     }
 

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

@@ -8,6 +8,7 @@ export class EditorSession {
   constructor({
     editorContainer,
     lineWrappingEnabled = true,
+    vimModeEnabled = false,
     initialTheme,
     lineInfoElement,
     onAwarenessChange,
@@ -44,6 +45,7 @@ export class EditorSession {
       initialTheme,
       lineInfoElement,
       lineWrappingEnabled,
+      vimModeEnabled,
       onDocChanged: () => {
         this.emitContentChange();
       },
@@ -210,6 +212,14 @@ export class EditorSession {
     return this.viewAdapter.isLineWrappingEnabled();
   }
 
+  isVimModeEnabled() {
+    return this.viewAdapter.isVimModeEnabled();
+  }
+
+  setVimMode(enabled) {
+    return this.viewAdapter.setVimMode(enabled);
+  }
+
   setLineWrapping(enabled) {
     return this.viewAdapter.setLineWrapping(enabled);
   }

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

@@ -1,3 +1,4 @@
+import { vim } from '@replit/codemirror-vim';
 import { autocompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import {
   defaultKeymap,
@@ -20,7 +21,14 @@ import {
   syntaxHighlighting,
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { highlightSelectionMatches, openSearchPanel, searchKeymap } from '@codemirror/search';
+import {
+  findNext,
+  getSearchQuery,
+  highlightSelectionMatches,
+  openSearchPanel,
+  searchKeymap,
+  searchPanelOpen,
+} from '@codemirror/search';
 import { Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
@@ -38,15 +46,26 @@ import {
 } from '@codemirror/view';
 import { yCollab } from 'y-codemirror.next';
 
-import { isBaseFilePath, isMermaidFilePath, isPlantUmlFilePath } from '../../domain/file-kind.js';
+import {
+  isBaseFilePath,
+  isMermaidFilePath,
+  isPlantUmlFilePath,
+  isStructurizrFilePath,
+} from '../../domain/file-kind.js';
 import { normalizeCommentQuote } from '../../domain/comment-threads.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
 import { mermaidLanguage, mermaidLanguageDescription } from '../domain/mermaid-language.js';
 import { wikiLinkCompletions } from '../domain/wiki-link-completions.js';
 import { plantUmlLanguage, plantUmlLanguageDescription } from '../domain/plantuml-language.js';
+import { structurizrLanguage, structurizrLanguageDescription } from '../domain/structurizr-language.js';
 import { handleImagePasteEvent } from './editor-paste-utils.js';
 
-const markdownCodeLanguages = [...languages, mermaidLanguageDescription, plantUmlLanguageDescription];
+const markdownCodeLanguages = [
+  ...languages,
+  mermaidLanguageDescription,
+  plantUmlLanguageDescription,
+  structurizrLanguageDescription,
+];
 const pairedMatchingBracketMark = Decoration.mark({ class: 'cm-matchingBracket cm-matchingBracket-paired' });
 const nonmatchingBracketMark = Decoration.mark({ class: 'cm-nonmatchingBracket' });
 const remoteUpdateMark = Decoration.mark({ class: 'cm-remoteUpdateFlash' });
@@ -54,10 +73,82 @@ const REMOTE_UPDATE_FLASH_DURATION_MS = 1350;
 const REMOTE_UPDATE_CARET_MAX_LENGTH = 160;
 const RECENT_LOCAL_INPUT_WINDOW_MS = 900;
 const TASK_LIST_MARKER_PATTERN = /^(\s*(?:>\s*)*(?:[-+*]|\d+[.)])\s+\[)( |x|X)(\])(\s.*)?$/;
+
+function openSearchPanelPreservingViewport(view) {
+  const scrollTop = view.scrollDOM.scrollTop;
+  const selection = view.state.selection;
+  const applied = openSearchPanel(view);
+
+  if (applied) {
+    requestAnimationFrame(() => {
+      if (view.dom.isConnected && view.state.selection.eq(selection)) {
+        view.scrollDOM.scrollTop = scrollTop;
+      }
+    });
+  }
+
+  return applied;
+}
+
+function getSearchQueryKey(query) {
+  return JSON.stringify([query.search, query.caseSensitive, query.regexp, query.wholeWord]);
+}
+
+function createSearchNavigationListener() {
+  let lastQueryKey = '';
+  let panelWasOpen = false;
+  let pendingFrame = 0;
+
+  return EditorView.updateListener.of((update) => {
+    const panelOpen = searchPanelOpen(update.state);
+    const query = getSearchQuery(update.state);
+    const queryKey = getSearchQueryKey(query);
+    const shouldReveal = panelOpen
+      && query.valid
+      && (!panelWasOpen || queryKey !== lastQueryKey);
+
+    panelWasOpen = panelOpen;
+    lastQueryKey = queryKey;
+
+    if (!shouldReveal) {
+      return;
+    }
+
+    if (pendingFrame) {
+      cancelAnimationFrame(pendingFrame);
+    }
+
+    pendingFrame = requestAnimationFrame(() => {
+      pendingFrame = 0;
+      if (!update.view.dom.isConnected) {
+        return;
+      }
+
+      const currentQuery = getSearchQuery(update.view.state);
+      if (
+        !searchPanelOpen(update.view.state)
+        || !currentQuery.valid
+        || getSearchQueryKey(currentQuery) !== queryKey
+      ) {
+        return;
+      }
+
+      const searchInput = update.view.dom.querySelector('.cm-search input[name="search"]');
+      const inputSelection = searchInput === update.view.root.activeElement && searchInput
+        ? { end: searchInput.selectionEnd, start: searchInput.selectionStart }
+        : null;
+      findNext(update.view);
+      if (inputSelection && searchInput?.setSelectionRange) {
+        searchInput.setSelectionRange(inputSelection.start, inputSelection.end);
+      }
+    });
+  });
+}
+
 const EDITOR_COMMANDS = Object.freeze({
   indentLess,
   indentMore,
-  openSearch: openSearchPanel,
+  openSearch: openSearchPanelPreservingViewport,
   redo,
   undo,
 });
@@ -308,6 +399,10 @@ export function createLanguageExtension(filePath) {
     return plantUmlLanguage;
   }
 
+  if (isStructurizrFilePath(filePath)) {
+    return structurizrLanguage;
+  }
+
   if (isBaseFilePath(filePath)) {
     return yaml();
   }
@@ -329,6 +424,7 @@ export class EditorViewAdapter {
     initialTheme,
     lineInfoElement,
     lineWrappingEnabled = true,
+    vimModeEnabled = false,
     onDocChanged = null,
     onImagePaste = null,
     onSelectionChanged = null,
@@ -339,6 +435,7 @@ export class EditorViewAdapter {
     this.initialTheme = initialTheme;
     this.lineInfoElement = lineInfoElement;
     this.lineWrappingEnabled = lineWrappingEnabled;
+    this.vimModeEnabled = Boolean(vimModeEnabled);
     this.onDocChanged = onDocChanged;
     this.onImagePaste = onImagePaste;
     this.onSelectionChanged = onSelectionChanged;
@@ -347,6 +444,7 @@ export class EditorViewAdapter {
     this.themeCompartment = new Compartment();
     this.syntaxThemeCompartment = new Compartment();
     this.lineWrappingCompartment = new Compartment();
+    this.vimModeCompartment = new Compartment();
     this.viewportFrame = 0;
     this.remoteUpdateFlashTimer = 0;
     this.lastLocalInputAt = 0;
@@ -398,11 +496,17 @@ export class EditorViewAdapter {
       crosshairCursor(),
       highlightActiveLine(),
       highlightSelectionMatches(),
+      createSearchNavigationListener(),
+      this.vimModeCompartment.of(!readOnly && this.vimModeEnabled ? vim({ status: true }) : []),
       keymap.of([
         ...closeBracketsKeymap,
         ...defaultKeymap,
         ...historyKeymap,
-        ...searchKeymap,
+        ...searchKeymap.map((binding) => (
+          binding.run === openSearchPanel
+            ? { ...binding, run: openSearchPanelPreservingViewport }
+            : binding
+        )),
         ...foldKeymap,
         indentWithTab,
       ]),
@@ -561,6 +665,30 @@ export class EditorViewAdapter {
     return this.lineWrappingEnabled;
   }
 
+  isVimModeEnabled() {
+    return this.vimModeEnabled;
+  }
+
+  setVimMode(enabled) {
+    const nextEnabled = Boolean(enabled);
+    if (nextEnabled === this.vimModeEnabled) {
+      return nextEnabled;
+    }
+
+    this.vimModeEnabled = nextEnabled;
+    if (!this.editorView || this.editorView.state.readOnly) {
+      return nextEnabled;
+    }
+
+    this.editorView.dispatch({
+      effects: this.vimModeCompartment.reconfigure(
+        nextEnabled ? vim({ status: true }) : [],
+      ),
+    });
+    this.editorView.focus();
+    return nextEnabled;
+  }
+
   setLineWrapping(enabled) {
     this.lineWrappingEnabled = Boolean(enabled);