Skip to content

Refactor editor.js into modules and perform feature cleanup #14

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 into modules and perform feature cleanup #14

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
103 changes: 61 additions & 42 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,11 +244,10 @@ <h3>Menu</h3>
</span>
<div class="toolbar-divider" style="height: 12px; margin: 0; opacity: 0.3;"></div>
<span id="stat-line-col" style="opacity: 0.8;">Line 1, Col 1</span>
<div class="toolbar-divider" id="manual-save-divider" style="height: 12px; margin: 0; opacity: 0.3; display: none;"></div>
<button id="btn-manual-save" class="pill-action-btn" style="display: none; padding: 2px 8px; font-size: 0.7rem; gap: 4px; background: var(--accent-color); color: white; border-radius: 6px;">
<i data-lucide="save" style="width: 12px; height: 12px;"></i> Save
</button>
</div>
<button id="btn-exit-focus-bottom" class="pill-action-btn" data-tooltip="Exit Focus Mode" style="display: none; background: var(--accent-color); color: var(--btn-text); margin-left: 8px;">
<i data-lucide="minimize" style="width: 14px; height: 14px;"></i>
</button>
</div>

<div class="sb-section">
Expand Down Expand Up @@ -298,15 +297,15 @@ <h3>General Settings</h3>
<p>Core editor behavior and data options.</p>
</div>
<div class="settings-grid">
<!-- Auto Save is now mandatory and always enabled. UI toggle removed. -->
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Auto Save</span>
<span class="setting-card-desc">Save changes automatically to your storage.</span>
<span class="setting-card-title">Storage Status</span>
<span class="setting-card-desc">All changes are automatically saved to your workspace.</span>
</div>
<div style="color: var(--accent-color); font-weight: 600; font-size: 0.85rem;">
<i data-lucide="check-circle" style="width: 14px; height: 14px; vertical-align: -2px;"></i> Active
</div>
<label class="switch">
<input type="checkbox" id="setting-auto-save" checked>
<span class="slider"></span>
</label>
</div>
</div>
</div>
Expand All @@ -319,11 +318,21 @@ <h3>UI Components</h3>
<div class="settings-grid">
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Top App Bar</span>
<span class="setting-card-desc">Show or hide the main navigation bar.</span>
<span class="setting-card-title">Cloud/Local Switcher</span>
<span class="setting-card-desc">Show the mode toggle in the navbar.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-top-navbar" checked data-component=".navbar">
<input type="checkbox" id="toggle-nav-mode" checked data-component="#nav-mode-toggle">
<span class="slider"></span>
</label>
</div>
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">App Actions</span>
<span class="setting-card-desc">Notes, Manage, Share and Print buttons.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-nav-actions" checked data-component="#btn-notes-desktop, #btn-manage, #btn-share, #btn-pdf">
<span class="slider"></span>
</label>
</div>
Expand All @@ -340,7 +349,7 @@ <h3>UI Components</h3>
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Bottom Status Bar</span>
<span class="setting-card-desc">Show the bottom bar with word counts and theme toggle.</span>
<span class="setting-card-desc">Show the bottom bar completely.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-bottom-toolbar" checked data-component=".status-bar">
Expand All @@ -352,47 +361,57 @@ <h3>UI Components</h3>

<div class="settings-content" id="settings-section-editor">
<div class="settings-content-header">
<h3>Editor Settings</h3>
<p>Fine-tune formatting tools and editor features.</p>
<h3>Editor Toolbar Groups</h3>
<p>Toggle specific groups of tools in the toolbar.</p>
</div>
<div class="settings-grid">
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Formatting Tools</span>
<span class="setting-card-desc">Toggle Bold, Italic and Heading tools.</span>
<span class="setting-card-title">Basic Formatting</span>
<span class="setting-card-desc">Bold, Italic, and Heading tools.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-toolbar-format" checked data-component=".editor-toolbar .toolbar-group:nth-child(1), .editor-toolbar [data-action='heading']">
<input type="checkbox" id="toggle-toolbar-format" checked data-component=".editor-toolbar .toolbar-group:nth-child(1)">
<span class="slider"></span>
</label>
</div>
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Font Picker</span>
<span class="setting-card-desc">Show the typography selection dropdown.</span>
<span class="setting-card-title">Text Alignment</span>
<span class="setting-card-desc">Left, Center, and Right alignment.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-toolbar-font" checked data-component="#font-dropdown">
<input type="checkbox" id="toggle-toolbar-align" checked data-component=".editor-toolbar .toolbar-group:nth-child(2)">
<span class="slider"></span>
</label>
</div>
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Focus Mode</span>
<span class="setting-card-desc">Show the focus mode button in the toolbar.</span>
<span class="setting-card-title">Insert Tools</span>
<span class="setting-card-desc">Links, Images, Code, Tables, and Math.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-toolbar-focus" checked data-component="#btn-focus-mode">
<input type="checkbox" id="toggle-toolbar-insert" checked data-component=".editor-toolbar .toolbar-group:nth-child(3)">
<span class="slider"></span>
</label>
</div>
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Sync Scroll</span>
<span class="setting-card-desc">Show the scroll sync toggle button.</span>
<span class="setting-card-title">Font Picker</span>
<span class="setting-card-desc">Typography selection dropdown.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-toolbar-scroll" checked data-component="#btn-scroll-sync">
<input type="checkbox" id="toggle-toolbar-font" checked data-component="#font-dropdown">
<span class="slider"></span>
</label>
</div>
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Workspace Views</span>
<span class="setting-card-desc">Editor, Split, and Preview toggles.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-toolbar-views" checked data-component=".editor-toolbar .toolbar-group:nth-child(8)">
<span class="slider"></span>
</label>
</div>
Expand All @@ -401,34 +420,34 @@ <h3>Editor Settings</h3>

