javascriptstatusbarace-editor

Ace-Editor error when showing StatusBar in Vim mode


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

Solution

  • 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>