Skip to content

Refactor editor.js and perform feature cleanup #10

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

Merged
apandey-dev merged 1 commit into from
Mar 8, 2026
Merged

Refactor editor.js and perform feature cleanup #10

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
65 changes: 51 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,9 @@ <h3>Menu</h3>
</div>

<div class="split-workspace" id="split-workspace">
<div id="restore-left" class="edge-handle left" data-tooltip="Restore Editor"><i data-lucide="chevron-right"></i></div>
<div id="restore-right" class="edge-handle right" data-tooltip="Restore Preview"><i data-lucide="chevron-left"></i></div>

<div class="panel editor-panel" id="editor-panel-wrapper">
<textarea id="markdown-input" class="app-fade" placeholder="Loading workspace..." spellcheck="false"
disabled></textarea>
Expand Down Expand Up @@ -530,39 +533,73 @@ <h3 class="modal-title delete-title" id="delete-modal-title">Delete?</h3>
</div>

<div class="modal-overlay" id="transfer-modal" style="z-index: 2000;">
<div class="modal-box premium-modal">
<div class="modal-box premium-modal transfer-modal-box">
<div class="premium-modal-header">
<div class="premium-icon-wrapper" style="background-color: rgba(59, 130, 246, 0.1); color: #3b82f6;"><i data-lucide="arrow-up-down"></i></div>
<h3 class="modal-title">Transfer Notes</h3>
<p class="modal-subtitle">Import or Export your work.</p>
<p class="modal-subtitle">Import or Export your work seamlessly.</p>
</div>

<div class="mode-toggle" id="transfer-toggle" style="margin-bottom: 24px;">
<button class="mode-tab active" data-target="import">Import</button>
<button class="mode-tab" data-target="export">Export</button>
<button class="mode-tab active" data-target="import" style="flex:1;">Import</button>
<button class="mode-tab" data-target="export" style="flex:1;">Export</button>
</div>

<!-- IMPORT SECTION -->
<div id="import-section" class="transfer-section">
<div id="drop-zone" class="drop-zone" style="border: 2px dashed var(--border-color); border-radius: 16px; padding: 32px; margin-bottom: 16px; transition: all 0.3s ease;">
<i data-lucide="upload-cloud" style="width: 48px; height: 48px; opacity: 0.5; margin-bottom: 12px;"></i>
<p style="margin-bottom: 12px; font-weight: 500;">Drag & Drop Markdown File</p>
<span style="font-size: 0.8rem; opacity: 0.5; margin-bottom: 12px; display: block;">or</span>
<button class="modal-btn btn-confirm" id="btn-browse-file">Browse File</button>
<div id="drop-zone" class="drop-zone">
<i data-lucide="upload-cloud"></i>
<p>Drag & Drop Markdown File</p>
<span>or</span>
<button class="modal-btn btn-confirm" id="btn-browse-file" style="padding: 10px 24px;">Browse File</button>
<input type="file" id="transfer-import-file" accept=".md,.txt" style="display: none;" />
</div>
<div class="transfer-instructions">
<p><i data-lucide="info"></i> Supported formats: .md, .txt. Your note will be added to the current active folder.</p>
</div>
</div>

<!-- EXPORT SECTION -->
<div id="export-section" class="transfer-section" style="display: none;">
<div class="input-group premium-input-group" style="margin-bottom: 24px;">
<label style="text-align: left; display: block; margin-left: 8px;">FILE NAME</label>
<div class="input-group premium-input-group" style="margin-bottom: 16px;">
<label style="text-align: left; display: block; margin-left: 8px; font-size: 0.75rem; opacity: 0.6; font-weight: 700; text-transform: uppercase;">File Name</label>
<input type="text" class="modal-input" id="export-filename-input" placeholder="note-name" />
</div>
<div class="modal-actions premium-actions">
<button class="modal-btn btn-confirm" id="btn-execute-export" style="width: 100%;">Download .md File</button>