<div class="settings-content" id="settings-section-interface">
<div class="settings-content-header">
<h3>Interface Controls</h3>
<p>Control specific buttons and indicators.</p>
<h3>Status Bar & Indicators</h3>
<p>Control specific items in the bottom bar.</p>
</div>
<div class="settings-grid">
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Theme Switcher</span>
<span class="setting-card-desc">Show the Light/Dark theme toggle in status bar.</span>
<span class="setting-card-title">Word & Char Stats</span>
<span class="setting-card-desc">Live counts in the status bar.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-bottom-theme" checked data-component=".sb-theme-toggle">
<input type="checkbox" id="toggle-bottom-stats" checked data-component=".status-bar .sb-section:nth-child(2) .action-pill-group">
<span class="slider"></span>
</label>
</div>
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Live Statistics</span>
<span class="setting-card-desc">Show Word and Character counts.</span>
<span class="setting-card-title">Theme Toggle</span>
<span class="setting-card-desc">Light/Dark switcher in status bar.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-bottom-stats" checked data-component=".status-bar .sb-section:nth-child(2) .action-pill-group">
<input type="checkbox" id="toggle-bottom-theme" checked data-component=".sb-theme-toggle">
<span class="slider"></span>
</label>
</div>
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Cloud Indicator</span>
<span class="setting-card-desc">Show the current sync status in the status bar.</span>
<span class="setting-card-title">Mode Indicator</span>
<span class="setting-card-desc">Cloud/Local status indicator.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-mode-indicator" checked data-component="#active-mode-indicator">
Expand All @@ -437,11 +456,11 @@ <h3>Interface Controls</h3>
</div>
<div class="setting-card">
<div class="setting-details">
<span class="setting-card-title">Action Buttons</span>
<span class="setting-card-desc">Show Share and PDF export buttons in navbar.</span>
<span class="setting-card-title">Line & Col Status</span>
<span class="setting-card-desc">Current cursor position display.</span>
</div>
<label class="switch">
<input type="checkbox" id="toggle-top-actions" checked data-component=".navbar .action-pill-group.desktop-only">
<input type="checkbox" id="toggle-stat-linecol" checked data-component="#stat-line-col">
<span class="slider"></span>
</label>
</div>
Expand Down Expand Up @@ -833,11 +852,11 @@ <h3 class="modal-title flex-title"><i data-lucide="file-text"></i> Export Settin
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/contrib/auto-render.min.js"></script>

<script src="js/ui.js" defer></script>
<script src="js/github.js" defer></script>
<script src="js/editor-state.js" defer></script>
<script src="js/editor-actions.js" defer></script>
<script src="js/editor-core.js" defer></script>
<script src="js/ui.js" defer></script>
</body>

</html>
40 changes: 0 additions & 40 deletions js/editor-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,46 +404,6 @@ window.EditorActions = {
reader.readAsText(file);
},

async handleManualSave() {
const activeNote = window.EditorState.getActiveNote();
if (!activeNote) return;

const editor = document.getElementById('markdown-input');
activeNote.content = editor.value;
activeNote.lastUpdated = Date.now();

const saveBtn = document.getElementById('btn-manual-save');
const originalHtml = saveBtn.innerHTML;
saveBtn.innerHTML = '<i data-lucide="loader" class="spin" style="width: 12px; height: 12px;"></i> Saving';
saveBtn.disabled = true;
if (window.lucide) lucide.createIcons();

try {
await window.EditorState.saveLocalState();
if (window.EditorState.appMode === 'github') {
window.EditorState.pendingSync = true;
// In GitHub mode, we manually trigger the sync immediately
await window.EditorState.performCloudSync();
}

// Clear drafts for this note on successful explicit save
try {
let drafts = JSON.parse(localStorage.getItem('md_unsaved_drafts') || '{}');
if (drafts[activeNote.id]) {
delete drafts[activeNote.id];
localStorage.setItem('md_unsaved_drafts', JSON.stringify(drafts));
}
} catch (e) {}

window.showToast("<i data-lucide='check-circle'></i> Saved Successfully");
} catch (e) {
window.showToast("<i data-lucide='alert-triangle'></i> Save Failed");
} finally {
saveBtn.innerHTML = originalHtml;
saveBtn.disabled = false;
if (window.lucide) lucide.createIcons();
}
},

async handleSecureShare() {
const editor = document.getElementById('markdown-input');
Expand Down
Loading