Skip to content

Commit f2ffbef

Browse files
apandey-devapandey-dev
authored
Merge pull request #14 from apandey-dev/refactor-modularize-editor-3576818610782043946
Refactor editor.js into modules and perform feature cleanup
2 parents c46f889 + ec7cd28 commit f2ffbef

7 files changed

Lines changed: 130 additions & 169 deletions

File tree

‎index.html‎

Lines changed: 61 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -244,11 +244,10 @@ <h3>Menu</h3>
244244
</span>
245245
<div class="toolbar-divider" style="height: 12px; margin: 0; opacity: 0.3;"></div>
246246
<span id="stat-line-col" style="opacity: 0.8;">Line 1, Col 1</span>
247-
<div class="toolbar-divider" id="manual-save-divider" style="height: 12px; margin: 0; opacity: 0.3; display: none;"></div>
248-
<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;">
249-
<i data-lucide="save" style="width: 12px; height: 12px;"></i> Save
250-
</button>
251247
</div>
248+
<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;">
249+
<i data-lucide="minimize" style="width: 14px; height: 14px;"></i>
250+
</button>
252251
</div>
253252

254253
<div class="sb-section">
@@ -298,15 +297,15 @@ <h3>General Settings</h3>
298297
<p>Core editor behavior and data options.</p>
299298
</div>
300299
<div class="settings-grid">
300+
<!-- Auto Save is now mandatory and always enabled. UI toggle removed. -->
301301
<div class="setting-card">
302302
<div class="setting-details">
303-
<span class="setting-card-title">Auto Save</span>
304-
<span class="setting-card-desc">Save changes automatically to your storage.</span>
303+
<span class="setting-card-title">Storage Status</span>
304+
<span class="setting-card-desc">All changes are automatically saved to your workspace.</span>
305+
</div>
306+
<div style="color: var(--accent-color); font-weight: 600; font-size: 0.85rem;">
307+
<i data-lucide="check-circle" style="width: 14px; height: 14px; vertical-align: -2px;"></i> Active
305308
</div>
306-
<label class="switch">
307-
<input type="checkbox" id="setting-auto-save" checked>
308-
<span class="slider"></span>
309-
</label>
310309
</div>
311310
</div>
312311
</div>
@@ -319,11 +318,21 @@ <h3>UI Components</h3>
319318
<div class="settings-grid">
320319
<div class="setting-card">
321320
<div class="setting-details">
322-
<span class="setting-card-title">Top App Bar</span>
323-
<span class="setting-card-desc">Show or hide the main navigation bar.</span>
321+
<span class="setting-card-title">Cloud/Local Switcher</span>
322+
<span class="setting-card-desc">Show the mode toggle in the navbar.</span>
324323
</div>
325324
<label class="switch">
326-
<input type="checkbox" id="toggle-top-navbar" checked data-component=".navbar">
325+
<input type="checkbox" id="toggle-nav-mode" checked data-component="#nav-mode-toggle">
326+
<span class="slider"></span>
327+
</label>
328+
</div>
329+
<div class="setting-card">
330+
<div class="setting-details">
331+
<span class="setting-card-title">App Actions</span>
332+
<span class="setting-card-desc">Notes, Manage, Share and Print buttons.</span>
333+
</div>
334+
<label class="switch">
335+
<input type="checkbox" id="toggle-nav-actions" checked data-component="#btn-notes-desktop, #btn-manage, #btn-share, #btn-pdf">
327336
<span class="slider"></span>
328337
</label>
329338
</div>
@@ -340,7 +349,7 @@ <h3>UI Components</h3>
340349
<div class="setting-card">
341350
<div class="setting-details">
342351
<span class="setting-card-title">Bottom Status Bar</span>
343-
<span class="setting-card-desc">Show the bottom bar with word counts and theme toggle.</span>
352+
<span class="setting-card-desc">Show the bottom bar completely.</span>
344353
</div>
345354
<label class="switch">
346355
<input type="checkbox" id="toggle-bottom-toolbar" checked data-component=".status-bar">
@@ -352,47 +361,57 @@ <h3>UI Components</h3>
352361