<div class="input-group" style="margin-bottom: 16px; text-align: left;">
<label style="display: block; margin-left: 8px; font-size: 0.75rem; opacity: 0.6; font-weight: 700; text-transform: uppercase; margin-bottom: 8px;">Export Format</label>
<div class="mode-toggle" id="export-format-toggle">
<button class="mode-tab active" data-format="md" style="flex:1;">Markdown (.md)</button>
<button class="mode-tab" data-format="pdf" style="flex:1;">Document (.pdf)</button>
</div>
</div>

<!-- PDF SPECIFIC OPTIONS -->
<div id="pdf-export-options" style="display: none; margin-bottom: 20px; text-align: left;">
<label style="display: block; margin-left: 8px; font-size: 0.75rem; opacity: 0.6; font-weight: 700; text-transform: uppercase; margin-bottom: 8px;">Page Size</label>
<div class="custom-dropdown" id="transfer-size-dropdown">
<div class="dropdown-header" style="height: 48px; border-radius: 12px; background: var(--nav-bg);">
<span id="transfer-size-selected-text">A4 Size (Standard)</span>
<span class="chevron"><i data-lucide="chevron-down" style="width: 16px; height: 16px;"></i></span>
</div>
<div class="dropdown-list" style="border-radius: 12px; padding: 6px;">
<div class="dropdown-item active" data-value="A4">A4 Size (Standard)</div>
<div class="dropdown-item" data-value="A2">A2 Size (Large Format)</div>
<div class="dropdown-item" data-value="Infinity">Infinity (Single Page)</div>
</div>
</div>
</div>

<div class="modal-actions premium-actions" style="margin-top: 24px;">
<button class="modal-btn btn-confirm" id="btn-execute-export" style="width: 100%; height: 48px; font-size: 1rem;">
<i data-lucide="download" style="width: 18px; height: 18px;"></i> Export Note
</button>
</div>
</div>

<button class="btn-close-dashboard" id="transfer-modal-close" style="position: absolute; top: 16px; right: 16px;"><i data-lucide="x"></i></button>
<button class="btn-close-dashboard" id="transfer-modal-close" style="position: absolute; top: 16px; right: 16px;" data-tooltip="Close">
<i data-lucide="x"></i>
</button>
</div>
</div>

Expand Down
28 changes: 25 additions & 3 deletions js/editor-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,22 @@ window.EditorActions = {
});
});

// Export Format Toggle
document.querySelectorAll('#export-format-toggle .mode-tab').forEach(btn => {
btn.addEventListener('click', (e) => {
const format = e.currentTarget.getAttribute('data-format');
document.querySelectorAll('#export-format-toggle .mode-tab').forEach(b => b.classList.remove('active'));
e.currentTarget.classList.add('active');

const pdfOptions = document.getElementById('pdf-export-options');
if (format === 'pdf') {
pdfOptions.style.display = 'block';
} else {
pdfOptions.style.display = 'none';
}
});
});

