added basic formatting keyboard shortcuts

This commit is contained in:
Gamosoft 2025-11-24 10:17:21 +01:00
parent 5fa273583f
commit 5c19286204
3 changed files with 95 additions and 0 deletions

View File

@ -139,6 +139,8 @@ graph TD
## ⚡ Keyboard Shortcuts ## ⚡ Keyboard Shortcuts
### General
| Windows/Linux | Mac | Action | | Windows/Linux | Mac | Action |
|---------------|-----|--------| |---------------|-----|--------|
| `Ctrl+S` | `Cmd+S` | Save note | | `Ctrl+S` | `Cmd+S` | Save note |
@ -149,6 +151,14 @@ graph TD
| `F3` | `F3` | Next search match | | `F3` | `F3` | Next search match |
| `Shift+F3` | `Shift+F3` | Previous 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 ## 🚀 Performance
- **Instant loading** - No lag, no loading spinners - **Instant loading** - No lag, no loading spinners

View File

@ -385,6 +385,28 @@ function noteApp() {
e.preventDefault(); e.preventDefault();
this.previousMatch(); 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 // Save current note
async saveNote() { async saveNote() {
if (!this.currentNote) return; if (!this.currentNote) return;

View File

@ -1298,6 +1298,7 @@
:style="viewMode === 'split' ? `width: ${editorWidth}%;` : 'width: 100%;'" :style="viewMode === 'split' ? `width: ${editorWidth}%;` : 'width: 100%;'"
> >
<textarea <textarea
id="note-editor"
x-model="noteContent" x-model="noteContent"
@input="autoSave()" @input="autoSave()"
@drop="onEditorDrop($event)" @drop="onEditorDrop($event)"