added basic formatting keyboard shortcuts
This commit is contained in:
parent
5fa273583f
commit
5c19286204
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1298,6 +1298,7 @@
|
|||
:style="viewMode === 'split' ? `width: ${editorWidth}%;` : 'width: 100%;'"
|
||||
>
|
||||
<textarea
|
||||
id="note-editor"
|
||||
x-model="noteContent"
|
||||
@input="autoSave()"
|
||||
@drop="onEditorDrop($event)"
|
||||
|
|
|
|||
Loading…
Reference in New Issue