collabmd 0.1.23 → 0.1.25

package/src/client/application/app-shell-elements.js

@@ -76,6 +76,8 @@ export function bindAppShellElements(doc = document) {
     tabLockTitle: doc.getElementById('tabLockTitle'),
     toolbarCenter: doc.getElementById('toolbarCenter'),
     toolbarDiffBadge: doc.getElementById('toolbarDiffBadge'),
+    toolbarOverflowMenu: doc.getElementById('toolbarOverflowMenu'),
+    toolbarOverflowToggle: doc.getElementById('toolbarOverflowToggle'),
     sidebarTabs: doc.getElementById('sidebarTabs'),
   };
 }

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

@@ -15,6 +15,7 @@ import { LOBBY_CHAT_MESSAGE_MAX_LENGTH, LobbyPresence } from '../infrastructure/
 import { BrowserNavigationPort } from '../infrastructure/browser-navigation-port.js';
 import { BrowserNotificationPort } from '../infrastructure/browser-notification-port.js';
 import { BrowserPreferencesPort } from '../infrastructure/browser-preferences-port.js';
+import { AppVersionMonitor } from '../infrastructure/app-version-monitor.js';
 import { getRuntimeConfig } from '../infrastructure/runtime-config.js';
 import { TabActivityLock } from '../infrastructure/tab-activity-lock.js';
 import { vaultApiClient } from '../infrastructure/vault-api-client.js';
