Browse Source

Add vim key commands

single-block-api
Peter Stuifzand 10 months ago
parent
commit
c3aea176ae
  1. 3
      editor/src/styles.scss
  2. 58
      list-editor/index.js
  3. 6
      list-editor/keymap.js

3
editor/src/styles.scss

@ -103,6 +103,9 @@ body {
.list-item:hover .fold {
visibility: visible;
}
.list-item.selected .fold {
visibility: visible;
}
.list-item.editor .fold {
visibility: visible;

58
list-editor/index.js

@ -29,23 +29,36 @@ function textareaCursorInfo(target, dir) {
function editor(root, inputData, options) {
let cursor = createCursor()
let store = createStore(inputData);
let keymap = new Keymap()
let drake = null;
keymap.mapKey('ArrowUp', 'backwardLine')
keymap.mapKey('ArrowDown', 'forwardLine')
keymap.mapKey('S-Delete', 'deleteBlock')
keymap.mapKey('C-Enter', 'insertLineAbove')
keymap.mapKey('Enter', 'insertLineBelow')
keymap.mapKey('Tab', 'indentBlock')
keymap.mapKey('S-Tab', 'indentBlock')
keymap.mapKey('Escape', 'leaveEditor')
keymap.mapKey('C-S-ArrowUp', 'blockMoveBackward')
keymap.mapKey('C-S-ArrowDown', 'blockMoveForward')
keymap.mapKey('C-.', 'toggleBlock')
let editorKeymap = new Keymap()
editorKeymap.mapKey('ArrowUp', 'backwardLine')
editorKeymap.mapKey('ArrowDown', 'forwardLine')
editorKeymap.mapKey('S-Delete', 'deleteBlock')
editorKeymap.mapKey('C-Enter', 'insertLineAbove')
editorKeymap.mapKey('Enter', 'insertLineBelow')
editorKeymap.mapKey('Tab', 'indentBlock')
editorKeymap.mapKey('S-Tab', 'indentBlock')
editorKeymap.mapKey('Escape', 'leaveEditor')
editorKeymap.mapKey('C-S-ArrowUp', 'blockMoveBackward')
editorKeymap.mapKey('C-S-ArrowDown', 'blockMoveForward')
editorKeymap.mapKey('C-.', 'toggleBlock')
// keymap.mapKey('C-]', 'zoomIn')
// keymap.mapKey('C-[', 'zoomOut')
let normalKeymap = new Keymap()
normalKeymap.mapKey('k', 'backwardLine')
normalKeymap.mapKey('j', 'forwardLine')
normalKeymap.mapKey('S-O', 'insertLineAbove')
normalKeymap.mapKey('o', 'insertLineBelow')
normalKeymap.mapKey('d', 'deleteBlock')
normalKeymap.mapKey('i', 'enterEditor')
normalKeymap.mapKey('S-I', 'enterEditor')
normalKeymap.mapKey('S-A', 'enterEditorAppend')
normalKeymap.mapKey('Tab', 'indentBlock')
normalKeymap.mapKey('S-Tab', 'indentBlock')
normalKeymap.mapKey('C-.', 'toggleBlock')
function createStore(inputData) {
let data = [
{indented: 0, text: '', fold: 'open'},
@ -154,6 +167,8 @@ function editor(root, inputData, options) {
indentBlock,
leaveEditor,
enterEditor,
enterEditorAppend,
blockMoveBackward,
blockMoveForward,
@ -585,6 +600,18 @@ function editor(root, inputData, options) {
return false
}
function enterEditor(event) {
let $input = startEditing(root, store, cursor)
$input[0].selectStart = $input[0].selectionEnd = 0
return false
}
function enterEditorAppend(event) {
let $input = startEditing(root, store, cursor)
$input[0].selectStart = $input[0].selectionEnd = $input[0].value.length
return false
}
function blockMoveBackward(event) {
stopEditing(root, store, currentEditor)
@ -637,7 +664,12 @@ function editor(root, inputData, options) {
}
$(root).on('keydown', function (event) {
return keymap.handleKey(EDITOR, event)
console.log('editing: ' + editing)
if (editing) {
return editorKeymap.handleKey(EDITOR, event)
} else {
return normalKeymap.handleKey(EDITOR, event)
}
})
$(root).on('click', '.marker', function () {

6
list-editor/keymap.js

@ -16,16 +16,16 @@ function handleKeyDown(editor, event) {
const key = canonicalKey(event)
console.log('Key down ' + key)
if (this.keys.hasOwnProperty(key)) {
const action = this.keys[key]
if (editor.hasOwnProperty(action)) {
console.log('Calling action ' + action)
console.log('Key down ' + key + ', calling action ' + action)
return editor[action](event)
} else {
console.warn('Unknown action on editor: ' + action)
}
} else {
console.log('Key down ' + key)
}
return true

Loading…
Cancel
Save