353362
<div class="settings-content" id="settings-section-editor">
354363
<div class="settings-content-header">
355-
<h3>Editor Settings</h3>
356-
<p>Fine-tune formatting tools and editor features.</p>
364+
<h3>Editor Toolbar Groups</h3>
365+
<p>Toggle specific groups of tools in the toolbar.</p>
357366
</div>
358367
<div class="settings-grid">
359368
<div class="setting-card">
360369
<div class="setting-details">
361-
<span class="setting-card-title">Formatting Tools</span>
362-
<span class="setting-card-desc">Toggle Bold, Italic and Heading tools.</span>
370+
<span class="setting-card-title">Basic Formatting</span>
371+
<span class="setting-card-desc">Bold, Italic, and Heading tools.</span>
363372
</div>
364373
<label class="switch">
365-
<input type="checkbox" id="toggle-toolbar-format" checked data-component=".editor-toolbar .toolbar-group:nth-child(1), .editor-toolbar [data-action='heading']">
374+
<input type="checkbox" id="toggle-toolbar-format" checked data-component=".editor-toolbar .toolbar-group:nth-child(1)">
366375
<span class="slider"></span>
367376
</label>
368377
</div>
369378
<div class="setting-card">
370379
<div class="setting-details">
371-
<span class="setting-card-title">Font Picker</span>
372-
<span class="setting-card-desc">Show the typography selection dropdown.</span>
380+
<span class="setting-card-title">Text Alignment</span>
381+
<span class="setting-card-desc">Left, Center, and Right alignment.</span>
373382
</div>
374383
<label class="switch">
375-
<input type="checkbox" id="toggle-toolbar-font" checked data-component="#font-dropdown">
384+
<input type="checkbox" id="toggle-toolbar-align" checked data-component=".editor-toolbar .toolbar-group:nth-child(2)">
376385
<span class="slider"></span>
377386
</label>
378387
</div>
379388
<div class="setting-card">
380389
<div class="setting-details">
381-
<span class="setting-card-title">Focus Mode</span>
382-
<span class="setting-card-desc">Show the focus mode button in the toolbar.</span>
390+
<span class="setting-card-title">Insert Tools</span>
391+
<span class="setting-card-desc">Links, Images, Code, Tables, and Math.</span>
383392
</div>
384393
<label class="switch">
385-
<input type="checkbox" id="toggle-toolbar-focus" checked data-component="#btn-focus-mode">
394+
<input type="checkbox" id="toggle-toolbar-insert" checked data-component=".editor-toolbar .toolbar-group:nth-child(3)">
386395
<span class="slider"></span>
387396
</label>
388397
</div>
389398
<div class="setting-card">
390399
<div class="setting-details">
391-
<span class="setting-card-title">Sync Scroll</span>
392-
<span class="setting-card-desc">Show the scroll sync toggle button.</span>
400+
<span class="setting-card-title">Font Picker</span>
401+
<span class="setting-card-desc">Typography selection dropdown.</span>
393402
</div>
394403
<label class="switch">
395-
<input type="checkbox" id="toggle-toolbar-scroll" checked data-component="#btn-scroll-sync">
404+
<input type="checkbox" id="toggle-toolbar-font" checked data-component="#font-dropdown">
405+
<span class="slider"></span>
406+
</label>
407+
</div>
408+
<div class="setting-card">
409+
<div class="setting-details">
410+
<span class="setting-card-title">Workspace Views</span>
411+
<span class="setting-card-desc">Editor, Split, and Preview toggles.</span>
412+
</div>
413+
<label class="switch">
414+
<input type="checkbox" id="toggle-toolbar-views" checked data-component=".editor-toolbar .toolbar-group:nth-child(8)">
396415
<span class="slider"></span>
397416
</label>
398417
</div>
@@ -401,34 +420,34 @@ <h3>Editor Settings</h3>
401420

