style: Improve markdown editor styling and functionality
- Update dark mode button icon and styling - Add styling for new collection button - Apply default iframe styles in preview pane - Adjust vertical divider height in header buttons - Improve handling of JSX-like attributes in markdown - Add support for new collection functionality - Refine file loading logic in view mode - Improve dark mode toggle icon and integration - Update UI for edit/view mode toggle button
This commit is contained in:
Mahmoud-Emad
138
static/app.js
138
static/app.js
@@ -1,5 +1,5 @@
|
||||
// Markdown Editor Application
|
||||
(function() {
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// State management
|
||||
@@ -21,16 +21,16 @@
|
||||
function enableDarkMode() {
|
||||
isDarkMode = true;
|
||||
document.body.classList.add('dark-mode');
|
||||
document.getElementById('darkModeIcon').textContent = '☀️';
|
||||
document.getElementById('darkModeIcon').innerHTML = '<i class="bi bi-sun-fill"></i>';
|
||||
localStorage.setItem('darkMode', 'true');
|
||||
|
||||
|
||||
// Update mermaid theme
|
||||
mermaid.initialize({
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'dark',
|
||||
securityLevel: 'loose'
|
||||
});
|
||||
|
||||
|
||||
// Re-render preview if there's content
|
||||
if (editor && editor.getValue()) {
|
||||
updatePreview();
|
||||
@@ -40,16 +40,16 @@
|
||||
function disableDarkMode() {
|
||||
isDarkMode = false;
|
||||
document.body.classList.remove('dark-mode');
|
||||
document.getElementById('darkModeIcon').textContent = '🌙';
|
||||
// document.getElementById('darkModeIcon').textContent = '🌙';
|
||||
localStorage.setItem('darkMode', 'false');
|
||||
|
||||
|
||||
// Update mermaid theme
|
||||
mermaid.initialize({
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'default',
|
||||
securityLevel: 'loose'
|
||||
});
|
||||
|
||||
|
||||
// Re-render preview if there's content
|
||||
if (editor && editor.getValue()) {
|
||||
updatePreview();
|
||||
@@ -65,7 +65,7 @@
|
||||
}
|
||||
|
||||
// Initialize Mermaid
|
||||
mermaid.initialize({
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'default',
|
||||
securityLevel: 'loose'
|
||||
@@ -87,15 +87,15 @@
|
||||
async function uploadImage(file) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/upload-image', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
|
||||
if (!response.ok) throw new Error('Upload failed');
|
||||
|
||||
|
||||
const result = await response.json();
|
||||
return result.url;
|
||||
} catch (error) {
|
||||
@@ -108,48 +108,48 @@
|
||||
// Handle drag and drop
|
||||
function setupDragAndDrop() {
|
||||
const editorElement = document.querySelector('.CodeMirror');
|
||||
|
||||
|
||||
// Prevent default drag behavior
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
editorElement.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
|
||||
// Highlight drop zone
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
editorElement.addEventListener(eventName, () => {
|
||||
editorElement.classList.add('drag-over');
|
||||
}, false);
|
||||
});
|
||||
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
editorElement.addEventListener(eventName, () => {
|
||||
editorElement.classList.remove('drag-over');
|
||||
}, false);
|
||||
});
|
||||
|
||||
|
||||
// Handle drop
|
||||
editorElement.addEventListener('drop', async (e) => {
|
||||
const files = e.dataTransfer.files;
|
||||
|
||||
|
||||
if (files.length === 0) return;
|
||||
|
||||
|
||||
// Filter for images only
|
||||
const imageFiles = Array.from(files).filter(file =>
|
||||
const imageFiles = Array.from(files).filter(file =>
|
||||
file.type.startsWith('image/')
|
||||
);
|
||||
|
||||
|
||||
if (imageFiles.length === 0) {
|
||||
showNotification('Please drop image files only', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
showNotification(`Uploading ${imageFiles.length} image(s)...`, 'info');
|
||||
|
||||
|
||||
// Upload images
|
||||
for (const file of imageFiles) {
|
||||
const url = await uploadImage(file);
|
||||
@@ -163,12 +163,12 @@
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
|
||||
|
||||
// Also handle paste events for images
|
||||
editorElement.addEventListener('paste', async (e) => {
|
||||
const items = e.clipboardData?.items;
|
||||
if (!items) return;
|
||||
|
||||
|
||||
for (const item of items) {
|
||||
if (item.type.startsWith('image/')) {
|
||||
e.preventDefault();
|
||||
@@ -198,17 +198,17 @@
|
||||
lineWrapping: true,
|
||||
autofocus: true,
|
||||
extraKeys: {
|
||||
'Ctrl-S': function() { saveFile(); },
|
||||
'Cmd-S': function() { saveFile(); }
|
||||
'Ctrl-S': function () { saveFile(); },
|
||||
'Cmd-S': function () { saveFile(); }
|
||||
}
|
||||
});
|
||||
|
||||
// Update preview on change
|
||||
editor.on('change', debounce(updatePreview, 300));
|
||||
|
||||
|
||||
// Setup drag and drop after editor is ready
|
||||
setTimeout(setupDragAndDrop, 100);
|
||||
|
||||
|
||||
// Sync scroll
|
||||
editor.on('scroll', handleEditorScroll);
|
||||
}
|
||||
@@ -230,7 +230,7 @@
|
||||
async function updatePreview() {
|
||||
const content = editor.getValue();
|
||||
const previewDiv = document.getElementById('preview');
|
||||
|
||||
|
||||
if (!content.trim()) {
|
||||
previewDiv.innerHTML = `
|
||||
<div class="text-muted text-center mt-5">
|
||||
@@ -244,15 +244,15 @@
|
||||
try {
|
||||
// Parse markdown to HTML
|
||||
let html = marked.parse(content);
|
||||
|
||||
|
||||
// Replace mermaid code blocks with div containers
|
||||
html = html.replace(
|
||||
/<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g,
|
||||
'<div class="mermaid">$1</div>'
|
||||
);
|
||||
|
||||
|
||||
previewDiv.innerHTML = html;
|
||||
|
||||
|
||||
// Apply syntax highlighting to code blocks
|
||||
const codeBlocks = previewDiv.querySelectorAll('pre code');
|
||||
codeBlocks.forEach(block => {
|
||||
@@ -262,7 +262,7 @@
|
||||
Prism.highlightElement(block);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Render mermaid diagrams
|
||||
const mermaidElements = previewDiv.querySelectorAll('.mermaid');
|
||||
if (mermaidElements.length > 0) {
|
||||
@@ -288,15 +288,15 @@
|
||||
// Handle editor scroll for synchronized scrolling
|
||||
function handleEditorScroll() {
|
||||
if (!isScrollingSynced) return;
|
||||
|
||||
|
||||
clearTimeout(scrollTimeout);
|
||||
scrollTimeout = setTimeout(() => {
|
||||
const editorScrollInfo = editor.getScrollInfo();
|
||||
const editorScrollPercentage = editorScrollInfo.top / (editorScrollInfo.height - editorScrollInfo.clientHeight);
|
||||
|
||||
|
||||
const previewPane = document.querySelector('.preview-pane');
|
||||
const previewScrollHeight = previewPane.scrollHeight - previewPane.clientHeight;
|
||||
|
||||
|
||||
if (previewScrollHeight > 0) {
|
||||
previewPane.scrollTop = editorScrollPercentage * previewScrollHeight;
|
||||
}
|
||||
@@ -308,22 +308,22 @@
|
||||
try {
|
||||
const response = await fetch('/api/files');
|
||||
if (!response.ok) throw new Error('Failed to load file list');
|
||||
|
||||
|
||||
const files = await response.json();
|
||||
const fileListDiv = document.getElementById('fileList');
|
||||
|
||||
|
||||
if (files.length === 0) {
|
||||
fileListDiv.innerHTML = '<div class="text-muted p-2 small">No files yet</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
fileListDiv.innerHTML = files.map(file => `
|
||||
<a href="#" class="list-group-item list-group-item-action file-item" data-filename="${file.filename}">
|
||||
<span class="file-name">${file.filename}</span>
|
||||
<span class="file-size">${formatFileSize(file.size)}</span>
|
||||
</a>
|
||||
`).join('');
|
||||
|
||||
|
||||
// Add click handlers
|
||||
document.querySelectorAll('.file-item').forEach(item => {
|
||||
item.addEventListener('click', (e) => {
|
||||
@@ -343,19 +343,19 @@
|
||||
try {
|
||||
const response = await fetch(`/api/files/${filename}`);
|
||||
if (!response.ok) throw new Error('Failed to load file');
|
||||
|
||||
|
||||
const data = await response.json();
|
||||
currentFile = data.filename;
|
||||
|
||||
|
||||
// Update UI
|
||||
document.getElementById('filenameInput').value = data.filename;
|
||||
editor.setValue(data.content);
|
||||
|
||||
|
||||
// Update active state in file list
|
||||
document.querySelectorAll('.file-item').forEach(item => {
|
||||
item.classList.toggle('active', item.dataset.filename === filename);
|
||||
});
|
||||
|
||||
|
||||
updatePreview();
|
||||
showNotification(`Loaded ${filename}`, 'success');
|
||||
} catch (error) {
|
||||
@@ -367,14 +367,14 @@
|
||||
// Save current file
|
||||
async function saveFile() {
|
||||
const filename = document.getElementById('filenameInput').value.trim();
|
||||
|
||||
|
||||
if (!filename) {
|
||||
showNotification('Please enter a filename', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const content = editor.getValue();
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/files', {
|
||||
method: 'POST',
|
||||
@@ -383,12 +383,12 @@
|
||||
},
|
||||
body: JSON.stringify({ filename, content })
|
||||
});
|
||||
|
||||
|
||||
if (!response.ok) throw new Error('Failed to save file');
|
||||
|
||||
|
||||
const result = await response.json();
|
||||
currentFile = result.filename;
|
||||
|
||||
|
||||
showNotification(`Saved ${result.filename}`, 'success');
|
||||
loadFileList();
|
||||
} catch (error) {
|
||||
@@ -400,31 +400,31 @@
|
||||
// Delete current file
|
||||
async function deleteFile() {
|
||||
const filename = document.getElementById('filenameInput').value.trim();
|
||||
|
||||
|
||||
if (!filename) {
|
||||
showNotification('No file selected', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!confirm(`Are you sure you want to delete ${filename}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/files/${filename}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
|
||||
if (!response.ok) throw new Error('Failed to delete file');
|
||||
|
||||
|
||||
showNotification(`Deleted ${filename}`, 'success');
|
||||
|
||||
|
||||
// Clear editor
|
||||
currentFile = null;
|
||||
document.getElementById('filenameInput').value = '';
|
||||
editor.setValue('');
|
||||
updatePreview();
|
||||
|
||||
|
||||
loadFileList();
|
||||
} catch (error) {
|
||||
console.error('Error deleting file:', error);
|
||||
@@ -438,12 +438,12 @@
|
||||
document.getElementById('filenameInput').value = '';
|
||||
editor.setValue('');
|
||||
updatePreview();
|
||||
|
||||
|
||||
// Remove active state from all file items
|
||||
document.querySelectorAll('.file-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
|
||||
showNotification('New file created', 'info');
|
||||
}
|
||||
|
||||
@@ -460,25 +460,25 @@
|
||||
function showNotification(message, type = 'info') {
|
||||
// Create toast notification
|
||||
const toastContainer = document.getElementById('toastContainer') || createToastContainer();
|
||||
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast align-items-center text-white bg-${type} border-0`;
|
||||
toast.setAttribute('role', 'alert');
|
||||
toast.setAttribute('aria-live', 'assertive');
|
||||
toast.setAttribute('aria-atomic', 'true');
|
||||
|
||||
|
||||
toast.innerHTML = `
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">${message}</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
toastContainer.appendChild(toast);
|
||||
|
||||
|
||||
const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
|
||||
bsToast.show();
|
||||
|
||||
|
||||
toast.addEventListener('hidden.bs.toast', () => {
|
||||
toast.remove();
|
||||
});
|
||||
@@ -499,13 +499,13 @@
|
||||
initDarkMode();
|
||||
initEditor();
|
||||
loadFileList();
|
||||
|
||||
|
||||
// Set up event listeners
|
||||
document.getElementById('saveBtn').addEventListener('click', saveFile);
|
||||
document.getElementById('deleteBtn').addEventListener('click', deleteFile);
|
||||
document.getElementById('newFileBtn').addEventListener('click', newFile);
|
||||
document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);
|
||||
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
|
||||
@@ -513,7 +513,7 @@
|
||||
saveFile();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
console.log('Markdown Editor initialized');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user