collabmd 0.1.36 → 0.1.38

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

@@ -1,7 +1,17 @@
 import { 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_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"/>
+    <path d="M9.35 7.55 10.6 6.3a4.2 4.2 0 0 1 5.95 5.95l-1.25 1.25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <path d="m14.65 16.45-1.25 1.25a4.2 4.2 0 0 1-5.95-5.95L8.7 10.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  </svg>
+`;
 
 /**
  * @typedef {object} UiShellContext
@@ -396,12 +406,207 @@ function isInteractiveTaskListDescendant(target) {
   return Boolean(target.closest('a, button, input, select, textarea, summary, [contenteditable="true"], [role="button"], [role="link"]'));
 }
 
+function normalizeFragmentTargetId(rawTarget = '') {
+  const normalizedTarget = String(rawTarget ?? '').trim();
+  if (!normalizedTarget) {
+    return '';
+  }
+
+  try {
+    return decodeURIComponent(normalizedTarget);
+  } catch {
+    return normalizedTarget;
+  }
+}
+
+function scrollPreviewToTarget(previewContainer, target, { behavior = 'smooth' } = {}) {
+  if (!previewContainer || !target) {
+    return;
+  }
+
+  const previewRect = previewContainer.getBoundingClientRect();
+  const targetRect = target.getBoundingClientRect();
+  const nextScrollTop = previewContainer.scrollTop + (targetRect.top - previewRect.top);
+  previewContainer.scrollTo({
+    behavior,
+    top: Math.max(nextScrollTop, 0),
+  });
+}
+
+async function copyTextToClipboard(text) {
+  await navigator.clipboard.writeText(text);
+}
+
+function getHeadingLinkLabel(heading) {
+  if (!(heading instanceof HTMLElement)) {
+    return '';
+  }
+
+  const headingClone = heading.cloneNode(true);
+  if (!(headingClone instanceof HTMLElement)) {
+    return heading.textContent.trim();
+  }
+
+  headingClone.querySelectorAll('.preview-heading-link-button').forEach((button) => button.remove());
+  return headingClone.textContent.replace(/\s+/g, ' ').trim();
+}
+
+function nowMs() {
+  return globalThis.performance?.now?.() ?? Date.now();
+}
+
+/** @this {UiShellContext} */
+function navigatePreviewHeading(target, headingId, { behavior = 'auto' } = {}) {
+  if (!(target instanceof HTMLElement) || !headingId) {
+    return false;
+  }
+
+  const handledByOutlineNavigation = this.outlineController?.navigateToHeading?.(target, headingId, { behavior });
+  if (handledByOutlineNavigation) {
+    return true;
+  }
+
+  const previewContainer = this.elements.previewContainer ?? document.getElementById('previewContainer');
+  if (!previewContainer) {
+    return false;
+  }
+
+  this.scrollSyncController?.suspendSync?.(250);
+  scrollPreviewToTarget(previewContainer, target, { behavior });
+
+  const sourceLine = Number.parseInt(target.getAttribute('data-source-line') || '', 10);
+  if (Number.isFinite(sourceLine)) {
+    this.session?.scrollToLine?.(sourceLine, 0);
+  }
+
+  return true;
+}
+
+/** @this {UiShellContext} */
+function createPreviewHeadingLinkUrl(anchorId) {
+  if (!this.currentFilePath || !anchorId) {
+    return '';
+  }
+
+  const url = new URL(window.location.href);
+  url.hash = createFileRouteHash(this.currentFilePath, {
+    anchor: anchorId,
+    drawioMode: this.currentDrawioMode ?? null,
+  });
+  return url.toString();
+}
+
+/** @this {UiShellContext} */
+async function copyPreviewHeadingLink(anchorId) {
+  const url = this.createPreviewHeadingLinkUrl(anchorId);
+  if (!url) {
+    this.toastController.show('Failed to copy section link');
+    return;
+  }
+
+  try {
+    await copyTextToClipboard(url);
+    this.toastController.show('Section link copied');
+  } catch {
+    this.toastController.show('Failed to copy section link');
+  }
+}
+
+/** @this {UiShellContext} */
+function syncPreviewHeadingLinkButtons() {
+  const headings = this.elements.previewContent?.querySelectorAll?.('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]') ?? [];
+
+  Array.from(headings).forEach((heading) => {
+    if (!(heading instanceof HTMLElement) || !heading.id) {
+      return;
+    }
+
+    const headingLabel = getHeadingLinkLabel(heading);
+    let button = heading.querySelector(':scope > .preview-heading-link-button');
+    if (!(button instanceof HTMLButtonElement)) {
+      button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'ui-icon-button preview-heading-link-button';
+      button.innerHTML = PREVIEW_HEADING_LINK_ICON;
+      heading.appendChild(button);
+    }
+
+    button.dataset.previewHeadingAnchor = heading.id;
+    button.setAttribute('aria-label', `Copy link to ${headingLabel}`);
+    button.setAttribute('title', 'Copy link to this section');
+  });
+}
+
+/** @this {UiShellContext} */
+function requestPreviewRouteAnchor(anchorId, filePath = this.currentFilePath) {
+  const normalizedAnchor = String(anchorId ?? '').trim();
+  this._pendingPreviewRouteAnchor = normalizedAnchor
+    ? {
+      applied: false,
+      appliedCount: 0,
+      anchorId: normalizedAnchor,
+      filePath: filePath ?? this.currentFilePath ?? null,
+      stabilizeUntil: nowMs() + PREVIEW_ROUTE_ANCHOR_STABILIZE_MS,
+    }
+    : null;
+
+  if (!this._pendingPreviewRouteAnchor) {
+    return false;
+  }
+
+  return this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: false });
+}
+
+/** @this {UiShellContext} */
+function applyPendingPreviewRouteAnchor({ allowExpired = false, behavior = 'auto', clearMissing = false } = {}) {
+  const pendingAnchor = this._pendingPreviewRouteAnchor;
+  if (!pendingAnchor) {
+    return false;
+  }
+
+  if (!allowExpired && pendingAnchor.applied && pendingAnchor.stabilizeUntil <= nowMs()) {
+    this._pendingPreviewRouteAnchor = null;
+    return false;
+  }
+
+  if (pendingAnchor.filePath && this.currentFilePath && pendingAnchor.filePath !== this.currentFilePath) {
+    return false;
+  }
+
+  const target = document.getElementById(pendingAnchor.anchorId);
+  if (!(target instanceof HTMLElement) || !this.elements.previewContent?.contains(target)) {
+    if (!pendingAnchor.applied && clearMissing && pendingAnchor.filePath && pendingAnchor.filePath === this.currentFilePath) {
+      this._pendingPreviewRouteAnchor = null;
+    }
+    return false;
+  }
+
+  if (!this.navigatePreviewHeading(target, pendingAnchor.anchorId, { behavior })) {
+    return false;
+  }
+
+  pendingAnchor.applied = true;
+  pendingAnchor.appliedCount = (pendingAnchor.appliedCount ?? 0) + 1;
+  pendingAnchor.stabilizeUntil = nowMs() + PREVIEW_ROUTE_ANCHOR_STABILIZE_MS;
+  if (pendingAnchor.appliedCount >= PREVIEW_ROUTE_ANCHOR_MAX_APPLICATIONS) {
+    this._pendingPreviewRouteAnchor = null;
+  }
+  return true;
+}
+
 /** @this {UiShellContext} */
 function handlePreviewContentClick(event) {
   if (!(event.target instanceof Element)) {
     return;
   }
 
+  const headingLinkButton = event.target.closest('button.preview-heading-link-button[data-preview-heading-anchor]');
+  if (headingLinkButton instanceof HTMLButtonElement) {
+    event.preventDefault();
+    void this.copyPreviewHeadingLink(headingLinkButton.dataset.previewHeadingAnchor || '');
+    return;
+  }
+
   const wikiLink = event.target.closest('a.wiki-link[data-wiki-target]');
   if (wikiLink) {
     event.preventDefault();
@@ -409,6 +614,32 @@ function handlePreviewContentClick(event) {
     return;
   }
 
+  const anchorLink = event.target.closest('a[href]');
+  const href = anchorLink?.getAttribute('href')?.trim() || '';
+  if (anchorLink && href.startsWith('#') && !isCollabMdHashRoute(href)) {
+    event.preventDefault();
+
+    if (href === '#' || href.toLowerCase() === '#top') {
+      this.scrollSyncController?.suspendSync?.(250);
+      const previewContainer = this.elements.previewContainer ?? document.getElementById('previewContainer');
+      previewContainer?.scrollTo({ top: 0, behavior: 'smooth' });
+      return;
+    }
+
+    const targetId = normalizeFragmentTargetId(href.slice(1));
+    if (!targetId) {
+      return;
+    }
+
+    const target = document.getElementById(targetId);
+    if (!target || !this.elements.previewContent?.contains(target)) {
+      return;
+    }
+
+    this.navigatePreviewHeading(target, targetId, { behavior: 'smooth' });
+    return;
+  }
+
   const taskItem = event.target.closest('.task-list-item[data-source-line]');
   if (!taskItem || isNestedTaskListClickTarget(event.target, taskItem) || isInteractiveTaskListDescendant(event.target)) {
     return;
@@ -560,9 +791,12 @@ function clearInitialFileBootstrap() {
 }
 
 export const uiFeatureShellMethods = {
+  applyPendingPreviewRouteAnchor,
   bindEvents,
   clearInitialFileBootstrap,
   closeToolbarOverflowMenu,
+  copyPreviewHeadingLink,
+  createPreviewHeadingLinkUrl,
   getStoredLineWrapping,
   handleConnectionChange,
   handleDocumentKeydown,
@@ -574,11 +808,14 @@ export const uiFeatureShellMethods = {
   initializeVisualViewportBinding,
   initializeVersionMonitoring,
   isPlainQuickSwitcherShortcut,
+  navigatePreviewHeading,
   promptForVersionReload,
+  requestPreviewRouteAnchor,
   scheduleBacklinkRefresh,
   setToolbarOverflowOpen,
   showEditorLoadError,
   showEditorLoading,
+  syncPreviewHeadingLinkButtons,
   syncVisualViewportBounds,
   syncToolbarOverflowVisibility,
   syncWrapToggle,

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

@@ -49,6 +49,96 @@ function escapePreviewText(content = '') {
   return escapeHtml(normalizePreviewTypography(content));
 }
 
+function createHeadingSlug(content = '') {
+  return String(content ?? '')
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+    || 'section';
+}
+
+function createHeadingId(baseId = '', headingIdCounts = new Map()) {
+  const normalizedBaseId = String(baseId ?? '').trim() || 'section';
+  const occurrenceIndex = headingIdCounts.get(normalizedBaseId) ?? 0;
+  headingIdCounts.set(normalizedBaseId, occurrenceIndex + 1);
+  return occurrenceIndex === 0 ? normalizedBaseId : `${normalizedBaseId}-${occurrenceIndex}`;
+}
+
+function createContextualHeadingBaseId(headingInfo, groupedHeadingInfos = []) {
+  if (!headingInfo?.slug) {
+    return 'section';
+  }
+
+  if (groupedHeadingInfos.length <= 1) {
+    return headingInfo.slug;
+  }
+
+  for (let depth = 1; depth <= headingInfo.parentSlugs.length; depth += 1) {
+    const candidate = [
+      ...headingInfo.parentSlugs.slice(-depth),
+      headingInfo.slug,
+    ].join('-');
+
+    const isUniqueWithinGroup = groupedHeadingInfos.every((otherInfo) => {
+      if (otherInfo === headingInfo) {
+        return true;
+      }
+
+      const otherCandidate = [
+        ...otherInfo.parentSlugs.slice(-depth),
+        otherInfo.slug,
+      ].join('-');
+      return otherCandidate !== candidate;
+    });
+
+    if (isUniqueWithinGroup) {
+      return candidate;
+    }
+  }
+
+  return headingInfo.slug;
+}
+
+function assignHeadingIds(state) {
+  const headingInfos = [];
+  const parentSlugs = [];
+
+  state.tokens.forEach((token, index) => {
+    if (token.type !== 'heading_open' || token.attrGet('id')) {
+      return;
+    }
+
+    const level = Number.parseInt(token.tag.slice(1), 10);
+    if (!Number.isFinite(level) || level < 1) {
+      return;
+    }
+
+    parentSlugs.length = Math.max(level - 1, 0);
+    const inlineToken = state.tokens[index + 1];
+    const slug = createHeadingSlug(inlineToken?.type === 'inline' ? inlineToken.content : '');
+    headingInfos.push({
+      parentSlugs: parentSlugs.filter(Boolean),
+      slug,
+      token,
+    });
+    parentSlugs[level - 1] = slug;
+  });
+
+  const headingsBySlug = new Map();
+  headingInfos.forEach((headingInfo) => {
+    const group = headingsBySlug.get(headingInfo.slug) ?? [];
+    group.push(headingInfo);
+    headingsBySlug.set(headingInfo.slug, group);
+  });
+
+  const headingIdCounts = new Map();
+  headingInfos.forEach((headingInfo) => {
+    const baseId = createContextualHeadingBaseId(headingInfo, headingsBySlug.get(headingInfo.slug) ?? []);
+    headingInfo.token.attrSet('id', createHeadingId(baseId, headingIdCounts));
+  });
+}
+
 function renderSafeInlineBreaks(content = '') {
   const parts = String(content).split(/<br\s*\/?>/i);
   if (parts.length === 1) {
@@ -239,6 +329,13 @@ function resolveLocalAttachmentUrl(source = '', {
   return `${attachmentApiPath}?path=${encodeURIComponent(resolvedPath)}`;
 }
 
+function removeTokenAttr(token, name) {
+  const attributeIndex = token.attrIndex(name);
+  if (attributeIndex >= 0) {
+    token.attrs.splice(attributeIndex, 1);
+  }
+}
+
 function renderInlineWikiText(content, {
   baseEmbedCounts,
   drawioEmbedCounts,
@@ -247,6 +344,7 @@ function renderInlineWikiText(content, {
   mermaidEmbedCounts,
   plantUmlEmbedCounts,
   sourceFilePath = '',
+  wikiLinkAutoCreate = true,
 }) {
   const regex = /!\[\[([^\]|#]+\.(?:base|excalidraw|drawio|mmd|mermaid|puml|plantuml))(?:#([^\]|]+))?(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
   let lastIndex = 0;
@@ -311,7 +409,11 @@ function renderInlineWikiText(content, {
       const display = (match[5] || match[4]).trim();
       const resolved = resolveWikiTarget(target, fileList);
       const classes = resolved ? 'wiki-link' : 'wiki-link wiki-link-new';
-      const title = resolved ? normalizePreviewTypography(display) : `Create "${target}"`;
+      const title = resolved
+        ? normalizePreviewTypography(display)
+        : wikiLinkAutoCreate
+          ? `Create "${target}"`
+          : `Missing "${target}"`;
       html += `<a class="${classes}" href="#" data-wiki-target="${escapeHtml(target)}" title="${escapeHtml(title)}">${escapePreviewText(display)}</a>`;
     }
 
@@ -328,6 +430,7 @@ function renderInlineWikiText(content, {
 function createMarkdownRenderer(fileList = [], {
   attachmentApiPath = '/api/attachment',
   sourceFilePath = '',
+  wikiLinkAutoCreate = true,
 } = {}) {
   const markdown = markdownIt({
     highlight(source, language) {
@@ -367,6 +470,10 @@ function createMarkdownRenderer(fileList = [], {
     });
   });
 
+  markdown.core.ruler.push('collabmd-heading-anchors', (state) => {
+    assignHeadingIds(state);
+  });
+
   const drawioEmbedCounts = new Map();
   const excalidrawEmbedCounts = new Map();
   const baseCounts = new Map();
@@ -461,6 +568,7 @@ function createMarkdownRenderer(fileList = [], {
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
         sourceFilePath,
+        wikiLinkAutoCreate,
       })}`;
     }
 
