([\s\S]*?)<\/code><\/pre>/g,
'$1'
);
-
+
previewDiv.innerHTML = html;
-
+
const codeBlocks = previewDiv.querySelectorAll('pre code');
codeBlocks.forEach(block => {
const languageClass = Array.from(block.classList).find(cls => cls.startsWith('language-'));
@@ -261,7 +261,7 @@
Prism.highlightElement(block);
}
});
-
+
const mermaidElements = previewDiv.querySelectorAll('.mermaid');
if (mermaidElements.length > 0) {
try {
@@ -291,7 +291,7 @@
try {
const response = await fetch('/api/tree');
if (!response.ok) throw new Error('Failed to load file tree');
-
+
fileTree = await response.json();
renderFileTree();
} catch (error) {
@@ -303,12 +303,12 @@
function renderFileTree() {
const container = document.getElementById('fileTree');
container.innerHTML = '';
-
+
if (fileTree.length === 0) {
container.innerHTML = 'No files yet';
return;
}
-
+
fileTree.forEach(node => {
container.appendChild(createTreeNode(node));
});
@@ -317,13 +317,13 @@
function createTreeNode(node, level = 0) {
const nodeDiv = document.createElement('div');
nodeDiv.className = 'tree-node-wrapper';
-
+
const nodeContent = document.createElement('div');
nodeContent.className = 'tree-node';
nodeContent.dataset.path = node.path;
nodeContent.dataset.type = node.type;
nodeContent.dataset.name = node.name;
-
+
// Make draggable
nodeContent.draggable = true;
nodeContent.addEventListener('dragstart', handleDragStart);
@@ -331,14 +331,13 @@
nodeContent.addEventListener('dragover', handleDragOver);
nodeContent.addEventListener('dragleave', handleDragLeave);
nodeContent.addEventListener('drop', handleDrop);
-
+
const contentWrapper = document.createElement('div');
contentWrapper.className = 'tree-node-content';
-
+
if (node.type === 'directory') {
const toggle = document.createElement('span');
toggle.className = 'tree-node-toggle';
- toggle.innerHTML = 'ā¶';
toggle.addEventListener('click', (e) => {
e.stopPropagation();
toggleNode(nodeDiv);
@@ -349,56 +348,56 @@
spacer.style.width = '16px';
contentWrapper.appendChild(spacer);
}
-
+
const icon = document.createElement('i');
icon.className = node.type === 'directory' ? 'bi bi-folder tree-node-icon' : 'bi bi-file-earmark-text tree-node-icon';
contentWrapper.appendChild(icon);
-
+
const name = document.createElement('span');
name.className = 'tree-node-name';
name.textContent = node.name;
contentWrapper.appendChild(name);
-
+
if (node.type === 'file' && node.size) {
const size = document.createElement('span');
size.className = 'file-size-badge';
size.textContent = formatFileSize(node.size);
contentWrapper.appendChild(size);
}
-
+
nodeContent.appendChild(contentWrapper);
-
+
nodeContent.addEventListener('click', (e) => {
if (node.type === 'file') {
loadFile(node.path);
}
});
-
+
nodeContent.addEventListener('contextmenu', (e) => {
e.preventDefault();
showContextMenu(e, node);
});
-
+
nodeDiv.appendChild(nodeContent);
-
+
if (node.children && node.children.length > 0) {
const childrenDiv = document.createElement('div');
childrenDiv.className = 'tree-children collapsed';
-
+
node.children.forEach(child => {
childrenDiv.appendChild(createTreeNode(child, level + 1));
});
-
+
nodeDiv.appendChild(childrenDiv);
}
-
+
return nodeDiv;
}
function toggleNode(nodeWrapper) {
const toggle = nodeWrapper.querySelector('.tree-node-toggle');
const children = nodeWrapper.querySelector('.tree-children');
-
+
if (children) {
children.classList.toggle('collapsed');
toggle.classList.toggle('expanded');
@@ -437,10 +436,10 @@
function handleDragOver(e) {
if (!draggedNode) return;
-
+
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
-
+
const targetType = e.currentTarget.dataset.type;
if (targetType === 'directory') {
e.currentTarget.classList.add('drag-over');
@@ -454,18 +453,18 @@
async function handleDrop(e) {
e.preventDefault();
e.currentTarget.classList.remove('drag-over');
-
+
if (!draggedNode) return;
-
+
const targetPath = e.currentTarget.dataset.path;
const targetType = e.currentTarget.dataset.type;
-
+
if (targetType !== 'directory') return;
if (draggedNode.path === targetPath) return;
-
+
const sourcePath = draggedNode.path;
const destPath = targetPath + '/' + draggedNode.name;
-
+
try {
const response = await fetch('/api/file/move', {
method: 'POST',
@@ -475,16 +474,16 @@
destination: destPath
})
});
-
+
if (!response.ok) throw new Error('Move failed');
-
+
showNotification(`Moved ${draggedNode.name}`, 'success');
loadFileTree();
} catch (error) {
console.error('Error moving file:', error);
showNotification('Error moving file', 'danger');
}
-
+
draggedNode = null;
}
@@ -496,18 +495,18 @@
contextMenuTarget = node;
const menu = document.getElementById('contextMenu');
const pasteItem = document.getElementById('pasteMenuItem');
-
+
// Show paste option only if clipboard has something and target is a directory
if (clipboard && node.type === 'directory') {
pasteItem.style.display = 'flex';
} else {
pasteItem.style.display = 'none';
}
-
+
menu.style.display = 'block';
menu.style.left = e.pageX + 'px';
menu.style.top = e.pageY + 'px';
-
+
document.addEventListener('click', hideContextMenu);
}
@@ -525,20 +524,20 @@
try {
const response = await fetch(`/api/file?path=${encodeURIComponent(path)}`);
if (!response.ok) throw new Error('Failed to load file');
-
+
const data = await response.json();
currentFile = data.filename;
currentFilePath = path;
-
+
document.getElementById('filenameInput').value = path;
editor.setValue(data.content);
updatePreview();
-
+
document.querySelectorAll('.tree-node').forEach(node => {
node.classList.remove('active');
});
document.querySelector(`[data-path="${path}"]`)?.classList.add('active');
-
+
showNotification(`Loaded ${data.filename}`, 'info');
} catch (error) {
console.error('Error loading file:', error);
@@ -548,27 +547,27 @@
async function saveFile() {
const path = document.getElementById('filenameInput').value.trim();
-
+
if (!path) {
showNotification('Please enter a filename', 'warning');
return;
}
-
+
const content = editor.getValue();
-
+
try {
const response = await fetch('/api/file', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ path, content })
});
-
+
if (!response.ok) throw new Error('Failed to save file');
-
+
const result = await response.json();
currentFile = path.split('/').pop();
currentFilePath = result.path;
-
+
showNotification(`Saved ${currentFile}`, 'success');
loadFileTree();
} catch (error) {
@@ -582,26 +581,26 @@
showNotification('No file selected', 'warning');
return;
}
-
+
if (!confirm(`Are you sure you want to delete ${currentFile}?`)) {
return;
}
-
+
try {
const response = await fetch(`/api/file?path=${encodeURIComponent(currentFilePath)}`, {
method: 'DELETE'
});
-
+
if (!response.ok) throw new Error('Failed to delete file');
-
+
showNotification(`Deleted ${currentFile}`, 'success');
-
+
currentFile = null;
currentFilePath = null;
document.getElementById('filenameInput').value = '';
editor.setValue('');
updatePreview();
-
+
loadFileTree();
} catch (error) {
console.error('Error deleting file:', error);
@@ -617,27 +616,27 @@
document.getElementById('filenameInput').focus();
editor.setValue('');
updatePreview();
-
+
document.querySelectorAll('.tree-node').forEach(node => {
node.classList.remove('active');
});
-
+
showNotification('Enter filename and start typing', 'info');
}
async function createFolder() {
const folderName = prompt('Enter folder name:');
if (!folderName) return;
-
+
try {
const response = await fetch('/api/directory', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ path: folderName })
});
-
+
if (!response.ok) throw new Error('Failed to create folder');
-
+
showNotification(`Created folder ${folderName}`, 'success');
loadFileTree();
} catch (error) {
@@ -652,32 +651,32 @@
async function handleContextMenuAction(action) {
if (!contextMenuTarget) return;
-
+
switch (action) {
case 'open':
if (contextMenuTarget.type === 'file') {
loadFile(contextMenuTarget.path);
}
break;
-
+
case 'rename':
await renameItem();
break;
-
+
case 'copy':
clipboard = { ...contextMenuTarget, operation: 'copy' };
showNotification(`Copied ${contextMenuTarget.name}`, 'info');
break;
-
+
case 'move':
clipboard = { ...contextMenuTarget, operation: 'move' };
showNotification(`Cut ${contextMenuTarget.name}`, 'info');
break;
-
+
case 'paste':
await pasteItem();
break;
-
+
case 'delete':
await deleteItem();
break;
@@ -687,10 +686,10 @@
async function renameItem() {
const newName = prompt(`Rename ${contextMenuTarget.name}:`, contextMenuTarget.name);
if (!newName || newName === contextMenuTarget.name) return;
-
+
const oldPath = contextMenuTarget.path;
const newPath = oldPath.substring(0, oldPath.lastIndexOf('/') + 1) + newName;
-
+
try {
const endpoint = contextMenuTarget.type === 'directory' ? '/api/directory/rename' : '/api/file/rename';
const response = await fetch(endpoint, {
@@ -701,9 +700,9 @@
new_path: newPath
})
});
-
+
if (!response.ok) throw new Error('Rename failed');
-
+
showNotification(`Renamed to ${newName}`, 'success');
loadFileTree();
} catch (error) {
@@ -714,12 +713,12 @@
async function pasteItem() {
if (!clipboard) return;
-
+
const destDir = contextMenuTarget.path;
const sourcePath = clipboard.path;
const fileName = clipboard.name;
const destPath = destDir + '/' + fileName;
-
+
try {
if (clipboard.operation === 'copy') {
// Copy operation
@@ -731,7 +730,7 @@
destination: destPath
})
});
-
+
if (!response.ok) throw new Error('Copy failed');
showNotification(`Copied ${fileName} to ${contextMenuTarget.name}`, 'success');
} else if (clipboard.operation === 'move') {
@@ -744,12 +743,12 @@
destination: destPath
})
});
-
+
if (!response.ok) throw new Error('Move failed');
showNotification(`Moved ${fileName} to ${contextMenuTarget.name}`, 'success');
clipboard = null; // Clear clipboard after move
}
-
+
loadFileTree();
} catch (error) {
console.error('Error pasting:', error);
@@ -761,7 +760,7 @@
if (!confirm(`Are you sure you want to delete ${contextMenuTarget.name}?`)) {
return;
}
-
+
try {
let response;
if (contextMenuTarget.type === 'directory') {
@@ -773,9 +772,9 @@
method: 'DELETE'
});
}
-
+
if (!response.ok) throw new Error('Delete failed');
-
+
showNotification(`Deleted ${contextMenuTarget.name}`, 'success');
loadFileTree();
} catch (error) {
@@ -793,7 +792,7 @@
if (!toastContainer) {
toastContainer = createToastContainer();
}
-
+
const toast = document.createElement('div');
toast.className = `toast align-items-center text-white bg-${type} border-0`;
toast.setAttribute('role', 'alert');
@@ -803,12 +802,12 @@
No content available
+Failed to load content
+This directory is empty
`; + } else { + html += `Failed to load directory preview
+