feature (editor): provide different choices for keybinding - #80

README.md

@@ -27,7 +27,7 @@
 - Image viewer
 - Quick access: frequently access folders are pin to the homepage
 - Stateless
-- Emacs keybindings `;)`
+- Emacs, VIM or Sublime keybindings `;)`
 
 # Screenshots
 <p align="center">

client/pages/viewerpage/editor.js

@@ -50,7 +50,8 @@ export class Editor extends React.Component {
         });
 
 
-        this.loadMode(this.props.filename)
+        this.loadKeybinding()
+            .then(() => this.loadMode(this.props.filename))
             .then((res) => new Promise((done) => this.setState({loading: false}, () => done(res))))
             .then(loadCodeMirror.bind(this))
             .then(() => {
@@ -96,7 +97,7 @@ export class Editor extends React.Component {
                 value: this.props.content,
                 lineNumbers: true,
                 mode: mode,
-                keyMap: config.god_editor_mode ? "emacs" : "default",
+                keyMap: config.editor,
                 lineWrapping: true,
                 foldOptions: {
                     widget: "..."
@@ -194,6 +195,13 @@ export class Editor extends React.Component {
             .then((module) => Promise.resolve([module.default, mode: mode]));
     }
 
+    loadKeybinding(){
+        if(config.editor === "emacs" || !config.editor){
+            return Promise.resolve();
+        }
+        return import(/* webpackChunkName: "editor" */'./editor/keymap_'+config.editor);
+    }
+
     render() {
         return (
             <div className="component_editor">

client/pages/viewerpage/editor/keymap_sublime.js

@@ -0,0 +1 @@
+import 'codemirror/keymap/sublime.js';

client/pages/viewerpage/editor/keymap_vim.js

@@ -0,0 +1 @@
+import 'codemirror/keymap/vim.js';

config_client.js

@@ -1,5 +1,6 @@
 module.exports = {
-    god_editor_mode: true,
+    // editor keybinding can be either: "sublime", "emacs", "vim"
+    editor: "emacs",
     fork_button: true,
     search: {
         enable: true,