Nothing to preview yet...
';
// Performance: Return cached HTML if content hasn't changed
if (this.noteContent === this._lastRenderedContent &&
this.currentNote === this._lastRenderedNote &&
this._cachedRenderedHTML) {
return this._cachedRenderedHTML;
}
// Strip YAML frontmatter from content before rendering
let contentToRender = this.noteContent;
if (contentToRender.trim().startsWith('---')) {
const lines = contentToRender.split('\n');
if (lines[0].trim() === '---') {
// Find closing ---
let endIdx = -1;
for (let i = 1; i < lines.length; i++) {
if (lines[i].trim() === '---') {
endIdx = i;
break;
}
}
if (endIdx !== -1) {
// Remove frontmatter (including the closing ---) and any empty lines after it
contentToRender = lines.slice(endIdx + 1).join('\n').trim();
}
}
}
// Convert Obsidian-style wikilinks: [[note]] or [[note|display text]]
// Must be done before marked.parse() to avoid conflicts with markdown syntax
// BUT we need to protect code blocks first to avoid converting [[text]] inside code
const self = this; // Reference for closure
// Step 0: GFM/GLFM callouts. Runs BEFORE code-block extraction so
// fences nested in a callout blockquote lose their `> ` prefix on
// the closer — otherwise CommonMark won't see a valid fence closer
// once restored inside and the block
// runs unclosed. Fence-aware so `> [!TIP]` literal inside a
// top-level code block is not misread as a callout.
{
const CALLOUT_RE = /^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*(.*)$/i;
const CALLOUT_ICONS = { note: 'ℹ️', tip: '💡', important: '❗', warning: '⚠️', caution: '🛑' };
const CALLOUT_TITLES = { note: 'Note', tip: 'Tip', important: 'Important', warning: 'Warning', caution: 'Caution' };
// Fence opener at 0-3 spaces indent (CommonMark). Captured
// group holds the fence chars so the closer must match char + length.
const FENCE_OPEN_RE = /^\s{0,3}(`{3,}|~{3,})/;
const escapeAttr = (s) => s.replace(/&/g, '&').replace(//g, '>');
const srcLines = contentToRender.split('\n');
const outLines = [];
let li = 0;
let fenceChar = null; // '`' or '~' when inside a top-level fence
let fenceLen = 0;
while (li < srcLines.length) {
const line = srcLines[li];
// Inside a top-level fence: pass through opaquely.
if (fenceChar) {
outLines.push(line);
const closeRe = new RegExp('^\\s{0,3}' + (fenceChar === '`' ? '`' : '~') + '{' + fenceLen + ',}\\s*$');
if (closeRe.test(line)) { fenceChar = null; fenceLen = 0; }
li++;
continue;
}
const fenceOpen = line.match(FENCE_OPEN_RE);
if (fenceOpen) {
fenceChar = fenceOpen[1][0];
fenceLen = fenceOpen[1].length;
outLines.push(line);
li++;
continue;
}
const m = line.match(CALLOUT_RE);
if (!m) {
outLines.push(line);
li++;
continue;
}
const type = m[1].toLowerCase();
const title = escapeAttr((m[2] || '').trim() || CALLOUT_TITLES[type]);
const icon = CALLOUT_ICONS[type];
const bodyLines = [];
li++;
// Fence lines inside the callout also start with `>`, so
// they get absorbed and stripped, leaving a clean fence.
while (li < srcLines.length && srcLines[li].startsWith('>')) {
bodyLines.push(srcLines[li].replace(/^>\s?/, ''));
li++;
}
outLines.push(
'',
`
`,
`
${icon}${title}
`,
`
`,
'',
bodyLines.join('\n'),
'',
`
`,
`
`,
''
);
}
contentToRender = outLines.join('\n');
}
// Step 1: Temporarily replace code blocks and inline code with placeholders
const codeBlocks = [];
// Protect fenced code blocks (```...```)
contentToRender = contentToRender.replace(/```[\s\S]*?```/g, (match) => {
codeBlocks.push(match);
return `\x00CODEBLOCK${codeBlocks.length - 1}\x00`;
});
// Protect inline code (`...`)
contentToRender = contentToRender.replace(/`[^`]+`/g, (match) => {
codeBlocks.push(match);
return `\x00CODEBLOCK${codeBlocks.length - 1}\x00`;
});
// Step 2: Convert media wikilinks FIRST: ![[file.png]] or ![[file.png|alt text]]
// Must be before note wikilinks to prevent [[file.png]] from being matched first
contentToRender = contentToRender.replace(
/!\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/g,
(match, mediaName, altText) => {
const filename = mediaName.trim();
const alt = altText ? altText.trim() : filename.replace(/\.[^/.]+$/, '');
// Resolve media path using O(1) lookup
const mediaPath = self.resolveMediaWikilink(filename);
if (mediaPath) {
// URL-encode path segments for the API
const encodedPath = mediaPath.split('/').map(segment => {
try {
return encodeURIComponent(decodeURIComponent(segment));
} catch (e) {
return encodeURIComponent(segment);
}
}).join('/');
const safeAlt = alt.replace(/"/g, '"');
const mediaSrc = `/api/media/${encodedPath}`;
const mediaType = self.getMediaType(filename);
// Return appropriate HTML based on media type
switch (mediaType) {
case 'audio':
return `
`;
case 'video':
return `
`;
case 'document':
// DOMPurify strips
`;
img.replaceWith(wrapper);
return;
}
} else if (isExternal && mediaType === 'document') {
// External PDFs: styled link (opens in new tab)
const link = document.createElement('a');
link.href = src;
link.target = '_blank';
link.rel = 'noopener noreferrer';
link.className = 'pdf-link';
link.title = `Open ${safeAlt}`;
link.innerHTML = `
📄 ${safeAlt}Opens in new tab`;
img.replaceWith(link);
return;
}
// External audio/video: leave as broken image for security
}
// For regular images, set title attribute
const altText = img.getAttribute('alt');
if (altText) {
img.setAttribute('title', altText);
}
});
// Upgrade PDF sentinels emitted by the wiki-embed pre-processor.
// Must run AFTER DOMPurify because iframes are stripped by the sanitizer.
tempDiv.querySelectorAll('span.md-pdf-embed').forEach(span => {
const src = span.dataset.src || '';
const alt = span.dataset.alt || '';
if (!src) return;
const safeAlt = alt.replace(/"/g, '"');
const wrapper = document.createElement('div');
wrapper.className = 'media-embed media-pdf';
wrapper.innerHTML = `
`;
span.replaceWith(wrapper);
});
html = tempDiv.innerHTML;
// Debounced MathJax rendering (avoid re-running on every keystroke)
if (this._mathDebounceTimeout) clearTimeout(this._mathDebounceTimeout);
this._mathDebounceTimeout = setTimeout(() => this.typesetMath(), 300);
// Debounced Mermaid rendering
if (this._mermaidDebounceTimeout) clearTimeout(this._mermaidDebounceTimeout);
this._mermaidDebounceTimeout = setTimeout(() => this.renderMermaid(), 300);
// Apply syntax highlighting and add copy buttons to code blocks
setTimeout(() => {
// Use cached reference if available, otherwise query
const previewEl = this._domCache.previewContent || document.querySelector('.markdown-preview');
if (previewEl) {
// Exclude code blocks that are rendered by other tools (e.g., Mermaid diagrams)
// Note: MathJax uses $$...$$ delimiters (not code blocks) so no exclusion needed
previewEl.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => {
// Apply syntax highlighting
if (!block.classList.contains('hljs')) {
hljs.highlightElement(block);
}
// Add copy button if not already present
const pre = block.parentElement;
if (pre && !pre.querySelector('.copy-code-button')) {
this.addCopyButtonToCodeBlock(pre);
}
});
// Enable video metadata loading (for first frame preview)
// Track by source URL to prevent duplicate requests on re-renders
if (!this._initializedVideoSources) this._initializedVideoSources = new Set();
previewEl.querySelectorAll('video[preload="none"]').forEach((video) => {
const src = video.getAttribute('src');
if (src && !this._initializedVideoSources.has(src)) {
this._initializedVideoSources.add(src);
video.preload = 'metadata';
}
});
}
}, 0);
// Cache the result for performance
this._lastRenderedContent = this.noteContent;
this._lastRenderedNote = this.currentNote;
this._cachedRenderedHTML = html;
return html;
},
// Refresh DOM element cache
refreshDOMCache() {
this._domCache.editor = document.querySelector('.editor-textarea');
this._domCache.previewContent = document.querySelector('.markdown-preview');
this._domCache.previewContainer = this._domCache.previewContent ? this._domCache.previewContent.parentElement : null;
},
// Add copy button to code block
addCopyButtonToCodeBlock(preElement) {
// Extract language from code element class (e.g., "language-toml" -> "TOML")
const codeElement = preElement.querySelector('code');
let language = '';
if (codeElement && codeElement.className) {
const match = codeElement.className.match(/language-(\w+)/);
if (match) {
const langMap = {
'js': 'JavaScript', 'ts': 'TypeScript', 'py': 'Python',
'rb': 'Ruby', 'cs': 'C#', 'cpp': 'C++', 'sh': 'Shell',
'bash': 'Bash', 'zsh': 'Zsh', 'yml': 'YAML', 'md': 'Markdown'
};
const rawLang = match[1].toLowerCase();
language = langMap[rawLang] || match[1].toUpperCase();
}
}
// Create copy button with language label
const button = document.createElement('button');
button.className = 'copy-code-button';
const displayText = language || this.t('common.copy_to_clipboard').split(' ')[0]; // Use first word as fallback
button.innerHTML = `
${displayText}`;
button.dataset.originalText = displayText; // Store for restore after copy
button.title = this.t('common.copy_to_clipboard');
// Style the button
button.style.position = 'absolute';
button.style.top = '8px';
button.style.right = '8px';
button.style.padding = '4px 10px';
button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
button.style.border = 'none';
button.style.borderRadius = '4px';
button.style.cursor = 'pointer';
button.style.opacity = '0';
button.style.transition = 'opacity 0.2s, background-color 0.2s';
button.style.color = 'white';
button.style.display = 'flex';
button.style.alignItems = 'center';
button.style.justifyContent = 'center';
button.style.zIndex = '10';
button.style.fontSize = '11px';
button.style.fontWeight = '600';
button.style.fontFamily = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';
button.style.textTransform = 'uppercase';
button.style.letterSpacing = '0.5px';
// Style the pre element to be relative
preElement.style.position = 'relative';
// Show button on hover
preElement.addEventListener('mouseenter', () => {
button.style.opacity = '1';
});
preElement.addEventListener('mouseleave', () => {
button.style.opacity = '0';
});
// Copy to clipboard on click
button.addEventListener('click', async (e) => {
e.preventDefault();
e.stopPropagation();
const codeElement = preElement.querySelector('code');
if (!codeElement) return;
const code = codeElement.textContent;
const originalText = button.dataset.originalText;
const copiedText = this.t('common.copied');
const copyTitle = this.t('common.copy_to_clipboard');
try {
await navigator.clipboard.writeText(code);
// Visual feedback - show localized "Copied!"
button.innerHTML = `
${copiedText}`;
button.style.backgroundColor = 'rgba(34, 197, 94, 0.8)';
button.title = copiedText;
// Reset after 2 seconds
setTimeout(() => {
button.innerHTML = `
${originalText}`;
button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
button.title = copyTitle;
}, 2000);
} catch (err) {
console.error('Failed to copy code:', err);
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = code;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand('copy');
button.innerHTML = `
${copiedText}`;
button.style.backgroundColor = 'rgba(34, 197, 94, 0.8)';
setTimeout(() => {
button.innerHTML = `
${originalText}`;
button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
}, 2000);
} catch (fallbackErr) {
console.error('Fallback copy failed:', fallbackErr);
}
document.body.removeChild(textArea);
}
});
// Add button to pre element
preElement.appendChild(button);
},
// Setup scroll synchronization
setupScrollSync() {
// Use cached references (refresh if not available)
if (!this._domCache.editor || !this._domCache.previewContainer) {
this.refreshDOMCache();
}
const editor = this._domCache.editor;
const preview = this._domCache.previewContainer;
if (!editor || !preview) {
// If elements don't exist yet, retry with limit
if (!this._setupScrollSyncRetries) this._setupScrollSyncRetries = 0;
if (this._setupScrollSyncRetries < CONFIG.SCROLL_SYNC_MAX_RETRIES) {
this._setupScrollSyncRetries++;
setTimeout(() => this.setupScrollSync(), CONFIG.SCROLL_SYNC_RETRY_INTERVAL);
} else {
console.warn(`setupScrollSync: Failed to find editor/preview elements after ${CONFIG.SCROLL_SYNC_MAX_RETRIES} retries`);
}
return;
}
// Reset retry counter on success
this._setupScrollSyncRetries = 0;
// Remove old listeners if they exist
if (this._editorScrollHandler) {
editor.removeEventListener('scroll', this._editorScrollHandler);
}
if (this._previewScrollHandler) {
preview.removeEventListener('scroll', this._previewScrollHandler);
}
// Create new scroll handlers
this._editorScrollHandler = () => {
if (this.isScrolling) {
this.isScrolling = false;
return;
}
const scrollableHeight = editor.scrollHeight - editor.clientHeight;
if (scrollableHeight <= 0) return; // No scrolling needed
const scrollPercentage = editor.scrollTop / scrollableHeight;
const previewScrollableHeight = preview.scrollHeight - preview.clientHeight;
// Remember the user-driven scroll position as a percentage so it restores
// correctly across view modes (edit / split / preview) where editor and
// preview have wildly different scrollHeights. Saving after the isScrolling
// guard means we only record real user input, never the programmatic mirror.
if (this.currentNote) {
this.noteScrollPositions[this.currentNote] = scrollPercentage;
}
if (previewScrollableHeight > 0) {
this.isScrolling = true;
preview.scrollTop = scrollPercentage * previewScrollableHeight;
}
};
this._previewScrollHandler = () => {
if (this.isScrolling) {
this.isScrolling = false;
return;
}
const scrollableHeight = preview.scrollHeight - preview.clientHeight;
if (scrollableHeight <= 0) return; // No scrolling needed
const scrollPercentage = preview.scrollTop / scrollableHeight;
const editorScrollableHeight = editor.scrollHeight - editor.clientHeight;
// Capture preview-driven scrolls too — this is the only path that fires in
// preview-only mode, where the textarea is display:none and never scrolls.
if (this.currentNote) {
this.noteScrollPositions[this.currentNote] = scrollPercentage;
}
if (editorScrollableHeight > 0) {
this.isScrolling = true;
editor.scrollTop = scrollPercentage * editorScrollableHeight;
}
};
// Attach new listeners
editor.addEventListener('scroll', this._editorScrollHandler);
preview.addEventListener('scroll', this._previewScrollHandler);
},
// Check if stats plugin is enabled
async checkStatsPlugin() {
try {
const response = await fetch('/api/plugins');
const data = await response.json();
const statsPlugin = data.plugins.find(p => p.id === 'note_stats');
this.statsPluginEnabled = statsPlugin && statsPlugin.enabled;
// Calculate stats for current note if enabled
if (this.statsPluginEnabled && this.noteContent) {
this.calculateStats();
}
} catch (error) {
console.error('Failed to check stats plugin:', error);
this.statsPluginEnabled = false;
}
},
// Calculate note statistics (client-side)
calculateStats() {
if (!this.statsPluginEnabled || !this.noteContent) {
this.noteStats = null;
return;
}
const content = this.noteContent;
// Word count
const words = (content.match(/\S+/g) || []).length;
// Character count
const chars = content.replace(/\s/g, '').length;
const totalChars = content.length;
// Reading time (200 words per minute)
const readingTime = Math.max(1, Math.round(words / 200));
// Line count
const lines = content.split('\n').length;
// Paragraph count
const paragraphs = content.split('\n\n').filter(p => p.trim()).length;
// Sentences: punctuation [.!?]+ followed by space or end-of-string
const sentences = (content.match(/[.!?]+(?:\s|$)/g) || []).length;
// List items: lines starting with -, *, + or a number (e.g. 1., 10.), excluding tasks [-]
const listItems = (content.match(/^\s*(?:[-*+]|\d+\.)\s+(?!\[)/gm) || []).length;
// Tables: markdown table separator rows (| --- | --- |)
const tables = (content.match(/^\s*\|(?:\s*:?-+:?\s*\|){1,}\s*$/gm) || []).length;
// Link count (standard markdown links)
const markdownLinkMatches = content.match(/\[([^\]]+)\]\(([^\)]+)\)/g) || [];
const markdownLinks = markdownLinkMatches.length;
const markdownInternalLinks = markdownLinkMatches.filter(l => l.includes('.md')).length;
// Wikilink count ([[note]] or [[note|display text]] format)
const wikilinks = (content.match(/\[\[([^\]|]+)(?:\|[^\]]+)?\]\]/g) || []).length;
// Total links (markdown + wikilinks)
const links = markdownLinks + wikilinks;
const internalLinks = markdownInternalLinks + wikilinks; // All wikilinks are internal
// Code blocks
const codeBlocks = (content.match(/```[\s\S]*?```/g) || []).length;
const inlineCode = (content.match(/`[^`]+`/g) || []).length;
// Headings
const h1 = (content.match(/^# /gm) || []).length;
const h2 = (content.match(/^## /gm) || []).length;
const h3 = (content.match(/^### /gm) || []).length;
// Tasks
const totalTasks = (content.match(/- \[[ x]\]/gi) || []).length;
const completedTasks = (content.match(/- \[x\]/gi) || []).length;
const pendingTasks = totalTasks - completedTasks;
const completionRate = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
// Images
const images = (content.match(/!\[([^\]]*)\]\(([^\)]+)\)/g) || []).length;
// Blockquotes
const blockquotes = (content.match(/^> /gm) || []).length;
this.noteStats = {
words,
sentences,
characters: chars,
total_characters: totalChars,
reading_time_minutes: readingTime,
lines,
paragraphs,
list_items: listItems,
tables,
links,
internal_links: internalLinks,
external_links: links - internalLinks,
wikilinks,
code_blocks: codeBlocks,
inline_code: inlineCode,
headings: {
h1,
h2,
h3,
total: h1 + h2 + h3
},
tasks: {
total: totalTasks,
completed: completedTasks,
pending: pendingTasks,
completion_rate: completionRate
},
images,
blockquotes
};
},
// Parse YAML frontmatter metadata from note content
parseMetadata() {
if (!this.noteContent) {
this.noteMetadata = null;
this._lastFrontmatter = null;
return;
}
const content = this.noteContent;
// Check if content starts with frontmatter
if (!content.trim().startsWith('---')) {
this.noteMetadata = null;
this._lastFrontmatter = null;
return;
}
try {
const lines = content.split('\n');
if (lines[0].trim() !== '---') {
this.noteMetadata = null;
this._lastFrontmatter = null;
return;
}
// Find closing ---
let endIdx = -1;
for (let i = 1; i < lines.length; i++) {
if (lines[i].trim() === '---') {
endIdx = i;
break;
}
}
if (endIdx === -1) {
this.noteMetadata = null;
this._lastFrontmatter = null;
return;
}
// Performance optimization: skip parsing if frontmatter unchanged
const frontmatterRaw = lines.slice(0, endIdx + 1).join('\n');
if (frontmatterRaw === this._lastFrontmatter) {
return; // No change, keep existing metadata
}
this._lastFrontmatter = frontmatterRaw;
const frontmatterLines = lines.slice(1, endIdx);
const metadata = {};
let currentKey = null;
let currentValue = [];
for (const line of frontmatterLines) {
// Check for new key: value pair (supports keys with hyphens/underscores)
const keyMatch = line.match(/^([a-zA-Z_][\w-]*):\s*(.*)$/);
if (keyMatch) {
// Save previous key if exists
if (currentKey) {
metadata[currentKey] = this.parseYamlValue(currentValue.join('\n'));
}
currentKey = keyMatch[1];
const value = keyMatch[2].trim();
currentValue = [value];
} else if (line.match(/^\s+-\s+/) && currentKey) {
// List item continuation (e.g., " - item")
currentValue.push(line);
} else if (line.startsWith(' ') && currentKey) {
// Indented content (multiline value)
currentValue.push(line);
}
}
// Save last key
if (currentKey) {
metadata[currentKey] = this.parseYamlValue(currentValue.join('\n'));
}
this.noteMetadata = Object.keys(metadata).length > 0 ? metadata : null;
} catch (error) {
console.error('Failed to parse frontmatter:', error);
this.noteMetadata = null;
this._lastFrontmatter = null;
}
},
// Parse a YAML value (handles arrays, strings, numbers, booleans)
parseYamlValue(value) {
if (!value || value.trim() === '') return null;
value = value.trim();
// Check for inline array: [item1, item2]
if (value.startsWith('[') && value.endsWith(']')) {
const inner = value.slice(1, -1);
return inner.split(',').map(s => s.trim().replace(/^["']|["']$/g, '')).filter(s => s);
}
// Check for YAML list format (multiple lines starting with -)
if (value.includes('\n -') || value.startsWith(' -')) {
const items = [];
const lines = value.split('\n');
for (const line of lines) {
const match = line.match(/^\s*-\s*(.+)$/);
if (match) {
items.push(match[1].trim().replace(/^["']|["']$/g, ''));
}
}
return items.length > 0 ? items : value;
}
// Check for boolean
if (value.toLowerCase() === 'true') return true;
if (value.toLowerCase() === 'false') return false;
// Check for number
if (/^-?\d+(\.\d+)?$/.test(value)) {
return parseFloat(value);
}
// Return as string (remove quotes if present)
return value.replace(/^["']|["']$/g, '');
},
// Check if a string is a URL
isUrl(str) {
if (typeof str !== 'string') return false;
return /^https?:\/\/\S+$/i.test(str.trim());
},
// Escape HTML to prevent XSS
escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
},
// Format metadata value for display
formatMetadataValue(key, value) {
if (value === null || value === undefined) return '';
// Arrays are handled separately in the template
if (Array.isArray(value)) return value;
// Format dates nicely
if (key === 'date' || key === 'created' || key === 'modified' || key === 'updated') {
let date;
// Parse date-only strings (YYYY-MM-DD) as local dates to avoid timezone issues
if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
const [year, month, day] = value.split('-').map(Number);
date = new Date(year, month - 1, day); // month is 0-indexed
} else {
date = new Date(value);
}
if (!isNaN(date.getTime())) {
return date.toLocaleDateString(this.currentLocale, {
year: 'numeric',
month: 'short',
day: 'numeric'
});
}
}
// Booleans
if (typeof value === 'boolean') {
return value ? this.t('common.yes') : this.t('common.no');
}
return String(value);
},
// Format metadata value as HTML (for URL support)
formatMetadataValueHtml(key, value) {
const formatted = this.formatMetadataValue(key, value);
// Check if it's a URL
if (this.isUrl(formatted)) {
const escaped = this.escapeHtml(formatted);
// Truncate long URLs for display
const displayUrl = formatted.length > 40
? formatted.substring(0, 37) + '...'
: formatted;
return `
${this.escapeHtml(displayUrl)}`;
}
return this.escapeHtml(formatted);
},
// Get priority metadata fields (shown in collapsed view)
getPriorityMetadataFields() {
if (!this.noteMetadata) return [];
// Fields to show in collapsed view, in order of priority
const priority = ['date', 'created', 'author', 'status', 'priority', 'type', 'category'];
const fields = [];
for (const key of priority) {
if (this.noteMetadata[key] !== undefined && !Array.isArray(this.noteMetadata[key])) {
const formatted = this.formatMetadataValue(key, this.noteMetadata[key]);
const isUrl = this.isUrl(formatted);
fields.push({
key,
value: formatted,
valueHtml: isUrl ? this.formatMetadataValueHtml(key, this.noteMetadata[key]) : this.escapeHtml(formatted),
isUrl
});
}
}
return fields.slice(0, 3); // Show max 3 fields in collapsed view
},
// Get all metadata fields except tags (for expanded view)
getAllMetadataFields() {
if (!this.noteMetadata) return [];
return Object.entries(this.noteMetadata)
.filter(([key]) => key !== 'tags') // Tags shown separately
.map(([key, value]) => {
const isArray = Array.isArray(value);
const formatted = this.formatMetadataValue(key, value);
const isUrl = !isArray && this.isUrl(formatted);
return {
key,
value: formatted,
valueHtml: isUrl ? this.formatMetadataValueHtml(key, value) : this.escapeHtml(formatted),
isArray,
isUrl
};
});
},
// Check if note has any displayable metadata
getHasMetadata() {
const has = this.noteMetadata && Object.keys(this.noteMetadata).length > 0;
return has;
},
// Get tags from metadata
getMetadataTags() {
if (!this.noteMetadata || !this.noteMetadata.tags) return [];
return Array.isArray(this.noteMetadata.tags) ? this.noteMetadata.tags : [this.noteMetadata.tags];
},
// Save sidebar width to localStorage
saveSidebarWidth() {
localStorage.setItem('sidebarWidth', this.sidebarWidth.toString());
},
// Save view mode to localStorage
saveViewMode() {
try {
localStorage.setItem('viewMode', this.viewMode);
} catch (error) {
console.error('Error saving view mode:', error);
}
},
saveTagsExpanded() {
try {
localStorage.setItem('tagsExpanded', this.tagsExpanded.toString());
} catch (error) {
console.error('Error saving tags expanded state:', error);
}
},
// Start resizing sidebar
startResize(event) {
this.isResizing = true;
event.preventDefault();
const resize = (e) => {
if (!this.isResizing) return;
// Calculate new width based on mouse position
const newWidth = e.clientX;
// Clamp between min and max
if (newWidth >= 200 && newWidth <= 600) {
this.sidebarWidth = newWidth;
}
};
const stopResize = () => {
if (this.isResizing) {
this.isResizing = false;
this.saveSidebarWidth();
document.removeEventListener('mousemove', resize);
document.removeEventListener('mouseup', stopResize);
}
};
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
},
// Start resizing split panes (editor/preview)
startSplitResize(event) {
this.isResizingSplit = true;
event.preventDefault();
const container = event.target.parentElement;
const resize = (e) => {
if (!this.isResizingSplit) return;
const containerRect = container.getBoundingClientRect();
const mouseX = e.clientX - containerRect.left;
const percentage = (mouseX / containerRect.width) * 100;
// Clamp between 20% and 80%
if (percentage >= 20 && percentage <= 80) {
this.editorWidth = percentage;
}
};
const stopResize = () => {
if (this.isResizingSplit) {
this.isResizingSplit = false;
this.saveEditorWidth();
document.removeEventListener('mousemove', resize);
document.removeEventListener('mouseup', stopResize);
}
};
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
},
// Setup mobile view mode handler (auto-switch from split to edit on mobile)
setupMobileViewMode() {
const MOBILE_BREAKPOINT = 768; // Match CSS breakpoint
let previousWidth = window.innerWidth;
const handleResize = () => {
const currentWidth = window.innerWidth;
const wasMobile = previousWidth <= MOBILE_BREAKPOINT;
const isMobile = currentWidth <= MOBILE_BREAKPOINT;
// If switching from desktop to mobile and in split mode
if (!wasMobile && isMobile && this.viewMode === 'split') {
this.viewMode = 'edit';
}
previousWidth = currentWidth;
};
// Listen for window resize
window.addEventListener('resize', handleResize);
// Check initial state
if (window.innerWidth <= MOBILE_BREAKPOINT && this.viewMode === 'split') {
this.viewMode = 'edit';
}
},
// Save editor width to localStorage
saveEditorWidth() {
localStorage.setItem('editorWidth', this.editorWidth.toString());
},
/**
* Restore the saved scroll percentage for the current note in both panes. Called from
* loadNote() (after the new content has been laid out) and from the viewMode watcher
* (browsers reset scrollTop to 0 when an overflow:auto element transitions from
* display:none back to display:block via x-show, so newly-visible panes need
* re-positioning). Storing/applying a percentage means the same logical position is
* preserved across mode toggles even though editor and preview have different
* scrollHeights. Idempotent: safe to call multiple times. The isScrolling flag
* prevents the existing scroll-sync handlers from echoing these programmatic writes.
*/
_restoreNoteScroll() {
if (!this.currentNote || this.currentMedia) return;
const pct = this.noteScrollPositions[this.currentNote] || 0;
if (!this._domCache.editor || !this._domCache.previewContainer) {
this.refreshDOMCache();
}
const editor = this._domCache.editor;
const preview = this._domCache.previewContainer;
if (editor) {
const scrollable = editor.scrollHeight - editor.clientHeight;
if (scrollable > 0) {
this.isScrolling = true;
editor.scrollTop = pct * scrollable;
}
}
if (preview) {
const scrollable = preview.scrollHeight - preview.clientHeight;
if (scrollable > 0) {
this.isScrolling = true;
preview.scrollTop = pct * scrollable;
}
}
},
// Scroll to top of editor and preview
scrollToTop() {
// Disable scroll sync temporarily to prevent interference
this.isScrolling = true;
// Use cached references (refresh if not available)
if (!this._domCache.editor || !this._domCache.previewContainer) {
this.refreshDOMCache();
}
// Only scroll the visible panes based on viewMode
if (this.viewMode === 'edit' || this.viewMode === 'split') {
if (this._domCache.editor) {
this._domCache.editor.scrollTop = 0;
}
}
if (this.viewMode === 'preview' || this.viewMode === 'split') {
// Scroll the preview container (parent of .markdown-preview)
if (this._domCache.previewContainer) {
this._domCache.previewContainer.scrollTop = 0;
}
}
// Re-enable scroll sync after a short delay
setTimeout(() => {
this.isScrolling = false;
}, CONFIG.SCROLL_SYNC_DELAY);
},
// Export current note as HTML via backend API
async exportToHTML() {
if (!this.currentNote || !this.noteContent) {
this.toast(this.t('notes.no_content'), { type: 'info' });
return;
}
try {
// Build API URL with current theme
const currentTheme = this.currentTheme || 'light';
const encodedPath = this.currentNote.split('/').map(s => encodeURIComponent(s)).join('/');
const url = `/api/export/${encodedPath}?theme=${encodeURIComponent(currentTheme)}`;
// Fetch the exported HTML from backend
const response = await fetch(url);
if (!response.ok) {
const error = await response.json().catch(() => ({ detail: 'Export failed' }));
throw new Error(error.detail || 'Export failed');
}
// Get filename from Content-Disposition header or use note name
let filename = (this.currentNoteName || 'note') + '.html';
const contentDisposition = response.headers.get('Content-Disposition');
if (contentDisposition) {
const match = contentDisposition.match(/filename="([^"]+)"/);
if (match) {
filename = match[1];
}
}
// Download as blob
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
// Cleanup
URL.revokeObjectURL(blobUrl);
document.body.removeChild(a);
} catch (error) {
console.error('HTML export failed:', error);
this.toast(this.t('export.failed', { error: error.message }), { type: 'error' });
}
},
// Open print preview in new window
printPreview() {
if (!this.currentNote || !this.noteContent) {
this.toast(this.t('notes.no_content'), { type: 'info' });
return;
}
// Build API URL with current theme and download=false for inline display
const currentTheme = this.currentTheme || 'light';
const encodedPath = this.currentNote.split('/').map(s => encodeURIComponent(s)).join('/');
const url = `/api/export/${encodedPath}?theme=${encodeURIComponent(currentTheme)}&download=false`;
// Open in new window/tab
window.open(url, '_blank');
},
// Copy current note link to clipboard
async copyNoteLink() {
if (!this.currentNote) return;
// Build the full URL
const pathWithoutExtension = this.currentNote.replace('.md', '');
const encodedPath = pathWithoutExtension.split('/').map(segment => encodeURIComponent(segment)).join('/');
const url = `${window.location.origin}/${encodedPath}`;
try {
await navigator.clipboard.writeText(url);
} catch (error) {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = url;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
}
// Show brief "Copied!" feedback
this.linkCopied = true;
setTimeout(() => {
this.linkCopied = false;
}, 1500);
},
// ============================================================================
// Share Functions
// ============================================================================
// Load list of shared note paths (for visual indicators and Shared sidebar panel)
async loadSharedNotePaths() {
try {
const response = await fetch('/api/shared-notes');
if (response.ok) {
const data = await response.json();
this._sharedNotePaths = new Set(data.paths || []);
this._syncSharedNotePathsList();
}
} catch (error) {
console.error('Failed to load shared note paths:', error);
this._sharedNotePaths = new Set();
this._sharedNotePathsList = [];
}
},
_syncSharedNotePathsList() {
this._sharedNotePathsList = [...this._sharedNotePaths].sort((a, b) =>
a.localeCompare(b, undefined, { sensitivity: 'base' })
);
},
/** Display rows for Shared notes panel: name + folder line (search-style) */
getSharedPanelItems() {
return this._sharedNotePathsList.map((path) => {
const noMd = path.replace(/\.md$/i, '');
const last = Math.max(noMd.lastIndexOf('/'), noMd.lastIndexOf('\\'));
const name = last < 0 ? noMd : noMd.slice(last + 1);
const folder = last < 0 ? '' : noMd.slice(0, last).replace(/\\/g, '/');
return { path, name, folder: folder || 'Root' };
});
},
// Check if a note is currently shared (O(1) lookup)
isNoteShared(notePath) {
return this._sharedNotePaths.has(notePath);
},
// ============================================
// Quick Switcher (Ctrl+Alt+P)
// ============================================
openQuickSwitcher() {
this.showQuickSwitcher = true;
this.quickSwitcherQuery = '';
this.quickSwitcherIndex = 0;
// Populate initial results
this.quickSwitcherResults = (this.allNotes || []).slice(0, 10);
// Focus the input after the modal renders
this.$nextTick(() => {
const input = document.getElementById('quickSwitcherInput');
if (input) input.focus();
});
},
closeQuickSwitcher() {
this.showQuickSwitcher = false;
this.quickSwitcherQuery = '';
this.quickSwitcherIndex = 0;
},
// Filter notes for quick switcher based on query
filterQuickSwitcher(query) {
// Only include actual notes, not images
const notes = (this.notes || []).filter(n => n.type === 'note');
if (!query || !query.trim()) {
// Show recent notes when no query
return notes.slice(0, 10);
}
const q = query.toLowerCase();
return notes
.filter(n =>
n.name.toLowerCase().includes(q) ||
n.path.toLowerCase().includes(q)
)
.slice(0, 10);
},
// Handle keyboard navigation in quick switcher
handleQuickSwitcherKeydown(e) {
const results = this.quickSwitcherResults;
if (e.key === 'ArrowDown') {
e.preventDefault();
this.quickSwitcherIndex = Math.min(this.quickSwitcherIndex + 1, results.length - 1);
this.scrollQuickSwitcherIntoView();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
this.quickSwitcherIndex = Math.max(this.quickSwitcherIndex - 1, 0);
this.scrollQuickSwitcherIntoView();
} else if (e.key === 'Enter') {
e.preventDefault();
const note = results[this.quickSwitcherIndex];
if (note) {
this.loadNote(note.path);
this.closeQuickSwitcher();
}
} else if (e.key === 'Escape') {
e.preventDefault();
this.closeQuickSwitcher();
}
},
// Scroll selected item into view in quick switcher
scrollQuickSwitcherIntoView() {
this.$nextTick(() => {
const items = document.querySelectorAll('[data-quick-switcher-item]');
if (items[this.quickSwitcherIndex]) {
items[this.quickSwitcherIndex].scrollIntoView({ block: 'nearest' });
}
});
},
// Select note from quick switcher by click
selectQuickSwitcherNote(note) {
this.loadNote(note.path);
this.closeQuickSwitcher();
},
// Close share modal and reset state after animation
closeShareModal() {
this.showShareModal = false;
// Delay state reset until modal is fully hidden
setTimeout(() => {
this.showShareQR = false;
this.shareInfo = null;
this.shareLoading = false;
}, 200);
},
// Generate QR code for share URL
generateQRCode(url) {
if (!url || typeof qrcode === 'undefined') return '';
try {
const qr = qrcode(0, 'M'); // 0 = auto version, M = medium error correction
qr.addData(url);
qr.make();
return qr.createDataURL(4); // 4 = module size in pixels
} catch (e) {
console.error('QR code generation failed:', e);
return '';
}
},
// Open share modal and fetch current share status
async openShareModal() {
if (!this.currentNote) return;
// Reset state BEFORE showing modal to prevent flicker
this.showShareQR = false;
this.shareInfo = null;
this.shareLoading = true;
this.showShareModal = true;
try {
const notePath = this.currentNote.replace('.md', '');
const encodedPath = notePath.split('/').map(segment => encodeURIComponent(segment)).join('/');
const response = await fetch(`/api/share/${encodedPath}`);
if (response.ok) {
this.shareInfo = await response.json();
} else {
this.shareInfo = { shared: false };
}
} catch (error) {
console.error('Failed to get share status:', error);
this.shareInfo = { shared: false };
} finally {
this.shareLoading = false;
}
},
// Create a share link for the current note (with current theme)
async createShareLink() {
if (!this.currentNote) return;
this.shareLoading = true;
try {
const notePath = this.currentNote.replace('.md', '');
const encodedPath = notePath.split('/').map(segment => encodeURIComponent(segment)).join('/');
const response = await fetch(`/api/share/${encodedPath}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ theme: this.currentTheme || 'light' })
});
if (response.ok) {
this.shareInfo = await response.json();
this.shareInfo.shared = true;
// Update the shared paths set
this._sharedNotePaths.add(this.currentNote);
this._syncSharedNotePathsList();
} else {
const error = await response.json();
this.toast(this.t('share.error_creating', { error: error.detail || 'Unknown error' }), { type: 'error' });
}
} catch (error) {
console.error('Failed to create share link:', error);
this.toast(this.t('share.error_creating', { error: error.message }), { type: 'error' });
} finally {
this.shareLoading = false;
}
},
// Copy share link to clipboard
async copyShareLink() {
if (!this.shareInfo?.url) return;
try {
await navigator.clipboard.writeText(this.shareInfo.url);
} catch (error) {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = this.shareInfo.url;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
}
this.shareLinkCopied = true;
setTimeout(() => {
this.shareLinkCopied = false;
}, 2000);
},
// Revoke share link
async revokeShareLink() {
if (!this.currentNote) return;
const ok = await this.confirmModalAsk({
message: this.t('share.confirm_revoke'),
danger: false,
confirmLabel: this.t('common.yes'),
});
if (!ok) return;
this.shareLoading = true;
try {
const notePath = this.currentNote.replace('.md', '');
const encodedPath = notePath.split('/').map(segment => encodeURIComponent(segment)).join('/');
const response = await fetch(`/api/share/${encodedPath}`, {
method: 'DELETE'
});
if (response.ok) {
this.shareInfo = { shared: false };
// Update the shared paths set
this._sharedNotePaths.delete(this.currentNote);
this._syncSharedNotePathsList();
} else {
const error = await response.json();
this.toast(this.t('share.error_revoking', { error: error.detail || 'Unknown error' }), { type: 'error' });
}
} catch (error) {
console.error('Failed to revoke share link:', error);
this.toast(this.t('share.error_revoking', { error: error.message }), { type: 'error' });
} finally {
this.shareLoading = false;
}
},
// Toggle Zen Mode (full immersive writing experience)
async toggleZenMode() {
if (!this.zenMode) {
// Entering Zen Mode
this.previousViewMode = this.viewMode;
this.viewMode = 'edit';
this.mobileSidebarOpen = false;
this.zenMode = true;
// Request fullscreen
try {
const elem = document.documentElement;
if (elem.requestFullscreen) {
await elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
await elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
await elem.msRequestFullscreen();
}
} catch (e) {
// Fullscreen not supported or denied, continue anyway
console.log('Fullscreen not available:', e);
}
// Focus editor after transition
setTimeout(() => {
const editor = document.getElementById('note-editor');
if (editor) editor.focus();
}, 300);
} else {
// Exiting Zen Mode
this.zenMode = false;
this.viewMode = this.previousViewMode;
// Exit fullscreen
try {
if (document.exitFullscreen) {
await document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
await document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
await document.msExitFullscreen();
}
} catch (e) {
console.log('Exit fullscreen error:', e);
}
}
},
// Homepage folder navigation methods
goToHomepageFolder(folderPath) {
this.showGraph = false; // Close graph when navigating
this.selectedHomepageFolder = folderPath || '';
// Clear editor state to show landing page
this.currentNote = '';
this.currentNoteName = '';
this.noteContent = '';
this.currentMedia = '';
this.outline = [];
this.backlinks = [];
document.title = this.appName;
// Invalidate cache to force recalculation
this._homepageCache = {
folderPath: null,
notes: null,
folders: null,
breadcrumb: null
};
window.history.pushState({ homepageFolder: folderPath || '' }, '', '/');
},
// Navigate to homepage root and clear all editor state
goHome() {
this.showGraph = false; // Close graph when going home
this.selectedHomepageFolder = '';
this.currentNote = '';
this.currentNoteName = '';
this.noteContent = '';
this.currentMedia = '';
this.outline = [];
this.backlinks = [];
this.mobileSidebarOpen = false;
document.title = this.appName;
// Clear undo/redo history
this.undoHistory = [];
this.redoHistory = [];
this.hasPendingHistoryChanges = false;
// Invalidate cache to force recalculation
this._homepageCache = {
folderPath: null,
notes: null,
folders: null,
breadcrumb: null
};
window.history.pushState({ homepageFolder: '' }, '', '/');
},
// Mobile files/home tab - context-aware behavior
mobileFilesTabClick() {
if (this.currentNote || this.currentMedia || this.showGraph) {
// Viewing content → go home
this.goHome();
} else {
// On homepage → toggle files sidebar
this.activePanel = 'files';
this.mobileSidebarOpen = !this.mobileSidebarOpen;
}
},
// ==================== GRAPH VIEW ====================
// Initialize the graph visualization
async initGraph() {
// Check if vis is loaded
if (typeof vis === 'undefined') {
console.error('vis-network library not loaded');
return;
}
this.graphLoaded = false;
try {
// Fetch graph data from API
const response = await fetch('/api/graph');
if (!response.ok) throw new Error('Failed to fetch graph data');
const data = await response.json();
this.graphData = data;
// Get container
const container = document.getElementById('graph-overlay');
if (!container) return;
// Get theme colors (force reflow to ensure CSS is applied)
document.body.offsetHeight; // Force reflow
const style = getComputedStyle(document.documentElement);
// Helper to get CSS variable with fallback
const getCssVar = (name, fallback) => {
const value = style.getPropertyValue(name).trim();
return value || fallback;
};
const accentPrimary = getCssVar('--accent-primary', '#7c3aed');
const accentSecondary = getCssVar('--accent-secondary', '#a78bfa');
const textPrimary = getCssVar('--text-primary', '#111827');
const textSecondary = getCssVar('--text-secondary', '#6b7280');
const bgPrimary = getCssVar('--bg-primary', '#ffffff');
const bgSecondary = getCssVar('--bg-secondary', '#f3f4f6');
const borderColor = getCssVar('--border-primary', '#e5e7eb');
// Prepare nodes with styling - all nodes same base color
const nodes = new vis.DataSet(data.nodes.map(n => ({
id: n.id,
label: n.label,
title: n.id, // Tooltip shows full path
color: {
background: accentPrimary,
border: accentPrimary,
highlight: {
background: accentPrimary,
border: textPrimary // Darker border when selected
},
hover: {
background: accentSecondary,
border: accentPrimary
}
},
font: {
color: textPrimary,
size: 12,
face: 'system-ui, -apple-system, sans-serif'
},
borderWidth: this.currentNote === n.id ? 4 : 2,
chosen: {
node: (values) => {
values.size = 22;
values.borderWidth = 4;
values.borderColor = textPrimary;
}
}
})));
// Prepare edges with styling based on type
const edges = new vis.DataSet(data.edges.map((e, i) => ({
id: i,
from: e.source,
to: e.target,
color: {
color: e.type === 'wikilink' ? accentPrimary : borderColor,
highlight: accentPrimary,
hover: accentSecondary,
opacity: 0.8
},
width: e.type === 'wikilink' ? 2 : 1,
smooth: {
type: 'continuous',
roundness: 0.5
},
chosen: {
edge: (values) => {
values.width = 3;
values.color = accentPrimary;
}
}
})));
// Network options
const options = {
nodes: {
shape: 'dot',
size: 16,
borderWidth: 2,
shadow: {
enabled: true,
color: 'rgba(0,0,0,0.1)',
size: 5,
x: 2,
y: 2
}
},
edges: {
arrows: {
to: {
enabled: true,
scaleFactor: 0.5,
type: 'arrow'
}
}
},
physics: {
enabled: true,
solver: 'forceAtlas2Based',
forceAtlas2Based: {
gravitationalConstant: -50,
centralGravity: 0.01,
springLength: 100,
springConstant: 0.08,
damping: 0.4,
avoidOverlap: 0.5
},
stabilization: {
enabled: true,
iterations: 200,
updateInterval: 25
}
},
interaction: {
hover: true,
tooltipDelay: 200,
navigationButtons: false, // Using custom buttons instead
keyboard: {
enabled: true,
bindToWindow: false
},
zoomView: true,
dragView: true
},
layout: {
improvedLayout: true,
randomSeed: 42
}
};
// Destroy existing instance if any
if (this.graphInstance) {
this.graphInstance.destroy();
this.graphInstance = null;
}
// Clear container to ensure clean state
const graphCanvas = container.querySelector('canvas');
if (graphCanvas) graphCanvas.remove();
const visElements = container.querySelectorAll('.vis-network, .vis-navigation');
visElements.forEach(el => el.remove());
// Create the network
this.graphInstance = new vis.Network(container, { nodes, edges }, options);
// Store reference for callbacks
const graphRef = this.graphInstance;
const currentNoteRef = this.currentNote;
// Wait for stabilization
this.graphInstance.once('stabilizationIterationsDone', () => {
graphRef.setOptions({ physics: { enabled: false } });
this.graphLoaded = true;
// Focus and select current note if one is loaded
if (currentNoteRef) {
setTimeout(() => {
try {
if (graphRef && this.showGraph) {
const nodeIds = graphRef.body.data.nodes.getIds();
if (nodeIds.includes(currentNoteRef)) {
// Focus on the node
graphRef.focus(currentNoteRef, {
scale: 1.2,
animation: {
duration: 500,
easingFunction: 'easeInOutQuad'
}
});
// Select the node to highlight it
graphRef.selectNodes([currentNoteRef]);
}
}
} catch (e) {
// Ignore - graph may have been destroyed
}
}, 150);
}
});
// Click event - open note
this.graphInstance.on('click', (params) => {
if (params.nodes.length > 0) {
const noteId = params.nodes[0];
this.loadNote(noteId);
// Node is already selected by vis-network on click, no need to call selectNodes
}
});
// Double-click event - open note and close graph
this.graphInstance.on('doubleClick', (params) => {
if (params.nodes.length > 0) {
const noteId = params.nodes[0];
// Close graph and load note
this.showGraph = false;
this.loadNote(noteId);
}
});
// Hover event - highlight connections
this.graphInstance.on('hoverNode', (params) => {
const nodeId = params.node;
const connectedNodes = this.graphInstance.getConnectedNodes(nodeId);
const connectedEdges = this.graphInstance.getConnectedEdges(nodeId);
// Dim all nodes except hovered and connected
const allNodes = nodes.getIds();
const updates = allNodes.map(id => ({
id,
opacity: (id === nodeId || connectedNodes.includes(id)) ? 1 : 0.2
}));
nodes.update(updates);
});
this.graphInstance.on('blurNode', () => {
// Reset all nodes to full opacity
const allNodes = nodes.getIds();
const updates = allNodes.map(id => ({ id, opacity: 1 }));
nodes.update(updates);
});
// Add legend to container
this.addGraphLegend(container, accentPrimary, borderColor, textSecondary);
} catch (error) {
console.error('Failed to initialize graph:', error);
this.graphLoaded = true; // Stop loading indicator
}
},
// Add legend to graph container
addGraphLegend(container, wikiColor, mdColor, textColor) {
// Remove existing legend if any
const existingLegend = container.querySelector('.graph-legend');
if (existingLegend) existingLegend.remove();
const legend = document.createElement('div');
legend.className = 'graph-legend';
legend.innerHTML = `
Wikilinks
${this.t('graph.markdown_links')}
${this.t('graph.click_hint')}
`;
container.appendChild(legend);
},
// Refresh graph when theme changes
refreshGraph() {
if (this.viewMode === 'graph' && this.graphInstance) {
this.initGraph();
}
}
}
}