Add descriptions and categories to commands

Use the descriptions and categories in the Command palette and Settings dialog

src/components/BufferSelector.vue

@@ -52,9 +52,20 @@
             ]),
 
             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,
                 }))
             },

src/components/settings/KeyBindRow.vue

@@ -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">{{ commandLabel }}</span>
-            <span class="command-name">{{ command }}</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

src/components/settings/KeyboardBindings.vue

@@ -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" 

src/editor/commands.js

@@ -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,
+    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
@@ -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[`cursor${commandSuffix}`] = {
-    HEYNOTE_COMMANDS[`select${commandSuffix}`] = (editor) => codeMirrorCommands[`select${commandSuffix}`]
+        run: markModeMoveCommand(codeMirrorCommands[`cursor${commandSuffix}`], codeMirrorCommands[`select${commandSuffix}`]),
-}
+        name: `cursor${commandSuffix}`,
-
+        description: `cursor${commandSuffix}`,
-const NON_EDITOR_CONTEXT_COMMANDS = {
+        category: "Cursor",
-    selectAll,
+    }
-    moveLineUp, moveLineDown,
+    HEYNOTE_COMMANDS[`select${commandSuffix}`] = {
-    deleteLine,
+        run: (editor) => codeMirrorCommands[`select${commandSuffix}`],
-    formatBlockContent,
+        name: `select${commandSuffix}`,
-    newCursorAbove, newCursorBelow,
+        description: `select${commandSuffix}`,
-    selectPreviousParagraph, selectNextParagraph,
+        category: "Cursor",
-    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 }

src/editor/editor.js

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

src/editor/keymap.js

@@ -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)
             },
         }
     }))