Import ace code editor into webpack, es6, typescript project

user_1903781 0
Viewed 5806

I'm trying to build a web component that will host the ace editor. The trouble is that I don't find enough information on how to import the module and set the types. The code bellow was working just fine using simple <script> tags and global vars.

So far this is what I have:

npm install ace-code-editor --save
npm install @types/ace --save-dev

code-editor.cmp.ts

// Error: [ts] File '.../node_modules/@types/ace/index.d.ts' is not a module.
import * as ace from 'ace';

export class CodeEditorCmp extends HTMLElement {

    // DOM
    private editor: AceAjax;  // How do I import the type. What type to use?

    constructor() {
        super();
    }

    connectedCallback() {
        this.initCodeEditor();
    }

    initCodeEditor(){

        this.editor = ace.edit("editor-vsc");

        // How do I import the editor themes?
        this.editor.setTheme("ace/theme/xcode"); 

        // How do I import the editor modes?
        var JavaScriptMode = ace.require("ace/mode/html").Mode; 

        this.editor.session.setMode(new JavaScriptMode());
        this.editor.getSession().setTabSize(4);
        this.editor.getSession().setUseSoftTabs(true);
        this.editor.getSession().setUseWrapMode(true);
        this.editor.setAutoScrollEditorIntoView(true);

        // Update document
        this.editor.getSession().on('change', this.onEditorChange);
    }

    onEditorChange(){
    }

}

require('./code-editor.cmp.scss');
window.customElements.define('editor-vsc', CodeEditorCmp);
web-component typescript ecmascript-6 javascript
2 Answers

After a lot of digging I managed to find brace module. It's a browserify wrapper for ace. Fortunately it works straight away with webpack. No need to use separate types, they come prepackaged.

import * as ace from 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';

export class CodeEditorCmp extends HTMLElement {

    private editor: ace.Editor;

    initCodeEditor(){
        this.editor = ace.edit('javascript-editor');
        this.editor.getSession().setMode('ace/mode/javascript');
        this.editor.setTheme('ace/theme/monokai');
        //...
    }

    //...
}
user_19037810
Related