collabmd 0.1.25 → 0.1.26

package/src/client/infrastructure/drawio-lease-client.js

@@ -0,0 +1,345 @@
+import { Doc } from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
+
+import {
+  DRAWIO_LEASE_HEARTBEAT_MS,
+  DRAWIO_LEASE_STALE_MS,
+} from '../../domain/drawio-room.js';
+import { resolveWsBaseUrl } from '../domain/runtime-paths.js';
+import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
+
+const DEFAULT_SYNC_TIMEOUT_MS = 4000;
+
+function toFiniteNumber(value, fallbackValue = 0) {
+  const normalized = Number(value);
+  return Number.isFinite(normalized) ? normalized : fallbackValue;
+}
+
+export class DrawioLeaseClient {
+  constructor({
+    clearIntervalFn = (intervalId) => window.clearInterval(intervalId),
+    filePath = '',
+    heartbeatIntervalMs = DRAWIO_LEASE_HEARTBEAT_MS,
+    now = () => Date.now(),
+    onStateChange = () => {},
+    resolveWsBaseUrlFn = resolveWsBaseUrl,
+    roomName = '',
+    setIntervalFn = (callback, delay) => window.setInterval(callback, delay),
+    setTimeoutFn = (callback, delay) => window.setTimeout(callback, delay),
+    staleLeaseMs = DRAWIO_LEASE_STALE_MS,
+    syncTimeoutMs = DEFAULT_SYNC_TIMEOUT_MS,
+    websocketProviderFactory = (wsUrl, path, ydoc, options) => new WebsocketProvider(wsUrl, path, ydoc, options),
+    ydocFactory = () => new Doc(),
+  }) {
+    this.clearIntervalFn = clearIntervalFn;
+    this.filePath = filePath;
+    this.heartbeatIntervalMs = heartbeatIntervalMs;
+    this.now = now;
+    this.onStateChange = onStateChange;
+    this.resolveWsBaseUrlFn = resolveWsBaseUrlFn;
+    this.roomName = roomName;
+    this.setIntervalFn = setIntervalFn;
+    this.setTimeoutFn = setTimeoutFn;
+    this.staleLeaseMs = staleLeaseMs;
+    this.syncTimeoutMs = syncTimeoutMs;
+    this.websocketProviderFactory = websocketProviderFactory;
+    this.ydocFactory = ydocFactory;
+
+    this.ydoc = null;
+    this.provider = null;
+    this.awareness = null;
+    this.leaseMap = null;
+    this.statusMap = null;
+    this.localUser = null;
+    this.localMode = 'viewer';
+    this.heartbeatTimer = null;
+    this.currentState = this.createState();
+    this.handleLeaseChange = () => this.emitState();
+    this.handleStatusChange = () => this.emitState();
+    this.handleAwarenessChange = () => this.emitState();
+  }
+
+  createState(overrides = {}) {
+    return {
+      acquiredAt: 0,
+      canClaim: false,
+      hasHealthyHolder: false,
+      heartbeatAt: 0,
+      holderClientId: '',
+      holderName: '',
+      holderPeerId: '',
+      isEditor: false,
+      isStale: true,
+      mode: 'viewer',
+      savedAt: 0,
+      savedVersion: 0,
+      ...overrides,
+    };
+  }
+
+  async connect({ initialUser = null, requestedMode = 'edit' } = {}) {
+    this.localUser = initialUser ?? null;
+    this.localMode = requestedMode === 'edit' ? 'viewer' : 'viewer';
+
+    if (!this.roomName) {
+      this.currentState = this.createState();
+      this.onStateChange(this.currentState);
+      return this.currentState;
+    }
+
+    this.ydoc = this.ydocFactory();
+    this.provider = this.websocketProviderFactory(this.resolveWsBaseUrlFn(), this.roomName, this.ydoc, {
+      disableBc: true,
+      maxBackoffTime: 5000,
+    });
+    stopReconnectOnControlledClose(this.provider);
+
+    this.awareness = this.provider.awareness;
+    this.leaseMap = this.ydoc.getMap('lease');
+    this.statusMap = this.ydoc.getMap('status');
+
+    this.setLocalAwareness({ mode: 'viewer' });
+
+    this.leaseMap.observe(this.handleLeaseChange);
+    this.statusMap.observe(this.handleStatusChange);
+    this.awareness.on('change', this.handleAwarenessChange);
+
+    await this.waitForSync();
+
+    if (requestedMode === 'edit') {
+      this.tryAcquireLease();
+    } else {
+      this.emitState();
+    }
+
+    return this.currentState;
+  }
+
+  waitForSync() {
+    if (!this.provider) {
+      return Promise.resolve(false);
+    }
+
+    return new Promise((resolve) => {
+      let finished = false;
+      const timeoutId = this.setTimeoutFn(() => {
+        if (finished) {
+          return;
+        }
+
+        finished = true;
+        this.provider.off?.('sync', handleSync);
+        resolve(false);
+      }, this.syncTimeoutMs);
+
+      const handleSync = (isSynced) => {
+        if (!isSynced || finished) {
+          return;
+        }
+
+        finished = true;
+        clearTimeout(timeoutId);
+        this.provider.off?.('sync', handleSync);
+        resolve(true);
+      };
+
+      this.provider.on?.('sync', handleSync);
+    });
+  }
+
+  setLocalUser(nextUser = null) {
+    this.localUser = nextUser ?? null;
+    this.setLocalAwareness({ mode: this.currentState.isEditor ? 'editor' : 'viewer' });
+    return this.localUser;
+  }
+
+  setLocalAwareness({ mode = 'viewer' } = {}) {
+    this.localMode = mode;
+    if (!this.awareness) {
+      return;
+    }
+
+    this.awareness.setLocalStateField('drawio', {
+      filePath: this.filePath,
+      mode,
+      name: this.localUser?.name || '',
+      peerId: this.localUser?.peerId || '',
+    });
+  }
+
+  getLocalClientId() {
+    return this.ydoc ? String(this.ydoc.clientID) : '';
+  }
+
+  getLeaseSnapshot() {
+    return {
+      acquiredAt: toFiniteNumber(this.leaseMap?.get('acquiredAt')),
+      heartbeatAt: toFiniteNumber(this.leaseMap?.get('heartbeatAt')),
+      holderClientId: String(this.leaseMap?.get('holderClientId') || ''),
+      holderName: String(this.leaseMap?.get('holderName') || ''),
+      holderPeerId: String(this.leaseMap?.get('holderPeerId') || ''),
+    };
+  }
+
+  findHolderAwarenessState(holderClientId) {
+    if (!holderClientId || !this.awareness) {
+      return null;
+    }
+
+    for (const [clientId, state] of this.awareness.getStates()) {
+      if (String(clientId) === String(holderClientId) && state?.drawio?.filePath === this.filePath) {
+        return state.drawio;
+      }
+    }
+
+    return null;
+  }
+
+  isLeaseStale(snapshot = this.getLeaseSnapshot()) {
+    if (!snapshot.holderClientId) {
+      return true;
+    }
+
+    if (!this.findHolderAwarenessState(snapshot.holderClientId)) {
+      return true;
+    }
+
+    return (this.now() - snapshot.heartbeatAt) > this.staleLeaseMs;
+  }
+
+  isLeaseHeldByLocal(snapshot = this.getLeaseSnapshot()) {
+    return Boolean(snapshot.holderClientId) && snapshot.holderClientId === this.getLocalClientId();
+  }
+
+  tryAcquireLease() {
+    if (!this.leaseMap) {
+      return false;
+    }
+
+    const snapshot = this.getLeaseSnapshot();
+    if (snapshot.holderClientId && !this.isLeaseStale(snapshot) && !this.isLeaseHeldByLocal(snapshot)) {
+      this.emitState();
+      return false;
+    }
+
+    const now = this.now();
+    this.ydoc.transact(() => {
+      this.leaseMap.set('holderClientId', this.getLocalClientId());
+      this.leaseMap.set('holderName', this.localUser?.name || '');
+      this.leaseMap.set('holderPeerId', this.localUser?.peerId || '');
+      this.leaseMap.set('acquiredAt', now);
+      this.leaseMap.set('heartbeatAt', now);
+    }, 'drawio-lease-acquire');
+
+    this.emitState();
+    return this.currentState.isEditor;
+  }
+
+  renewLeaseHeartbeat() {
+    if (!this.leaseMap || !this.isLeaseHeldByLocal()) {
+      return false;
+    }
+
+    this.leaseMap.set('heartbeatAt', this.now());
+    return true;
+  }
+
+  startHeartbeat() {
+    if (this.heartbeatTimer) {
+      return;
+    }
+
+    this.heartbeatTimer = this.setIntervalFn(() => {
+      this.renewLeaseHeartbeat();
+    }, this.heartbeatIntervalMs);
+  }
+
+  stopHeartbeat() {
+    if (!this.heartbeatTimer) {
+      return;
+    }
+
+    this.clearIntervalFn(this.heartbeatTimer);
+    this.heartbeatTimer = null;
+  }
+
+  releaseLease() {
+    if (!this.leaseMap || !this.isLeaseHeldByLocal()) {
+      return false;
+    }
+
+    this.stopHeartbeat();
+    this.ydoc.transact(() => {
+      this.leaseMap.delete('holderClientId');
+      this.leaseMap.delete('holderName');
+      this.leaseMap.delete('holderPeerId');
+      this.leaseMap.delete('acquiredAt');
+      this.leaseMap.delete('heartbeatAt');
+    }, 'drawio-lease-release');
+    this.setLocalAwareness({ mode: 'viewer' });
+    this.emitState();
+    return true;
+  }
+
+  publishSave() {
+    if (!this.statusMap) {
+      return 0;
+    }
+
+    const nextVersion = toFiniteNumber(this.statusMap.get('savedVersion')) + 1;
+    const savedAt = this.now();
+    this.ydoc.transact(() => {
+      this.statusMap.set('savedVersion', nextVersion);
+      this.statusMap.set('savedAt', savedAt);
+    }, 'drawio-save-status');
+    this.emitState();
+    return nextVersion;
+  }
+
+  emitState() {
+    const snapshot = this.getLeaseSnapshot();
+    const isStale = this.isLeaseStale(snapshot);
+    const isEditor = this.isLeaseHeldByLocal(snapshot);
+    const nextState = this.createState({
+      acquiredAt: snapshot.acquiredAt,
+      canClaim: !isEditor && isStale,
+      hasHealthyHolder: Boolean(snapshot.holderClientId) && !isStale,
+      heartbeatAt: snapshot.heartbeatAt,
+      holderClientId: snapshot.holderClientId,
+      holderName: snapshot.holderName,
+      holderPeerId: snapshot.holderPeerId,
+      isEditor,
+      isStale,
+      mode: isEditor ? 'editor' : 'viewer',
+      savedAt: toFiniteNumber(this.statusMap?.get('savedAt')),
+      savedVersion: toFiniteNumber(this.statusMap?.get('savedVersion')),
+    });
+
+    if (isEditor) {
+      this.startHeartbeat();
+      this.setLocalAwareness({ mode: 'editor' });
+    } else {
+      this.stopHeartbeat();
+      this.setLocalAwareness({ mode: 'viewer' });
+    }
+
+    this.currentState = nextState;
+    this.onStateChange(nextState);
+    return nextState;
+  }
+
+  destroy() {
+    this.releaseLease();
+    this.stopHeartbeat();
+    this.leaseMap?.unobserve?.(this.handleLeaseChange);
+    this.statusMap?.unobserve?.(this.handleStatusChange);
+    this.awareness?.off?.('change', this.handleAwarenessChange);
+    this.provider?.destroy?.();
+    this.ydoc?.destroy?.();
+    this.provider = null;
+    this.ydoc = null;
+    this.awareness = null;
+    this.leaseMap = null;
+    this.statusMap = null;
+  }
+}

