Skip to content

Drag & Drop, Line Numbers, Zen Mode, and Font Size Controls #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
prathmesh-barot wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Drag & Drop, Line Numbers, Zen Mode, and Font Size Controls #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 44 additions & 1 deletion ai.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,21 +195,64 @@ document.addEventListener('DOMContentLoaded', () => {
const settingsModalCloseBtn = document.getElementById('settings-modal-close-btn');
const apiKeyInput = document.getElementById('api-key-input');
const settingsSaveBtn = document.getElementById('settings-save-btn');
const showLineNumbersCheckbox = document.getElementById('show-line-numbers');
const editorFontSizeSlider = document.getElementById('editor-font-size-slider');
const previewFontSizeSlider = document.getElementById('preview-font-size-slider');
const editorFontSizeVal = document.getElementById('editor-font-size-val');
const previewFontSizeVal = document.getElementById('preview-font-size-val');

settingsBtn.addEventListener('click', () => {
apiKeyInput.value = localStorage.getItem('gemini-api-key') || '';
showLineNumbersCheckbox.checked = localStorage.getItem('show-line-numbers') === 'true';

const editorSize = localStorage.getItem('editor-font-size') || '16';
const previewSize = localStorage.getItem('preview-font-size') || '16';

editorFontSizeSlider.value = editorSize;
editorFontSizeVal.textContent = `${editorSize}px`;
previewFontSizeSlider.value = previewSize;
previewFontSizeVal.textContent = `${previewSize}px`;

settingsModalOverlay.classList.remove('hidden');
});

editorFontSizeSlider.addEventListener('input', (e) => {
const size = e.target.value;
editorFontSizeVal.textContent = `${size}px`;
document.documentElement.style.setProperty('--editor-font-size', `${size}px`);
});

previewFontSizeSlider.addEventListener('input', (e) => {
const size = e.target.value;
previewFontSizeVal.textContent = `${size}px`;
document.documentElement.style.setProperty('--preview-font-size', `${size}px`);
});

settingsModalCloseBtn.addEventListener('click', () => {
settingsModalOverlay.classList.add('hidden');
});

settingsSaveBtn.addEventListener('click', () => {
apiKey = apiKeyInput.value.trim();
localStorage.setItem('gemini-api-key', apiKey);

const showLineNumbers = showLineNumbersCheckbox.checked;
localStorage.setItem('show-line-numbers', showLineNumbers);

localStorage.setItem('editor-font-size', editorFontSizeSlider.value);
localStorage.setItem('preview-font-size', previewFontSizeSlider.value);

// Dispatch event to notify editor.js
window.dispatchEvent(new CustomEvent('settings-updated', {
detail: {
showLineNumbers,
editorFontSize: editorFontSizeSlider.value,
previewFontSize: previewFontSizeSlider.value
}
}));

settingsModalOverlay.classList.add('hidden');
if (window.toast) window.toast('API key saved', 'success');
if (window.toast) window.toast('Settings saved', 'success');
});

