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 2025-04-14 16:19:43 +02:00
parent bcaa2d3006
commit a080b627e0
6 changed files with 115 additions and 65 deletions

View File

@ -52,9 +52,20 @@
]), ]),
commands() { commands() {
return Object.keys(HEYNOTE_COMMANDS).map(cmd => ({ const commands = Object.entries(HEYNOTE_COMMANDS)
name: cmd, // sort array first by category, then by description
cmd: cmd, 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, isCommand: true,
})) }))
}, },

View File

@ -1,4 +1,6 @@
<script> <script>
import { HEYNOTE_COMMANDS } from '@/src/editor/commands'
export default { export default {
props: [ props: [
"keys", "keys",
@ -14,6 +16,14 @@
window.heynote.platform.isMac ? "⌘" : "Ctrl", 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> </script>
@ -29,8 +39,7 @@
</template> </template>
</td> </td>
<td class="command"> <td class="command">
<span v-if="!command" class="unbound">Unbound</span> <span class="command-name">{{ commandLabel }}</span>
<span class="command-name">{{ command }}</span>
</td> </td>
<td class="actions"> <td class="actions">
<template v-if="!isDefault"> <template v-if="!isDefault">
@ -54,12 +63,7 @@
&.key &.key
//letter-spacing: 1px //letter-spacing: 1px
&.command &.command
.command-name //
font-family: monospace
margin-right: 10px
.unbound
font-style: italic
color: #999
&.drag-handle &.drag-handle
width: 24px width: 24px
padding: 0 padding: 0
@ -69,10 +73,13 @@
background-repeat: no-repeat background-repeat: no-repeat
background-position: center center background-position: center center
background-image: url(@/assets/icons/drag-vertical-light.svg) background-image: url(@/assets/icons/drag-vertical-light.svg)
+dark-mode +dark-mode
background-color: rgba(0,0,0, 0.08) background-color: rgba(0,0,0, 0.08)
background-image: url(@/assets/icons/drag-vertical-dark.svg) 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 button
padding: 0 10px padding: 0 10px
height: 22px height: 22px

View File

@ -88,11 +88,11 @@
<h2>Keyboard Bindings</h2> <h2>Keyboard Bindings</h2>
<table> <table>
<tr> <tr>
<th></th>
<th>Source</th> <th>Source</th>
<th>Key</th> <th>Key</th>
<th>Command</th> <th>Command</th>
<th></th> <th></th>
<th></th>
</tr> </tr>
<draggable <draggable
v-model="keymap" v-model="keymap"

View File

@ -62,26 +62,79 @@ const nothing = (view) => {
return true 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 = { const HEYNOTE_COMMANDS = {
//undo, addNewBlockAfterCurrent: cmd(addNewBlockAfterCurrent, "Block", "Add new block after current block"),
//redo, 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, // commands without editor context
cursorPreviousBlock, cursorNextBlock, paste: cmdLessContext(pasteCommand, "Clipboard", "Paste from clipboard"),
cursorPreviousParagraph, cursorNextParagraph, selectAll: cmdLessContext(selectAll, "Selection", "Select all"),
deleteBlock, deleteBlockSetCursorPreviousBlock, 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, // directly from CodeMirror
selectionMarkModeCancel, undo: cmdLessContext(undo, "Edit", "Undo"),
redo: cmdLessContext(redo, "Edit", "Redo"),
openLanguageSelector, indentMore: cmdLessContext(indentMore, "Edit", "Indent more"),
openBufferSelector, indentLess: cmdLessContext(indentLess, "Edit", "Indent less"),
openCommandPalette, foldCode: cmdLessContext(foldCode, "Edit", "Fold code"),
openMoveToBuffer, unfoldCode: cmdLessContext(unfoldCode, "Edit", "Unfold code"),
openCreateNewBuffer, selectNextOccurrence: cmdLessContext(selectNextOccurrence, "Cursor", "Select next occurrence"),
deleteCharBackward: cmdLessContext(deleteCharBackward, "Edit", "Delete character backward"),
cut: cutCommand, deleteCharForward: cmdLessContext(deleteCharForward, "Edit", "Delete character forward"),
copy: copyCommand, 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 // selection mark-mode:ify all cursor/select commands from CodeMirror
@ -97,39 +150,18 @@ for (let commandSuffix of [
"SubwordBackward", "SubwordForward", "SubwordBackward", "SubwordForward",
"LineBoundaryBackward", "LineBoundaryForward", "LineBoundaryBackward", "LineBoundaryForward",
]) { ]) {
HEYNOTE_COMMANDS[`cursor${commandSuffix}`] = markModeMoveCommand(codeMirrorCommands[`cursor${commandSuffix}`], codeMirrorCommands[`select${commandSuffix}`]) HEYNOTE_COMMANDS[`cursor${commandSuffix}`] = {
HEYNOTE_COMMANDS[`select${commandSuffix}`] = (editor) => codeMirrorCommands[`select${commandSuffix}`] run: markModeMoveCommand(codeMirrorCommands[`cursor${commandSuffix}`], codeMirrorCommands[`select${commandSuffix}`]),
name: `cursor${commandSuffix}`,
description: `cursor${commandSuffix}`,
category: "Cursor",
} }
HEYNOTE_COMMANDS[`select${commandSuffix}`] = {
const NON_EDITOR_CONTEXT_COMMANDS = { run: (editor) => codeMirrorCommands[`select${commandSuffix}`],
selectAll, name: `select${commandSuffix}`,
moveLineUp, moveLineDown, description: `select${commandSuffix}`,
deleteLine, category: "Cursor",
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
} }
export { HEYNOTE_COMMANDS } export { HEYNOTE_COMMANDS }

View File

@ -431,7 +431,7 @@ export class HeynoteEditor {
console.error(`Command not found: ${command}`) console.error(`Command not found: ${command}`)
return return
} }
cmd(this)(this.view) cmd.run(this)(this.view)
} }
} }

View File

@ -140,7 +140,7 @@ function keymapFromSpec(specs, editor) {
console.error(`Command not found: ${spec.command} (${spec.key})`) console.error(`Command not found: ${spec.command} (${spec.key})`)
return false return false
} }
return command(editor)(view) return command.run(editor)(view)
}, },
} }
})) }))