// Browse File
document.getElementById('btn-browse-file')?.addEventListener('click', () => {
document.getElementById('transfer-import-file').click();
Expand Down Expand Up @@ -159,7 +175,13 @@ window.EditorActions = {
// Execute Export
document.getElementById('btn-execute-export')?.addEventListener('click', () => {
const filename = document.getElementById('export-filename-input').value.trim();
this.handleExportMd(filename);
const format = document.querySelector('#export-format-toggle .mode-tab.active').getAttribute('data-format');

if (format === 'pdf') {
this.handlePdfExport(filename);
} else {
this.handleExportMd(filename);
}
window.closeTransferModal();
});
},
Expand Down Expand Up @@ -423,9 +445,9 @@ window.EditorActions = {
if (window.lucide) lucide.createIcons();
},

handlePdfExport() {
handlePdfExport(customFilename = null) {
const inputFilename = document.getElementById('pdf-filename');
let fileName = inputFilename.value.trim() || window.EditorState.getActiveNote().title || "Document";
let fileName = customFilename || inputFilename.value.trim() || window.EditorState.getActiveNote().title || "Document";
if (typeof window.closePdfModal === "function") window.closePdfModal();

const style = document.createElement('style');
Expand Down
13 changes: 13 additions & 0 deletions js/editor-core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,15 @@ window.EditorCore = {
nTitle.style.cursor = 'pointer';

nTitle.addEventListener('click', async () => {
if (isSelectMode) {
const cb = noteRow.querySelector('.manage-checkbox');
if (cb) {
cb.checked = !cb.checked;
cb.dispatchEvent(new Event('change'));
}
return;
}

window.EditorState.activeNoteId = note.id;
this.highlightedNoteId = note.id;
window.EditorState.activeFolder = note.folder || 'All Notes';
Expand Down Expand Up @@ -664,8 +673,12 @@ document.addEventListener('DOMContentLoaded', () => {
// Editor Events
editor.addEventListener('input', () => {
window.EditorCore.dynamicDebounce(editor.value);
window.EditorCore.updateLineCol(editor);
});

editor.addEventListener('click', () => window.EditorCore.updateLineCol(editor));
editor.addEventListener('keyup', () => window.EditorCore.updateLineCol(editor));

editor.addEventListener('keydown', function (e) {
if (e.key === 'Tab') {
e.preventDefault();
Expand Down
61 changes: 57 additions & 4 deletions js/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,33 +408,86 @@ document.addEventListener('DOMContentLoaded', () => {
window.selectedPageSize = val;
});

setupStaticDropdown('transfer-size-dropdown', 'transfer-size-selected-text', (val) => {
window.selectedPageSize = val;
});

const divider = document.getElementById('drag-divider');
const editorPanel = document.getElementById('editor-panel-wrapper');
const previewPanel = document.getElementById('preview-panel');
const container = document.getElementById('split-workspace');
const restoreLeft = document.getElementById('restore-left');
const restoreRight = document.getElementById('restore-right');
let isDragging = false;
let dragRaf;

if (divider && editorPanel && container) {
divider.addEventListener('mousedown', () => {
isDragging = true;
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
container.classList.add('is-resizing');
});

document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
let newWidthPercentage = ((e.clientX - container.getBoundingClientRect().left) / container.getBoundingClientRect().width) * 100;
if (newWidthPercentage < 20) newWidthPercentage = 20;
if (newWidthPercentage > 80) newWidthPercentage = 80;
editorPanel.style.flex = `0 0 ${newWidthPercentage}%`;

if (dragRaf) cancelAnimationFrame(dragRaf);

dragRaf = requestAnimationFrame(() => {
const containerRect = container.getBoundingClientRect();
let newWidthPercentage = ((e.clientX - containerRect.left) / containerRect.width) * 100;

if (newWidthPercentage <= 5) {
// Collapse to Preview Only
document.body.classList.add('view-preview');
document.body.classList.remove('view-editor');
restoreLeft.style.display = 'flex';
restoreRight.style.display = 'none';
isDragging = false;
document.body.style.cursor = 'default';
} else if (newWidthPercentage >= 95) {
// Collapse to Editor Only
document.body.classList.add('view-editor');
document.body.classList.remove('view-preview');
restoreRight.style.display = 'flex';
restoreLeft.style.display = 'none';
isDragging = false;
document.body.style.cursor = 'default';
} else {
document.body.classList.remove('view-editor', 'view-preview');
restoreLeft.style.display = 'none';
restoreRight.style.display = 'none';
editorPanel.style.flex = `0 0 ${newWidthPercentage}%`;
}
});
});

document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
document.body.style.cursor = 'default';
document.body.style.userSelect = 'auto';
container.classList.remove('is-resizing');
}
});

const restoreSplit = () => {
document.body.classList.remove('view-editor', 'view-preview');
editorPanel.style.flex = '0 0 50%';
restoreLeft.style.display = 'none';
restoreRight.style.display = 'none';
if (window.lucide) lucide.createIcons();

// Update view buttons UI
document.querySelectorAll('.view-btn').forEach(b => {
b.classList.remove('active');
if (b.getAttribute('data-view') === 'split') b.classList.add('active');
});
};

restoreLeft?.addEventListener('click', restoreSplit);
restoreRight?.addEventListener('click', restoreSplit);
}

const applyTheme = (themeName) => {
Expand Down
Loading