collabmd 0.1.46 → 0.1.48

package/src/client/application/app-shell/ui-feature-identity.js

@@ -44,6 +44,7 @@ function openDisplayNameDialog({ mode = 'edit' } = {}) {
   if (!dialog || !input) return;
 
   const isOnboarding = mode === 'onboarding';
+  this._displayNameDialogMode = mode;
   if (title) {
     title.textContent = isOnboarding ? 'Choose your display name' : 'Update display name';
   }
@@ -88,6 +89,17 @@ function promptForDisplayNameIfNeeded() {
   });
 }
 
+/** @this {UiIdentityContext} */
+function handleDisplayNameCancel() {
+  if (this._displayNameDialogMode === 'onboarding' && !this.getStoredUserName()) {
+    const guestName = this.getCurrentUserName();
+    if (guestName) {
+      this.preferences.setUserName(guestName);
+    }
+  }
+  this.elements.displayNameDialog?.close();
+}
+
 /** @this {UiIdentityContext} */
 function handleDisplayNameSubmit() {
   if (this.isIdentityManagedByAuth()) {
@@ -164,6 +176,7 @@ export const uiFeatureIdentityMethods = {
   getCurrentUser,
   getCurrentUserName,
   getStoredUserName,
+  handleDisplayNameCancel,
   handleDisplayNameSubmit,
   isIdentityManagedByAuth,
   openDisplayNameDialog,

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

@@ -1,10 +1,16 @@
-import { supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
+import { getVaultFileKind, supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
 import { isPlainQuickSwitcherShortcut } from '../../domain/keyboard-shortcuts.js';
 import { createFileRouteHash, isCollabMdHashRoute } from '../../domain/hash-routes.js';
 
 const VERSION_RELOAD_TOAST_DURATION_MS = 0;
 const PREVIEW_ROUTE_ANCHOR_STABILIZE_MS = 2000;
 const PREVIEW_ROUTE_ANCHOR_MAX_APPLICATIONS = 8;
+const PREVIEW_CODE_COPY_ICON = `
+  <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false">
+    <rect x="8" y="8" width="11" height="11" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
+    <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  </svg>
+`;
 const PREVIEW_HEADING_LINK_ICON = `
   <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false">
     <path d="M10 13.5 14 9.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
@@ -168,6 +174,11 @@ function bindToolbarEvents() {
   this.elements.toolbarSearchButton?.addEventListener('click', openQuickSwitcher);
   this.elements.searchFilesButton?.addEventListener('click', openQuickSwitcher);
 
+  this.elements.exportHtmlButton?.addEventListener('click', () => {
+    void this.handleExportRequest?.('html');
+    this.closeToolbarOverflowMenu?.();
+  });
+
   this.elements.exportDocxButton?.addEventListener('click', () => {
     void this.handleExportRequest?.('docx');
     this.closeToolbarOverflowMenu?.();
@@ -178,6 +189,13 @@ function bindToolbarEvents() {
     this.closeToolbarOverflowMenu?.();
   });
 
+  this.elements.reviewFileChangesButton?.addEventListener('click', () => {
+    this.handleGitDiffSelection(this.currentFilePath, {
+      closeSidebarOnMobile: true,
+      scope: 'all',
+    });
+  });
+
   this.elements.fileHistoryButton?.addEventListener('click', () => {
     const route = this.navigation.getHashRoute();
     if (route.type === 'git-file-preview') {
@@ -199,7 +217,7 @@ function bindToolbarEvents() {
 /** @this {UiShellContext} */
 function bindDialogEvents() {
   this.elements.displayNameCancel?.addEventListener('click', () => {
-    this.elements.displayNameDialog?.close();
+    this.handleDisplayNameCancel();
   });
 
   this.elements.gitCommitCancel?.addEventListener('click', () => {
@@ -219,7 +237,7 @@ function bindDialogEvents() {
       this.elements.gitCommitInput.value = '';
     }
     if (this.elements.gitCommitSubmit) {
-      this.elements.gitCommitSubmit.textContent = 'Commit staged changes';
+      this.elements.gitCommitSubmit.textContent = 'Commit included files';
     }
   });
 
@@ -244,8 +262,29 @@ function bindDialogEvents() {
   });
 }
 
+/** @this {UiShellContext} */
+function focusEditor(event) {
+  event?.preventDefault?.();
+  const container = this.elements.editorContainer;
+  if (!container) return;
+
+  const target = container.querySelector('.cm-content, iframe, [contenteditable="true"]') ?? container;
+  if (target === container && !container.hasAttribute('tabindex')) {
+    container.setAttribute('tabindex', '-1');
+  }
+  target.focus();
+}
+
 /** @this {UiShellContext} */
 function bindEvents() {
+  const stopFollowing = () => this.stopFollowingUser?.();
+  this.elements.editorContainer?.addEventListener('pointerdown', stopFollowing);
+  this.elements.editorContainer?.addEventListener('keydown', stopFollowing);
+  this.elements.editorContainer?.addEventListener('wheel', stopFollowing, { passive: true });
+  this.elements.previewContainer?.addEventListener('pointerdown', stopFollowing);
+  this.elements.previewContainer?.addEventListener('wheel', stopFollowing, { passive: true });
+  this.elements.skipToEditor?.addEventListener('click', (event) => this.focusEditor(event));
+
   this.elements.emptyStateNewFileBtn?.addEventListener('click', () => {
     this.fileExplorer.actionController.openRootCreateMenu({
       anchor: this.elements.emptyStateNewFileBtn,
@@ -311,6 +350,10 @@ function bindEvents() {
     this.runEditorCommand?.('openSearch');
   });
 
+  this.elements.editorFormatButton?.addEventListener('click', () => {
+    void this.formatCurrentDocument();
+  });
+
   this.elements.toolbarOverflowToggle?.addEventListener('click', (event) => {
     event.preventDefault();
     this.closePresencePanel?.();
@@ -400,6 +443,10 @@ function handleDocumentPointerDown(event) {
 
 /** @this {UiShellContext} */
 function handleDocumentKeydown(event) {
+  if (event.key === 'Escape') {
+    this.stopFollowingUser?.();
+  }
+
   if (event.key === 'Escape' && this.toolbarOverflowOpen) {
     this.closeToolbarOverflowMenu();
     return;
@@ -486,7 +533,7 @@ function getHeadingLinkLabel(heading) {
     return heading.textContent.trim();
   }
 
-  headingClone.querySelectorAll('.preview-heading-link-button').forEach((button) => button.remove());
+  headingClone.querySelectorAll('.preview-heading-fold-button, .preview-heading-link-button').forEach((button) => button.remove());
   return headingClone.textContent.replace(/\s+/g, ' ').trim();
 }
 
@@ -527,6 +574,7 @@ function createPreviewHeadingLinkUrl(anchorId) {
     return '';
   }
 
+  // pi-lens-ignore: unchecked-throwing-call-js
   const url = new URL(window.location.href);
   url.hash = createFileRouteHash(this.currentFilePath, {
     anchor: anchorId,
@@ -551,6 +599,123 @@ async function copyPreviewHeadingLink(anchorId) {
   }
 }
 
+/** @this {UiShellContext} */
+async function copyPreviewCodeBlock(button) {
+  const code = button?.closest('.preview-code-block')?.querySelector(':scope > pre > code');
+  if (!(code instanceof HTMLElement)) {
+    return;
+  }
+
+  try {
+    await copyTextToClipboard(code.textContent);
+    this.toastController.show('Code copied');
+  } catch {
+    this.toastController.show('Failed to copy code');
+  }
+}
+
+/** @this {UiShellContext} */
+function syncPreviewCodeCopyButtons() {
+  this.elements.previewContent?.querySelectorAll('pre > code').forEach((code) => {
+    const pre = code.parentElement;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'preview-code-block';
+    // pi-lens-ignore: no-inner-html-js
+    wrapper.innerHTML = `
+      <div class="preview-code-actions">
+        <button type="button" class="ui-button ui-button--secondary ui-button--compact preview-code-copy-button" aria-label="Copy code" title="Copy code">
+          ${PREVIEW_CODE_COPY_ICON}<span data-preview-code-copy-label>Copy</span>
+        </button>
+      </div>`;
+    pre.replaceWith(wrapper);
+    wrapper.append(pre);
+  });
+}
+
+function applyPreviewHeadingFolds(previewContent) {
+  const parents = new Set(Array.from(previewContent?.querySelectorAll?.('.preview-heading-fold-button') ?? [])
+    .map((button) => button.closest('h1, h2, h3, h4, h5, h6')?.parentElement)
+    .filter(Boolean));
+
+  parents.forEach((parent) => {
+    const collapsedLevels = [];
+    Array.from(parent.children).forEach((child) => {
+      const level = /^H([1-6])$/.exec(child.tagName)?.[1];
+      if (level) {
+        const headingLevel = Number(level);
+        while (collapsedLevels.at(-1) >= headingLevel) {
+          collapsedLevels.pop();
+        }
+        child.hidden = collapsedLevels.length > 0;
+        if (child.dataset.previewHeadingCollapsed === 'true') {
+          collapsedLevels.push(headingLevel);
+        }
+      } else {
+        child.hidden = collapsedLevels.length > 0;
+      }
+    });
+  });
+}
+
+/** @this {UiShellContext} */
+function unfoldPreviewHeading(target) {
+  if (!(target instanceof HTMLElement) || !/^H[1-6]$/.test(target.tagName)) {
+    return false;
+  }
+
+  const collapsedHeadings = [];
+  let ancestorLevel = Number(target.tagName[1]) + 1;
+  for (let heading = target; heading; heading = heading.previousElementSibling) {
+    const level = Number(/^H([1-6])$/.exec(heading.tagName)?.[1]);
+    if (!level || level >= ancestorLevel) {
+      continue;
+    }
+
+    ancestorLevel = level;
+    if (heading.dataset.previewHeadingCollapsed === 'true') {
+      collapsedHeadings.push(heading);
+    }
+  }
+
+  if (collapsedHeadings.length === 0) {
+    return false;
+  }
+
+  collapsedHeadings.forEach((heading) => delete heading.dataset.previewHeadingCollapsed);
+  this.syncPreviewHeadingFoldButtons();
+  this.scrollSyncController?.invalidatePreviewBlocks?.();
+  this.schedulePreviewLayoutSync?.({ delayMs: 0 });
+  this.refreshCommentUiLayout?.();
+  return true;
+}
+
+/** @this {UiShellContext} */
+function syncPreviewHeadingFoldButtons() {
+  const headings = this.elements.previewContent?.querySelectorAll?.('h1, h2, h3, h4, h5, h6') ?? [];
+
+  Array.from(headings).forEach((heading) => {
+    if (!(heading instanceof HTMLElement)) {
+      return;
+    }
+
+    const headingLabel = getHeadingLinkLabel(heading);
+    let button = heading.querySelector(':scope > .preview-heading-fold-button');
+    if (!(button instanceof HTMLButtonElement)) {
+      button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'ui-icon-button preview-heading-fold-button';
+      heading.prepend(button);
+    }
+
+    const collapsed = heading.dataset.previewHeadingCollapsed === 'true';
+    button.setAttribute('aria-expanded', String(!collapsed));
+    button.setAttribute('aria-label', `${collapsed ? 'Expand' : 'Collapse'} ${headingLabel}`);
+    button.setAttribute('title', `${collapsed ? 'Expand' : 'Collapse'} section`);
+  });
+
+  applyPreviewHeadingFolds(this.elements.previewContent);
+}
+
 /** @this {UiShellContext} */
 function syncPreviewHeadingLinkButtons() {
   const headings = this.elements.previewContent?.querySelectorAll?.('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]') ?? [];
@@ -566,6 +731,7 @@ function syncPreviewHeadingLinkButtons() {
       button = document.createElement('button');
       button.type = 'button';
       button.className = 'ui-icon-button preview-heading-link-button';
+      // pi-lens-ignore: no-inner-html-js
       button.innerHTML = PREVIEW_HEADING_LINK_ICON;
       heading.appendChild(button);
     }
@@ -639,6 +805,25 @@ function handlePreviewContentClick(event) {
     return;
   }
 
+  const foldButton = event.target.closest('button.preview-heading-fold-button');
+  const heading = foldButton?.closest('h1, h2, h3, h4, h5, h6');
+  if (foldButton instanceof HTMLButtonElement && heading instanceof HTMLElement) {
+    event.preventDefault();
+    heading.dataset.previewHeadingCollapsed = String(heading.dataset.previewHeadingCollapsed !== 'true');
+    this.syncPreviewHeadingFoldButtons();
+    this.scrollSyncController?.invalidatePreviewBlocks?.();
+    this.schedulePreviewLayoutSync?.({ delayMs: 0 });
+    this.refreshCommentUiLayout?.();
+    return;
+  }
+
+  const codeCopyButton = event.target.closest('button.preview-code-copy-button');
+  if (codeCopyButton instanceof HTMLButtonElement) {
+    event.preventDefault();
+    void this.copyPreviewCodeBlock(codeCopyButton);
+    return;
+  }
+
   const headingLinkButton = event.target.closest('button.preview-heading-link-button[data-preview-heading-anchor]');
   if (headingLinkButton instanceof HTMLButtonElement) {
     event.preventDefault();
@@ -748,6 +933,7 @@ function handleThemeChange(theme) {
   this.session?.applyTheme(theme);
   this.excalidrawEmbed.updateTheme(theme);
   this.drawioEmbed.updateTheme(theme);
+  this.pdfPreview?.setTheme(theme);
 }
 
 /** @this {UiShellContext} */
@@ -784,6 +970,29 @@ function getStoredLineWrapping() {
   return this.preferences.getLineWrappingEnabled();
 }
 
+/** @this {UiShellContext} */
+async function formatCurrentDocument() {
+  const button = this.elements.editorFormatButton;
+  button?.setAttribute('disabled', '');
+
+  try {
+    const result = await this.session?.formatDocument?.(this.currentFilePath);
+    const messages = {
+      changed: 'Document changed while formatting. Try again.',
+      formatted: getVaultFileKind(this.currentFilePath) === 'plantuml'
+        ? 'PlantUML indentation applied'
+        : 'Document formatted',
+      unchanged: 'Document is already formatted',
+      unsupported: 'Formatting is unavailable for this file type',
+    };
+    this.toastController.show(messages[result] ?? messages.unsupported);
+  } catch (error) {
+    this.toastController.show(`Formatting failed: ${error?.message || 'Unknown error'}`, 5000);
+  } finally {
+    button?.removeAttribute('disabled');
+  }
+}
+
 /** @this {UiShellContext} */
 function toggleVimMode() {
   const currentState = this.session?.isVimModeEnabled?.() ?? this.getStoredVimMode();
@@ -854,13 +1063,17 @@ function hideEditorLoading() {
 }
 
 /** @this {UiShellContext} */
-function showEditorLoadError() {
+function showEditorLoadError(message = 'Failed to load file') {
   if (!this.elements.editorContainer) return;
+  const loading = document.createElement('div');
+  const text = document.createElement('span');
+  loading.className = 'editor-loading';
+  loading.id = 'editorLoading';
+  text.className = 'loading-text';
+  text.textContent = message;
+  loading.appendChild(text);
   this.elements.editorContainer.classList.remove('is-loading-editor');
-  this.elements.editorContainer.innerHTML = `
-      <div class="editor-loading" id="editorLoading">
-        <span class="loading-text">Failed to load file</span>
-      </div>`;
+  this.elements.editorContainer.replaceChildren(loading);
 }
 
 /** @this {UiShellContext} */
@@ -873,8 +1086,11 @@ export const uiFeatureShellMethods = {
   bindEvents,
   clearInitialFileBootstrap,
   closeToolbarOverflowMenu,
+  copyPreviewCodeBlock,
   copyPreviewHeadingLink,
   createPreviewHeadingLinkUrl,
+  focusEditor,
+  formatCurrentDocument,
   getStoredLineWrapping,
   getStoredVimMode,
   handleConnectionChange,
@@ -894,6 +1110,8 @@ export const uiFeatureShellMethods = {
   setToolbarOverflowOpen,
   showEditorLoadError,
   showEditorLoading,
+  syncPreviewCodeCopyButtons,
+  syncPreviewHeadingFoldButtons,
   syncPreviewHeadingLinkButtons,
   syncVisualViewportBounds,
   syncToolbarOverflowVisibility,
@@ -901,5 +1119,6 @@ export const uiFeatureShellMethods = {
   syncWrapToggle,
   toggleToolbarOverflowMenu,
   toggleLineWrapping,
+  unfoldPreviewHeading,
   toggleVimMode,
 };

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

@@ -37,8 +37,10 @@ export function bindAppShellElements(doc = document) {
     displayNameTitle: doc.getElementById('displayNameTitle'),
     editNameButton: doc.getElementById('editNameBtn'),
     editorFindButton: doc.getElementById('editorFindBtn'),
+    editorFormatButton: doc.getElementById('editorFormatBtn'),
     editorContainer: doc.getElementById('editorContainer'),
     exportDocxButton: doc.getElementById('exportDocxBtn'),
+    exportHtmlButton: doc.getElementById('exportHtmlBtn'),
     exportMenuGroup: doc.getElementById('exportMenuGroup'),
     exportPdfButton: doc.getElementById('exportPdfBtn'),
     markdownToolbar: doc.getElementById('markdownToolbar'),
@@ -54,12 +56,15 @@ export function bindAppShellElements(doc = document) {
     gitOperationStatus: doc.getElementById('gitOperationStatus'),
     lineInfo: doc.getElementById('lineInfo'),
     mobileViewToggle: doc.getElementById('mobileViewToggle'),
+    htmlPreviewMaximizeButton: doc.getElementById('htmlPreviewMaximize'),
     previewContent: doc.getElementById('previewContent'),
     previewContainer: doc.getElementById('previewContainer'),
+    reviewFileChangesButton: doc.getElementById('reviewFileChangesBtn'),
     presencePanel: doc.getElementById('presencePanel'),
     presencePanelList: doc.getElementById('presencePanelList'),
     presencePanelStatus: doc.getElementById('presencePanelStatus'),
     searchFilesButton: doc.getElementById('searchFilesBtn'),
+    skipToEditor: doc.getElementById('skipToEditor'),
     toolbarSearchButton: doc.getElementById('toolbarSearchBtn'),
     shareButton: doc.getElementById('shareBtn'),
     toastContainer: doc.getElementById('toastContainer'),