65 lines
3.0 KiB
JavaScript
65 lines
3.0 KiB
JavaScript
|
// app_custom_js.js
|
||
|
|
// Replace Obsidian-style ![[...]] with <img> tags in rendered HTML
|
||
|
|
function renderObsidianImages(container) {
|
||
|
|
if (!container) return;
|
||
|
|
const obsidianImgRegex = /!\[\[([^\]]+\.(png|jpg|jpeg|gif|webp))\]\]/gi;
|
||
|
|
container.innerHTML = container.innerHTML.replace(obsidianImgRegex, function(match, filename) {
|
||
|
|
// Use the Flask-provided URL template if available
|
||
|
|
let urlTemplate = window.attatchedImageUrlTemplate || "/serve_attatched_image/__IMAGE_PATH__";
|
||
|
|
|
||
|
|
// Get storage settings from data attributes
|
||
|
|
let storageMode = container.getAttribute('data-storage-mode') || '1';
|
||
|
|
let noteDir = container.getAttribute('data-note-dir') || '';
|
||
|
|
|
||
|
|
// Clean up the filename to remove any leading slashes and normalize path
|
||
|
|
let cleanFilename = filename.replace(/^\/+/, '').replace(/\\/g, '/');
|
||
|
|
|
||
|
|
// Construct the image path based on storage mode
|
||
|
|
let imagePath;
|
||
|
|
if (storageMode === '1') {
|
||
|
|
// Mode 1: Direct in NOTES_DIR root
|
||
|
|
// Keep full path relative to NOTES_DIR
|
||
|
|
imagePath = cleanFilename;
|
||
|
|
} else if (storageMode === '2') {
|
||
|
|
// Mode 2: Specific storage folder
|
||
|
|
// Only use filename as backend serves from storage folder
|
||
|
|
imagePath = cleanFilename.split('/').pop();
|
||
|
|
} else if (storageMode === '3') {
|
||
|
|
// Mode 3: Same directory as note
|
||
|
|
if (noteDir) {
|
||
|
|
// If image path is absolute (from root), use it as is
|
||
|
|
imagePath = cleanFilename.includes('/') ?
|
||
|
|
cleanFilename :
|
||
|
|
`${noteDir}/${cleanFilename}`;
|
||
|
|
} else {
|
||
|
|
// No note directory (shouldn't happen), use filename as is
|
||
|
|
imagePath = cleanFilename;
|
||
|
|
}
|
||
|
|
} else if (storageMode === '4') {
|
||
|
|
// Mode 4: In the attatched subfolder under note's directory
|
||
|
|
let noteFolder = noteDir || '';
|
||
|
|
let subfolder = container.getAttribute('data-storage-base') || 'attatched';
|
||
|
|
let finalFilename = cleanFilename.split('/').pop(); // Just the filename
|
||
|
|
|
||
|
|
// Build path: note_folder/subfolder/image_name.png
|
||
|
|
imagePath = noteFolder ? `${noteFolder}/${subfolder}/${finalFilename}` : `${subfolder}/${finalFilename}`;
|
||
|
|
} else {
|
||
|
|
// Default to mode 1 behavior - keep full path
|
||
|
|
imagePath = cleanFilename;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Replace placeholder in the template and ensure no double slashes
|
||
|
|
let imgUrl = urlTemplate.replace('__IMAGE_PATH__', encodeURIComponent(imagePath))
|
||
|
|
.replace(/([^:])\/+/g, '$1/'); // Replace multiple slashes with single slash, except after colon
|
||
|
|
return `<img src="${imgUrl}" alt="${filename}" style="max-width:100%;">`;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// For note.html (view mode)
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const noteContent = document.querySelector('.card.card-body');
|
||
|
|
if (noteContent) {
|
||
|
|
window.renderObsidianImages(noteContent);
|
||
|
|
}
|
||
|
|
});
|