collabmd 0.1.45 → 0.1.47

package/src/client/assets/vendor/highlight/github-dark.min.css

@@ -1,10 +1,2 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-  Theme: GitHub Dark
-  Description: Dark theme as seen on github.com
-  Author: github.com
-  Maintainer: @Hirse
-  Updated: 2021-05-15
-
-  Outdated base version: https://github.com/primer/github-syntax-dark
-  Current colors taken from GitHub's CSS
-*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
+/* Highlight.js tokens mapped to CodeMirror's oneDarkHighlightStyle. */
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword{color:#c678dd}.hljs-attr,.hljs-attribute,.hljs-property,.hljs-variable{color:#e06c75}.hljs-title.function_,.hljs-title.function_.invoke__{color:#61afef}.hljs-name,.hljs-selector-tag,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-type{color:#e5c07b}.hljs-atom,.hljs-built_in,.hljs-bullet,.hljs-literal,.hljs-symbol,.hljs-variable.language_{color:#d19a66}.hljs-number{color:#e5c07b}.hljs-meta .hljs-string,.hljs-string{color:#98c379}.hljs-link,.hljs-operator,.hljs-regexp{color:#56b6c2}.hljs-code,.hljs-comment,.hljs-formula,.hljs-meta,.hljs-quote{color:#7d8799}.hljs-subst{color:#abb2bf}.hljs-section{color:#e06c75;font-weight:700}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-addition{color:#98c379}.hljs-deletion{color:#e06c75}

package/src/client/assets/vendor/highlight/github.min.css

@@ -1,10 +1,2 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-  Theme: GitHub
-  Description: Light theme as seen on github.com
-  Author: github.com
-  Maintainer: @Hirse
-  Updated: 2021-05-15
-
-  Outdated base version: https://github.com/primer/github-syntax-light
-  Current colors taken from GitHub's CSS
-*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
+/* Highlight.js tokens mapped to CodeMirror's defaultHighlightStyle. */
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#404740;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-selector-tag{color:#708}.hljs-atom,.hljs-bullet,.hljs-literal,.hljs-symbol,.hljs-variable.language_{color:#219}.hljs-number{color:#164}.hljs-meta .hljs-string,.hljs-regexp{color:#e40}.hljs-string{color:#a11}.hljs-title.function_,.hljs-title.function_.invoke__{color:#00f}.hljs-title.class_,.hljs-title.class_.inherited__{color:#167}.hljs-built_in,.hljs-name,.hljs-type{color:#085}.hljs-attr,.hljs-attribute,.hljs-property{color:#00c}.hljs-code,.hljs-comment,.hljs-formula,.hljs-quote{color:#940}.hljs-meta,.hljs-operator,.hljs-subst,.hljs-variable{color:#404740}.hljs-section{color:#00f;font-weight:700}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-addition{color:#164}.hljs-deletion{color:#a11}

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

@@ -1,8 +1,10 @@
+import { PdfPreviewController } from '../application/pdf-preview-controller.js';
 import { PreviewRenderer } from '../application/preview-renderer.js';
 import { ensureQuickSwitcherInstance, toggleQuickSwitcherInstance } from '../application/quick-switcher-loader.js';
 import { WorkspaceRouteController } from '../application/workspace-route-controller.js';
 import { WikiLinkFileController } from '../application/wiki-link-file-controller.js';
 import { WorkspacePreviewController } from '../application/workspace-preview-controller.js';
+import { StructurizrPreviewController } from '../application/structurizr-preview-controller.js';
 import { WorkspaceCoordinator } from '../application/workspace-coordinator.js';
 import { bindAppShellElements } from '../application/app-shell-elements.js';
 import { chatFeature } from '../application/app-shell/chat-feature.js';
@@ -97,7 +99,13 @@ export class CollabMdAppShell {
     this.sessionLoadToken = 0;
     this.navigation = {
       getHashRoute,
-      navigateToFile,
+      navigateToFile: (filePath, options = {}) => {
+        const { preserveFollow = false, ...routeOptions } = options;
+        if (!preserveFollow && filePath !== this.currentFilePath) {
+          this.stopFollowingUser();
+        }
+        navigateToFile(filePath, routeOptions);
+      },
       navigateToGitCommit,
       navigateToGitDiff,
       navigateToGitFileHistory,
@@ -108,6 +116,7 @@ export class CollabMdAppShell {
       fileTreeShowExtensionsKey: 'collabmd-file-tree-show-extensions',
       lineWrappingKey: 'collabmd-editor-line-wrap',
       recentFilesKey: 'collabmd-recent-files',
+      vimModeKey: 'collabmd-editor-vim-mode',
       sidebarVisibleKey: 'collabmd-sidebar-visible',
       userNameKey: 'collabmd-user-name',
     });
@@ -146,13 +155,9 @@ export class CollabMdAppShell {
     });
     this.workspaceSync = new WorkspaceSyncClient({
       onTreeChange: (tree, metadata = {}) => {
-        const wasReady = this.fileExplorerReady;
         this.fileExplorer.setTree(tree, metadata);
         this.handleCommentOverviewWorkspaceTreeChange?.();
         this.fileExplorerReady = true;
-        if (!wasReady && this.isTabActive) {
-          void this.workspaceRouteController.handleHashChange();
-        }
       },
       onWorkspaceEvent: (event) => {
         void this.handleIncomingWorkspaceEvent(event);
@@ -248,6 +253,7 @@ export class CollabMdAppShell {
         this.drawioEmbed.reconcileEmbeds(this.elements.previewContent);
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
         this.scrollSyncController.setLargeDocumentMode(stats.isLargeDocument);
+        this.syncPreviewCodeCopyButtons();
         this.syncPreviewHeadingLinkButtons();
         this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: true });
         this.schedulePreviewLayoutSync({ delayMs: 0 });
@@ -288,6 +294,9 @@ export class CollabMdAppShell {
       previewElement: this.elements.previewContent,
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
     });
+    this.pdfPreview = new PdfPreviewController({
+      getTheme: () => this.themeController.getTheme(),
+    });
     this.backlinksPanel = new BacklinksPanel({
       headerPanelElement: this.elements.backlinksHeaderPanel,
       inlinePanelElement: this.elements.backlinksInlinePanel,
@@ -301,6 +310,7 @@ export class CollabMdAppShell {
       getLocalUser: () => this.lobby.getLocalUser(),
       getTheme: () => this.themeController.getTheme(),
       onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onStopFollowing: () => this.stopFollowingUser(),
       onToggleQuickSwitcher: () => {
         void this.toggleQuickSwitcher();
       },
@@ -351,6 +361,10 @@ export class CollabMdAppShell {
       onToggleReaction: (threadId, messageId, emoji) => this.session?.toggleCommentReaction(threadId, messageId, emoji),
       onResolveThread: (threadId) => this.resolveCommentThread(threadId),
     });
+    this.structurizrPreview = new StructurizrPreviewController({
+      enabled: this.runtimeConfig.structurizrEnabled === true,
+      syncWorkspace: (payload) => this.vaultApiClient.syncStructurizrWorkspace(payload),
+    });
     this.workspacePreviewController = new WorkspacePreviewController({
       backlinksPanel: this.backlinksPanel,
       basesPreview: this.basesPreview,
@@ -363,10 +377,13 @@ export class CollabMdAppShell {
       isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
+      isPdfFile: (filePath) => this.isPdfFile(filePath),
       isMermaidFile: (filePath) => this.isMermaidFile(filePath),
       isPlantUmlFile: (filePath) => this.isPlantUmlFile(filePath),
       layoutController: this.layoutController,
+      structurizrPreview: this.structurizrPreview,
       outlineController: this.outlineController,
+      pdfPreview: this.pdfPreview,
       previewRenderer: this.previewRenderer,
       schedulePreviewLayoutSync: (options) => this.schedulePreviewLayoutSync(options),
       scrollSyncController: this.scrollSyncController,
@@ -381,6 +398,7 @@ export class CollabMdAppShell {
       wikiLinkAutoCreate: this.runtimeConfig.wikiLinkAutoCreate !== false,
     });
     this.gitDiffView = new GitDiffViewController({
+      getTheme: () => this.themeController.getTheme(),
       gitApiClient: this.gitApiClient,
       onBackToHistory: ({ historyFilePath } = {}) => {
         if (historyFilePath) {
@@ -394,6 +412,7 @@ export class CollabMdAppShell {
       onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
       onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
       toastController: this.toastController,
+      vaultApiClient: this.vaultApiClient,
     });
     this.fileHistoryView = new FileHistoryViewController({
       diffRenderer: this.gitDiffView,
@@ -437,6 +456,7 @@ export class CollabMdAppShell {
         lineInfoElement: this.elements.lineInfo,
         lineWrappingEnabled: options.lineWrappingEnabled,
         localUser: options.localUser,
+        vimModeEnabled: options.vimModeEnabled,
         onImagePaste: options.onImagePaste,
         onAwarenessChange: options.onAwarenessChange,
         onCommentsChange: options.onCommentsChange,
@@ -448,6 +468,7 @@ export class CollabMdAppShell {
       getDisplayName: (filePath) => this.getDisplayName(filePath),
       getFileList: () => this.fileExplorer.flatDocumentFiles,
       getLineWrappingEnabled: () => this.getStoredLineWrapping(),
+      getVimModeEnabled: () => this.getStoredVimMode(),
       getLocalUser: () => this.lobby.getLocalUser(),
       getStoredUserName: () => this.getStoredUserName(),
       getTheme: () => this.themeController.getTheme(),
@@ -455,8 +476,10 @@ export class CollabMdAppShell {
       isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
+      isPdfFile: (filePath) => this.isPdfFile(filePath),
       isMermaidFile: (filePath) => this.isMermaidFile(filePath),
       isPlantUmlFile: (filePath) => this.isPlantUmlFile(filePath),
+      isStructurizrWorkspaceFile: (filePath) => this.isStructurizrWorkspaceFile(filePath),
       isTabActive: () => this.isTabActive,
       loadBootstrapContent: async (filePath) => {
         const response = await this.vaultApiClient.readFile(filePath);
@@ -477,7 +500,7 @@ export class CollabMdAppShell {
         this.clearInitialFileBootstrap();
       },
       onConnectionChange: (state) => this.handleConnectionChange(state),
-      onContentChange: ({ isBase, isMermaid, isPlantUml }) => {
+      onContentChange: ({ isBase, isMermaid, isPlantUml, isStructurizrWorkspace }) => {
         this.handleCommentEditorContentChange();
         if (isBase) {
           this.scheduleBaseFilePreview(this.currentFilePath, {
@@ -486,6 +509,14 @@ export class CollabMdAppShell {
           return;
         }
 
+        if (isStructurizrWorkspace) {
+          this.structurizrPreview.queueSync({
+            filePath: this.currentFilePath,
+            source: this.session?.getText?.() ?? '',
+          });
+          return;
+        }
+
         this.previewRenderer.queueRender();
         if (!isMermaid && !isPlantUml) {
           this.scheduleBacklinkRefresh();
@@ -515,6 +546,8 @@ export class CollabMdAppShell {
       onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
       onRenderExcalidrawPreview: (filePath) => this.workspacePreviewController.renderExcalidrawFilePreview(filePath),
       onRenderImagePreview: (filePath) => this.workspacePreviewController.renderImageFilePreview(filePath),
+      onRenderPdfPreview: (filePath) => this.workspacePreviewController.renderPdfFilePreview(filePath),
+      onRenderStructurizrPreview: (filePath, options) => this.workspacePreviewController.renderStructurizrFilePreview(filePath, options),
       onSyncWrapToggle: () => this.syncWrapToggle(),
       onUpdateActiveFile: (filePath) => this.fileExplorer.setActiveFile(filePath),
       onUpdateCurrentFile: (filePath) => {

package/src/client/browser-utils.js

@@ -2,6 +2,50 @@ function getWindowRef() {
   return typeof window === 'undefined' ? globalThis : window;
 }
 
+export function pickFiles({ accept = '', multiple = false } = {}) {
+  return new Promise((resolve) => {
+    const input = document.createElement('input');
+    const windowRef = getWindowRef();
+    input.type = 'file';
+    input.accept = accept;
+    input.multiple = multiple;
+    input.style.position = 'fixed';
+    input.style.left = '-9999px';
+    document.body.appendChild(input);
+    let settled = false;
+    let focusTimer = null;
+
+    const cleanup = (files = []) => {
+      if (settled) {
+        return;
+      }
+
+      settled = true;
+      if (focusTimer) {
+        windowRef.clearTimeout(focusTimer);
+      }
+      windowRef.removeEventListener('focus', handleWindowFocus);
+      input.remove();
+      resolve(Array.from(files ?? []));
+    };
+
+    const handleWindowFocus = () => {
+      focusTimer = windowRef.setTimeout(() => {
+        if (settled || input.files?.length) {
+          return;
+        }
+
+        cleanup();
+      }, 250);
+    };
+
+    input.addEventListener('change', () => cleanup(input.files), { once: true });
+    input.addEventListener('cancel', () => cleanup(), { once: true });
+    windowRef.addEventListener('focus', handleWindowFocus, { once: true });
+    input.click();
+  });
+}
+
 export function requestIdleRender(callback, timeout) {
   const windowRef = getWindowRef();
   if (typeof windowRef.requestIdleCallback === 'function') {

package/src/client/domain/runtime-paths.js

@@ -86,6 +86,7 @@ export function getClientRuntimeConfig() {
       unavailableReason: 'ripgrep search is unavailable',
       version: '',
     },
+    structurizrEnabled: false,
     wikiLinkAutoCreate: true,
     wsBasePath: '/ws',
     ...(window.__COLLABMD_CONFIG__ ?? {}),
@@ -143,12 +144,32 @@ export function resolveApiUrl(pathValue = '/', config = getClientRuntimeConfig()
   return resolveAppPath(`/api${normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`}`, config);
 }
 
-export function resolveWsBaseUrl(config = getClientRuntimeConfig()) {
-  const params = new URLSearchParams(window.location.search);
-  const customServerUrl = params.get('server');
+export function resolveWsServerOverride(config = getClientRuntimeConfig()) {
+  if (!['development', 'test'].includes(config.environment)) {
+    return '';
+  }
+
+  const customServerUrl = new URLSearchParams(window.location.search).get('server');
+  if (!customServerUrl) {
+    return '';
+  }
+
+  try {
+    const parsedUrl = new URL(customServerUrl, window.location.origin);
+    if (!['http:', 'https:', 'ws:', 'wss:'].includes(parsedUrl.protocol)) {
+      return '';
+    }
 
-  if (customServerUrl) {
-    return trimTrailingSlash(customServerUrl);
+    return trimTrailingSlash(parsedUrl.toString());
+  } catch {
+    return '';
+  }
+}
+
+export function resolveWsBaseUrl(config = getClientRuntimeConfig()) {
+  const serverOverride = resolveWsServerOverride(config);
+  if (serverOverride) {
+    return serverOverride;
   }
 
   if (config.publicWsBaseUrl) {

package/src/client/domain/structurizr-language.js

@@ -0,0 +1,99 @@
+import { LanguageDescription, LanguageSupport, StreamLanguage } from '@codemirror/language';
+
+const KEYWORDS = new Set([
+  'animation',
+  'autoLayout',
+  'component',
+  'configuration',
+  'container',
+  'custom',
+  'decisions',
+  'deployment',
+  'description',
+  'dynamic',
+  'element',
+  'filtered',
+  'group',
+  'include',
+  'image',
+  'model',
+  'person',
+  'perspectives',
+  'properties',
+  'relationship',
+  'relationships',
+  'styles',
+  'systemContext',
+  'systemLandscape',
+  'system',
+  'theme',
+  'views',
+  'workspace',
+]);
+
+function readWord(stream) {
+  const match = stream.match(/[A-Za-z_][\w.-]*/u, false);
+  if (!match) {
+    return '';
+  }
+
+  stream.match(/[A-Za-z_][\w.-]*/u);
+  return match[0];
+}
+
+const structurizrStreamLanguage = StreamLanguage.define({
+  languageData: {
+    commentTokens: { line: '//' },
+  },
+  token(stream) {
+    if (stream.eatSpace()) {
+      return null;
+    }
+
+    if (stream.match('//')) {
+      stream.skipToEnd();
+      return 'comment';
+    }
+
+    if (stream.match(/!\w+/u)) {
+      return 'meta';
+    }
+
+    if (stream.match(/"(?:[^"\\]|\\.)*"?/u)) {
+      return 'string';
+    }
+
+    if (stream.match(/\b\d+(?:\.\d+)?\b/u)) {
+      return 'number';
+    }
+
+    if (stream.match(/[-=]?>|[{}[\]():,=]/u)) {
+      return 'operator';
+    }
+
+    const word = readWord(stream);
+    if (word) {
+      if (KEYWORDS.has(word)) {
+        return 'keyword';
+      }
+
+      if (/^[A-Z][A-Z0-9_]*$/u.test(word)) {
+        return 'typeName';
+      }
+
+      return 'variableName';
+    }
+
+    stream.next();
+    return null;
+  },
+});
+
+export const structurizrLanguage = new LanguageSupport(structurizrStreamLanguage);
+
+export const structurizrLanguageDescription = LanguageDescription.of({
+  alias: ['structurizr', 'structurizr-dsl'],
+  extensions: ['dsl'],
+  name: 'Structurizr DSL',
+  support: structurizrLanguage,
+});

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

@@ -3,6 +3,7 @@ import {
   isDrawioFilePath,
   isMermaidFilePath,
   isPlantUmlFilePath,
+  isStructurizrFilePath,
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 
@@ -135,3 +136,50 @@ export function createPlantUmlStarter(filePath) {
     path: nextPath,
   };
 }
+
+export function createStructurizrStarter(filePath) {
+  const normalizedPath = normalizeVaultPathInput(filePath);
+  const nextPath = isStructurizrFilePath(normalizedPath)
+    ? normalizedPath
+    : `${normalizedPath}.dsl`;
+  return {
+    content: [
+      'workspace "CollabMD Example" "A small Structurizr workspace" {',
+      '  model {',
+      '    user = person "User" "Uses the system"',
+      '    system = softwareSystem "Example System" "The system being documented" {',
+      '      web = container "Web Application" "Serves the user interface" "JavaScript" {',
+      '        home = component "Home Page" "Shows the landing page" "React"',
+      '        editor = component "Editor" "Edits workspace content" "React"',
+      '      }',
+      '      api = container "API" "Handles requests" "Node.js"',
+      '    }',
+      '    user -> system "Uses"',
+      '    web -> api "Calls" "HTTPS/JSON"',
+      '    home -> editor "Links to"',
+      '  }',
+      '  views {',
+      '    systemContext system "Context" {',
+      '      include *',
+      '      autoLayout',
+      '    }',
+      '    container system "Containers" {',
+      '      include *',
+      '      autoLayout',
+      '    }',
+      '    component web "Components" {',
+      '      include *',
+      '      autoLayout',
+      '    }',
+      '    styles {',
+      '      element "Person" {',
+      '        shape person',
+      '      }',
+      '    }',
+      '  }',
+      '}',
+      '',
+    ].join('\n'),
+    path: nextPath,
+  };
+}