Add emacs mode

package-lock.json

@@ -3997,6 +3997,11 @@
       "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "loglevel": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
@@ -4328,6 +4333,15 @@
       "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.5.4.tgz",
       "integrity": "sha512-9YmWYQdZoAoZ1RLy/uvoDbCcb0EKy5O2qoMQn+UIVQxk+VTCXfJDgANczDIWko+UOzg0MY0P+sA8bl4XI14RJg=="
     },
+    "monaco-emacs": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/monaco-emacs/-/monaco-emacs-0.1.1.tgz",
+      "integrity": "sha512-8+iCglLDLd/RAdQKP6+XXaIkbrM2wTEzlMHC5f6nVhtPrVQl0cMe99a5kD6eFimFnFQSq1Qx7DAclewgwhoHBQ==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "monaco-editor": "^0.14.0"
+      }
+    },
     "monaco-themes": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/monaco-themes/-/monaco-themes-0.2.5.tgz",

package.json

@@ -30,6 +30,7 @@
     "lodash": "^4.17.11",
     "monaco-editor": "^0.14.3",
     "monaco-editor-webpack-plugin": "^1.5.4",
+    "monaco-emacs": "^0.1.1",
     "monaco-themes": "^0.2.5",
     "monaco-vim": "0.0.7",
     "vue": "^2.5.17",

src/App.vue

@@ -74,7 +74,7 @@
                 </ul>
               </div>
 
-              <editor-component v-model="cpp_code" name="cpp" language="cpp" height="50vh" :vim_mode="vim_mode" />
+              <editor-component v-model="cpp_code" name="cpp" language="cpp" height="50vh"/>
 
             </div>
             <div class="row">
@@ -84,7 +84,7 @@
                   <li class="is-active"><a>HTML</a></li>
                 </ul>
               </div>
-              <editor-component v-model="html_code" name="html" language="html" height="50vh" :vim_mode="vim_mode" />
+              <editor-component v-model="html_code" name="html" language="html" height="50vh"/>
             </div>
           </div>
 
@@ -97,7 +97,7 @@
                   <li class="is-active"><a>Javascript</a></li>
                 </ul>
               </div>
-              <editor-component v-model="js_code" name="js" language="javascript" height="50vh" :vim_mode="vim_mode" />
+              <editor-component v-model="js_code" name="js" language="javascript" height="50vh"/>
             </div>
             <div class="row">
               <div class="tabs">
@@ -211,10 +211,6 @@ __Z7webMainv();`.trim();
 
     export default {
         props: {
-            vim_mode: {
-                type: Boolean,
-                default: true
-            },
             cpp_code: {
                 type: String,
                 default: cpp_code,
@@ -260,7 +256,6 @@ __Z7webMainv();`.trim();
                     });
             },
             run() {
-                console.log('running..');
                 this.update_iframe('myIframe');
             },
         },

src/components/EditorComponent.vue

@@ -4,6 +4,7 @@
     <div class="tags has-addons">
       <span class="tag"><label class="checkbox">
         <input type="checkbox" v-model="vim_mode">VIM</label>
+        <input type="checkbox" v-model="emacs_mode">EMACS</label>
       </span>
       <span class="tag is-primary" :id="`${name}_status`"></span>
     </div>
@@ -12,10 +13,18 @@
 
 <script>
     import { initVimMode } from 'monaco-vim';
+    import { EmacsExtension } from 'monaco-emacs';
+
     export default {
         props: {
             vim_mode: {
                 type: Boolean,
+                default: false,
+                required: true
+            },
+            emacs_mode: {
+                type: Boolean,
+                default: false,
                 required: true
             },
             name: {
@@ -56,7 +65,7 @@
                 }
             });
 
-            this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
+            // this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
         },
         watch: {
             value(new_val) {
@@ -69,11 +78,30 @@
             },
             vim_mode(new_val) {
                 if (new_val) {
+                    this.emacs_mode = false;
                     this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
                 } else {
                     this.vimMode_1.dispose();
                     document.getElementById(this.name + "_status").innerHTML = '';
                 }
+            },
+            emacs_mode(new_val) {
+                var statusNode = document.getElementById(this.name + "_status");
+                if (new_val) {
+                    this.vim_mode = false;
+                    this.emacsMode = new EmacsExtension(this.editor);
+                    this.emacsMode.onDidMarkChange(function (ev) {
+                          statusNode.textContent = ev ? 'Mark Set!' : 'Mark Unset';
+                    });
+                    this.emacsMode.onDidChangeKey(function (str) {
+                          statusNode.textContent = str;
+                    });
+                    this.emacsMode.start();
+
+                } else {
+                    if (this.emacsMode) this.emacsMode.dispose();
+                    document.getElementById(this.name + "_status").innerHTML = '';
+                }
             }
         }
     }