collabmd 0.1.18

package/scripts/cloudflare-tunnel.mjs

@@ -0,0 +1,145 @@
+import { spawn } from 'child_process';
+import readline from 'readline';
+
+function getCloudflaredCommand() {
+  return process.env.CLOUDFLARED_BIN || 'cloudflared';
+}
+
+function getTunnelTargetUrl() {
+  if (process.env.TUNNEL_TARGET_URL) {
+    return process.env.TUNNEL_TARGET_URL;
+  }
+
+  const host = process.env.TUNNEL_TARGET_HOST || process.env.HOST || '127.0.0.1';
+  const port = process.env.TUNNEL_TARGET_PORT || process.env.PORT || '1234';
+
+  return `http://${host}:${port}`;
+}
+
+function getTunnelArgs(targetUrl) {
+  const customArgs = (process.env.CLOUDFLARED_EXTRA_ARGS || '')
+    .split(/\s+/)
+    .map((value) => value.trim())
+    .filter(Boolean);
+
+  return ['tunnel', '--url', targetUrl, ...customArgs];
+}
+
+const targetUrl = getTunnelTargetUrl();
+const cloudflaredCommand = getCloudflaredCommand();
+const cloudflaredArgs = getTunnelArgs(targetUrl);
+let shutdownStarted = false;
+let forceExitTimer = null;
+let shareLinkLogged = false;
+
+console.log(`[tunnel] Starting Cloudflare Tunnel for ${targetUrl}`);
+
+function buildShareUrl(publicUrl) {
+  if (process.env.AUTH_STRATEGY !== 'password' || !process.env.AUTH_PASSWORD) {
+    return null;
+  }
+
+  try {
+    const shareUrl = new URL(publicUrl);
+    shareUrl.hash = new URLSearchParams({
+      auth_password: process.env.AUTH_PASSWORD,
+    }).toString();
+    return shareUrl.toString();
+  } catch {
+    return null;
+  }
+}
+
+function maybeLogShareLink(line) {
+  if (shareLinkLogged) {
+    return;
+  }
+
+  const match = String(line).match(/https:\/\/[a-z0-9.-]+\.trycloudflare\.com\b/i);
+  if (!match) {
+    return;
+  }
+
+  const shareUrl = buildShareUrl(match[0]);
+  if (!shareUrl) {
+    return;
+  }
+
+  shareLinkLogged = true;
+  console.log(`[tunnel] Share URL: ${shareUrl}`);
+  console.log('[tunnel] The password is stored in the URL fragment. It is not sent to the server, but anyone with the full URL can use it.');
+}
+
+const child = spawn(cloudflaredCommand, cloudflaredArgs, {
+  env: process.env,
+  stdio: ['inherit', 'pipe', 'pipe'],
+});
+
+const stdoutInterface = readline.createInterface({ input: child.stdout });
+stdoutInterface.on('line', (line) => {
+  console.log(line);
+  maybeLogShareLink(line);
+});
+
+const stderrInterface = readline.createInterface({ input: child.stderr });
+stderrInterface.on('line', (line) => {
+  console.error(line);
+  maybeLogShareLink(line);
+});
+
+child.on('error', (error) => {
+  if (error.code === 'ENOENT') {
+    console.error(`[tunnel] Could not find "${cloudflaredCommand}". Install Cloudflare Tunnel first: https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/`);
+  } else {
+    console.error('[tunnel] Failed to start Cloudflare Tunnel:', error.message);
+  }
+
+  process.exit(1);
+});
+
+function shutdown(signal) {
+  if (shutdownStarted) {
+    return;
+  }
+
+  shutdownStarted = true;
+  console.log(`[tunnel] Received ${signal}, shutting down`);
+
+  if (child.exitCode === null && !child.killed) {
+    child.kill(signal);
+  }
+
+  forceExitTimer = setTimeout(() => {
+    if (child.exitCode === null && !child.killed) {
+      child.kill('SIGKILL');
+    }
+
+    process.exit(1);
+  }, 5000);
+  forceExitTimer.unref?.();
+}
+
+process.once('SIGINT', () => shutdown('SIGINT'));
+process.once('SIGTERM', () => shutdown('SIGTERM'));
+
+child.on('exit', (code, signal) => {
+  stdoutInterface.close();
+  stderrInterface.close();
+
+  if (forceExitTimer) {
+    clearTimeout(forceExitTimer);
+  }
+
+  if (shutdownStarted) {
+    process.exit(code ?? 0);
+    return;
+  }
+
+  if (signal) {
+    console.error(`[tunnel] Cloudflare Tunnel exited from signal ${signal}`);
+    process.exit(1);
+    return;
+  }
+
+  process.exit(code ?? 0);
+});

