I want to show the status bar when using vim mode in Ace editor. There seems to already exist a statusbar extension however using it causes some error. I am using the following code. I am new to JS so any help is appreciated.
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width: 400px; height: 300px; border: 1px solid grey"></div>
<div id="status"></div>
<script src="/static/js/ace-editor/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/ace-editor/src-noconflict/ext-statusbar.js" type="text/javascript"
charset="utf-8"></script>
<script>
var editor = ace.edit("container");
editor.session.setMode("ace/mode/golang");
editor.session.setValue('package main\n\nfunc main(){\n fmt.Println("hw")\n}');
editor.setKeyboardHandler("ace/keyboard/vim");
const sb = ace.require("ace/ext/statusbar");
var statusBar = sb.StatusBar(editor, document.getElementById("status"));
</script>
</body>
</html>
The error in the console is
ext-statusbar.js:13 Uncaught TypeError: this.updateStatus is not a function
at Object.<anonymous> (ext-statusbar.js:13:14)
at callback (ace.js:1369:9)
(anonymous) @ ext-statusbar.js:13
callback @ ace.js:1369
setTimeout
_self @ ace.js:1374
EventEmitter._signal @ ace.js:3459
(anonymous) @ keybinding-vim.js:6145
EventEmitter._signal @ ace.js:3459
CodeMirror.signal @ keybinding-vim.js:227
clearInputState @ keybinding-vim.js:1861
handleEsc @ keybinding-vim.js:1702
handleKeyInsertMode @ keybinding-vim.js:1722
findKey @ keybinding-vim.js:1781
handleKey @ keybinding-vim.js:1680
(anonymous) @ keybinding-vim.js:5975
operation @ keybinding-vim.js:285
Vim.handleKey @ keybinding-vim.js:5974
multiSelectHandleKey @ keybinding-vim.js:6011
handleKeyboard @ keybinding-vim.js:6123
$callKeyboardHandlers @ ace.js:4202
onCommandKey @ ace.js:4234
onCommandKey @ ace.js:13397
normalizeCommandKeys @ ace.js:875
(anonymous) @ ace.js:893
StatusBar
is a constructor so should be invoked with new
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width: 400px; height: 100px; border: 1px solid grey"></div>
<div id="status"></div>
<script src="https://www.unpkg.com/ace-builds@1.36.2/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://www.unpkg.com/ace-builds@1.36.2/src-noconflict/ext-statusbar.js" type="text/javascript"
charset="utf-8"></script>
<script>
var editor = ace.edit(document.getElementById("container"), {
mode: "ace/mode/golang",
value: 'package main\n\nfunc main(){\n fmt.Println("hw")\n}',
keyboardHandler: "ace/keyboard/vim"
});
var {StatusBar} = ace.require("ace/ext/statusbar");
var statusBar = new StatusBar(editor, document.getElementById("status"));
</script>
</body>
</html>