collabmd 0.1.37 → 0.1.39

package/src/client/domain/excalidraw-scene-reconcile.js

@@ -0,0 +1,38 @@
+export function buildReconciledExcalidrawSceneUpdate({
+  appStateOverrides = {},
+  currentAppState,
+  currentElements = [],
+  documentViewState = {},
+  includeUnchangedAppState = false,
+  reconcileElementsFn,
+  restoreAppStateFn,
+  restoreElementsFn,
+  scene,
+  theme = 'dark',
+} = {}) {
+  const restoredElements = restoreElementsFn(scene?.elements || [], currentElements, {
+    repairBindings: true,
+  });
+  const restoredAppState = restoreAppStateFn(scene?.appState || {}, currentAppState);
+  const nextAppState = {
+    theme,
+    viewBackgroundColor: restoredAppState.viewBackgroundColor ?? '#ffffff',
+    gridSize: restoredAppState.gridSize ?? null,
+    ...documentViewState,
+    ...appStateOverrides,
+  };
+  const appStateUpdate = Object.fromEntries(
+    Object.entries(nextAppState).filter(([key, value]) => (
+      includeUnchangedAppState || currentAppState?.[key] !== value
+    )),
+  );
+  const update = {
+    elements: reconcileElementsFn(currentElements, restoredElements, currentAppState),
+  };
+
+  if (Object.keys(appStateUpdate).length > 0) {
+    update.appState = appStateUpdate;
+  }
+
+  return update;
+}

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

