Desktop: Resolves #1298: Add keyboard modes to editor (vim, emacs) (#2056)

* Add keyboard modes to editor (vim, emacs, default)

This adds a new option to settings, and then sets the
appropriate keyboard handler in the ace editor.

The "default" option is equivalent to the old keyboard
behaviour.

* Remove stray console.log

* Move the keyboard-mode setting to the general section

* Change `keyboardMode` setting to `editor.keyboardMode`

ElectronClient/app/gui/MainScreen.jsx

@@ -573,6 +573,7 @@ class MainScreenComponent extends React.Component {
 		const modalLayerStyle = Object.assign({}, styles.modalLayer, { display: this.state.modalLayer.visible ? 'block' : 'none' });
 
 		const notePropertiesDialogOptions = this.state.notePropertiesDialogOptions;
+		const keyboardMode = Setting.value('editor.keyboardMode');
 
 		return (
 			<div style={style}>
@@ -588,7 +589,7 @@ class MainScreenComponent extends React.Component {
 				<VerticalResizer style={styles.verticalResizer} onDrag={this.sidebar_onDrag} />
 				<NoteList style={styles.noteList} />
 				<VerticalResizer style={styles.verticalResizer} onDrag={this.noteList_onDrag} />
-				<NoteText style={styles.noteText} visiblePanes={this.props.noteVisiblePanes} noteDevToolsVisible={this.props.noteDevToolsVisible} />
+				<NoteText style={styles.noteText} keyboardMode={keyboardMode} visiblePanes={this.props.noteVisiblePanes} noteDevToolsVisible={this.props.noteDevToolsVisible} />
 
 				{pluginDialog}
 			</div>

ElectronClient/app/gui/NoteText.jsx

@@ -50,6 +50,8 @@ require('brace/theme/solarized_dark');
 require('brace/theme/twilight');
 require('brace/theme/dracula');
 require('brace/theme/chaos');
+require('brace/keybinding/vim');
+require('brace/keybinding/emacs');
 
 const NOTE_TAG_BAR_FEATURE_ENABLED = false;
 
@@ -1830,6 +1832,10 @@ class NoteTextComponent extends React.Component {
 		const theme = themeStyle(this.props.theme);
 		const visiblePanes = this.props.visiblePanes || ['editor', 'viewer'];
 		const isTodo = note && !!note.is_todo;
+		var keyboardMode = this.props.keyboardMode;
+		if (keyboardMode === 'default' || !keyboardMode) {
+			keyboardMode = null;
+		}
 
 		const borderWidth = 1;
 
@@ -2044,6 +2050,16 @@ class NoteTextComponent extends React.Component {
 		delete editorRootStyle.width;
 		delete editorRootStyle.height;
 		delete editorRootStyle.fontSize;
+		const onBeforeLoad = (ace) => {
+			const save = () => {
+				this.saveIfNeeded();
+			};
+			const VimApi = ace.acequire('ace/keyboard/vim');
+			if (VimApi.CodeMirror && VimApi.CodeMirror.Vim) {
+				VimApi.CodeMirror.Vim.defineEx('write', 'w', save);
+			}
+		};
+		const onLoad = () => {};
 		const editor = (
 			<AceEditor
 				value={body}
@@ -2075,6 +2091,9 @@ class NoteTextComponent extends React.Component {
 				editorProps={{ $blockScrolling: Infinity }}
 				// This is buggy (gets outside the container)
 				highlightActiveLine={false}
+				keyboardHandler={keyboardMode}
+				onBeforeLoad={onBeforeLoad}
+				onLoad={onLoad}
 			/>
 		);
 

ReactNativeClient/lib/models/Setting.js

@@ -36,7 +36,21 @@ class Setting extends BaseModel {
 				type: Setting.TYPE_STRING,
 				public: false,
 			},
-
+			'editor.keyboardMode': {
+				value: 'default',
+				type: Setting.TYPE_STRING,
+				public: true,
+				appTypes: ['desktop'],
+				isEnum: true,
+				label: () => _('Keyboard Mode'),
+				options: () => {
+					let output = {};
+					output['default'] = _('Default');
+					output['emacs'] = _('Emacs');
+					output['vim'] = _('Vim');
+					return output;
+				},
+			},
 			'sync.target': {
 				value: SyncTargetRegistry.nameToId('dropbox'),
 				type: Setting.TYPE_INT,