added basic formatting keyboard shortcuts
This commit is contained in:
parent
5fa273583f
commit
5c19286204
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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)"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue