update

felipe-parodi · Dec 28, 2024 · 258124e · 258124e
1 parent 13c7e3e
commit 258124e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 57 deletions.
diff --git a/app.js b/app.js
@@ -22,13 +22,12 @@ class NotesManager {
         this.searchInput = document.getElementById('search-input');
         this.newNoteBtn = document.getElementById('new-note');
         this.deleteNoteBtn = document.getElementById('delete-note');
-        this.previewBtn = document.getElementById('toggle-preview');
+        this.previewContent = document.getElementById('preview-content');
         this.lastModifiedSpan = document.getElementById('last-modified');
         this.deleteModal = document.getElementById('delete-modal');
         this.confirmDeleteBtn = document.getElementById('confirm-delete');
         this.cancelDeleteBtn = document.getElementById('cancel-delete');
         this.dontShowAgainCheckbox = document.getElementById('dont-show-again');
-        this.previewContent = document.getElementById('preview-content');
 
         // Initialize state
         this.currentNoteId = null;
@@ -48,9 +47,6 @@ class NotesManager {
             gfm: true,        // GitHub Flavored Markdown
             sanitize: false    // Allow HTML in the input
         });
-
-        this.isPreviewMode = false;
-        this.previewBtn.textContent = 'Preview';
     }
 
     /**
@@ -179,14 +175,12 @@ class NotesManager {
                 this.saveNotes();
                 this.updateLastModified(note.lastModified);
                 this.updateWordCount();
-                // Update preview if it's visible
-                if (this.isPreviewMode) {
-                    try {
-                        const renderedContent = marked.parse(note.content);
-                        this.previewContent.innerHTML = renderedContent;
-                    } catch (error) {
-                        console.error('Markdown parsing error:', error);
-                    }
+                // Always update preview
+                try {
+                    const renderedContent = marked.parse(note.content);
+                    this.previewContent.innerHTML = renderedContent;
+                } catch (error) {
+                    console.error('Markdown parsing error:', error);
                 }
             }
         });
@@ -216,8 +210,6 @@ class NotesManager {
             this.skipDeleteConfirmation = e.target.checked;
             localStorage.setItem('skipDeleteConfirmation', e.target.checked);
         });
-
-        this.previewBtn.addEventListener('click', () => this.togglePreview());
     }
 
     initializeKeyboardShortcuts() {
@@ -390,41 +382,6 @@ class NotesManager {
         this.deleteModal.classList.remove('active');
         this.dontShowAgainCheckbox.checked = false;
     }
-
-    togglePreview() {
-        this.isPreviewMode = !this.isPreviewMode;
-
-        // Toggle button active state
-        this.previewBtn.classList.toggle('active');
-
-        if (this.isPreviewMode) {
-            const note = this.notes.find(note => note.id === this.currentNoteId);
-            if (note) {
-                try {
-                    const renderedContent = marked.parse(note.content);
-                    this.previewContent.innerHTML = renderedContent;
-                    this.noteContent.style.display = 'none';
-                    this.previewContent.style.display = 'block';
-                } catch (error) {
-                    console.error('Markdown parsing error:', error);
-                    this.isPreviewMode = false;
-                    this.previewBtn.classList.remove('active');
-                }
-            } else {
-                // If no note is selected, revert preview mode
-                this.isPreviewMode = false;
-                this.previewBtn.classList.remove('active');
-                return;
-            }
-        } else {
-            this.noteContent.style.display = 'block';
-            this.previewContent.style.display = 'none';
-            this.noteContent.focus();
-        }
-
-        // Update preview button text
-        this.previewBtn.textContent = this.isPreviewMode ? 'Edit' : 'Preview';
-    }
 }
 
 // Initialize the app when the DOM is loaded

diff --git a/index.html b/index.html
@@ -15,15 +15,16 @@
                 <option value="">Select a note...</option>
             </select>
             <button id="new-note">New Note</button>
-            <button id="toggle-preview">Preview</button>
             <button id="delete-note">Delete Note</button>
         </div>
         <div class="note-info">
             <span id="last-modified"></span>
             <span id="word-count"></span>
         </div>
-        <textarea id="note-content" placeholder="Please click 'New Note' to create a note, or select an existing note from the dropdown." disabled></textarea>
-        <div id="preview-content" class="markdown-content" style="display: none;"></div>
+        <div class="editor-container">
+            <textarea id="note-content" placeholder="Please click 'New Note' to create a note, or select an existing note from the dropdown." disabled></textarea>
+            <div id="preview-content" class="markdown-content"></div>
+        </div>
         <div id="delete-modal" class="modal">
             <div class="modal-content">
                 <h2>Delete Note</h2>

diff --git a/style.css b/style.css
@@ -76,18 +76,26 @@ button:hover {
     border-bottom: 1px solid var(--border-color);
 }
 
+.editor-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    position: relative;
+}
+
 #note-content {
     width: 100%;
-    flex-grow: 1;  /* Take remaining vertical space */
+    height: 50%;
     padding: 20px;
     font-size: 16px;
-    border: none;  /* Remove borders for cleaner look */
+    border: none;
     border-radius: 0;
     box-sizing: border-box;
-    resize: none;  /* Disable resize handle */
+    resize: none;
     font-family: inherit;
     background-color: var(--textarea-bg);
     color: var(--text-color);
+    border-bottom: 1px solid var(--border-color);
 }
 
 #note-content:focus {
@@ -208,12 +216,13 @@ button:hover {
 
 .markdown-content {
     width: 100%;
-    flex-grow: 1;
+    height: 50%;
     padding: 20px;
     font-size: 16px;
     background-color: var(--textarea-bg);
     color: var(--text-color);
     overflow-y: auto;
+    border-top: 1px solid var(--border-color);
 }
 
 /* Basic markdown styles */