collabmd 0.1.45 → 0.1.46

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';
@@ -108,6 +110,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 +149,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);
@@ -288,6 +287,10 @@ export class CollabMdAppShell {
       previewElement: this.elements.previewContent,
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
     });
+    this.pdfPreview = new PdfPreviewController({
+      outlineController: this.outlineController,
+      previewContainer: this.elements.previewContainer,
+    });
     this.backlinksPanel = new BacklinksPanel({
       headerPanelElement: this.elements.backlinksHeaderPanel,
       inlinePanelElement: this.elements.backlinksInlinePanel,
@@ -351,6 +354,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 +370,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 +391,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 +405,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 +449,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 +461,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 +469,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 +493,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 +502,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 +539,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,
+  };
+}