402421
<div class="settings-content" id="settings-section-interface">
403422
<div class="settings-content-header">
404-
<h3>Interface Controls</h3>
405-
<p>Control specific buttons and indicators.</p>
423+
<h3>Status Bar & Indicators</h3>
424+
<p>Control specific items in the bottom bar.</p>
406425
</div>
407426
<div class="settings-grid">
408427
<div class="setting-card">
409428
<div class="setting-details">
410-
<span class="setting-card-title">Theme Switcher</span>
411-
<span class="setting-card-desc">Show the Light/Dark theme toggle in status bar.</span>
429+
<span class="setting-card-title">Word & Char Stats</span>
430+
<span class="setting-card-desc">Live counts in the status bar.</span>
412431
</div>
413432
<label class="switch">
414-
<input type="checkbox" id="toggle-bottom-theme" checked data-component=".sb-theme-toggle">
433+
<input type="checkbox" id="toggle-bottom-stats" checked data-component=".status-bar .sb-section:nth-child(2) .action-pill-group">
415434
<span class="slider"></span>
416435
</label>
417436
</div>
418437
<div class="setting-card">
419438
<div class="setting-details">
420-
<span class="setting-card-title">Live Statistics</span>
421-
<span class="setting-card-desc">Show Word and Character counts.</span>
439+
<span class="setting-card-title">Theme Toggle</span>
440+
<span class="setting-card-desc">Light/Dark switcher in status bar.</span>
422441
</div>
423442
<label class="switch">
424-
<input type="checkbox" id="toggle-bottom-stats" checked data-component=".status-bar .sb-section:nth-child(2) .action-pill-group">
443+
<input type="checkbox" id="toggle-bottom-theme" checked data-component=".sb-theme-toggle">
425444
<span class="slider"></span>
426445
</label>
427446
</div>
428447
<div class="setting-card">
429448
<div class="setting-details">
430-
<span class="setting-card-title">Cloud Indicator</span>
431-
<span class="setting-card-desc">Show the current sync status in the status bar.</span>
449+
<span class="setting-card-title">Mode Indicator</span>
450+
<span class="setting-card-desc">Cloud/Local status indicator.</span>
432451
</div>
433452
<label class="switch">
434453
<input type="checkbox" id="toggle-mode-indicator" checked data-component="#active-mode-indicator">
@@ -437,11 +456,11 @@ <h3>Interface Controls</h3>
437456
</div>
438457
<div class="setting-card">
439458
<div class="setting-details">
440-
<span class="setting-card-title">Action Buttons</span>
441-
<span class="setting-card-desc">Show Share and PDF export buttons in navbar.</span>
459+
<span class="setting-card-title">Line & Col Status</span>
460+
<span class="setting-card-desc">Current cursor position display.</span>
442461
</div>
443462
<label class="switch">
444-
<input type="checkbox" id="toggle-top-actions" checked data-component=".navbar .action-pill-group.desktop-only">
463+
<input type="checkbox" id="toggle-stat-linecol" checked data-component="#stat-line-col">
445464
<span class="slider"></span>
446465
</label>
447466
</div>
@@ -833,11 +852,11 @@ <h3 class="modal-title flex-title"><i data-lucide="file-text"></i> Export Settin
833852
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
834853
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/contrib/auto-render.min.js"></script>
835854

836-
<script src="js/ui.js" defer></script>
837855
<script src="js/github.js" defer></script>
838856
<script src="js/editor-state.js" defer></script>
839857
<script src="js/editor-actions.js" defer></script>
840858
<script src="js/editor-core.js" defer></script>
859+
<script src="js/ui.js" defer></script>
841860
</body>
842861

843862
</html>

‎js/editor-actions.js‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -404,46 +404,6 @@ window.EditorActions = {
404404
reader.readAsText(file);
405405
},
406406

407-
async handleManualSave() {
408-
const activeNote = window.EditorState.getActiveNote();
409-
if (!activeNote) return;
410-
411-
const editor = document.getElementById('markdown-input');
412-
activeNote.content = editor.value;
413-
activeNote.lastUpdated = Date.now();
414-
415-
const saveBtn = document.getElementById('btn-manual-save');
416-
const originalHtml = saveBtn.innerHTML;
417-
saveBtn.innerHTML = '<i data-lucide="loader" class="spin" style="width: 12px; height: 12px;"></i> Saving';
418-
saveBtn.disabled = true;
419-
if (window.lucide) lucide.createIcons();
420-
421-
try {
422-
await window.EditorState.saveLocalState();
423-
if (window.EditorState.appMode === 'github') {
424-
window.EditorState.pendingSync = true;
425-
// In GitHub mode, we manually trigger the sync immediately
426-
await window.EditorState.performCloudSync();
427-
}
428-
429-
// Clear drafts for this note on successful explicit save
430-
try {
431-
let drafts = JSON.parse(localStorage.getItem('md_unsaved_drafts') || '{}');
432-
if (drafts[activeNote.id]) {
433-
delete drafts[activeNote.id];
434-
localStorage.setItem('md_unsaved_drafts', JSON.stringify(drafts));
435-
}
436-
} catch (e) {}
437-
438-
window.showToast("<i data-lucide='check-circle'></i> Saved Successfully");
439-
} catch (e) {
440-
window.showToast("<i data-lucide='alert-triangle'></i> Save Failed");
441-
} finally {
442-
saveBtn.innerHTML = originalHtml;
443-
saveBtn.disabled = false;
444-
if (window.lucide) lucide.createIcons();
445-
}
446-
},
447407

448408
async handleSecureShare() {
449409
const editor = document.getElementById('markdown-input');

0 commit comments

Comments
 (0)