@@ -104,6 +105,7 @@ export class CollabMdAppShell {
     this._previewHydrationPaused = false;
     this._previewLayoutResizeObserver = null;
     this._previewLayoutSyncTimer = null;
+    this._reloadPromptShown = false;
     this._staticPreviewDocument = null;
     this.pendingGitResetPath = null;
     this.chatTimeFormatter = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' });
@@ -116,6 +118,11 @@ export class CollabMdAppShell {
     this.mobileBreakpointQuery = window.matchMedia('(max-width: 768px)');
     this.pendingWorkspaceRequestIds = new Set();
     this._fileOpenPerf = null;
+    this.versionMonitor = new AppVersionMonitor({
+      currentBuildId: this.runtimeConfig.build?.id,
+      onUpdateAvailable: (payload) => this.promptForVersionReload(payload),
+      runtimeConfig: this.runtimeConfig,
+    });
 
     this.lobby = new LobbyPresence({
       preferredUserName: this.getStoredUserName(),
@@ -139,8 +146,10 @@ export class CollabMdAppShell {
     this.toastController = new ToastController(this.elements.toastContainer);
     this.chatToastController = new ToastController(this.elements.chatToastContainer);
     this.fileExplorer = new FileExplorerController({
+      mobileBreakpointQuery: this.mobileBreakpointQuery,
       onFileDelete: () => this.navigation.navigateToFile(null),
       onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
+      pendingWorkspaceRequestIds: this.pendingWorkspaceRequestIds,
       toastController: this.toastController,
     });
     this.gitPanel = new GitPanelController({

package/src/client/domain/markdown-formatting.js

@@ -14,7 +14,13 @@ const VIDEO_URL_PLACEHOLDER = 'https://';
 const CODE_BLOCK_PLACEHOLDER = 'code';
 const TABLE_HEADERS = Object.freeze(['Column 1', 'Column 2']);
 const TABLE_CELL_PLACEHOLDER = 'Value';
-
+const BLOCK_PREFIX_PATTERNS = Object.freeze({
+  heading: /^#{1,6}\s+/,
+  quote: /^>\s+/,
+  bulletList: /^[-*+]\s+/,
+  numberedList: /^\d+\.\s+/,
+  taskList: /^-\s\[(?: |x|X)\]\s+/,
+});
 function normalizeRange(range, textLength) {
   const from = Math.max(0, Math.min(range.from, range.to, textLength));
   const to = Math.max(0, Math.min(Math.max(range.from, range.to), textLength));
@@ -54,6 +60,21 @@ function getLineSelection(text, range) {
 
 function wrapInline(text, range, token, placeholder) {
   const selected = text.slice(range.from, range.to);
+  if (
+    selected.length > (token.length * 2)
+    && selected.startsWith(token)
+    && selected.endsWith(token)
+  ) {
+    const unwrapped = selected.slice(token.length, selected.length - token.length);
+    return {
+      anchor: range.from,
+      from: range.from,
+      head: range.from + unwrapped.length,
+      insert: unwrapped,
+      to: range.to,
+    };
+  }
+
   if (selected.length > 0) {
     return {
       anchor: range.from + token.length,
@@ -174,12 +195,101 @@ function formatVideo(text, range) {
   };
 }
 
-function prefixSelectedLines(text, range, prefixFactory, matcher) {
+function stripSupportedBlockPrefix(line) {
+  if (BLOCK_PREFIX_PATTERNS.taskList.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.taskList, '');
+  }
+
+  if (BLOCK_PREFIX_PATTERNS.numberedList.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.numberedList, '');
+  }
+
+  if (BLOCK_PREFIX_PATTERNS.bulletList.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.bulletList, '');
+  }
+
+  if (BLOCK_PREFIX_PATTERNS.quote.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.quote, '');
+  }
+
+  if (BLOCK_PREFIX_PATTERNS.heading.test(line)) {
+    return line.replace(BLOCK_PREFIX_PATTERNS.heading, '');
+  }
+
+  return line;
+}
+
+function matchesBlockAction(line, action) {
+  switch (action) {
+    case 'paragraph':
+      return !(
+        BLOCK_PREFIX_PATTERNS.taskList.test(line)
+        || BLOCK_PREFIX_PATTERNS.numberedList.test(line)
+        || BLOCK_PREFIX_PATTERNS.bulletList.test(line)
+        || BLOCK_PREFIX_PATTERNS.quote.test(line)
+        || BLOCK_PREFIX_PATTERNS.heading.test(line)
+      );
+    case 'heading-1':
+      return /^#\s+/.test(line);
+    case 'heading-2':
+      return /^##\s+/.test(line);
+    case 'heading-3':
+      return /^###\s+/.test(line);
+    case 'heading-4':
+      return /^####\s+/.test(line);
+    case 'heading-5':
+      return /^#####\s+/.test(line);
+    case 'heading-6':
+      return /^######\s+/.test(line);
+    case 'quote':
+      return BLOCK_PREFIX_PATTERNS.quote.test(line);
+    case 'bullet-list':
+      return BLOCK_PREFIX_PATTERNS.bulletList.test(line) && !BLOCK_PREFIX_PATTERNS.taskList.test(line);
+    case 'numbered-list':
+      return BLOCK_PREFIX_PATTERNS.numberedList.test(line);
+    case 'task-list':
+      return BLOCK_PREFIX_PATTERNS.taskList.test(line);
+    default:
+      return false;
+  }
+}
+
+function prefixForBlockAction(action, index) {
+  switch (action) {
+    case 'heading-1':
+      return '# ';
+    case 'heading-2':
+      return '## ';
+    case 'heading-3':
+      return '### ';
+    case 'heading-4':
+      return '#### ';
+    case 'heading-5':
+      return '##### ';
+    case 'heading-6':
+      return '###### ';
+    case 'quote':
+      return '> ';
+    case 'bullet-list':
+      return '- ';
+    case 'numbered-list':
+      return `${index + 1}. `;
+    case 'task-list':
+      return '- [ ] ';
+    default:
+      return '';
+  }
+}
+
+function normalizeBlockLines(text, range, action) {
   const lineRange = getLineSelection(text, range);
   const block = text.slice(lineRange.from, lineRange.to);
   const lines = block.split('\n');
-  const matchesPrefix = (line) => matcher.test(line);
-  const shouldUnprefix = lines.every((line) => line.trim().length === 0 || matchesPrefix(line));
+  const nonEmptyLines = lines.filter((line) => line.trim().length > 0);
+  const shouldResetToParagraph = action !== 'paragraph'
+    && nonEmptyLines.length > 0
+    && nonEmptyLines.every((line) => matchesBlockAction(line, action));
+  const targetAction = shouldResetToParagraph ? 'paragraph' : action;
   let visibleLineIndex = 0;
 
   const nextLines = lines.map((line) => {
@@ -187,13 +297,14 @@ function prefixSelectedLines(text, range, prefixFactory, matcher) {
       return line;
     }
 
-    if (shouldUnprefix) {
-      return matchesPrefix(line) ? line.replace(matcher, '') : line;
+    const normalizedLine = stripSupportedBlockPrefix(line);
+    if (targetAction === 'paragraph') {
+      return normalizedLine;
     }
 
-    const prefix = prefixFactory(visibleLineIndex);
+    const prefix = prefixForBlockAction(targetAction, visibleLineIndex);
     visibleLineIndex += 1;
-    return `${prefix}${line}`;
+    return `${prefix}${normalizedLine}`;
   });
 
   return {
@@ -205,50 +316,41 @@ function prefixSelectedLines(text, range, prefixFactory, matcher) {
   };
 }
 
-function formatHeading(text, range) {
-  return prefixSelectedLines(text, range, () => '## ', /^#{1,6}\s+/);
+function formatHeading(text, range, level) {
+  return normalizeBlockLines(text, range, `heading-${level}`);
 }
 
 function formatBulletList(text, range) {
-  return prefixSelectedLines(text, range, () => '- ', /^[-*+]\s+/);
+  return normalizeBlockLines(text, range, 'bullet-list');
 }
 
 function formatQuote(text, range) {
-  return prefixSelectedLines(text, range, () => '> ', /^>\s+/);
+  return normalizeBlockLines(text, range, 'quote');
 }
 
 function formatTaskList(text, range) {
-  return prefixSelectedLines(text, range, () => '- [ ] ', /^-\s\[(?: |x|X)\]\s+/);
+  return normalizeBlockLines(text, range, 'task-list');
 }
 
 function formatNumberedList(text, range) {
+  return normalizeBlockLines(text, range, 'numbered-list');
+}
+
+function formatParagraph(text, range) {
   const lineRange = getLineSelection(text, range);
   const block = text.slice(lineRange.from, lineRange.to);
-  const lines = block.split('\n');
-  const shouldUnprefix = lines.every((line) => line.trim().length === 0 || /^\d+\.\s+/.test(line));
-  let counter = 1;
-
-  const nextLines = lines.map((line) => {
-    if (line.trim().length === 0) {
-      return line;
-    }
-
-    if (shouldUnprefix) {
-      return line.replace(/^\d+\.\s+/, '');
-    }
-
-    const nextLine = `${counter}. ${line}`;
-    counter += 1;
-    return nextLine;
-  });
+  const unwrapped = unwrapCodeFence(block);
+  if (unwrapped !== null) {
+    return {
+      anchor: lineRange.from,
+      from: lineRange.from,
+      head: lineRange.from + unwrapped.length,
+      insert: unwrapped,
+      to: lineRange.to,
+    };
+  }
 
-  return {
-    anchor: lineRange.from,
-    from: lineRange.from,
-    head: lineRange.from + nextLines.join('\n').length,
-    insert: nextLines.join('\n'),
-    to: lineRange.to,
-  };
+  return normalizeBlockLines(text, range, 'paragraph');
 }
 
 function unwrapCodeFence(block) {
@@ -332,39 +434,82 @@ function formatHorizontalRule(text, range) {
 export function createMarkdownToolbarEdit(documentText, selectionRange, action) {
   const text = String(documentText ?? '');
   const range = normalizeRange(selectionRange, text.length);
+  let edit = null;
 
   switch (action) {
     case 'bold':
-      return wrapInline(text, range, '**', INLINE_PLACEHOLDERS.bold);
+      edit = wrapInline(text, range, '**', INLINE_PLACEHOLDERS.bold);
+      break;
     case 'italic':
-      return wrapInline(text, range, '_', INLINE_PLACEHOLDERS.italic);
+      edit = wrapInline(text, range, '_', INLINE_PLACEHOLDERS.italic);
+      break;
     case 'strikethrough':
-      return wrapInline(text, range, '~~', INLINE_PLACEHOLDERS.strikethrough);
+      edit = wrapInline(text, range, '~~', INLINE_PLACEHOLDERS.strikethrough);
+      break;
     case 'code':
-      return wrapInline(text, range, '`', INLINE_PLACEHOLDERS.code);
+      edit = wrapInline(text, range, '`', INLINE_PLACEHOLDERS.code);
+      break;
     case 'link':
-      return formatLink(text, range);
+      edit = formatLink(text, range);
+      break;
     case 'image':
-      return formatImage(text, range);
+      edit = formatImage(text, range);
+      break;
     case 'video':
-      return formatVideo(text, range);
+      edit = formatVideo(text, range);
+      break;
+    case 'paragraph':
+      edit = formatParagraph(text, range);
+      break;
     case 'heading':
-      return formatHeading(text, range);
+      edit = formatHeading(text, range, 2);
+      break;
+    case 'heading-1':
+      edit = formatHeading(text, range, 1);
+      break;
+    case 'heading-2':
+      edit = formatHeading(text, range, 2);
+      break;
+    case 'heading-3':
+      edit = formatHeading(text, range, 3);
+      break;
+    case 'heading-4':
+      edit = formatHeading(text, range, 4);
+      break;
+    case 'heading-5':
+      edit = formatHeading(text, range, 5);
+      break;
+    case 'heading-6':
+      edit = formatHeading(text, range, 6);
+      break;
     case 'quote':
-      return formatQuote(text, range);
+      edit = formatQuote(text, range);
+      break;
     case 'bullet-list':
-      return formatBulletList(text, range);
+      edit = formatBulletList(text, range);
+      break;
     case 'numbered-list':
-      return formatNumberedList(text, range);
+      edit = formatNumberedList(text, range);
+      break;
     case 'task-list':
-      return formatTaskList(text, range);
+      edit = formatTaskList(text, range);
+      break;
     case 'code-block':
-      return formatCodeBlock(text, range);
+      edit = formatCodeBlock(text, range);
+      break;
     case 'table':
-      return formatTable(text, range);
+      edit = formatTable(text, range);
+      break;
     case 'horizontal-rule':
-      return formatHorizontalRule(text, range);
+      edit = formatHorizontalRule(text, range);
+      break;
     default:
       return null;
   }
+
+  if (!edit) {
+    return null;
+  }
+
+  return text.slice(edit.from, edit.to) === edit.insert ? null : edit;
 }

package/src/client/domain/markdown-toolbar-actions.js

@@ -0,0 +1,191 @@
+const ICONS = Object.freeze({
+  bold: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M7 5h6a4 4 0 0 1 0 8H7z"/>
+      <path d="M7 13h7a4 4 0 0 1 0 8H7z"/>
+    </svg>
+  `,
+  italic: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M14 4h6"/>
+      <path d="M4 20h6"/>
+      <path d="M14 4 10 20"/>
+    </svg>
+  `,
+  strikethrough: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M6 6.5c1.4-1.2 3.2-1.9 5.4-1.9 3.1 0 5.6 1.4 5.6 3.9 0 2.1-1.7 3-4.3 3.5l-2.4.5c-2.7.5-4.3 1.6-4.3 3.6 0 2.7 2.7 4.2 6 4.2 2.1 0 4.2-.6 5.7-1.8"/>
+      <path d="M3 12h18"/>
+    </svg>
+  `,
+  link: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M10 13a5 5 0 0 0 7.54.54l2.92-2.92a5 5 0 0 0-7.07-7.07L11.5 5.4"/>
+      <path d="M14 11a5 5 0 0 0-7.54-.54L3.54 13.38a5 5 0 1 0 7.07 7.07L12.5 18.6"/>
+    </svg>
+  `,
+  image: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <rect x="3" y="5" width="18" height="14" rx="2"/>
+      <circle cx="9" cy="10" r="1.5"/>
+      <path d="m21 16-5.5-5.5L7 19"/>
+    </svg>
+  `,
+  video: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <rect x="3" y="5" width="18" height="14" rx="2"/>
+      <path d="m10 9 5 3-5 3z" fill="currentColor" stroke="none"/>
+    </svg>
+  `,
+  table: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <rect x="3" y="5" width="18" height="14" rx="1"/>
+      <path d="M3 10h18"/>
+      <path d="M9 5v14"/>
+      <path d="M15 5v14"/>
+    </svg>
+  `,
+  code: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="m8 9-4 3 4 3"/>
+      <path d="m16 9 4 3-4 3"/>
+      <path d="m13 6-2 12"/>
+    </svg>
+  `,
+  horizontalRule: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M4 12h16"/>
+      <path d="M9 8h6"/>
+      <path d="M9 16h6"/>
+    </svg>
+  `,
+  chevronDown: `
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="m6 9 6 6 6-6"/>
+    </svg>
+  `,
+});
+
+const BLOCK_MENU_ACTIONS = Object.freeze([
+  {
+    action: 'paragraph',
+    label: 'Paragraph',
+    shortLabel: 'P',
+    title: 'Paragraph',
+  },
+  {
+    action: 'heading-1',
+    label: 'Heading 1',
+    shortLabel: 'H1',
+    title: 'Heading 1',
+  },
+  {
+    action: 'heading-2',
+    label: 'Heading 2',
+    shortLabel: 'H2',
+    title: 'Heading 2',
+  },
+  {
+    action: 'heading-3',
+    label: 'Heading 3',
+    shortLabel: 'H3',
+    title: 'Heading 3',
+  },
+  {
+    action: 'heading-4',
+    label: 'Heading 4',
+    shortLabel: 'H4',
+    title: 'Heading 4',
+  },
+  {
+    action: 'heading-5',
+    label: 'Heading 5',
+    shortLabel: 'H5',
+    title: 'Heading 5',
+  },
+  {
+    action: 'heading-6',
+    label: 'Heading 6',
+    shortLabel: 'H6',
+    title: 'Heading 6',
+  },
+  {
+    action: 'quote',
+    label: 'Quote',
+    shortLabel: 'Quote',
+    title: 'Block quote',
+  },
+  {
+    action: 'bullet-list',
+    label: 'Bullet list',
+    shortLabel: 'List',
+    title: 'Bullet list',
+  },
+  {
+    action: 'numbered-list',
+    label: 'Numbered list',
+    shortLabel: '1.',
+    title: 'Numbered list',
+  },
+  {
+    action: 'task-list',
+    label: 'Task list',
+    shortLabel: 'Task',
+    title: 'Task list',
+  },
+  {
+    action: 'code-block',
+    label: 'Code block',
+    shortLabel: 'Code',
+    title: 'Code block',
+  },
+]);
+
+const INLINE_ACTIONS = Object.freeze([
+  { action: 'bold', label: 'Bold', title: 'Bold', icon: ICONS.bold },
+  { action: 'italic', label: 'Italic', title: 'Italic', icon: ICONS.italic },
+  { action: 'strikethrough', label: 'Strikethrough', title: 'Strikethrough', icon: ICONS.strikethrough },
+  { action: 'code', label: 'Inline code', title: 'Inline code', icon: ICONS.code },
+]);
+
+const MEDIA_ACTIONS = Object.freeze([
+  { action: 'link', label: 'Insert link', title: 'Insert link', icon: ICONS.link },
+  { action: 'image', label: 'Insert image', title: 'Insert image', icon: ICONS.image },
+  { action: 'video', label: 'Insert video', title: 'Insert video', icon: ICONS.video },
+]);
+
+const INSERT_ACTIONS = Object.freeze([
+  { action: 'table', label: 'Insert table', title: 'Insert table', icon: ICONS.table },
+  { action: 'horizontal-rule', label: 'Insert horizontal rule', title: 'Insert horizontal rule', icon: ICONS.horizontalRule },
+]);
+
+export const markdownToolbarLayout = Object.freeze([
+  { kind: 'block-menu', actions: BLOCK_MENU_ACTIONS },
+  { kind: 'buttons', groupLabel: 'Inline formatting', actions: INLINE_ACTIONS },
+  { kind: 'buttons', groupLabel: 'Media and links', actions: MEDIA_ACTIONS },
+  { kind: 'buttons', groupLabel: 'Insert', actions: INSERT_ACTIONS },
+]);
+
+const ACTIONS = [...BLOCK_MENU_ACTIONS, ...INLINE_ACTIONS, ...MEDIA_ACTIONS, ...INSERT_ACTIONS];
+
+const ACTIONS_BY_ID = new Map(ACTIONS.map((action) => [action.action, action]));
+
+export function getMarkdownToolbarAction(action) {
+  return ACTIONS_BY_ID.get(action) ?? null;
+}
+
+export function getMarkdownBlockMenuActions() {
+  return BLOCK_MENU_ACTIONS;
+}
+
+export function isMarkdownBlockAction(action) {
+  return BLOCK_MENU_ACTIONS.some((item) => item.action === action);
+}
+
+export function getMarkdownBlockActionLabel(action) {
+  return getMarkdownToolbarAction(action)?.shortLabel ?? 'P';
+}
+
+export function getMarkdownToolbarIcons() {
+  return ICONS;
+}

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

@@ -71,6 +71,10 @@ export function getClientRuntimeConfig() {
       strategy: 'none',
     },
     basePath: '',
+    build: {
+      id: '',
+      packageVersion: '',
+    },
     environment: 'development',
     gitEnabled: true,
     publicWsBaseUrl: '',
@@ -89,6 +93,11 @@ export function getClientRuntimeConfig() {
     strategy: 'none',
     ...(rawConfig.auth ?? {}),
   };
+  const buildConfig = {
+    id: '',
+    packageVersion: '',
+    ...(rawConfig.build ?? {}),
+  };
 
   return {
     ...rawConfig,
@@ -99,6 +108,7 @@ export function getClientRuntimeConfig() {
       statusEndpoint: applyBasePath(basePath, authConfig.statusEndpoint),
     },
     basePath,
+    build: buildConfig,
     wsBasePath: normalizeRoutePath(rawConfig.wsBasePath, '/ws'),
   };
 }

package/src/client/domain/workspace-request-id.js

@@ -0,0 +1,7 @@
+export function createWorkspaceRequestId() {
+  if (globalThis.crypto?.randomUUID) {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `workspace-${Date.now()}-${Math.random().toString(16).slice(2, 10)}`;
+}

package/src/client/excalidraw-editor.js

@@ -508,8 +508,6 @@ async function prepareRealtimeRoomDisconnect() {
 }
 
 window.addEventListener('pagehide', disconnectRealtimeRoomOnce);
-window.addEventListener('beforeunload', disconnectRealtimeRoomOnce);
-window.addEventListener('unload', disconnectRealtimeRoomOnce);
 
 window.addEventListener('message', (event) => {
   if (event.origin !== parentOrigin) {