aiNewChatBtn.addEventListener('click', () => {
Expand Down
86 changes: 86 additions & 0 deletions dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
const modalConfirmBtn = document.getElementById('modal-confirm-btn');
const themeToggle = document.getElementById('theme-toggle');
const docCountBadge = document.getElementById('doc-count-badge');
const dropOverlay = document.getElementById('drop-overlay');

let files = [];
let modalResolve = null;
Expand Down Expand Up @@ -38,6 +39,34 @@ document.addEventListener('DOMContentLoaded', () => {
files = await RazenFS.getAllFiles();
};

window.toast = (message, type = 'info') => {
const container = document.getElementById('toast-container');
if (!container) return;

const toast = document.createElement('div');
toast.className = `toast toast-${type}`;

let icon = 'info-circle';
if (type === 'success') icon = 'check-circle';
if (type === 'error') icon = 'exclamation-circle';
if (type === 'warning') icon = 'exclamation-triangle';

toast.innerHTML = `
<i class="fas fa-${icon}"></i>
<span>${message}</span>
`;

container.appendChild(toast);

const dismiss = () => {
toast.classList.add('fade-out');
setTimeout(() => toast.remove(), 300);
};

toast.onclick = dismiss;
setTimeout(dismiss, 3000);
};

const updateDocCount = () => {
if (!docCountBadge) return;
const n = files.length;
Expand Down Expand Up @@ -160,6 +189,63 @@ document.addEventListener('DOMContentLoaded', () => {
}
};

const handleFileImport = (file) => {
if (!file.name.endsWith('.md') && !file.name.endsWith('.txt')) {
toast('Only .md and .txt files are supported', 'error');
return;
}

const reader = new FileReader();
reader.onload = async (e) => {
const content = e.target.result;
const name = file.name.replace(/\.(md|txt)$/, '');
const newId = `file_${Date.now()}`;
const newFile = {
id: newId,
name: name,
content: content
};
await RazenFS.saveFile(newFile);
files.push(newFile);
renderDocuments();
toast('File imported', 'success');
};
reader.readAsText(file);
};

// Drag and Drop
const handleDragOver = (e) => {
e.preventDefault();
e.stopPropagation();
dropOverlay.classList.remove('hidden');
};

const handleDragLeave = (e) => {
e.preventDefault();
e.stopPropagation();
if (e.relatedTarget === null || !dropOverlay.contains(e.relatedTarget)) {
dropOverlay.classList.add('hidden');
}
};

const handleDrop = (e) => {
e.preventDefault();
e.stopPropagation();
dropOverlay.classList.add('hidden');

const file = e.dataTransfer.files[0];
if (file) {
handleFileImport(file);
}
};

if (documentsGrid) {
documentsGrid.addEventListener('dragenter', handleDragOver);
dropOverlay.addEventListener('dragover', (e) => e.preventDefault());
dropOverlay.addEventListener('dragleave', handleDragLeave);
dropOverlay.addEventListener('drop', handleDrop);
}

const handleDownloadFile = (id) => {
const file = files.find(f => f.id === id);
if (!file) return;
Expand Down
30 changes: 30 additions & 0 deletions editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ <h1 id="app-title">Velox Editor</h1>
<button id="export-html-btn"><i class="fa-solid fa-file-code"></i> Export as HTML</button>
</div>
</div>
<button id="import-btn" title="Import File">
<i class="fa-solid fa-upload"></i>
</button>
<input type="file" id="import-input" accept=".md,.txt" class="hidden">
<button id="view-toggle" title="Toggle Preview">
<i class="fa-solid fa-eye"></i>
</button>
Expand Down Expand Up @@ -122,6 +126,7 @@ <h1 id="app-title">Velox Editor</h1>
</aside>
<main id="app-main">
<div id="editor-container">
<div id="line-numbers" class="hidden"></div>
<div id="editor-backdrop"></div>
<textarea id="editor" spellcheck="false"></textarea>
</div>
Expand Down Expand Up @@ -277,6 +282,18 @@ <h2>Settings</h2>
<label for="api-key-input">Gemini API Key</label>
<input type="password" id="api-key-input" placeholder="Enter your API key">
</div>
<div class="settings-field checkbox-field">
<input type="checkbox" id="show-line-numbers">
<label for="show-line-numbers">Show line numbers</label>
</div>
<div class="settings-field">
<label for="editor-font-size-slider">Editor font size: <span id="editor-font-size-val">16px</span></label>
<input type="range" id="editor-font-size-slider" min="12" max="20" step="1" value="16">
</div>
<div class="settings-field">
<label for="preview-font-size-slider">Preview font size: <span id="preview-font-size-val">16px</span></label>
<input type="range" id="preview-font-size-slider" min="12" max="20" step="1" value="16">
</div>
<div id="settings-modal-actions">
<button id="settings-save-btn">Save</button>
</div>
Expand All @@ -298,6 +315,19 @@ <h2>Settings</h2>
<button id="more-settings-btn" role="menuitem"><i class="fa-solid fa-cog"></i> Settings</button>
</div>

<!-- Drag and Drop Overlay -->
<div id="drop-overlay" class="hidden">
<div class="drop-message">
<i class="fa-solid fa-file-import"></i>
<span>Drop to open file</span>
</div>
</div>

<!-- Zen Mode Exit Pill -->
<div id="zen-exit-pill" class="hidden">
Press Esc to exit
</div>

<!-- Toast Notifications Container -->
<div id="toast-container"></div>
</body>
Expand Down
Loading