collabmd 0.1.36 → 0.1.38

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

@@ -116,6 +116,9 @@ export class CollabMdAppShell {
   bindEvents(...args) { return uiFeature.bindEvents.apply(this, args); }
   clearInitialFileBootstrap(...args) { return uiFeature.clearInitialFileBootstrap.apply(this, args); }
   closeToolbarOverflowMenu(...args) { return uiFeature.closeToolbarOverflowMenu.apply(this, args); }
+  applyPendingPreviewRouteAnchor(...args) { return uiFeature.applyPendingPreviewRouteAnchor.apply(this, args); }
+  copyPreviewHeadingLink(...args) { return uiFeature.copyPreviewHeadingLink.apply(this, args); }
+  createPreviewHeadingLinkUrl(...args) { return uiFeature.createPreviewHeadingLinkUrl.apply(this, args); }
   getStoredLineWrapping(...args) { return uiFeature.getStoredLineWrapping.apply(this, args); }
   handleConnectionChange(...args) { return uiFeature.handleConnectionChange.apply(this, args); }
   handleDocumentKeydown(...args) { return uiFeature.handleDocumentKeydown.apply(this, args); }
@@ -126,11 +129,14 @@ export class CollabMdAppShell {
   initialize(...args) { return uiFeature.initialize.apply(this, args); }
   initializeVisualViewportBinding(...args) { return uiFeature.initializeVisualViewportBinding.apply(this, args); }
   initializeVersionMonitoring(...args) { return uiFeature.initializeVersionMonitoring.apply(this, args); }
+  navigatePreviewHeading(...args) { return uiFeature.navigatePreviewHeading.apply(this, args); }
   promptForVersionReload(...args) { return uiFeature.promptForVersionReload.apply(this, args); }
+  requestPreviewRouteAnchor(...args) { return uiFeature.requestPreviewRouteAnchor.apply(this, args); }
   scheduleBacklinkRefresh(...args) { return uiFeature.scheduleBacklinkRefresh.apply(this, args); }
   setToolbarOverflowOpen(...args) { return uiFeature.setToolbarOverflowOpen.apply(this, args); }
   showEditorLoadError(...args) { return uiFeature.showEditorLoadError.apply(this, args); }
   showEditorLoading(...args) { return uiFeature.showEditorLoading.apply(this, args); }
+  syncPreviewHeadingLinkButtons(...args) { return uiFeature.syncPreviewHeadingLinkButtons.apply(this, args); }
   syncVisualViewportBounds(...args) { return uiFeature.syncVisualViewportBounds.apply(this, args); }
   syncToolbarOverflowVisibility(...args) { return uiFeature.syncToolbarOverflowVisibility.apply(this, args); }
   syncWrapToggle(...args) { return uiFeature.syncWrapToggle.apply(this, args); }
@@ -331,6 +337,7 @@ export class CollabMdAppShell {
     this.previewRenderer = new PreviewRenderer({
       getContent: () => this.getPreviewSource(),
       getFileList: () => this.fileExplorer.flatDocumentFiles,
+      getWikiLinkAutoCreate: () => this.runtimeConfig.wikiLinkAutoCreate !== false,
       loadFileSource: async (filePath) => {
         const payload = await this.vaultApiClient.readFile(filePath);
         return String(payload?.content ?? '');
@@ -349,6 +356,8 @@ export class CollabMdAppShell {
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
         this.excalidrawEmbed.syncLayout();
         this.scrollSyncController.setLargeDocumentMode(stats.isLargeDocument);
+        this.syncPreviewHeadingLinkButtons();
+        this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: true });
         this.schedulePreviewLayoutSync({ delayMs: 0 });
         this.refreshCommentUiLayout();
       },
@@ -359,6 +368,7 @@ export class CollabMdAppShell {
       },
       onPreviewLayoutChange: () => {
         this.scrollSyncController.invalidatePreviewBlocks();
+        this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: false });
         this.schedulePreviewLayoutSync({ delayMs: 0 });
         this.refreshCommentUiLayout();
       },
@@ -366,6 +376,7 @@ export class CollabMdAppShell {
         this.videoEmbed.syncLayout();
         this.drawioEmbed.syncLayout();
         this.excalidrawEmbed.syncLayout();
+        this.applyPendingPreviewRouteAnchor({ allowExpired: true, behavior: 'auto', clearMissing: true });
         this.schedulePreviewLayoutSync({ delayMs: 0 });
         this.refreshCommentUiLayout();
       },
@@ -464,6 +475,7 @@ export class CollabMdAppShell {
       refreshExplorer: () => this.fileExplorer.refresh(),
       toastController: this.toastController,
       vaultApiClient: this.vaultApiClient,
+      wikiLinkAutoCreate: this.runtimeConfig.wikiLinkAutoCreate !== false,
     });
     this.gitDiffView = new GitDiffViewController({
       gitApiClient: this.gitApiClient,
@@ -635,6 +647,7 @@ export class CollabMdAppShell {
       lobby: this.lobby,
       navigation: this.navigation,
       previewRenderer: this.previewRenderer,
+      requestPreviewRouteAnchor: (anchorId, filePath) => this.requestPreviewRouteAnchor(anchorId, filePath),
       renderAvatars: () => this.renderAvatars(),
       renderPresence: () => this.renderPresence(),
       resetPreviewMode: () => this.resetPreviewMode(),

package/src/client/domain/hash-routes.js

@@ -0,0 +1,49 @@
+export const HASH_ROUTE_KEYS = Object.freeze({
+  authError: 'auth_error',
+  authPassword: 'auth_password',
+  file: 'file',
+  gitCommit: 'git-commit',
+  gitDiff: 'git-diff',
+  gitFileHistory: 'git-file-history',
+  gitFilePreview: 'git-file-preview',
+  gitHistory: 'git-history',
+});
+
+export function getHashParamsFromRaw(hash = '') {
+  const rawHash = String(hash ?? '');
+  const normalizedHash = rawHash.startsWith('#')
+    ? rawHash.slice(1)
+    : rawHash;
+  return new URLSearchParams(normalizedHash);
+}
+
+function getNormalizedHash(hash = '') {
+  const rawHash = String(hash ?? '');
+  return rawHash.startsWith('#')
+    ? rawHash.slice(1)
+    : rawHash;
+}
+
+export function isCollabMdHashRoute(hash = '') {
+  const normalizedHash = getNormalizedHash(hash).trim();
+  if (!normalizedHash.includes('=')) {
+    return false;
+  }
+
+  const params = getHashParamsFromRaw(hash);
+  return Object.values(HASH_ROUTE_KEYS).some((key) => params.has(key));
+}
+
+export function createFileRouteHash(filePath, { drawioMode = null, anchor = null } = {}) {
+  const params = new URLSearchParams();
+  if (filePath) {
+    params.set(HASH_ROUTE_KEYS.file, filePath);
+  }
+  if (drawioMode) {
+    params.set('drawio', drawioMode);
+  }
+  if (anchor) {
+    params.set('anchor', String(anchor).trim());
+  }
+  return params.toString();
+}

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

@@ -79,6 +79,7 @@ export function getClientRuntimeConfig() {
     environment: 'development',
     gitEnabled: true,
     publicWsBaseUrl: '',
+    wikiLinkAutoCreate: true,
     wsBasePath: '/ws',
     ...(window.__COLLABMD_CONFIG__ ?? {}),
   };

package/src/client/export/export-pipeline.js

@@ -26,6 +26,20 @@ const EXPORT_ASSET_MAX_BYTES = 10 * 1024 * 1024;
 const EXPORT_RENDER_SETTLE_TIMEOUT_MS = 10_000;
 const VIDEO_POSTER_CAPTURE_TIMEOUT_MS = 10_000;
 const VIDEO_POSTER_CAPTURE_SEEK_SECONDS = 1;
+const DOCX_COMPATIBLE_IMAGE_MIME_TYPES = new Set([
+  'image/jpeg',
+  'image/jpg',
+  'image/png',
+  'image/svg+xml',
+]);
+const DOCX_PNG_VARIANT_IMAGE_MIME_TYPES = new Set([
+  'image/gif',
+  'image/webp',
+]);
+const DOCX_IMAGE_TYPE_LABELS = new Map([
+  ['image/gif', 'GIF'],
+  ['image/webp', 'WebP'],
+]);
 
 let mermaidLoaderPromise = null;
 let assetCounter = 0;
@@ -49,6 +63,16 @@ function encodeSvgDataUrl(svgMarkup) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
 }
 
+function encodeSvgBase64DataUrl(svgMarkup) {
+  const bytes = new TextEncoder().encode(String(svgMarkup ?? ''));
+  const chunkSize = 0x8000;
+  let binary = '';
+  for (let index = 0; index < bytes.length; index += chunkSize) {
+    binary += String.fromCharCode(...bytes.subarray(index, index + chunkSize));
+  }
+  return `data:image/svg+xml;base64,${btoa(binary)}`;
+}
+
 function waitForAnimationFrame() {
   return new Promise((resolve) => requestAnimationFrame(() => resolve()));
 }
@@ -144,28 +168,40 @@ function normalizeExportSvgMarkup(svgMarkup, options = {}) {
 }
 
 async function svgMarkupToPngDataUrl(svgMarkup) {
-  const svgDataUrl = encodeSvgDataUrl(svgMarkup);
-  const image = await loadImage(svgDataUrl);
+  const svgBlobUrl = URL.createObjectURL(new Blob([svgMarkup], {
+    type: 'image/svg+xml;charset=utf-8',
+  }));
   const svgProbe = document.createElement('div');
   svgProbe.innerHTML = svgMarkup;
   const svgElement = svgProbe.querySelector('svg');
-  const { width, height } = svgElement ? resolveSvgDimensions(svgElement) : {
-    height: image.naturalHeight || 800,
-    width: image.naturalWidth || 1200,
-  };
 
-  const canvas = document.createElement('canvas');
-  canvas.width = Math.max(1, Math.ceil(width));
-  canvas.height = Math.max(1, Math.ceil(height));
-  const context = canvas.getContext('2d');
-  if (!context) {
-    throw new Error('Canvas is unavailable');
-  }
+  try {
+    let image;
+    try {
+      image = await loadImage(svgBlobUrl);
+    } catch {
+      image = await loadImage(encodeSvgBase64DataUrl(svgMarkup));
+    }
+    const { width, height } = svgElement ? resolveSvgDimensions(svgElement) : {
+      height: image.naturalHeight || 800,
+      width: image.naturalWidth || 1200,
+    };
 
-  context.fillStyle = '#ffffff';
-  context.fillRect(0, 0, canvas.width, canvas.height);
-  context.drawImage(image, 0, 0, canvas.width, canvas.height);
-  return canvas.toDataURL('image/png');
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.ceil(width));
+    canvas.height = Math.max(1, Math.ceil(height));
+    const context = canvas.getContext('2d');
+    if (!context) {
+      throw new Error('Canvas is unavailable');
+    }
+
+    context.fillStyle = '#ffffff';
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL('image/png');
+  } finally {
+    URL.revokeObjectURL(svgBlobUrl);
+  }
 }
 
 async function imageDataUrlToPngDataUrl(dataUrl) {
@@ -182,6 +218,33 @@ async function imageDataUrlToPngDataUrl(dataUrl) {
   return canvas.toDataURL('image/png');
 }
 
+function getDataUrlMimeType(dataUrl = '') {
+  const match = String(dataUrl ?? '').match(/^data:([^;,]+)/iu);
+  return match?.[1]?.toLowerCase() || '';
+}
+
+async function createDocxImageDataUrl(dataUrl, {
+  warnings = [],
+} = {}) {
+  const mimeType = getDataUrlMimeType(dataUrl);
+  if (DOCX_COMPATIBLE_IMAGE_MIME_TYPES.has(mimeType)) {
+    return dataUrl;
+  }
+
+  if (!DOCX_PNG_VARIANT_IMAGE_MIME_TYPES.has(mimeType)) {
+    return dataUrl;
+  }
+
+  const imageTypeLabel = DOCX_IMAGE_TYPE_LABELS.get(mimeType) || mimeType;
+  try {
+    return await imageDataUrlToPngDataUrl(dataUrl);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : `Failed to convert ${imageTypeLabel} image for DOCX`;
+    warnings.push(`Failed to convert ${imageTypeLabel} image for DOCX: ${message}`);
+    return dataUrl;
+  }
+}
+
 async function waitForImageElement(image, {
   timeoutMs = EXPORT_RENDER_SETTLE_TIMEOUT_MS,
 } = {}) {
@@ -781,7 +844,7 @@ async function resolveDiagramShell(snapshot, shell, { label, prefix, render }) {
 
   const svgMarkup = await render(source, target);
   const svgDataUrl = encodeSvgDataUrl(svgMarkup);
-  const pngDataUrl = await svgMarkupToPngDataUrl(svgMarkup);
+  const docxDataUrl = await svgMarkupToPngDataUrl(svgMarkup).catch(() => svgDataUrl);
   const assetId = registerAsset(snapshot, {
     dataUrl: svgDataUrl,
     id: createAssetId(prefix),
@@ -789,7 +852,7 @@ async function resolveDiagramShell(snapshot, shell, { label, prefix, render }) {
     mimeType: 'image/svg+xml',
     text: svgMarkup,
     variants: {
-      docx: pngDataUrl,
+      docx: docxDataUrl,
     },
   });
 
@@ -798,7 +861,7 @@ async function resolveDiagramShell(snapshot, shell, { label, prefix, render }) {
     assetId,
     className: `export-diagram--${prefix}`,
     dataUrl: svgDataUrl,
-    docxDataUrl: pngDataUrl,
+    docxDataUrl,
     svgMarkup,
   }));
 }
@@ -811,7 +874,7 @@ async function resolveExcalidrawEmbed(snapshot, placeholder) {
 
   const svgMarkup = await renderExcalidrawToSvgMarkup(target);
   const svgDataUrl = encodeSvgDataUrl(svgMarkup);
-  const pngDataUrl = await svgMarkupToPngDataUrl(svgMarkup);
+  const docxDataUrl = await svgMarkupToPngDataUrl(svgMarkup).catch(() => svgDataUrl);
   const assetId = registerAsset(snapshot, {
     dataUrl: svgDataUrl,
     id: createAssetId('excalidraw'),
@@ -819,7 +882,7 @@ async function resolveExcalidrawEmbed(snapshot, placeholder) {
     mimeType: 'image/svg+xml',
     text: svgMarkup,
     variants: {
-      docx: pngDataUrl,
+      docx: docxDataUrl,
     },
   });
 
@@ -828,7 +891,7 @@ async function resolveExcalidrawEmbed(snapshot, placeholder) {
     assetId,
     className: 'export-diagram--excalidraw',
     dataUrl: svgDataUrl,
-    docxDataUrl: pngDataUrl,
+    docxDataUrl,
     svgMarkup,
   }));
 }
@@ -860,22 +923,33 @@ async function resolveImageAssets(snapshot, container) {
   const imageNodes = Array.from(container.querySelectorAll('img'));
   for (const imageNode of imageNodes) {
     const src = imageNode.getAttribute('src') || '';
-    if (!src || src.startsWith('data:')) {
+    if (!src) {
+      continue;
+    }
+
+    if (src.startsWith('data:')) {
+      const docxDataUrl = await createDocxImageDataUrl(src, {
+        warnings: snapshot.warnings,
+      });
+      imageNode.setAttribute('data-export-docx-src', docxDataUrl);
       continue;
     }
 
     try {
       const imageUrl = new URL(src, window.location.href);
       const dataUrl = await fetchAsDataUrl(imageUrl.toString());
+      const docxDataUrl = await createDocxImageDataUrl(dataUrl, {
+        warnings: snapshot.warnings,
+      });
       const assetId = registerAsset(snapshot, {
         dataUrl,
         id: createAssetId('image'),
         kind: 'image',
-        mimeType: dataUrl.startsWith('data:image/svg+xml') ? 'image/svg+xml' : 'image/png',
+        mimeType: getDataUrlMimeType(dataUrl) || 'application/octet-stream',
       });
       imageNode.src = dataUrl;
       imageNode.setAttribute('data-export-asset-id', assetId);
-      imageNode.setAttribute('data-export-docx-src', dataUrl);
+      imageNode.setAttribute('data-export-docx-src', docxDataUrl);
     } catch (error) {
       const message = error instanceof Error ? error.message : `Failed to inline ${src}`;
       snapshot.warnings.push(message);

package/src/client/infrastructure/runtime-config.js

@@ -5,18 +5,22 @@ import {
   resolveAppUrl,
   resolveWsBaseUrl,
 } from '../domain/runtime-paths.js';
+import {
+  createFileRouteHash,
+  getHashParamsFromRaw,
+  HASH_ROUTE_KEYS,
+  isCollabMdHashRoute,
+} from '../domain/hash-routes.js';
 
 export function getRuntimeConfig() {
   return getClientRuntimeConfig();
 }
 
 export { resolveApiUrl, resolveAppPath, resolveAppUrl, resolveWsBaseUrl };
+export { createFileRouteHash, isCollabMdHashRoute };
 
 function getHashParams() {
-  const rawHash = window.location.hash.startsWith('#')
-    ? window.location.hash.slice(1)
-    : window.location.hash;
-  return new URLSearchParams(rawHash);
+  return getHashParamsFromRaw(window.location.hash);
 }
 
 function normalizeDiffScope(scope) {
@@ -30,8 +34,8 @@ function normalizeDiffScope(scope) {
 export function getHashRoute() {
   const params = getHashParams();
 
-  if (params.has('git-file-preview')) {
-    const historicalFilePath = params.get('git-file-preview') || null;
+  if (params.has(HASH_ROUTE_KEYS.gitFilePreview)) {
+    const historicalFilePath = params.get(HASH_ROUTE_KEYS.gitFilePreview) || null;
     return {
       currentFilePath: params.get('current') || historicalFilePath,
       filePath: historicalFilePath,
@@ -40,28 +44,28 @@ export function getHashRoute() {
     };
   }
 
-  if (params.has('git-file-history')) {
+  if (params.has(HASH_ROUTE_KEYS.gitFileHistory)) {
     return {
-      filePath: params.get('git-file-history') || null,
+      filePath: params.get(HASH_ROUTE_KEYS.gitFileHistory) || null,
       type: 'git-file-history',
     };
   }
 
-  if (params.has('git-history')) {
+  if (params.has(HASH_ROUTE_KEYS.gitHistory)) {
     return { type: 'git-history' };
   }
 
-  if (params.has('git-commit')) {
+  if (params.has(HASH_ROUTE_KEYS.gitCommit)) {
     return {
-      hash: params.get('git-commit') || null,
+      hash: params.get(HASH_ROUTE_KEYS.gitCommit) || null,
       historyFilePath: params.get('history') || null,
       path: params.get('path') || null,
       type: 'git-commit',
     };
   }
 
-  if (params.has('git-diff')) {
-    const filePath = params.get('git-diff') || null;
+  if (params.has(HASH_ROUTE_KEYS.gitDiff)) {
+    const filePath = params.get(HASH_ROUTE_KEYS.gitDiff) || null;
     return {
       filePath,
       scope: normalizeDiffScope(params.get('scope') || (filePath ? 'working-tree' : 'all')),
@@ -69,10 +73,11 @@ export function getHashRoute() {
     };
   }
 
-  if (params.has('file')) {
+  if (params.has(HASH_ROUTE_KEYS.file)) {
     return {
+      anchor: params.get('anchor') || null,
       drawioMode: params.get('drawio') || null,
-      filePath: params.get('file'),
+      filePath: params.get(HASH_ROUTE_KEYS.file),
       type: 'file',
     };
   }
@@ -80,15 +85,8 @@ export function getHashRoute() {
   return { type: 'empty' };
 }
 
-export function navigateToFile(filePath, { drawioMode = null } = {}) {
-  const params = new URLSearchParams();
-  if (filePath) {
-    params.set('file', filePath);
-  }
-  if (drawioMode) {
-    params.set('drawio', drawioMode);
-  }
-  window.location.hash = params.toString();
+export function navigateToFile(filePath, { drawioMode = null, anchor = null } = {}) {
+  window.location.hash = createFileRouteHash(filePath, { drawioMode, anchor });
 }
 
 export function navigateToGitDiff({ filePath = null, scope = 'all' } = {}) {

package/src/client/presentation/outline-controller.js

@@ -109,10 +109,7 @@ export class OutlineController {
     this.navigation.querySelectorAll('.outline-item').forEach((button) => {
       button.addEventListener('click', () => {
         const target = document.getElementById(button.dataset.target);
-        this.pinnedHeadingId = button.dataset.target;
-        this.notifyHeadingNavigation(target, button.dataset.target);
-        this.scrollHeadingIntoView(target, { behavior: 'auto' });
-        this.setActiveItem(button.dataset.target, { behavior: 'auto' });
+        this.navigateToHeading(target, button.dataset.target, { behavior: 'auto' });
 
         if (this.mobileBreakpointQuery.matches) {
           this.close();
@@ -123,7 +120,7 @@ export class OutlineController {
     this.observeHeadings(Array.from(headings));
   }
 
-  cleanup() {
+  cleanup({ preservePinnedHeading = false } = {}) {
     if (this.activeHeadingFrame) {
       cancelAnimationFrame(this.activeHeadingFrame);
       this.activeHeadingFrame = null;
@@ -131,7 +128,9 @@ export class OutlineController {
 
     this.previewContainer?.removeEventListener('scroll', this.handlePreviewScroll);
     this.headings = [];
-    this.pinnedHeadingId = null;
+    if (!preservePinnedHeading) {
+      this.pinnedHeadingId = null;
+    }
   }
 
   setActiveItem(id, { scrollIntoView = true, behavior = 'smooth' } = {}) {
@@ -150,7 +149,7 @@ export class OutlineController {
   }
 
   observeHeadings(headings) {
-    this.cleanup();
+    this.cleanup({ preservePinnedHeading: true });
 
     if (!this.previewContainer || headings.length === 0) {
       return;
@@ -158,6 +157,16 @@ export class OutlineController {
 
     this.headings = headings;
     this.previewContainer.addEventListener('scroll', this.handlePreviewScroll, { passive: true });
+
+    const pinnedHeading = this.getPinnedHeading();
+    if (pinnedHeading) {
+      this.setActiveItem(pinnedHeading.id, {
+        behavior: 'auto',
+        scrollIntoView: true,
+      });
+      return;
+    }
+
     this.updateActiveHeading();
   }
 
@@ -247,6 +256,18 @@ export class OutlineController {
     });
   }
 
+  navigateToHeading(target, headingId, { behavior = 'auto' } = {}) {
+    if (!target || !headingId) {
+      return false;
+    }
+
+    this.pinnedHeadingId = headingId;
+    this.notifyHeadingNavigation(target, headingId);
+    this.scrollHeadingIntoView(target, { behavior });
+    this.setActiveItem(headingId, { behavior });
+    return true;
+  }
+
   scrollHeadingIntoView(target, { behavior = 'smooth' } = {}) {
     if (!target || !this.previewContainer) {
       return;

package/src/client/styles/features/preview-markdown.css

@@ -52,6 +52,57 @@
   font-weight: 600;
 }
 
+.preview-content .preview-heading-link-button {
+  display: inline-flex;
+  width: 1.18em;
+  min-width: 1.18em;
+  height: 1.18em;
+  margin-inline-start: 0.28em;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: color-mix(in oklab, var(--color-text-muted) 78%, transparent);
+  transform: translateY(-0.04em);
+  transition:
+    transform var(--transition-interactive),
+    background var(--transition-interactive),
+    box-shadow var(--transition-interactive),
+    color var(--transition-interactive),
+    opacity var(--transition-interactive);
+  vertical-align: middle;
+  opacity: 0;
+}
+
+.preview-content .preview-heading-link-button > svg {
+  width: 0.74em;
+  height: 0.74em;
+  stroke-width: 2;
+}
+
+.preview-content .preview-heading-link-button:hover {
+  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+  box-shadow: var(--shadow-accent-outline);
+  color: var(--color-primary);
+  transform: translateY(-0.04em) scale(1.04);
+}
+
+.preview-content h1:hover .preview-heading-link-button,
+.preview-content h2:hover .preview-heading-link-button,
+.preview-content h3:hover .preview-heading-link-button,
+.preview-content h4:hover .preview-heading-link-button,
+.preview-content h5:hover .preview-heading-link-button,
+.preview-content h6:hover .preview-heading-link-button,
+.preview-content .preview-heading-link-button:focus-visible {
+  opacity: 1;
+}
+
+.preview-content .preview-heading-link-button:focus-visible {
+  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
+  box-shadow: var(--shadow-focus-compact);
+  color: var(--color-primary);
+  outline: 0;
+}
+
 .preview-content p {
   max-width: 72ch;
   margin-bottom: var(--space-4);

package/src/server/config/env.js

@@ -334,6 +334,7 @@ export function loadConfig(overrides = {}) {
     vaultDir,
     publicWsBaseUrl: process.env.PUBLIC_WS_BASE_URL || '',
     testWsRoomHydrateDelayMs: parsePositiveInt(process.env.TEST_WS_ROOM_HYDRATE_DELAY_MS, 0),
+    wikiLinkAutoCreate: process.env.COLLABMD_WIKI_LINK_AUTO_CREATE !== 'false',
     wsHeartbeatIntervalMs: parsePositiveInt(process.env.WS_HEARTBEAT_INTERVAL_MS, 30_000),
     wsRoomIdleGraceMs: parsePositiveInt(process.env.WS_ROOM_IDLE_GRACE_MS, 60_000),
     wsBasePath: normalizeWsBasePath(process.env.WS_BASE_PATH || '/ws'),

package/src/server/infrastructure/http/create-static-handler.js

@@ -51,6 +51,7 @@ function buildRuntimeConfig({
   gitEnabled,
   nodeEnv,
   publicWsBaseUrl,
+  wikiLinkAutoCreate,
   wsBasePath,
 }) {
   return `window.__COLLABMD_CONFIG__ = ${JSON.stringify({
@@ -61,6 +62,7 @@ function buildRuntimeConfig({
     environment: nodeEnv,
     gitEnabled,
     publicWsBaseUrl,
+    wikiLinkAutoCreate,
     wsBasePath,
   })};\n`;
 }