@@ -0,0 +1,179 @@
+import { LanguageDescription, LanguageSupport, StreamLanguage } from '@codemirror/language';
+
+const DIAGRAM_DECLARATIONS = new Set([
+  'block-beta',
+  'classdiagram',
+  'erdiagram',
+  'flowchart',
+  'gantt',
+  'gitgraph',
+  'graph',
+  'journey',
+  'mindmap',
+  'pie',
+  'quadrantchart',
+  'sankey-beta',
+  'sequencediagram',
+  'statediagram',
+  'statediagram-v2',
+  'timeline',
+  'xychart-beta',
+]);
+
+const KEYWORDS = new Set([
+  'accdescr',
+  'acctitle',
+  'actor',
+  'alt',
+  'and',
+  'autonumber',
+  'break',
+  'callback',
+  'class',
+  'classdef',
+  'click',
+  'critical',
+  'dateformat',
+  'direction',
+  'else',
+  'end',
+  'exclude',
+  'include',
+  'interpolate',
+  'link',
+  'linkstyle',
+  'loop',
+  'note',
+  'opt',
+  'par',
+  'participant',
+  'rect',
+  'section',
+  'state',
+  'style',
+  'subgraph',
+  'theme',
+  'title',
+]);
+
+const BOOLEAN_LITERALS = new Set([
+  'false',
+  'no',
+  'off',
+  'on',
+  'true',
+  'yes',
+]);
+
+const FLOW_DIRECTIONS = new Set([
+  'bt',
+  'lr',
+  'rl',
+  'tb',
+  'td',
+]);
+
+function readWord(stream) {
+  const match = stream.match(/[A-Za-z_][\w.]*(?:-[A-Za-z0-9_][\w.]*)*/u, false);
+  if (!match) {
+    return '';
+  }
+
+  stream.match(/[A-Za-z_][\w.]*(?:-[A-Za-z0-9_][\w.]*)*/u);
+  return match[0];
+}
+
+function readDirective(stream) {
+  if (!stream.match('%%{')) {
+    return false;
+  }
+
+  if (stream.skipTo('}%%')) {
+    stream.match('}%%');
+  } else {
+    stream.skipToEnd();
+  }
+
+  return true;
+}
+
+const mermaidStreamLanguage = StreamLanguage.define({
+  languageData: {
+    commentTokens: {
+      line: '%%',
+    },
+  },
+  token(stream) {
+    if (stream.eatSpace()) {
+      return null;
+    }
+
+    if (readDirective(stream)) {
+      return 'meta';
+    }
+
+    if (stream.match('%%')) {
+      stream.skipToEnd();
+      return 'comment';
+    }
+
+    if (stream.match(/"(?:[^"\\]|\\.)*"?/u) || stream.match(/'(?:[^'\\]|\\.)*'?/u)) {
+      return 'string';
+    }
+
+    if (stream.match(/#[0-9a-f]{3,8}\b/iu) || stream.match(/#[A-Za-z][\w-]*/u)) {
+      return 'atom';
+    }
+
+    if (stream.match(/\b\d+(?:\.\d+)?%?\b/u)) {
+      return 'number';
+    }
+
+    if (stream.match(/[ox*+<#]?[-=.\\/]+(?:left|right|up|down)?[-=.\\/]*[ox*+>#]?/iu)) {
+      return 'operator';
+    }
+
+    if (stream.match(/[{}[\]():,;|]/u)) {
+      return 'punctuation';
+    }
+
+    const word = readWord(stream);
+    if (word) {
+      const normalized = word.toLowerCase();
+
+      if (DIAGRAM_DECLARATIONS.has(normalized)) {
+        return 'meta';
+      }
+
+      if (KEYWORDS.has(normalized)) {
+        return 'keyword';
+      }
+
+      if (BOOLEAN_LITERALS.has(normalized)) {
+        return 'bool';
+      }
+
+      if (FLOW_DIRECTIONS.has(normalized)) {
+        return 'atom';
+      }
+
+      if (/^[A-Z][A-Z0-9_]*$/u.test(word)) {
+        return 'typeName';
+      }
+
+      return 'variableName';
+    }
+
+    stream.next();
+    return null;
+  },
+});
+
+export const mermaidLanguage = new LanguageSupport(mermaidStreamLanguage);
+
+export const mermaidLanguageDescription = LanguageDescription.of({
+  alias: ['mermaid', 'mmd'],
+  extensions: ['mermaid', 'mmd'],
+  name: 'Mermaid',
+  support: mermaidLanguage,
+});

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

@@ -79,6 +79,7 @@ export function getClientRuntimeConfig() {
     environment: 'development',
     gitEnabled: true,
     publicWsBaseUrl: '',
+    wikiLinkAutoCreate: true,
     wsBasePath: '/ws',
     ...(window.__COLLABMD_CONFIG__ ?? {}),
   };

package/src/client/excalidraw-editor.js

@@ -10,7 +10,9 @@ import {
 import '@excalidraw/excalidraw/index.css';
 
 import {
+  buildRenderableCollaboratorsMap,
   findCollaboratorByPeerId,
+  getCollaboratorsRenderSignature,
   mergeAwarenessUserPatch,
   resolveLocalAwarenessUser,
 } from './domain/excalidraw-collaboration.js';
@@ -24,6 +26,9 @@ import {
   parseSceneJson,
   sceneToInitialData,
 } from './domain/excalidraw-scene.js';
+import {
+  buildReconciledExcalidrawSceneUpdate,
+} from './domain/excalidraw-scene-reconcile.js';
 import {
   normalizeDocumentMode,
 } from './domain/excalidraw-document-switch.js';
@@ -60,6 +65,7 @@ let pendingHostFollowPeerId = null;
 let suppressViewportBroadcast = false;
 let pendingViewportSuppressionReleases = 0;
 let lastAppliedFollowViewportSignature = '';
+let lastRenderedCollaboratorsSignature = '';
 let apiStateCleanupCallbacks = [];
 let collaboratorRenderFrame = 0;
 let queuedCollaborators = null;
@@ -295,16 +301,21 @@ if (isTestMode) {
 
 function applyCollaborators(collaborators) {
   activeCollaborators = collaborators instanceof Map ? collaborators : new Map();
+  const renderableCollaborators = buildRenderableCollaboratorsMap(activeCollaborators);
+  const renderSignature = getCollaboratorsRenderSignature(renderableCollaborators);
 
   if (!excalidrawAPI) {
     pendingCollaborators = activeCollaborators;
     return;
   }
 
-  excalidrawAPI.updateScene({
-    collaborators: activeCollaborators,
-    captureUpdate: CaptureUpdateAction.NEVER,
-  });
+  if (renderSignature !== lastRenderedCollaboratorsSignature) {
+    lastRenderedCollaboratorsSignature = renderSignature;
+    excalidrawAPI.updateScene({
+      collaborators: renderableCollaborators,
+      captureUpdate: CaptureUpdateAction.NEVER,
+    });
+  }
 
   if (pendingHostFollowPeerId) {
     applyHostFollowRequest(pendingHostFollowPeerId);
@@ -328,10 +339,29 @@ function queueCollaboratorsRender(collaborators) {
   });
 }
 
-function applySceneFromJson(rawJson) {
+function isEditingTextElement() {
+  return Boolean(excalidrawAPI?.getAppState?.()?.editingTextElement);
+}
+
+function flushPendingRemoteScene() {
+  if (!pendingRemoteSceneJson || !excalidrawAPI || !collabReady || isEditingTextElement()) {
+    return false;
+  }
+
+  const sceneJson = pendingRemoteSceneJson;
+  pendingRemoteSceneJson = '';
+  applySceneFromJson(sceneJson, {
+    force: true,
+  });
+  return true;
+}
+
+function applySceneFromJson(rawJson, {
+  force = false,
+} = {}) {
   const scene = parseSceneJson(rawJson);
   const normalizedJson = JSON.stringify(scene);
-  if (normalizedJson === appliedSceneJson && !pendingRemoteSceneJson) {
+  if (!force && normalizedJson === appliedSceneJson && !pendingRemoteSceneJson) {
     return;
   }
 
@@ -342,9 +372,12 @@ function applySceneFromJson(rawJson) {
     return;
   }
 
-  updateApiScene(scene, {
-    replaceElements: true,
-  });
+  if (!force && isEditingTextElement()) {
+    pendingRemoteSceneJson = normalizedJson;
+    return;
+  }
+
+  updateApiScene(scene);
 }
 
 function releaseOnChangeSuppressionAfterPaint({ trackedSharedSnapshot = false } = {}) {
@@ -376,30 +409,21 @@ function releaseViewportBroadcastSuppressionAfterPaint() {
 
 function buildApiSceneUpdate(scene, {
   appStateOverrides = {},
-  replaceElements = false,
 } = {}) {
   const currentAppState = excalidrawAPI.getAppState();
-  const currentElements = replaceElements
-    ? []
-    : (excalidrawAPI.getSceneElementsIncludingDeleted?.() || excalidrawAPI.getSceneElements());
-  const restoredElements = restoreElements(scene?.elements || [], currentElements, {
-    repairBindings: true,
-  });
-  const restoredAppState = restoreAppState(scene?.appState || {}, currentAppState);
-  const reconciledElements = replaceElements
-    ? restoredElements
-    : reconcileElements(currentElements, restoredElements, currentAppState);
+  const currentElements = excalidrawAPI.getSceneElementsIncludingDeleted?.() || excalidrawAPI.getSceneElements();
 
-  return {
-    appState: {
-      theme: currentTheme,
-      viewBackgroundColor: restoredAppState.viewBackgroundColor ?? '#ffffff',
-      gridSize: restoredAppState.gridSize ?? null,
-      ...getDocumentViewState(),
-      ...appStateOverrides,
-    },
-    elements: reconciledElements,
-  };
+  return buildReconciledExcalidrawSceneUpdate({
+    appStateOverrides,
+    currentAppState,
+    currentElements,
+    documentViewState: getDocumentViewState(),
+    reconcileElementsFn: reconcileElements,
+    restoreAppStateFn: restoreAppState,
+    restoreElementsFn: restoreElements,
+    scene,
+    theme: currentTheme,
+  });
 }
 
 function logFileConflictOnce(conflictingFileIds = []) {
@@ -437,12 +461,10 @@ function requestEditorRemount(scene) {
 function applySceneToMountedApi(scene, {
   appStateOverrides = {},
   captureUpdate = CaptureUpdateAction.NEVER,
-  replaceElements = false,
   trackedSharedSnapshot = false,
 } = {}) {
   const nextSceneUpdate = buildApiSceneUpdate(scene, {
     appStateOverrides,
-    replaceElements,
   });
   let applyResult = null;
 
@@ -484,13 +506,11 @@ function applySceneToMountedApi(scene, {
 function updateApiScene(scene, {
   appStateOverrides = {},
   captureUpdate = CaptureUpdateAction.NEVER,
-  replaceElements = false,
   trackedSharedSnapshot = true,
 } = {}) {
   applySceneToMountedApi(scene, {
     appStateOverrides,
     captureUpdate,
-    replaceElements,
     trackedSharedSnapshot,
   });
 }
@@ -520,6 +540,10 @@ function onRoomTextUpdate() {
   applySceneFromJson(roomClient?.getLastSceneJson?.() || '');
 }
 
+function getLiveSceneElementsForSync(fallbackElements = []) {
+  return excalidrawAPI?.getSceneElementsIncludingDeleted?.() || fallbackElements;
+}
+
 function postToParent(type, payload = {}) {
   window.parent.postMessage({ source: 'excalidraw-editor', type, ...payload }, parentOrigin);
 }
@@ -674,6 +698,7 @@ function resetRealtimeRoomState() {
   suppressViewportBroadcast = false;
   pendingViewportSuppressionReleases = 0;
   lastAppliedFollowViewportSignature = '';
+  lastRenderedCollaboratorsSignature = '';
   if (collaboratorRenderFrame) {
     cancelAnimationFrame(collaboratorRenderFrame);
   }
@@ -799,17 +824,8 @@ function scheduleSyncToRoom(elements, appState, files) {
     return;
   }
 
-  const nextSceneJson = JSON.stringify(normalizeScene({
-    elements,
-    appState,
-    files,
-  }));
-  if (nextSceneJson === appliedSceneJson) {
-    return;
-  }
-
-  appliedSceneJson = nextSceneJson;
-  roomClient.scheduleSceneSync(elements, appState, files);
+  const liveElements = getLiveSceneElementsForSync(elements);
+  roomClient.scheduleSceneSync(liveElements, appState, files);
 }
 
 function initializeEditor(api) {
@@ -828,14 +844,27 @@ function initializeEditor(api) {
 
     setFollowedSocket(null, { force: true });
   }));
+  apiStateCleanupCallbacks.push(api.onStateChange('editingTextElement', (editingTextElement) => {
+    if (!editingTextElement) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          flushPendingRemoteScene();
+        });
+      });
+    }
+  }));
 
   const sceneJson = pendingRemoteSceneJson || roomClient?.getLastSceneJson?.() || '';
+  const initialScene = parseSceneJson(sceneJson);
   pendingRemoteSceneJson = '';
-  updateApiScene(parseSceneJson(sceneJson));
+  appliedSceneJson = JSON.stringify(initialScene);
+  updateApiScene(initialScene);
 
   if (pendingCollaborators) {
+    const renderableCollaborators = buildRenderableCollaboratorsMap(pendingCollaborators);
+    lastRenderedCollaboratorsSignature = getCollaboratorsRenderSignature(renderableCollaborators);
     excalidrawAPI.updateScene({
-      collaborators: pendingCollaborators,
+      collaborators: renderableCollaborators,
       captureUpdate: CaptureUpdateAction.NEVER,
     });
     pendingCollaborators = null;

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

@@ -38,14 +38,15 @@ import {
 } from '@codemirror/view';
 import { yCollab } from 'y-codemirror.next';
 
-import { isBaseFilePath, isPlantUmlFilePath } from '../../domain/file-kind.js';
+import { isBaseFilePath, isMermaidFilePath, isPlantUmlFilePath } 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 { handleImagePasteEvent } from './editor-paste-utils.js';
 
-const markdownCodeLanguages = [...languages, plantUmlLanguageDescription];
+const markdownCodeLanguages = [...languages, mermaidLanguageDescription, plantUmlLanguageDescription];
 const pairedMatchingBracketMark = Decoration.mark({ class: 'cm-matchingBracket cm-matchingBracket-paired' });
 const nonmatchingBracketMark = Decoration.mark({ class: 'cm-nonmatchingBracket' });
 const remoteUpdateMark = Decoration.mark({ class: 'cm-remoteUpdateFlash' });
@@ -299,6 +300,10 @@ function createEditorTheme(theme) {
 }
 
 export function createLanguageExtension(filePath) {
+  if (isMermaidFilePath(filePath)) {
+    return mermaidLanguage;
+  }
+
   if (isPlantUmlFilePath(filePath)) {
     return plantUmlLanguage;
   }