package/src/client/infrastructure/runtime-config.js

@@ -71,6 +71,7 @@ export function getHashRoute() {
 
   if (params.has('file')) {
     return {
+      drawioMode: params.get('drawio') || null,
       filePath: params.get('file'),
       type: 'file',
     };
@@ -79,11 +80,14 @@ export function getHashRoute() {
   return { type: 'empty' };
 }
 
-export function navigateToFile(filePath) {
+export function navigateToFile(filePath, { drawioMode = null } = {}) {
   const params = new URLSearchParams();
   if (filePath) {
     params.set('file', filePath);
   }
+  if (drawioMode) {
+    params.set('drawio', drawioMode);
+  }
   window.location.hash = params.toString();
 }
 

package/src/client/infrastructure/vault-api-client.js

@@ -45,6 +45,15 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to create file');
   }
 
+  async writeFile({ content, path, requestId = null }) {
+    const response = await fetch(resolveApiUrl('/file'), {
+      body: JSON.stringify({ content, path }),
+      headers: createRequestHeaders(requestId, { 'Content-Type': 'application/json' }),
+      method: 'PUT',
+    });
+    return parseApiResponse(response, 'Failed to write file');
+  }
+
   async renameFile({ oldPath, newPath, requestId = null }) {
     const response = await fetch(resolveApiUrl('/file'), {
       body: JSON.stringify({ newPath, oldPath }),

package/src/client/presentation/comments-panel.js

@@ -9,7 +9,7 @@ function isCommentablePreviewBlock(element) {
     return false;
   }
 
-  const interactiveEmbedSelector = '.mermaid-shell, .plantuml-shell, .excalidraw-embed, .excalidraw-embed-placeholder';
+  const interactiveEmbedSelector = '.mermaid-shell, .plantuml-shell, .drawio-embed, .drawio-embed-placeholder, .excalidraw-embed, .excalidraw-embed-placeholder';
   return !element.matches(interactiveEmbedSelector) && !element.querySelector(interactiveEmbedSelector);
 }
 
@@ -228,7 +228,7 @@ export class CommentsPanel {
       return;
     }
 
-    if (this.previewElement.querySelector('.mermaid-shell, .plantuml-shell, .excalidraw-embed, .excalidraw-embed-placeholder')) {
+    if (this.previewElement.querySelector('.mermaid-shell, .plantuml-shell, .drawio-embed, .drawio-embed-placeholder, .excalidraw-embed, .excalidraw-embed-placeholder')) {
       return;
     }
 

package/src/client/presentation/create-menu-presenter.js

@@ -0,0 +1,274 @@
+function getDefaultMobileBreakpointQuery() {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return { matches: false };
+  }
+
+  return window.matchMedia('(max-width: 768px)');
+}
+
+function getFocusableItems(container) {
+  if (typeof HTMLElement === 'undefined' || !(container instanceof HTMLElement)) {
+    return [];
+  }
+
+  return Array.from(container.querySelectorAll('.create-menu-item'));
+}
+
+export class CreateMenuPresenter {
+  constructor({
+    mobileBreakpointQuery = getDefaultMobileBreakpointQuery(),
+  } = {}) {
+    this.mobileBreakpointQuery = mobileBreakpointQuery;
+    this.activeAnchor = null;
+    this.desktopMenu = null;
+    this.mobileBackdrop = null;
+    this.mobileSheet = null;
+    this.documentPointerDownHandler = null;
+    this.windowResizeHandler = null;
+    this.boundClose = () => this.close();
+  }
+
+  isMobileViewport() {
+    return Boolean(this.mobileBreakpointQuery?.matches);
+  }
+
+  isOpen() {
+    return Boolean(this.desktopMenu || this.mobileSheet);
+  }
+
+  toggle(options = {}) {
+    if (this.isOpen()) {
+      this.close();
+      return;
+    }
+
+    this.open(options);
+  }
+
+  open({ anchor = null, items = [], title = 'Create' } = {}) {
+    this.close({ restoreFocus: false });
+
+    if (!Array.isArray(items) || items.length === 0) {
+      return;
+    }
+
+    this.activeAnchor = typeof HTMLElement !== 'undefined' && anchor instanceof HTMLElement ? anchor : null;
+    this.activeAnchor?.setAttribute('aria-expanded', 'true');
+
+    if (this.isMobileViewport()) {
+      this.openMobileSheet({ items, title });
+      return;
+    }
+
+    this.openDesktopMenu({ anchor: this.activeAnchor, items, title });
+  }
+
+  close({ restoreFocus = true } = {}) {
+    if (this.desktopMenu) {
+      this.desktopMenu.remove();
+      this.desktopMenu = null;
+    }
+
+    if (this.mobileBackdrop) {
+      this.mobileBackdrop.remove();
+      this.mobileBackdrop = null;
+    }
+
+    if (this.mobileSheet) {
+      this.mobileSheet.remove();
+      this.mobileSheet = null;
+    }
+
+    if (this.documentPointerDownHandler) {
+      document.removeEventListener('pointerdown', this.documentPointerDownHandler);
+      this.documentPointerDownHandler = null;
+    }
+
+    if (this.windowResizeHandler && typeof window !== 'undefined') {
+      window.removeEventListener('resize', this.windowResizeHandler);
+      this.windowResizeHandler = null;
+    } else {
+      this.windowResizeHandler = null;
+    }
+
+    const previousAnchor = this.activeAnchor;
+    this.activeAnchor?.setAttribute('aria-expanded', 'false');
+    this.activeAnchor = null;
+
+    if (restoreFocus) {
+      previousAnchor?.focus?.();
+    }
+  }
+
+  openDesktopMenu({ anchor, items, title }) {
+    const menu = document.createElement('div');
+    menu.className = 'create-menu';
+    menu.setAttribute('role', 'menu');
+    menu.setAttribute('aria-label', title);
+
+    this.renderMenuItems(menu, items);
+    document.body.appendChild(menu);
+    this.positionDesktopMenu(menu, anchor);
+
+    menu.addEventListener('keydown', (event) => {
+      this.handleDesktopMenuKeyDown(event, menu);
+    });
+
+    this.documentPointerDownHandler = (event) => {
+      if (menu.contains(event.target) || anchor?.contains?.(event.target)) {
+        return;
+      }
+
+      this.close();
+    };
+    this.windowResizeHandler = this.boundClose;
+    setTimeout(() => {
+      document.addEventListener('pointerdown', this.documentPointerDownHandler);
+    }, 0);
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', this.windowResizeHandler);
+    }
+
+    this.desktopMenu = menu;
+    getFocusableItems(menu)[0]?.focus();
+  }
+
+  openMobileSheet({ items, title }) {
+    const backdrop = document.createElement('button');
+    backdrop.type = 'button';
+    backdrop.className = 'file-action-sheet-backdrop';
+    backdrop.setAttribute('aria-label', `Close ${title.toLowerCase()} menu`);
+
+    const sheet = document.createElement('div');
+    sheet.className = 'file-action-sheet create-action-sheet';
+
+    const header = document.createElement('div');
+    header.className = 'create-action-sheet-header';
+    header.textContent = title;
+    sheet.appendChild(header);
+
+    this.renderMenuItems(sheet, items, { mobile: true });
+
+    const cancelButton = document.createElement('button');
+    cancelButton.type = 'button';
+    cancelButton.className = 'ui-button btn btn-ghost file-action-sheet-item create-action-sheet-cancel';
+    cancelButton.textContent = 'Cancel';
+    cancelButton.addEventListener('click', () => {
+      this.close();
+    });
+    sheet.appendChild(cancelButton);
+
+    backdrop.addEventListener('click', () => {
+      this.close();
+    });
+
+    document.body.append(backdrop, sheet);
+    this.mobileBackdrop = backdrop;
+    this.mobileSheet = sheet;
+  }
+
+  renderMenuItems(container, items, { mobile = false } = {}) {
+    let lastGroup = null;
+
+    items.forEach((item) => {
+      if (item.group && item.group !== lastGroup) {
+        const groupLabel = document.createElement('div');
+        groupLabel.className = mobile ? 'create-action-sheet-group' : 'create-menu-group';
+        groupLabel.textContent = item.group;
+        container.appendChild(groupLabel);
+        lastGroup = item.group;
+      }
+
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = mobile
+        ? 'ui-button btn btn-ghost file-action-sheet-item create-action-sheet-item create-action-sheet-option'
+        : 'create-menu-item';
+      button.setAttribute('role', mobile ? 'button' : 'menuitem');
+      button.dataset.actionId = item.id;
+
+      const icon = document.createElement('span');
+      icon.className = 'create-menu-item-icon';
+      icon.setAttribute('aria-hidden', 'true');
+      icon.innerHTML = item.icon || '';
+      button.appendChild(icon);
+
+      const copy = document.createElement('span');
+      copy.className = 'create-menu-item-copy';
+
+      const label = document.createElement('span');
+      label.className = 'create-menu-item-label';
+      label.textContent = item.label;
+      copy.appendChild(label);
+
+      const meta = item.meta || item.hint;
+      if (meta) {
+        const metaEl = document.createElement('span');
+        metaEl.className = 'create-menu-item-meta';
+        metaEl.textContent = meta;
+        copy.appendChild(metaEl);
+      }
+
+      button.appendChild(copy);
+      button.addEventListener('click', () => {
+        this.close({ restoreFocus: false });
+        item.onSelect?.();
+      });
+
+      container.appendChild(button);
+    });
+  }
+
+  positionDesktopMenu(menu, anchor) {
+    const menuRect = menu.getBoundingClientRect();
+    const anchorRect = anchor?.getBoundingClientRect?.();
+    const viewportPadding = 8;
+    const defaultLeft = anchorRect?.left ?? viewportPadding;
+    const maxLeft = Math.max(viewportPadding, window.innerWidth - menuRect.width - viewportPadding);
+    const left = Math.max(viewportPadding, Math.min(defaultLeft, maxLeft));
+
+    let top = (anchorRect?.bottom ?? viewportPadding) + 8;
+    const maxTop = window.innerHeight - menuRect.height - viewportPadding;
+    if (top > maxTop && anchorRect) {
+      top = Math.max(viewportPadding, anchorRect.top - menuRect.height - 8);
+    }
+
+    menu.style.left = `${left}px`;
+    menu.style.top = `${Math.max(viewportPadding, top)}px`;
+  }
+
+  handleDesktopMenuKeyDown(event, menu) {
+    const items = getFocusableItems(menu);
+    if (items.length === 0) {
+      return;
+    }
+
+    const activeIndex = Math.max(0, items.indexOf(document.activeElement));
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        items[(activeIndex + 1) % items.length]?.focus();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        items[(activeIndex - 1 + items.length) % items.length]?.focus();
+        break;
+      case 'Home':
+        event.preventDefault();
+        items[0]?.focus();
+        break;
+      case 'End':
+        event.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
+      case 'Escape':
+        event.preventDefault();
+        this.close();
+        break;
+      case 'Tab':
+        this.close({ restoreFocus: false });
+        break;
+    }
+  }
+}