@@ -473,6 +581,7 @@ function createMarkdownRenderer(fileList = [], {
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
         sourceFilePath,
+        wikiLinkAutoCreate,
       })}`;
     }
 
@@ -484,10 +593,18 @@ function createMarkdownRenderer(fileList = [], {
       mermaidEmbedCounts,
       plantUmlEmbedCounts,
       sourceFilePath,
+      wikiLinkAutoCreate,
     });
   };
 
   markdown.renderer.rules.link_open = (tokens, index, options, env, self) => {
+    const href = tokens[index].attrGet('href') || '';
+    if (href.startsWith('#')) {
+      removeTokenAttr(tokens[index], 'target');
+      removeTokenAttr(tokens[index], 'rel');
+      return renderToken(fallbackLinkOpen, tokens, index, options, env, self);
+    }
+
     tokens[index].attrSet('target', '_blank');
     tokens[index].attrSet('rel', 'noopener noreferrer');
     return renderToken(fallbackLinkOpen, tokens, index, options, env, self);
@@ -529,12 +646,14 @@ export function compilePreviewDocument({
   frontmatterInteractive = false,
   markdownText = '',
   sourceFilePath = '',
+  wikiLinkAutoCreate = true,
 } = {}) {
   const normalizedMarkdown = String(markdownText);
   const frontmatter = extractYamlFrontmatter(normalizedMarkdown);
   const renderer = createMarkdownRenderer(fileList, {
     attachmentApiPath,
     sourceFilePath,
+    wikiLinkAutoCreate,
   });
   const renderedMarkdown = frontmatter ? frontmatter.bodyMarkdown : normalizedMarkdown;
   const frontmatterHtml = renderFrontmatterBlock(frontmatter, {

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

@@ -16,6 +16,7 @@ export class PreviewRenderExecutor {
     createWorkerFn = createPreviewWorker,
     getFileList,
     getSourceFilePath = null,
+    getWikiLinkAutoCreate = null,
     idleTimeoutMs = IDLE_RENDER_TIMEOUT_MS,
     requestIdleRenderFn = requestIdleRender,
   } = {}) {
@@ -25,6 +26,7 @@ export class PreviewRenderExecutor {
     this.createWorkerFn = createWorkerFn;
     this.getFileList = getFileList;
     this.getSourceFilePath = getSourceFilePath;
+    this.getWikiLinkAutoCreate = getWikiLinkAutoCreate;
     this.idleTimeoutMs = idleTimeoutMs;
     this.requestIdleRenderFn = requestIdleRenderFn;
     this.worker = null;
@@ -119,6 +121,7 @@ export class PreviewRenderExecutor {
           markdownText,
           renderVersion,
           sourceFilePath: this.getSourceFilePath?.() ?? '',
+          wikiLinkAutoCreate: this.getWikiLinkAutoCreate?.() ?? true,
         });
       });
     }
@@ -131,6 +134,7 @@ export class PreviewRenderExecutor {
       frontmatterInteractive,
       markdownText,
       sourceFilePath: this.getSourceFilePath?.() ?? '',
+      wikiLinkAutoCreate: this.getWikiLinkAutoCreate?.() ?? true,
     });
   }
 

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

@@ -9,6 +9,7 @@ self.onmessage = (event) => {
     markdownText,
     renderVersion,
     sourceFilePath,
+    wikiLinkAutoCreate,
   } = event.data ?? {};
 
   try {
@@ -19,6 +20,7 @@ self.onmessage = (event) => {
       frontmatterInteractive,
       markdownText,
       sourceFilePath,
+      wikiLinkAutoCreate,
     });
     self.postMessage({
       html: result.html,

package/src/client/application/preview-renderer.js

@@ -10,8 +10,9 @@ export class PreviewRenderer {
   constructor({
     getContent,
     getFileList,
-    loadFileSource = null,
     getSourceFilePath,
+    getWikiLinkAutoCreate = null,
+    loadFileSource = null,
     onAfterRenderCommit,
     onBeforeRenderCommit,
     onPreviewLayoutChange,
@@ -24,8 +25,9 @@ export class PreviewRenderer {
   }) {
     this.getContent = getContent;
     this.getFileList = getFileList;
-    this.loadFileSource = loadFileSource;
     this.getSourceFilePath = getSourceFilePath;
+    this.getWikiLinkAutoCreate = getWikiLinkAutoCreate;
+    this.loadFileSource = loadFileSource;
     this.onAfterRenderCommit = onAfterRenderCommit;
     this.onBeforeRenderCommit = onBeforeRenderCommit;
     this.onPreviewLayoutChange = onPreviewLayoutChange;
@@ -96,6 +98,7 @@ export class PreviewRenderer {
       attachmentApiPath: resolveApiUrl('/attachment'),
       getFileList: () => this.getFileList?.() ?? [],
       getSourceFilePath: () => this.getSourceFilePath?.() ?? '',
+      getWikiLinkAutoCreate: () => this.getWikiLinkAutoCreate?.() ?? true,
       idleTimeoutMs: IDLE_RENDER_TIMEOUT_MS,
     });
 

package/src/client/application/wiki-link-file-controller.js

@@ -8,12 +8,14 @@ export class WikiLinkFileController {
     refreshExplorer,
     toastController,
     vaultApiClient,
+    wikiLinkAutoCreate = true,
   }) {
     this.getFileList = getFileList;
     this.navigation = navigation;
     this.refreshExplorer = refreshExplorer;
     this.toastController = toastController;
     this.vaultApiClient = vaultApiClient;
+    this.wikiLinkAutoCreate = wikiLinkAutoCreate;
   }
 
   handleWikiLinkClick(target) {
@@ -24,6 +26,11 @@ export class WikiLinkFileController {
       return;
     }
 
+    if (!this.wikiLinkAutoCreate) {
+      this.toastController.show('Wiki-link target does not exist');
+      return;
+    }
+
     const normalizedPath = this.normalizeNewWikiFilePath(target);
     if (!normalizedPath) {
       this.toastController.show('Cannot create an empty wiki-link target');

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

@@ -19,6 +19,7 @@ export class WorkspaceRouteController {
     previewRenderer,
     renderAvatars,
     renderPresence,
+    requestPreviewRouteAnchor = null,
     resetPreviewMode,
     scrollSyncController,
     setSession,
@@ -55,6 +56,7 @@ export class WorkspaceRouteController {
     this.previewRenderer = previewRenderer;
     this.renderAvatars = renderAvatars;
     this.renderPresence = renderPresence;
+    this.requestPreviewRouteAnchor = requestPreviewRouteAnchor;
     this.resetPreviewMode = resetPreviewMode;
     this.scrollSyncController = scrollSyncController;
     this.setSession = setSession;
@@ -81,6 +83,7 @@ export class WorkspaceRouteController {
 
     const route = this.navigation.getHashRoute();
     if (route.type === 'empty') {
+      this.requestPreviewRouteAnchor?.(null);
       this.gitPanel.setSelection();
       this.showEmptyState();
       this.syncMainChrome({ mode: 'empty', title: 'CollabMD' });
@@ -88,30 +91,35 @@ export class WorkspaceRouteController {
     }
 
     if (route.type === 'git-diff') {
+      this.requestPreviewRouteAnchor?.(null);
       this.setSidebarTab('git');
       await this.showGitDiff(route);
       return;
     }
 
     if (route.type === 'git-file-history') {
+      this.requestPreviewRouteAnchor?.(null);
       this.setSidebarTab('files');
       await this.showGitFileHistory(route);
       return;
     }
 
     if (route.type === 'git-file-preview') {
+      this.requestPreviewRouteAnchor?.(null);
       this.setSidebarTab('files');
       await this.showGitFilePreview(route);
       return;
     }
 
     if (route.type === 'git-history') {
+      this.requestPreviewRouteAnchor?.(null);
       this.setSidebarTab('git');
       await this.showGitHistory();
       return;
     }
 
     if (route.type === 'git-commit') {
+      this.requestPreviewRouteAnchor?.(null);
       this.setSidebarTab('git');
       await this.showGitCommit(route);
       return;
@@ -119,6 +127,7 @@ export class WorkspaceRouteController {
 
     this.setSidebarTab('files');
     await this.openFile(route.filePath, { drawioMode: route.drawioMode || null });
+    this.requestPreviewRouteAnchor?.(route.anchor ?? null, route.filePath);
   }
 
   showEmptyState() {