1 import keyboardJS from 'keyboardjs';
2 import { map } from 'lodash';
4 const keyboardCommands = {
5 'h': 'Move the cursor to the Parent Element of the current node',
6 'l': 'Move the cursor to the first Child Element of the current node',
7 'j': 'Move the cursor to the next sibling of the current node',
8 'k': 'Move the cursor to the previous sibling of the current node',
9 'enter': 'Add a new node as a sibling to the current node',
10 'tab': 'Add a new node as the child of the current node',
11 'shift + j': 'Swap the current node with next sibling node',
12 'shift + k': 'Swap the current node with the previous sibling node',
13 'shift + h': 'Lift the current node to be a sibling of the parent node',
14 'shift + l': 'Lower the current node to be a child of the previous sibling node',
15 'shift + d': 'Delete the current node',
16 'shift + f': 'Open the search modal',
17 'i': 'Enter "edit" mode, and place the cursor at the start of the editable content',
18 '$': 'Enter "edit" mode, and place the cursor at the end of the editable content',
19 'escape': 'Exit the current mode and return to "navigation" mode',
20 '?': 'Display this help dialogue'
25 <div class="modal-content">
35 ${map(keyboardCommands, (text, key) => {
53 export function showHelp() {
54 document.querySelector('body').innerHTML += modalHTML;
55 keyboardJS.setContext('help');
58 keyboardJS.withContext('help', () => {
59 keyboardJS.bind('escape', e => {
60 document.querySelector('.modal').remove();
61 keyboardJS.setContext('navigation');