update

felipe-parodi · Dec 28, 2024 · fa9efcb · fa9efcb
1 parent 8c2a138
commit fa9efcb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 46 deletions.
diff --git a/app.js b/app.js
@@ -173,48 +173,10 @@ class NotesManager {
 
             const note = this.notes.find(note => note.id === this.currentNoteId);
             if (note) {
-                // Get current cursor position and active line
-                const selection = window.getSelection();
-                const currentLine = selection.anchorNode.parentElement;
+                note.content = this.noteContent.value;
+                // Update preview
+                this.previewContent.innerHTML = marked.parse(note.content);
 
-                // Split content into lines and store raw content
-                note.content = this.noteContent.innerText;
-                const lines = note.content.split('\n');
-
-                // Clear existing content
-                this.noteContent.innerHTML = '';
-
-                // Render each line
-                lines.forEach((line, index) => {
-                    const lineDiv = document.createElement('div');
-                    lineDiv.className = 'note-line';
-
-                    if (currentLine && currentLine.dataset.lineIndex === String(index)) {
-                        // Keep current line as plain text
-                        lineDiv.textContent = line;
-                        lineDiv.contentEditable = "true";
-                    } else {
-                        // Render other lines as markdown
-                        lineDiv.innerHTML = marked.parse(line || ' ');  // Use space to preserve empty lines
-                        lineDiv.contentEditable = "false";
-                    }
-
-                    lineDiv.dataset.lineIndex = String(index);
-                    this.noteContent.appendChild(lineDiv);
-                });
-
-                // Restore cursor position if possible
-                if (currentLine) {
-                    const newCurrentLine = this.noteContent.querySelector(`[data-line-index="${currentLine.dataset.lineIndex}"]`);
-                    if (newCurrentLine) {
-                        const range = document.createRange();
-                        range.selectNodeContents(newCurrentLine);
-                        range.collapse(false);
-                        selection.removeAllRanges();
-                        selection.addRange(range);
-                    }
-                }
-
                 this.updateNoteTitle(note);
                 note.lastModified = new Date();
                 this.saveNotes();

diff --git a/index.html b/index.html
@@ -24,8 +24,8 @@
         </div>
         <div class="editor-container">
             <div class="split-view">
-                <div id="note-content" class="editable" contenteditable="false"></div>
-                <div id="live-preview" class="preview"></div>
+                <textarea id="note-content" class="editor" placeholder="Please click 'New Note' to create a note, or select an existing note from the dropdown." disabled></textarea>
+                <div id="preview-content" class="preview"></div>
             </div>
         </div>
         <div id="delete-modal" class="modal">

diff --git a/style.css b/style.css
@@ -85,18 +85,25 @@ button:hover {
     flex-grow: 1;
 }
 
+.split-view {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    gap: 1px;
+    background-color: var(--border-color);
+}
+
 #note-content {
-    width: 100%;
+    width: 50%;
     flex: 1;
     padding: 20px;
     font-size: 16px;
     border: none;
     box-sizing: border-box;
+    resize: none;
     font-family: inherit;
     background-color: var(--textarea-bg);
     color: var(--text-color);
-    white-space: pre-wrap;
-    overflow-y: auto;
 }
 
 #note-content[contenteditable="false"] {
@@ -189,4 +196,12 @@ button:hover {
 .note-line:focus {
     outline: none;
     background-color: rgba(0, 0, 0, 0.05);
+}
+
+#preview-content {
+    width: 50%;
+    flex: 1;
+    padding: 20px;
+    background-color: var(--textarea-bg);
+    overflow-y: auto;
 }