Fix issue with picture upload and rendering based on 4 modes how Obsidian can store images.

Add there option to view other files and uplod/download files from main view
2025-06-28 12:41:34 +01:00
parent 4b73367544
commit 3e4355d20d
647 changed files with 74316 additions and 897 deletions
@@ -0,0 +1,64 @@
+// 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);
+    }
+});