mirror of
https://github.com/heyman/heynote.git
synced 2025-06-27 21:12:00 +02:00
Add descriptions and categories to commands
Use the descriptions and categories in the Command palette and Settings dialog
This commit is contained in:
Jonatan Heyman
parent
bcaa2d3006
commit
a080b627e0
@ -52,9 +52,20 @@
|
||||
]),
|
||||
|
||||
commands() {
|
||||
return Object.keys(HEYNOTE_COMMANDS).map(cmd => ({
|
||||
name: cmd,
|
||||
cmd: cmd,
|
||||
const commands = Object.entries(HEYNOTE_COMMANDS)
|
||||
// sort array first by category, then by description
|
||||
commands.sort((a, b) => {
|
||||
const aCategory = a[1].category || ""
|
||||
const bCategory = b[1].category || ""
|
||||
if (aCategory === bCategory) {
|
||||
return a[1].description.localeCompare(b[1].description)
|
||||
} else {
|
||||
return aCategory.localeCompare(bCategory)
|
||||
}
|
||||
})
|
||||
return commands.map(([cmdKey, cmd]) => ({
|
||||
name: `${cmd.category}: ${cmd.description}`,
|
||||
cmd: cmdKey,
|
||||
isCommand: true,
|
||||
}))
|
||||
},
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script>
|
||||
import { HEYNOTE_COMMANDS } from '@/src/editor/commands'
|
||||
|
||||
export default {
|
||||
props: [
|
||||
"keys",
|
||||
@ -14,6 +16,14 @@
|
||||
window.heynote.platform.isMac ? "⌘" : "Ctrl",
|
||||
)
|
||||
},
|
||||
|
||||
commandLabel() {
|
||||
const cmd = HEYNOTE_COMMANDS[this.command]
|
||||
if (cmd) {
|
||||
return `${cmd.category}: ${cmd.description}`
|
||||
}
|
||||
return HEYNOTE_COMMANDS[this.command]?.description ||this.command
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -29,8 +39,7 @@
|
||||
</template>
|
||||
</td>
|
||||
<td class="command">
|
||||
<span v-if="!command" class="unbound">Unbound</span>
|
||||
<span class="command-name">{{ command }}</span>
|
||||
<span class="command-name">{{ commandLabel }}</span>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<template v-if="!isDefault">
|
||||
@ -54,12 +63,7 @@
|
||||
&.key
|
||||
//letter-spacing: 1px
|
||||
&.command
|
||||
.command-name
|
||||
font-family: monospace
|
||||
margin-right: 10px
|
||||
.unbound
|
||||
font-style: italic
|
||||
color: #999
|
||||
//
|
||||
&.drag-handle
|
||||
width: 24px
|
||||
padding: 0
|
||||
@ -69,10 +73,13 @@
|
||||
background-repeat: no-repeat
|
||||
background-position: center center
|
||||
background-image: url(@/assets/icons/drag-vertical-light.svg)
|
||||
|
||||
+dark-mode
|
||||
background-color: rgba(0,0,0, 0.08)
|
||||
background-image: url(@/assets/icons/drag-vertical-dark.svg)
|
||||
&:hover
|
||||
background-color: rgba(0,0,0, 0.05)
|
||||
+dark-mode
|
||||
background-color: rgba(0,0,0, 0.25)
|
||||
button
|
||||
padding: 0 10px
|
||||
height: 22px
|
||||
|
||||
@ -88,11 +88,11 @@
|
||||
<h2>Keyboard Bindings</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Source</th>
|
||||
<th>Key</th>
|
||||
<th>Command</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<draggable
|
||||
v-model="keymap"
|
||||
|
||||
@ -62,26 +62,79 @@ const nothing = (view) => {
|
||||
return true
|
||||
}
|
||||
|
||||
const cmd = (f, category, description) => ({
|
||||
run: f,
|
||||
name: f.name,
|
||||
description: description,
|
||||
category: category,
|
||||
})
|
||||
|
||||
const cmdLessContext = (f, category, description) => ({
|
||||
run: (editor) => f,
|
||||
name: f.name,
|
||||
description: description,
|
||||
category: category,
|
||||
})
|
||||
|
||||
|
||||
const HEYNOTE_COMMANDS = {
|
||||
//undo,
|
||||
//redo,
|
||||
addNewBlockAfterCurrent: cmd(addNewBlockAfterCurrent, "Block", "Add new block after current block"),
|
||||
addNewBlockBeforeCurrent: cmd(addNewBlockBeforeCurrent, "Block", "Add new block before current block"),
|
||||
addNewBlockAfterLast: cmd(addNewBlockAfterLast, "Block", "Add new block after last block"),
|
||||
addNewBlockBeforeFirst: cmd(addNewBlockBeforeFirst, "Block", "Add new block before first block"),
|
||||
insertNewBlockAtCursor: cmd(insertNewBlockAtCursor, "Block", "Insert new block at cursor"),
|
||||
deleteBlock: cmd(deleteBlock, "Block", "Delete block"),
|
||||
deleteBlockSetCursorPreviousBlock: cmd(deleteBlockSetCursorPreviousBlock, "Block", "Delete block and set cursor to previous block"),
|
||||
cursorPreviousBlock: cmd(cursorPreviousBlock, "Cursor", "Move cursor to previous block"),
|
||||
cursorNextBlock: cmd(cursorNextBlock, "Cursor", "Move cursor to next block"),
|
||||
cursorPreviousParagraph: cmd(cursorPreviousParagraph, "Cursor", "Move cursor to previous paragraph"),
|
||||
cursorNextParagraph: cmd(cursorNextParagraph, "Cursor", "Move cursor to next paragraph"),
|
||||
toggleSelectionMarkMode: cmd(toggleSelectionMarkMode, "Cursor", "Toggle selection mark mode"),
|
||||
selectionMarkModeCancel: cmd(selectionMarkModeCancel, "Cursor", "Cancel selection mark mode"),
|
||||
openLanguageSelector: cmd(openLanguageSelector, "Block", "Select block language"),
|
||||
openBufferSelector: cmd(openBufferSelector, "Buffer", "Buffer selector"),
|
||||
openCommandPalette: cmd(openCommandPalette, "Editor", "Open command palette"),
|
||||
openMoveToBuffer: cmd(openMoveToBuffer, "Block", "Move block to another buffer"),
|
||||
openCreateNewBuffer: cmd(openCreateNewBuffer, "Buffer", "Create new buffer"),
|
||||
cut: cmd(cutCommand, "Clipboard", "Cut selection"),
|
||||
copy: cmd(copyCommand, "Clipboard", "Copy selection"),
|
||||
|
||||
addNewBlockAfterCurrent, addNewBlockBeforeCurrent, addNewBlockAfterLast, addNewBlockBeforeFirst, insertNewBlockAtCursor,
|
||||
cursorPreviousBlock, cursorNextBlock,
|
||||
cursorPreviousParagraph, cursorNextParagraph,
|
||||
deleteBlock, deleteBlockSetCursorPreviousBlock,
|
||||
// commands without editor context
|
||||
paste: cmdLessContext(pasteCommand, "Clipboard", "Paste from clipboard"),
|
||||
selectAll: cmdLessContext(selectAll, "Selection", "Select all"),
|
||||
moveLineUp: cmdLessContext(moveLineUp, "Edit", "Move line up"),
|
||||
moveLineDown: cmdLessContext(moveLineDown, "Edit", "Move line down"),
|
||||
deleteLine: cmdLessContext(deleteLine, "Edit", "Delete line"),
|
||||
formatBlockContent: cmdLessContext(formatBlockContent, "Block", "Format block content"),
|
||||
newCursorAbove: cmdLessContext(newCursorAbove, "Cursor", "Add cursor above"),
|
||||
newCursorBelow: cmdLessContext(newCursorBelow, "Cursor", "Add cursor below"),
|
||||
selectPreviousParagraph: cmdLessContext(selectPreviousParagraph, "Selection", "Select to previous paragraph"),
|
||||
selectNextParagraph: cmdLessContext(selectNextParagraph, "Selection", "Select to next paragraph"),
|
||||
selectPreviousBlock: cmdLessContext(selectPreviousBlock, "Selection", "Select to previous block"),
|
||||
selectNextBlock: cmdLessContext(selectNextBlock, "Selection", "Select to next block"),
|
||||
nothing: cmdLessContext(nothing, "Misc", "Do nothing"),
|
||||
|
||||
toggleSelectionMarkMode,
|
||||
selectionMarkModeCancel,
|
||||
|
||||
openLanguageSelector,
|
||||
openBufferSelector,
|
||||
openCommandPalette,
|
||||
openMoveToBuffer,
|
||||
openCreateNewBuffer,
|
||||
|
||||
cut: cutCommand,
|
||||
copy: copyCommand,
|
||||
// directly from CodeMirror
|
||||
undo: cmdLessContext(undo, "Edit", "Undo"),
|
||||
redo: cmdLessContext(redo, "Edit", "Redo"),
|
||||
indentMore: cmdLessContext(indentMore, "Edit", "Indent more"),
|
||||
indentLess: cmdLessContext(indentLess, "Edit", "Indent less"),
|
||||
foldCode: cmdLessContext(foldCode, "Edit", "Fold code"),
|
||||
unfoldCode: cmdLessContext(unfoldCode, "Edit", "Unfold code"),
|
||||
selectNextOccurrence: cmdLessContext(selectNextOccurrence, "Cursor", "Select next occurrence"),
|
||||
deleteCharBackward: cmdLessContext(deleteCharBackward, "Edit", "Delete character backward"),
|
||||
deleteCharForward: cmdLessContext(deleteCharForward, "Edit", "Delete character forward"),
|
||||
deleteGroupBackward: cmdLessContext(deleteGroupBackward, "Edit", "Delete group backward"),
|
||||
deleteGroupForward: cmdLessContext(deleteGroupForward, "Edit", "Delete group forward"),
|
||||
deleteLineBoundaryBackward: cmdLessContext(deleteLineBoundaryBackward, "Edit", "Delete from start of wrapped line"),
|
||||
deleteLineBoundaryForward: cmdLessContext(deleteLineBoundaryForward, "Edit", "Delete to end of wrapped line"),
|
||||
deleteToLineEnd: cmdLessContext(deleteToLineEnd, "Edit", "Delete to end of line"),
|
||||
deleteToLineStart: cmdLessContext(deleteToLineStart, "Edit", "Delete from start of line"),
|
||||
simplifySelection: cmdLessContext(simplifySelection, "Cursor", "Simplify selection"),
|
||||
splitLine: cmdLessContext(splitLine, "Edit", "Split line"),
|
||||
transposeChars: cmdLessContext(transposeChars, "Edit", "Transpose characters"),
|
||||
insertNewlineAndIndent: cmdLessContext(insertNewlineAndIndent, "Edit", "Insert newline and indent"),
|
||||
insertNewlineContinueMarkup: cmdLessContext(insertNewlineContinueMarkup, "Markdown", "Insert newline and continue markup"),
|
||||
}
|
||||
|
||||
// selection mark-mode:ify all cursor/select commands from CodeMirror
|
||||
@ -97,39 +150,18 @@ for (let commandSuffix of [
|
||||
"SubwordBackward", "SubwordForward",
|
||||
"LineBoundaryBackward", "LineBoundaryForward",
|
||||
]) {
|
||||
HEYNOTE_COMMANDS[`cursor${commandSuffix}`] = markModeMoveCommand(codeMirrorCommands[`cursor${commandSuffix}`], codeMirrorCommands[`select${commandSuffix}`])
|
||||
HEYNOTE_COMMANDS[`select${commandSuffix}`] = (editor) => codeMirrorCommands[`select${commandSuffix}`]
|
||||
}
|
||||
|
||||
const NON_EDITOR_CONTEXT_COMMANDS = {
|
||||
selectAll,
|
||||
moveLineUp, moveLineDown,
|
||||
deleteLine,
|
||||
formatBlockContent,
|
||||
newCursorAbove, newCursorBelow,
|
||||
selectPreviousParagraph, selectNextParagraph,
|
||||
selectPreviousBlock, selectNextBlock,
|
||||
paste: pasteCommand,
|
||||
nothing,
|
||||
|
||||
// directly from CodeMirror
|
||||
undo, redo,
|
||||
indentMore, indentLess,
|
||||
foldCode, unfoldCode,
|
||||
selectNextOccurrence,
|
||||
deleteCharBackward, deleteCharForward,
|
||||
deleteGroupBackward, deleteGroupForward,
|
||||
deleteLineBoundaryBackward, deleteLineBoundaryForward,
|
||||
deleteToLineEnd, deleteToLineStart,
|
||||
simplifySelection,
|
||||
splitLine,
|
||||
transposeChars,
|
||||
insertNewlineAndIndent,
|
||||
insertNewlineContinueMarkup,
|
||||
}
|
||||
|
||||
for (const [key, cmCommand] of Object.entries(NON_EDITOR_CONTEXT_COMMANDS)) {
|
||||
HEYNOTE_COMMANDS[key] = (editor) => cmCommand
|
||||
HEYNOTE_COMMANDS[`cursor${commandSuffix}`] = {
|
||||
run: markModeMoveCommand(codeMirrorCommands[`cursor${commandSuffix}`], codeMirrorCommands[`select${commandSuffix}`]),
|
||||
name: `cursor${commandSuffix}`,
|
||||
description: `cursor${commandSuffix}`,
|
||||
category: "Cursor",
|
||||
}
|
||||
HEYNOTE_COMMANDS[`select${commandSuffix}`] = {
|
||||
run: (editor) => codeMirrorCommands[`select${commandSuffix}`],
|
||||
name: `select${commandSuffix}`,
|
||||
description: `select${commandSuffix}`,
|
||||
category: "Cursor",
|
||||
}
|
||||
}
|
||||
|
||||
export { HEYNOTE_COMMANDS }
|
||||
|
||||
@ -431,7 +431,7 @@ export class HeynoteEditor {
|
||||
console.error(`Command not found: ${command}`)
|
||||
return
|
||||
}
|
||||
cmd(this)(this.view)
|
||||
cmd.run(this)(this.view)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -140,7 +140,7 @@ function keymapFromSpec(specs, editor) {
|
||||
console.error(`Command not found: ${spec.command} (${spec.key})`)
|
||||
return false
|
||||
}
|
||||
return command(editor)(view)
|
||||
return command.run(editor)(view)
|
||||
},
|
||||
}
|
||||
}))
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user