package/scripts/local-plantuml-compose.mjs

@@ -0,0 +1,92 @@
+import { spawn } from 'node:child_process';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const scriptPath = fileURLToPath(import.meta.url);
+const scriptDir = dirname(scriptPath);
+const projectRoot = resolve(scriptDir, '..');
+const composeFile = resolve(projectRoot, 'docker-compose.yml');
+
+function runCommand(command, args, { env = process.env } = {}) {
+  return new Promise((resolvePromise, rejectPromise) => {
+    const child = spawn(command, args, {
+      cwd: projectRoot,
+      env,
+      stdio: 'inherit',
+    });
+
+    child.on('error', rejectPromise);
+    child.on('exit', (code) => {
+      if (code === 0) {
+        resolvePromise();
+        return;
+      }
+
+      rejectPromise(new Error(`${command} ${args.join(' ')} exited with code ${code}`));
+    });
+  });
+}
+
+export function getLocalPlantUmlHostPort() {
+  const rawValue = process.env.PLANTUML_HOST_PORT || '18080';
+  const parsed = Number.parseInt(rawValue, 10);
+
+  if (!Number.isInteger(parsed) || parsed <= 0) {
+    throw new Error(`Invalid PLANTUML_HOST_PORT: ${rawValue}`);
+  }
+
+  return parsed;
+}
+
+export function getLocalPlantUmlServerUrl() {
+  return `http://127.0.0.1:${getLocalPlantUmlHostPort()}`;
+}
+
+function getComposeArgs(command) {
+  return ['compose', '-f', composeFile, ...command];
+}
+
+export async function startLocalPlantUmlComposeService() {
+  await runCommand('docker', getComposeArgs(['up', '-d', 'plantuml']));
+  return getLocalPlantUmlServerUrl();
+}
+
+export async function stopLocalPlantUmlComposeService() {
+  await runCommand('docker', getComposeArgs(['stop', 'plantuml']));
+}
+
+async function main() {
+  const command = process.argv[2] || 'up';
+
+  if (command === 'up') {
+    const url = await startLocalPlantUmlComposeService();
+    console.log(`[plantuml] Local PlantUML server is available at ${url}`);
+    return;
+  }
+
+  if (command === 'down') {
+    await stopLocalPlantUmlComposeService();
+    console.log('[plantuml] Local PlantUML server stopped');
+    return;
+  }
+
+  if (command === 'url') {
+    console.log(getLocalPlantUmlServerUrl());
+    return;
+  }
+
+  console.error('Usage: node scripts/local-plantuml-compose.mjs [up|down|url]');
+  process.exit(1);
+}
+
+if (process.argv[1] && resolve(process.argv[1]) === scriptPath) {
+  main().catch((error) => {
+    if (error.code === 'ENOENT') {
+      console.error('[plantuml] Docker is not available. Install Docker Desktop or Docker Engine first.');
+    } else {
+      console.error(`[plantuml] ${error.message}`);
+    }
+
+    process.exit(1);
+  });
+}

package/server.js

@@ -0,0 +1 @@
+import './src/server/index.js';

package/src/client/application/app-shell/chat-feature.js

@@ -0,0 +1,363 @@
+export const chatFeature = {
+  updateChatMessages(messages, { initial = false } = {}) {
+    const previousIds = new Set(this.chatMessageIds);
+    const localPeerId = this.lobby.getLocalUser()?.peerId ?? null;
+
+    this.chatMessages = messages;
+    this.chatMessageIds = new Set(messages.map((message) => message.id));
+
+    if (!this.chatInitialSyncComplete) {
+      if (initial) {
+        this.chatInitialSyncComplete = true;
+      }
+
+      this.renderChat();
+      return;
+    }
+
+    const newRemoteMessages = messages.filter((message) => (
+      !previousIds.has(message.id)
+      && message.peerId
+      && message.peerId !== localPeerId
+    ));
+
+    if (this.chatIsOpen) {
+      this.chatUnreadCount = 0;
+    } else if (newRemoteMessages.length > 0) {
+      this.chatUnreadCount += newRemoteMessages.length;
+    }
+
+    for (const message of newRemoteMessages) {
+      this.maybeNotifyChatMessage(message);
+    }
+
+    this.renderChat();
+  },
+
+  toggleChatPanel() {
+    if (this.chatIsOpen) {
+      this.closeChatPanel();
+      return;
+    }
+
+    this.openChatPanel();
+  },
+
+  openChatPanel() {
+    this.chatIsOpen = true;
+    this.chatUnreadCount = 0;
+    this.renderChat();
+    requestAnimationFrame(() => {
+      this.elements.chatInput?.focus();
+      this.scrollChatToBottom();
+    });
+  },
+
+  closeChatPanel() {
+    if (!this.chatIsOpen) {
+      return;
+    }
+
+    this.chatIsOpen = false;
+    this.renderChat();
+  },
+
+  handleChatSubmit() {
+    if (!this.isTabActive) {
+      return;
+    }
+
+    const input = this.elements.chatInput;
+    if (!input) {
+      return;
+    }
+
+    const sentMessage = this.lobby.sendChatMessage(input.value);
+    if (!sentMessage) {
+      input.focus();
+      return;
+    }
+
+    input.value = '';
+    if (!this.chatIsOpen) {
+      this.openChatPanel();
+      return;
+    }
+
+    this.renderChat();
+  },
+
+  renderChat() {
+    this.elements.chatContainer?.classList.toggle('is-open', this.chatIsOpen);
+    this.elements.chatPanel?.classList.toggle('hidden', !this.chatIsOpen);
+
+    this.syncChatToggleButton();
+    this.syncChatNotificationButton();
+
+    const list = this.elements.chatMessages;
+    const emptyState = this.elements.chatEmptyState;
+
+    if (this.elements.chatStatus) {
+      this.elements.chatStatus.textContent = this.chatInitialSyncComplete
+        ? `${this.globalUsers.length} online`
+        : 'Syncing...';
+    }
+
+    if (!list) {
+      return;
+    }
+
+    list.replaceChildren();
+
+    if (this.chatMessages.length === 0) {
+      emptyState?.classList.remove('hidden');
+      list.classList.add('hidden');
+      return;
+    }
+
+    emptyState?.classList.add('hidden');
+    list.classList.remove('hidden');
+
+    const fragment = document.createDocumentFragment();
+    this.chatMessages.forEach((message) => {
+      fragment.appendChild(this.createChatMessageElement(message));
+    });
+    list.appendChild(fragment);
+
+    if (this.chatIsOpen) {
+      this.scrollChatToBottom();
+    }
+  },
+
+  createChatMessageElement(message) {
+    const item = document.createElement('article');
+    const isLocal = message.peerId === this.lobby.getLocalUser()?.peerId;
+    item.className = 'chat-message';
+    item.classList.toggle('is-local', isLocal);
+
+    const avatar = document.createElement('div');
+    avatar.className = 'chat-message-avatar';
+    avatar.style.backgroundColor = message.userColor || 'var(--color-primary)';
+    avatar.textContent = (message.userName || '?').charAt(0).toUpperCase();
+    avatar.setAttribute('aria-hidden', 'true');
+
+    const body = document.createElement('div');
+    body.className = 'chat-message-body';
+
+    const meta = document.createElement('div');
+    meta.className = 'chat-message-meta';
+
+    const author = document.createElement('span');
+    author.className = 'chat-message-author';
+    author.textContent = isLocal ? `${message.userName} (you)` : message.userName;
+
+    const time = document.createElement('span');
+    time.className = 'chat-message-time';
+    time.textContent = this.formatChatTimestamp(message.createdAt);
+
+    meta.append(author, time);
+
+    const fileLabel = this.getChatMessageFileLabel(message.filePath);
+    if (fileLabel) {
+      const file = document.createElement('span');
+      file.className = 'chat-message-file';
+      file.textContent = fileLabel;
+      meta.append(file);
+    }
+
+    const text = document.createElement('p');
+    text.className = 'chat-message-text';
+    text.textContent = message.text;
+
+    body.append(meta, text);
+    item.append(avatar, body);
+    return item;
+  },
+
+  scrollChatToBottom() {
+    const list = this.elements.chatMessages;
+    if (!list) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      list.scrollTop = list.scrollHeight;
+    });
+  },
+
+  formatChatTimestamp(value) {
+    if (!Number.isFinite(value)) {
+      return '';
+    }
+
+    try {
+      return this.chatTimeFormatter.format(new Date(value));
+    } catch {
+      return '';
+    }
+  },
+
+  getChatMessageFileLabel(filePath) {
+    if (!filePath) {
+      return '';
+    }
+
+    return this.getDisplayName(filePath);
+  },
+
+  formatChatToastMessage(message) {
+    const sender = message?.userName || 'Someone';
+    const text = String(message?.text ?? '').replace(/\s+/g, ' ').trim();
+    const compactText = text.length > 88 ? `${text.slice(0, 85).trimEnd()}...` : text;
+    return `${sender}: ${compactText}`;
+  },
+
+  syncChatToggleButton() {
+    const button = this.elements.chatToggleButton;
+    const badge = this.elements.chatToggleBadge;
+    if (!button) {
+      return;
+    }
+
+    const hasUnread = this.chatUnreadCount > 0;
+    const shouldEmphasizeUnread = hasUnread && !this.chatIsOpen;
+
+    button.classList.toggle('is-active', this.chatIsOpen);
+    button.classList.toggle('is-unread', shouldEmphasizeUnread);
+    button.setAttribute('aria-expanded', String(this.chatIsOpen));
+    button.setAttribute(
+      'aria-label',
+      hasUnread ? `Open team chat, ${this.chatUnreadCount} unread` : 'Open team chat',
+    );
+    button.title = this.chatUnreadCount > 0
+      ? `Team chat (${this.chatUnreadCount} unread)`
+      : 'Team chat';
+
+    if (!badge) {
+      return;
+    }
+
+    badge.classList.toggle('hidden', !hasUnread);
+    badge.textContent = this.chatUnreadCount > 9 ? '9+' : String(this.chatUnreadCount);
+  },
+
+  syncChatNotificationButton() {
+    const button = this.elements.chatNotificationButton;
+    if (!button) {
+      return;
+    }
+
+    const permission = this.notifications.getPermission();
+    this.chatNotificationPermission = permission;
+
+    let label = 'Enable alerts';
+    let title = 'Enable browser notifications for new chat messages';
+    let pressed = false;
+
+    if (permission === 'unsupported') {
+      label = 'No alerts';
+      title = 'Browser notifications are unavailable here';
+    } else if (permission === 'denied') {
+      label = 'Alerts blocked';
+      title = 'Browser notifications are blocked for this site';
+    } else if (permission === 'granted') {
+      pressed = this.chatNotificationsEnabled;
+      label = pressed ? 'Alerts on' : 'Alerts off';
+      title = pressed
+        ? 'Disable browser notifications for chat'
+        : 'Enable browser notifications for chat';
+    }
+
+    button.textContent = label;
+    button.title = title;
+    button.setAttribute('aria-pressed', String(pressed));
+    button.classList.toggle('is-enabled', pressed);
+    button.classList.toggle('is-blocked', permission === 'denied');
+  },
+
+  async handleChatNotificationToggle() {
+    const permission = this.notifications.getPermission();
+    this.chatNotificationPermission = permission;
+
+    if (permission === 'unsupported') {
+      this.toastController.show('Browser notifications are unavailable here');
+      this.syncChatNotificationButton();
+      return;
+    }
+
+    if (permission === 'denied') {
+      this.chatNotificationsEnabled = false;
+      this.preferences.setChatNotificationsEnabled(false);
+      this.toastController.show('Browser notifications are blocked for this site');
+      this.syncChatNotificationButton();
+      return;
+    }
+
+    if (permission === 'default') {
+      const nextPermission = await this.notifications.requestPermission();
+      this.chatNotificationPermission = nextPermission;
+
+      if (nextPermission !== 'granted') {
+        this.chatNotificationsEnabled = false;
+        this.preferences.setChatNotificationsEnabled(false);
+        if (nextPermission === 'denied') {
+          this.toastController.show('Browser notifications were blocked');
+        }
+        this.syncChatNotificationButton();
+        return;
+      }
+
+      this.chatNotificationsEnabled = true;
+      this.preferences.setChatNotificationsEnabled(true);
+      this.syncChatNotificationButton();
+      return;
+    }
+
+    this.chatNotificationsEnabled = !this.chatNotificationsEnabled;
+    this.preferences.setChatNotificationsEnabled(this.chatNotificationsEnabled);
+    this.syncChatNotificationButton();
+  },
+
+  maybeNotifyChatMessage(message) {
+    if (!this.chatInitialSyncComplete) {
+      return;
+    }
+
+    if (document.hidden) {
+      this.maybeShowBrowserChatNotification(message);
+      return;
+    }
+
+    if (!this.isTabActive || this.chatIsOpen) {
+      return;
+    }
+
+    (this.chatToastController ?? this.toastController).show(this.formatChatToastMessage(message), 4000);
+  },
+
+  maybeShowBrowserChatNotification(message) {
+    if (!this.chatNotificationsEnabled || this.notifications.getPermission() !== 'granted') {
+      return;
+    }
+
+    const title = `CollabMD chat • ${message.userName}`;
+    const fileLabel = this.getChatMessageFileLabel(message.filePath);
+    const body = fileLabel ? `${fileLabel}: ${message.text}` : message.text;
+    const notification = this.notifications.createNotification({
+      body,
+      onClick: () => {
+        if (message.filePath) {
+          this.navigation.navigateToFile(message.filePath);
+        }
+      },
+      tag: `collabmd-chat-${message.id}`,
+      title,
+    });
+
+    if (notification) {
+      setTimeout(() => {
+        notification.close?.();
+      }, 6000);
+    }
+  },
+};

