collabmd 0.1.46 → 0.1.48

package/src/client/application/preview-render-compiler.js

@@ -9,6 +9,9 @@ import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
 import { renderFrontmatterBlock } from './markdown-frontmatter.js';
 import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 
+hljs.registerAliases(['cql', 'mariadb', 'mssql', 'mysql', 'plsql', 'sqlite'], { languageName: 'sql' });
+hljs.registerAliases(['ecmascript', 'node'], { languageName: 'javascript' });
+
 const DIRECT_VIDEO_MIME_TYPES = Object.freeze({
   '.mp4': 'video/mp4',
   '.ogg': 'video/ogg',

package/src/client/application/quick-switcher-loader.js

@@ -27,7 +27,7 @@ export async function ensureQuickSwitcherInstance(host) {
       getSearchConfig: () => host.runtimeConfig.search ?? {},
       onFileSelect: (filePath) => host.workspaceRouteController.handleFileSelection(filePath, {
         closeSidebarOnMobile: true,
-        revealInTree: true,
+        revealInTree: !host.isMobileViewport(),
       }),
       onTextMatchSelect: (match) => {
         if (!match?.file) {

package/src/client/application/workspace-coordinator.js

@@ -1,5 +1,6 @@
 import {
   isBaseFilePath,
+  isHtmlFilePath,
   isMarkdownFilePath,
   supportsBacklinksForFilePath,
 } from '../../domain/file-kind.js';
@@ -51,6 +52,7 @@ export class WorkspaceCoordinator {
     onRenderBasePreview,
     onRenderExcalidrawPreview,
     onRenderDrawioPreview,
+    onRenderHtmlPreview,
     onRenderImagePreview,
     onRenderPdfPreview,
     onRenderStructurizrPreview,
@@ -103,6 +105,7 @@ export class WorkspaceCoordinator {
     this.onRenderBasePreview = onRenderBasePreview;
     this.onRenderDrawioPreview = onRenderDrawioPreview;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
+    this.onRenderHtmlPreview = onRenderHtmlPreview;
     this.onRenderImagePreview = onRenderImagePreview;
     this.onRenderPdfPreview = onRenderPdfPreview;
     this.onRenderStructurizrPreview = onRenderStructurizrPreview;
@@ -180,6 +183,7 @@ export class WorkspaceCoordinator {
     isDrawio = false,
     filePath,
     isExcalidraw = false,
+    isHtml = false,
     isImage = false,
     isPdf = false,
     supportsBacklinks,
@@ -187,6 +191,7 @@ export class WorkspaceCoordinator {
     if (isExcalidraw) this.onRenderExcalidrawPreview(filePath);
     if (isBase || isBaseFilePath(filePath)) this.onRenderBasePreview(filePath);
     if (isDrawio) this.onRenderDrawioPreview(filePath);
+    if (isHtml) this.onRenderHtmlPreview({ content: this.session?.getText?.() ?? '' });
     if (isImage) this.onRenderImagePreview(filePath);
     if (isPdf) this.onRenderPdfPreview(filePath);
     if (this.isStructurizrWorkspaceFile(filePath)) {
@@ -200,7 +205,14 @@ export class WorkspaceCoordinator {
 
   async openFile(filePath, { drawioMode = null } = {}) {
     if (!this.isTabActive()) {
-      return;
+      return false;
+    }
+
+    if (!filePath || !this.getFileList().includes(filePath)) {
+      this.cleanupSession();
+      this.stateStore.sessionLoadToken += 1;
+      this.onFileOpenError({ code: 'not-found', filePath });
+      return false;
     }
 
     const normalizedDrawioMode = drawioMode ?? null;
@@ -210,6 +222,7 @@ export class WorkspaceCoordinator {
     const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isPdf = this.isPdfFile(filePath);
+    const isHtml = isHtmlFilePath(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
     const isStructurizrWorkspace = this.isStructurizrWorkspaceFile(filePath);
@@ -221,7 +234,7 @@ export class WorkspaceCoordinator {
     ) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
-      return;
+      return true;
     }
 
     const loadToken = ++this.stateStore.sessionLoadToken;
@@ -252,7 +265,7 @@ export class WorkspaceCoordinator {
         session: null,
         supportsBacklinks: chromeState.supportsBacklinks,
       });
-      return;
+      return true;
     }
 
     const EditorSession = await this.loadEditorSessionClass();
@@ -272,6 +285,7 @@ export class WorkspaceCoordinator {
 
         this.onContentChange({
           isBase,
+          isHtml,
           isMermaid,
           isPlantUml,
           isStructurizrWorkspace,
@@ -313,6 +327,7 @@ export class WorkspaceCoordinator {
           filePath,
           isBase,
           isExcalidraw,
+          isHtml,
           session,
           supportsBacklinks: chromeState.supportsBacklinks,
         });
@@ -426,6 +441,7 @@ export class WorkspaceCoordinator {
         session.ensureInitialContent?.();
         await readySession('post-initialize');
       }
+      return true;
     } catch (error) {
       console.error('[app] Failed to initialize editor:', error);
       session.destroy();
@@ -438,7 +454,8 @@ export class WorkspaceCoordinator {
         return;
       }
 
-      this.onFileOpenError();
+      this.onFileOpenError({ code: 'load-failed', filePath });
+      return false;
     }
   }
 }

package/src/client/application/workspace-preview-controller.js

@@ -1,11 +1,40 @@
 import {
   isBaseFilePath,
   isDiagramFilePath,
+  isHtmlFilePath,
   isMarkdownFilePath,
   isStructurizrFilePath,
 } from '../../domain/file-kind.js';
+import { canFormatDocument } from '../domain/document-formatter.js';
+import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
+const HTML_PREVIEW_CSP = "default-src 'none'; base-uri about:; form-action 'none'; object-src 'none'; frame-src 'none'; worker-src 'none'; connect-src 'none'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; media-src data: blob:";
+
+function createHtmlPreviewDocument(content, allowScripts = false) {
+  const scriptSource = allowScripts ? "'unsafe-inline'" : "'none'";
+  return `<meta http-equiv="Content-Security-Policy" content="${HTML_PREVIEW_CSP}; script-src ${scriptSource};"><base href="about:srcdoc">${String(content ?? '')}`;
+}
+
+function hasHtmlScripts(content) {
+  const preview = new DOMParser().parseFromString(content, 'text/html');
+  if (preview.scripts.length > 0) return true;
+  return [...preview.querySelectorAll('*')].some((element) => [...element.attributes].some(({ name, value }) => (
+    (name.startsWith('on') && name in element)
+    || ((name === 'href' || name === 'xlink:href') && /^\s*javascript:/iu.test(value))
+  )));
+}
+
+function syncFormatDocumentButton(button, filePath, isPlantUml) {
+  if (!button) return;
+  const actionLabel = isPlantUml ? 'Indent PlantUML document' : 'Format document';
+  button.classList.toggle('hidden', !canFormatDocument(filePath));
+  button.setAttribute('aria-label', actionLabel);
+  button.setAttribute('title', actionLabel);
+  const label = button.querySelector('.ui-action-label');
+  if (label) label.textContent = isPlantUml ? 'Indent' : 'Format';
+}
+
 export class WorkspacePreviewController {
   constructor({
     backlinksPanel,
@@ -43,6 +72,14 @@ export class WorkspacePreviewController {
       updateTheme() {},
     };
     this.elements = elements;
+    this.htmlPreviewShell = null;
+    if (this.elements.htmlPreviewMaximizeButton) {
+      this.elements.htmlPreviewMaximizeButton.addEventListener('click', () => {
+        const isMaximized = this.htmlPreviewShell?.classList.contains('is-maximized');
+        this.setHtmlPreviewMaximized(!isMaximized);
+      });
+      setDiagramActionButtonIcon(this.elements.htmlPreviewMaximizeButton, 'maximize');
+    }
     this.excalidrawEmbed = excalidrawEmbed;
     this.getDisplayName = getDisplayName;
     this.getSession = getSession;
@@ -91,14 +128,29 @@ export class WorkspacePreviewController {
     return source;
   }
 
+  setHtmlPreviewMaximized(maximized) {
+    const isMaximized = Boolean(maximized && this.htmlPreviewShell);
+    this.htmlPreviewShell?.classList.toggle('is-maximized', isMaximized);
+    globalThis.document?.body?.classList.toggle('html-preview-maximized-open', isMaximized);
+
+    const button = this.elements.htmlPreviewMaximizeButton;
+    if (button) {
+      setDiagramActionButtonIcon(button, isMaximized ? 'restore' : 'maximize');
+      button.title = isMaximized ? 'Restore HTML preview' : 'Maximize HTML preview';
+      button.setAttribute('aria-label', button.title);
+    }
+  }
+
   resetPreviewMode() {
+    this.setHtmlPreviewMaximized(false);
+    this.htmlPreviewShell = null;
     this.pdfPreview.cancel();
-    this.elements.previewContainer?.classList?.remove('is-pdf-file-preview');
     this.elements.previewContent?.classList.remove('is-drawio-file-preview');
     this.elements.previewContent?.classList.remove('is-excalidraw-file-preview');
     this.elements.previewContent?.classList.remove('is-base-file-preview');
     this.elements.previewContent?.classList.remove('is-image-file-preview');
     this.elements.previewContent?.classList.remove('is-pdf-file-preview');
+    this.elements.previewContent?.classList.remove('is-html-file-preview');
     this.elements.previewContent?.classList.remove('is-mermaid-file-preview');
     this.elements.previewContent?.classList.remove('is-plantuml-file-preview');
     this.elements.previewContent?.classList.remove('is-structurizr-file-preview');
@@ -111,6 +163,7 @@ export class WorkspacePreviewController {
     const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isPdf = this.isPdfFile(filePath);
+    const isHtml = isHtmlFilePath(filePath);
     const isMarkdown = isMarkdownFilePath(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
@@ -121,9 +174,11 @@ export class WorkspacePreviewController {
     this.backlinksPanel.setDisplayMode?.(usesHeaderBacklinks ? 'header' : 'dock');
 
     this.elements.editorFindButton?.classList.toggle('hidden', !isMarkdown);
+    syncFormatDocumentButton(this.elements.editorFormatButton, filePath, isPlantUml);
     this.elements.markdownToolbar?.classList.toggle('hidden', !isMarkdown);
     this.elements.exportMenuGroup?.classList.toggle('hidden', !isMarkdown);
-    this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage || isPdf || isBase);
+    this.elements.htmlPreviewMaximizeButton?.classList.toggle('hidden', !isHtml);
+    this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage || isPdf || isHtml || isBase);
     this.elements.previewContent?.classList.toggle('is-mermaid-file-preview', isMermaid);
     this.elements.previewContent?.classList.toggle('is-plantuml-file-preview', isPlantUml);
     this.elements.previewContent?.classList.toggle('is-structurizr-file-preview', isStructurizr);
@@ -133,7 +188,7 @@ export class WorkspacePreviewController {
       this.backlinksPanel.clear();
     }
 
-    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isImage || isPdf || (isBase && preferPreviewForBase)) {
+    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isHtml || isImage || isPdf || (isBase && preferPreviewForBase)) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();
@@ -272,14 +327,12 @@ export class WorkspacePreviewController {
     this.drawioEmbed.detachForCommit();
     this.excalidrawEmbed.detachForCommit();
     this.resetPreviewMode();
-    this.elements.previewContainer?.classList?.add('is-pdf-file-preview');
     previewElement.classList.add('is-pdf-file-preview');
     const renderHost = this.previewRenderer.ensureRenderHost();
     this.previewRenderer.normalizePreviewChildren(renderHost);
 
     if (renderHost) {
       this.pdfPreview.render({
-        displayName: this.getDisplayName(filePath),
         filePath,
         renderHost,
       });
@@ -295,6 +348,68 @@ export class WorkspacePreviewController {
     this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
   }
 
+  renderHtmlFilePreview({ content = '' } = {}) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+
+    const wasMaximized = this.htmlPreviewShell?.classList.contains('is-maximized') ?? false;
+    this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    previewElement.classList.add('is-html-file-preview');
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+
+    const source = String(content ?? '');
+    const iframe = document.createElement('iframe');
+    iframe.className = 'html-file-preview-frame';
+    iframe.title = 'HTML preview';
+    iframe.referrerPolicy = 'no-referrer';
+    iframe.setAttribute('allow', "camera 'none'; microphone 'none'; geolocation 'none'; clipboard-read 'none'; clipboard-write 'none'");
+    iframe.setAttribute('sandbox', '');
+    // ponytail: full iframe replacement resets script consent whenever the content changes.
+    iframe.srcdoc = createHtmlPreviewDocument(source);
+
+    const shell = document.createElement('div');
+    shell.className = 'html-file-preview-shell';
+
+    if (hasHtmlScripts(source)) {
+      const scriptGate = document.createElement('div');
+      scriptGate.className = 'html-file-preview-script-gate';
+      scriptGate.textContent = 'Scripts are disabled by default. Run them only if you trust this HTML file.';
+
+      const runScriptsButton = document.createElement('button');
+      runScriptsButton.type = 'button';
+      runScriptsButton.className = 'ui-button ui-button--secondary ui-button--compact';
+      runScriptsButton.textContent = 'Run scripts';
+      runScriptsButton.addEventListener('click', () => {
+        iframe.setAttribute('sandbox', 'allow-scripts');
+        iframe.srcdoc = createHtmlPreviewDocument(source, true);
+        scriptGate.remove();
+      });
+      scriptGate.append(runScriptsButton);
+      shell.append(scriptGate);
+    }
+    shell.append(iframe);
+    this.htmlPreviewShell = shell;
+    this.setHtmlPreviewMaximized(wasMaximized);
+
+    if (renderHost) {
+      renderHost.replaceChildren(shell);
+      renderHost.style.minHeight = '';
+    }
+
+    previewElement.dataset.renderPhase = 'ready';
+    this.outlineController.close();
+    this.backlinksPanel.clear();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
+
   async renderBaseFilePreview(filePath, { source = null } = {}) {
     const previewElement = this.elements.previewContent;
     if (!previewElement) {

package/src/client/application/workspace-route-controller.js

@@ -285,8 +285,11 @@ export class WorkspaceRouteController {
     this.fileHistoryView?.hide?.();
     this.clearStaticPreviewDocument?.();
     this.syncMainChrome({ mode: 'editor' });
-    await this.workspaceCoordinator.openFile(filePath, options);
+    const didOpen = await this.workspaceCoordinator.openFile(filePath, options);
     this.setSession(this.workspaceCoordinator.getSession());
+    if (didOpen === false) {
+      return false;
+    }
 
     if (shouldRevealInTree) {
       this.revealFileInTree(filePath, { clearSearch: true });

package/src/client/assets/vendor/highlight/github-dark.min.css

@@ -1,10 +1,2 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-  Theme: GitHub Dark
-  Description: Dark theme as seen on github.com
-  Author: github.com
-  Maintainer: @Hirse
-  Updated: 2021-05-15
-
-  Outdated base version: https://github.com/primer/github-syntax-dark
-  Current colors taken from GitHub's CSS
-*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
+/* Highlight.js tokens mapped to CodeMirror's oneDarkHighlightStyle. */
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword{color:#c678dd}.hljs-attr,.hljs-attribute,.hljs-property,.hljs-variable{color:#e06c75}.hljs-title.function_,.hljs-title.function_.invoke__{color:#61afef}.hljs-name,.hljs-selector-tag,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-type{color:#e5c07b}.hljs-atom,.hljs-built_in,.hljs-bullet,.hljs-literal,.hljs-symbol,.hljs-variable.language_{color:#d19a66}.hljs-number{color:#e5c07b}.hljs-meta .hljs-string,.hljs-string{color:#98c379}.hljs-link,.hljs-operator,.hljs-regexp{color:#56b6c2}.hljs-code,.hljs-comment,.hljs-formula,.hljs-meta,.hljs-quote{color:#7d8799}.hljs-subst{color:#abb2bf}.hljs-section{color:#e06c75;font-weight:700}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-addition{color:#98c379}.hljs-deletion{color:#e06c75}

package/src/client/assets/vendor/highlight/github.min.css

@@ -1,10 +1,2 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-  Theme: GitHub
-  Description: Light theme as seen on github.com
-  Author: github.com
-  Maintainer: @Hirse
-  Updated: 2021-05-15
-
-  Outdated base version: https://github.com/primer/github-syntax-light
-  Current colors taken from GitHub's CSS
-*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
+/* Highlight.js tokens mapped to CodeMirror's defaultHighlightStyle. */
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#404740;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-selector-tag{color:#708}.hljs-atom,.hljs-bullet,.hljs-literal,.hljs-symbol,.hljs-variable.language_{color:#219}.hljs-number{color:#164}.hljs-meta .hljs-string,.hljs-regexp{color:#e40}.hljs-string{color:#a11}.hljs-title.function_,.hljs-title.function_.invoke__{color:#00f}.hljs-title.class_,.hljs-title.class_.inherited__{color:#167}.hljs-built_in,.hljs-name,.hljs-type{color:#085}.hljs-attr,.hljs-attribute,.hljs-property{color:#00c}.hljs-code,.hljs-comment,.hljs-formula,.hljs-quote{color:#940}.hljs-meta,.hljs-operator,.hljs-subst,.hljs-variable{color:#404740}.hljs-section{color:#00f;font-weight:700}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-addition{color:#164}.hljs-deletion{color:#a11}

package/src/client/assets/vendor/jetbrains-mono/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -99,7 +99,13 @@ export class CollabMdAppShell {
     this.sessionLoadToken = 0;
     this.navigation = {
       getHashRoute,
-      navigateToFile,
+      navigateToFile: (filePath, options = {}) => {
+        const { preserveFollow = false, ...routeOptions } = options;
+        if (!preserveFollow && filePath !== this.currentFilePath) {
+          this.stopFollowingUser();
+        }
+        navigateToFile(filePath, routeOptions);
+      },
       navigateToGitCommit,
       navigateToGitDiff,
       navigateToGitFileHistory,
@@ -162,6 +168,7 @@ export class CollabMdAppShell {
     this.chatToastController = new ToastController(this.elements.chatToastContainer);
     this.fileExplorer = new FileExplorerController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
+      onDirectoryExport: (directoryPath, format) => this.handleDirectoryExportRequest(directoryPath, format),
       onFileDelete: () => this.navigation.navigateToFile(null),
       onFileSelect: (filePath) => this.workspaceRouteController.handleFileSelection(filePath, {
         closeSidebarOnMobile: true,
@@ -202,7 +209,11 @@ export class CollabMdAppShell {
     });
     this.outlineController = new OutlineController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
-      onNavigateToHeading: ({ sourceLine }) => {
+      onNavigateToHeading: ({ headingId, sourceLine }) => {
+        const heading = document.getElementById(headingId);
+        if (this.elements.previewContent?.contains(heading)) {
+          this.unfoldPreviewHeading(heading);
+        }
         if (!Number.isFinite(sourceLine)) return;
         this.scrollSyncController.suspendSync(250);
         this.session?.scrollToLine(sourceLine, 0);
@@ -247,6 +258,8 @@ export class CollabMdAppShell {
         this.drawioEmbed.reconcileEmbeds(this.elements.previewContent);
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
         this.scrollSyncController.setLargeDocumentMode(stats.isLargeDocument);
+        this.syncPreviewCodeCopyButtons();
+        this.syncPreviewHeadingFoldButtons();
         this.syncPreviewHeadingLinkButtons();
         this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: true });
         this.schedulePreviewLayoutSync({ delayMs: 0 });
@@ -288,8 +301,7 @@ export class CollabMdAppShell {
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
     });
     this.pdfPreview = new PdfPreviewController({
-      outlineController: this.outlineController,
-      previewContainer: this.elements.previewContainer,
+      getTheme: () => this.themeController.getTheme(),
     });
     this.backlinksPanel = new BacklinksPanel({
       headerPanelElement: this.elements.backlinksHeaderPanel,
@@ -304,6 +316,7 @@ export class CollabMdAppShell {
       getLocalUser: () => this.lobby.getLocalUser(),
       getTheme: () => this.themeController.getTheme(),
       onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onStopFollowing: () => this.stopFollowingUser(),
       onToggleQuickSwitcher: () => {
         void this.toggleQuickSwitcher();
       },
@@ -493,8 +506,15 @@ export class CollabMdAppShell {
         this.clearInitialFileBootstrap();
       },
       onConnectionChange: (state) => this.handleConnectionChange(state),
-      onContentChange: ({ isBase, isMermaid, isPlantUml, isStructurizrWorkspace }) => {
+      onContentChange: ({ isBase, isHtml, isMermaid, isPlantUml, isStructurizrWorkspace }) => {
         this.handleCommentEditorContentChange();
+        if (isHtml) {
+          this.workspacePreviewController.renderHtmlFilePreview({
+            content: this.session?.getText?.() ?? '',
+          });
+          return;
+        }
+
         if (isBase) {
           this.scheduleBaseFilePreview(this.currentFilePath, {
             source: this.session?.getText?.() ?? '',
@@ -517,10 +537,11 @@ export class CollabMdAppShell {
       },
       onCommentsChange: (threads) => this.handleCommentThreadsChange(threads),
       onFileAwarenessChange: (users) => this.updateFileAwareness(users),
-      onFileOpenError: () => {
-        this.showEditorLoadError();
+      onFileOpenError: ({ code } = {}) => {
+        const notFound = code === 'not-found';
+        this.showEditorLoadError(notFound ? 'File not found' : 'Failed to load file');
         this.syncWrapToggle();
-        this.toastController.show('Failed to initialize editor');
+        this.toastController.show(notFound ? 'File not found' : 'Failed to initialize editor');
       },
       onFileOpenReady: () => {
         this.hideEditorLoading();
@@ -538,6 +559,7 @@ export class CollabMdAppShell {
       onRenderDrawioPreview: (filePath) => this.workspacePreviewController.renderDrawioFilePreview(filePath),
       onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
       onRenderExcalidrawPreview: (filePath) => this.workspacePreviewController.renderExcalidrawFilePreview(filePath),
+      onRenderHtmlPreview: (options) => this.workspacePreviewController.renderHtmlFilePreview(options),
       onRenderImagePreview: (filePath) => this.workspacePreviewController.renderImageFilePreview(filePath),
       onRenderPdfPreview: (filePath) => this.workspacePreviewController.renderPdfFilePreview(filePath),
       onRenderStructurizrPreview: (filePath, options) => this.workspacePreviewController.renderStructurizrFilePreview(filePath, options),
@@ -554,6 +576,7 @@ export class CollabMdAppShell {
         });
         this.syncCommentChrome(filePath);
         this.syncFileHistoryButton({ filePath, mode: 'editor' });
+        this.syncReviewFileChangesButton({ filePath, mode: 'editor' });
         if (this.elements.activeFileName) {
           this.elements.activeFileName.textContent = displayName;
         }