Fix statubar logic to work with multiple editors on the same page

brijeshb42 · brijeshb42 · commit 34b32db3b081 · 2018-12-06T13:13:16.000+05:30
diff --git a/index.html b/index.html
@@ -4,6 +4,17 @@
 <head>
   <title>Monaco Vim</title>
   <style type="text/css">
+    html, body, .container {
+      width: 100%;
+      height: 100%;
+    }
+    .container {
+      display: flex;
+    }
+    .container > div {
+      width: 100%;
+      height: 100%;
+    }
     .editor {
       width: 100%;
       min-height: 600px;
@@ -21,8 +32,16 @@
 </head>
 
 <body>
-  <div class="editor" id="editor"></div>
-  <div id="status"></div>
+  <div class="container">
+    <div>
+      <div class="editor" id="editor1"></div>
+      <div class="status" id="status1"></div>
+    </div>
+    <div>
+      <div class="editor" id="editor2"></div>
+      <div class="status" id="status2"></div>
+    </div>
+  </div>
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monaco-vim",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Vim keybindings for monaco-editor",
   "main": "./lib/index.js",
   "scripts": {
diff --git a/src/cm_adapter.js b/src/cm_adapter.js
@@ -293,6 +293,7 @@ class CMAdapter {
     this.listeners = {};
     this.curOp = {};
     this.attached = false;
+    this.statusBar = null;
     this.addLocalListeners();
     this.ctxInsert = this.editor.createContextKey('insertMode', true);
   }
@@ -1065,6 +1066,26 @@ class CMAdapter {
       TypeOperations[indentRight ? 'indent' : 'outdent'](cursors.context.config, this.editor.getModel(), [sel]),
     );
   }
+
+  setStatusBar(statusBar) {
+    this.statusBar = statusBar;
+  }
+
+  openDialog(html, callback, options) {
+    if (!this.statusBar) {
+      return;
+    }
+
+    return this.statusBar.setSec(html, callback, options);
+  }
+
+  openNotification(html) {
+    if (!this.statusBar) {
+      return;
+    }
+
+    this.statusBar.showNotification(html);
+  }
 }
 
 export default CMAdapter;
diff --git a/src/demo.js b/src/demo.js
@@ -2,8 +2,8 @@ import * as monaco from 'monaco-editor';
 
 import { initVimMode } from './';
 
-const editorNode = document.getElementById('editor');
-const statusNode = document.getElementById('status');
+const editorNode = document.getElementById('editor1');
+const statusNode = document.getElementById('status1');
 const editor = monaco.editor.create(editorNode, {
   value: [1, 2, 3, 4, 5, 6, 7, 8].map(t => 'import').join('\n'),
   minimap: {
@@ -15,15 +15,22 @@ const editor = monaco.editor.create(editorNode, {
   scrollBeyondLastLine: false,
 });
 editor.focus();
-
 const vimMode = initVimMode(editor, statusNode);
-window.vim = vimMode;
-window.editor = editor;
 
-if (window.localStorage.getItem('value')) {
-  editor.setValue(window.localStorage.getItem('value'));
-}
+const editorNode2 = document.getElementById('editor2');
+const statusNode2 = document.getElementById('status2');
+const editor2 = monaco.editor.create(editorNode2, {
+  value: [1, 2, 3, 4, 5, 6, 7, 8].map(t => 'import').join('\n'),
+  minimap: {
+    enabled: false,
+  },
+  theme: 'vs',
+  language: 'javascript',
+  fontSize: 15,
+  scrollBeyondLastLine: false,
+});
+editor.focus();
+const vimMode2 = initVimMode(editor2, statusNode2);
 
-setInterval(() => {
-  window.localStorage.setItem('value', editor.getValue());
-}, 2000)
+window.vimMode = vimMode;
+window.vimMode2 = vimMode2;
diff --git a/src/index.js b/src/index.js
@@ -9,11 +9,11 @@ export function initVimMode(editor, statusbarNode = null, StatusBarClass = Statu
     return vimAdapter;
   }
 
-  const statusbar = new StatusBarClass(statusbarNode, editor);
+  const statusBar = new StatusBarClass(statusbarNode, editor);
   let keyBuffer = '';
 
   vimAdapter.on('vim-mode-change', (mode) => {
-    statusbar.setMode(mode);
+    statusBar.setMode(mode);
   });
 
   vimAdapter.on('vim-keypress', (key) => {
@@ -22,30 +22,23 @@ export function initVimMode(editor, statusbarNode = null, StatusBarClass = Statu
     } else {
       keyBuffer += key;
     }
-    statusbar.setKeyBuffer(keyBuffer);
+    statusBar.setKeyBuffer(keyBuffer);
   });
 
   vimAdapter.on('vim-command-done', () => {
     keyBuffer = '';
-    statusbar.setKeyBuffer(keyBuffer);
+    statusBar.setKeyBuffer(keyBuffer);
   });
 
   vimAdapter.on('dispose', function() {
-    statusbar.toggleVisibility(false);
-    statusbar.closeInput();
-    statusbar.innerHTML = '';
-  });
-
-  VimMode.defineExtension('openDialog', function(html, callback, options) {
-    return statusbar.setSec(html, callback, options);
-  });
-
-  VimMode.defineExtension('openNotification', function(html) {
-    statusbar.showNotification(html);
+    statusBar.toggleVisibility(false);
+    statusBar.closeInput();
+    statusBar.innerHTML = '';
   });
 
+  statusBar.toggleVisibility(true);
+  vimAdapter.setStatusBar(statusBar)
   vimAdapter.attach();
-  statusbar.toggleVisibility(true);
 
   return vimAdapter;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "monaco-vim",`
`3`		`- "version": "0.0.9",`
	`3`	`+ "version": "0.0.10",`
`4`	`4`	`"description": "Vim keybindings for monaco-editor",`
`5`	`5`	`"main": "./lib/index.js",`
`6`	`6`	`"scripts": {`