package/src/client/application/app-shell/comments-feature.js

@@ -0,0 +1,33 @@
+import { getVaultFileKind, supportsCommentsForFilePath } from '../../../domain/file-kind.js';
+
+export const commentsFeature = {
+  getCommentFileKind(filePath = this.currentFilePath) {
+    return getVaultFileKind(filePath) || 'markdown';
+  },
+
+  syncCommentChrome(filePath = this.currentFilePath) {
+    const supported = supportsCommentsForFilePath(filePath) && !this.isExcalidrawFile(filePath);
+    this.commentUi.setCurrentFile(filePath, {
+      fileKind: this.getCommentFileKind(filePath),
+      supported,
+    });
+    this.handleCommentThreadsChange(this.session?.getCommentThreads?.() ?? []);
+    this.handleCommentSelectionChange(this.session?.getCurrentSelectionCommentAnchor?.() ?? null);
+  },
+
+  handleCommentSelectionChange(anchor) {
+    this.commentUi.setSelectionAnchor(anchor);
+  },
+
+  handleCommentThreadsChange(threads = []) {
+    this.commentUi.setThreads(threads);
+  },
+
+  handleCommentEditorContentChange() {
+    this.commentUi.handleEditorContentChange();
+  },
+
+  refreshCommentUiLayout() {
+    this.commentUi.refreshLayout();
+  },
+};