From 5c192862041dd0558fce5b5dcc5de1d0b3cf15d5 Mon Sep 17 00:00:00 2001
From: Gamosoft <gamosoft@users.noreply.github.com>
Date: Mon, 24 Nov 2025 10:17:21 +0100
Subject: [PATCH] added basic formatting keyboard shortcuts

---
 documentation/FEATURES.md | 10 +++++
 frontend/app.js           | 84 +++++++++++++++++++++++++++++++++++++++
 frontend/index.html       |  1 +
 3 files changed, 95 insertions(+)

diff --git a/documentation/FEATURES.md b/documentation/FEATURES.md
index 994fe06..36d35f6 100644
--- a/documentation/FEATURES.md
+++ b/documentation/FEATURES.md
@@ -139,6 +139,8 @@ graph TD
 
 ## ⚡ Keyboard Shortcuts
 
+### General
+
 | Windows/Linux | Mac | Action |
 |---------------|-----|--------|
 | `Ctrl+S` | `Cmd+S` | Save note |
@@ -149,6 +151,14 @@ graph TD
 | `F3` | `F3` | Next search match |
 | `Shift+F3` | `Shift+F3` | Previous search match |
 
+### Markdown Formatting
+
+| Windows/Linux | Mac | Action | Result |
+|---------------|-----|--------|--------|
+| `Ctrl+B` | `Cmd+B` | Bold | `**text**` |
+| `Ctrl+I` | `Cmd+I` | Italic | `*text*` |
+| `Ctrl+K` | `Cmd+K` | Insert link | `[text](url)` |
+
 ## 🚀 Performance
 
 - **Instant loading** - No lag, no loading spinners
diff --git a/frontend/app.js b/frontend/app.js
index c4685eb..a8bfbcf 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -385,6 +385,28 @@ function noteApp() {
                         e.preventDefault();
                         this.previousMatch();
                     }
+                    
+                    // Only apply markdown shortcuts when editor is focused and a note is open
+                    const isEditorFocused = document.activeElement?.id === 'note-editor';
+                    if (isEditorFocused && this.currentNote) {
+                        // Ctrl/Cmd + B for bold
+                        if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
+                            e.preventDefault();
+                            this.wrapSelection('**', '**', 'bold text');
+                        }
+                        
+                        // Ctrl/Cmd + I for italic
+                        if ((e.ctrlKey || e.metaKey) && e.key === 'i') {
+                            e.preventDefault();
+                            this.wrapSelection('*', '*', 'italic text');
+                        }
+                        
+                        // Ctrl/Cmd + K for link
+                        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                            e.preventDefault();
+                            this.insertLink();
+                        }
+                    }
                 });
             }
             
@@ -1967,6 +1989,68 @@ function noteApp() {
             });
         },
         
+        // Markdown formatting helpers
+        wrapSelection(before, after, placeholder) {
+            const editor = document.getElementById('note-editor');
+            if (!editor) return;
+            
+            const start = editor.selectionStart;
+            const end = editor.selectionEnd;
+            const selectedText = this.noteContent.substring(start, end);
+            const textToWrap = selectedText || placeholder;
+            
+            // Build the new text
+            const newText = before + textToWrap + after;
+            
+            // Update content
+            this.noteContent = this.noteContent.substring(0, start) + newText + this.noteContent.substring(end);
+            
+            // Set cursor position (select the wrapped text or placeholder)
+            this.$nextTick(() => {
+                if (selectedText) {
+                    // If text was selected, keep it selected (inside the wrapper)
+                    editor.setSelectionRange(start + before.length, start + before.length + selectedText.length);
+                } else {
+                    // If no text selected, select the placeholder
+                    editor.setSelectionRange(start + before.length, start + before.length + placeholder.length);
+                }
+                editor.focus();
+            });
+            
+            // Trigger autosave
+            this.autoSave();
+        },
+        
+        insertLink() {
+            const editor = document.getElementById('note-editor');
+            if (!editor) return;
+            
+            const start = editor.selectionStart;
+            const end = editor.selectionEnd;
+            const selectedText = this.noteContent.substring(start, end);
+            
+            // If text is selected, use it as link text; otherwise use placeholder
+            const linkText = selectedText || 'link text';
+            const linkUrl = 'url';
+            
+            // Build the markdown link
+            const newText = `[${linkText}](${linkUrl})`;
+            
+            // Update content
+            this.noteContent = this.noteContent.substring(0, start) + newText + this.noteContent.substring(end);
+            
+            // Set cursor position to select the URL part for easy editing
+            this.$nextTick(() => {
+                const urlStart = start + linkText.length + 3; // After "[linkText]("
+                const urlEnd = urlStart + linkUrl.length;
+                editor.setSelectionRange(urlStart, urlEnd);
+                editor.focus();
+            });
+            
+            // Trigger autosave
+            this.autoSave();
+        },
+        
         // Save current note
         async saveNote() {
             if (!this.currentNote) return;
diff --git a/frontend/index.html b/frontend/index.html
index e923670..204260a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1298,6 +1298,7 @@
                             :style="viewMode === 'split' ? `width: ${editorWidth}%;` : 'width: 100%;'"
                         >
                             <textarea 
+                                id="note-editor"
                                 x-model="noteContent"
                                 @input="autoSave()"
                                 @drop="onEditorDrop($event)"