ng-ace-tern/ng-ace-tern.js

An ace editor directive for angular.

import { Directive, ElementRef, EventEmitter, Input, NgModule, Output } from '@angular/core';

/**
 * @param {?} editor
 * @return {?}
 */
function initTern(editor) {
    ((window)).ace.config.loadModule('ace/ext/tern', function () {
        editor.setOptions({
            /**
             * Either `true` or `false` or to enable with custom options pass object that
             * has options for tern server: http://ternjs.net/doc/manual.html#server_api
             * If `true`, then default options will be used
             */
            enableTern: {
                /* http://ternjs.net/doc/manual.html#option_defs */
                defs: ['browser', 'ecma5'],
                /* http://ternjs.net/doc/manual.html#plugins */
                plugins: {
                    doc_comment: {
                        fullDocs: true
                    }
                },
                /**
                 * (default is true) If web worker is used for tern server.
                 * This is recommended as it offers better performance, but prevents this from working in a local html file due to browser security restrictions
                 */
                useWorker: editor.getSession().getUseWorker(),
                /* if your editor supports switching between different files (such as tabbed interface) then tern can do this when jump to defnition of function in another file is called, but you must tell tern what to execute in order to jump to the specified file */
                switchToDoc: function (name, start) {
                    console.log('switchToDoc called but not defined. name=' + name + '; start=', start);
                },
                /**
                 * if passed, this function will be called once ternServer is started.
                 * This is needed when useWorker=false because the tern source files are loaded asynchronously before the server is started.
                 */
                startedCb: function () {
                    //once tern is enabled, it can be accessed via editor.ternServer
                    console.log('editor.ternServer:', editor.ternServer);
                },
            },
            /**
             * when using tern, it takes over Ace's built in snippets support.
             * this setting affects all modes when using tern, not just javascript.
             */
            enableSnippets: true,
            /**
             * when using tern, Ace's basic text auto completion is enabled still by deafult.
             * This settings affects all modes when using tern, not just javascript.
             * For javascript mode the basic auto completion will be added to completion results if tern fails to find completions or if you double tab the hotkey for get completion (default is ctrl+space, so hit ctrl+space twice rapidly to include basic text completions in the result)
             */
            enableBasicAutocompletion: true,
        });
    });
}

class AceEditorDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
        this.textChanged = new EventEmitter();
        this.editorRef = new EventEmitter();
        const el = elementRef.nativeElement;
        el.classList.add('editor');
        this.editor = window.ace.edit(el);
        setTimeout(() => {
            this.editorRef.emit(this.editor);
        });
        this.editor.on('change', () => {
            const newVal = this.editor.getValue();
            if (newVal === this.oldVal)
                return;
            if (typeof this.oldVal !== 'undefined') {
                this.textChanged.emit(newVal);
            }
            this.oldVal = newVal;
        });
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set options(value) {
        this.editor.setOptions(value || {
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true
        });
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set readOnly(value) {
        this._readOnly = value;
        this.editor.setReadOnly(value);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set theme(value) {
        this._theme = value || 'chrome';
        
        this.editor.setTheme(`ace/theme/${value}`);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set mode(value) {
        this._mode = value || 'javascript';
        this.editor.getSession().setMode(`ace/mode/${value}`);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set text(value) {
        if (value === this.oldVal)
            return;
        this.editor.setValue(value);
        this.editor.clearSelection();
        this.editor.focus();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        initTern(this.editor);
    }
}
AceEditorDirective.decorators = [
    { type: Directive, args: [{
                selector: '[ace-editor]'
            },] },
];
/**
 * @nocollapse
 */
AceEditorDirective.ctorParameters = () => [
    { type: ElementRef, },
];
AceEditorDirective.propDecorators = {
    'textChanged': [{ type: Output },],
    'editorRef': [{ type: Output },],
    'options': [{ type: Input },],
    'readOnly': [{ type: Input },],
    'theme': [{ type: Input },],
    'mode': [{ type: Input },],
    'text': [{ type: Input },],
};

class AceEditorModule {
}
AceEditorModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    AceEditorDirective
                ],
                exports: [
                    AceEditorDirective
                ],
                providers: []
            },] },
];
/**
 * @nocollapse
 */
AceEditorModule.ctorParameters = () => [];

// Copyright (C) 2016-2018 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd

/**
 * Generated bundle index. Do not edit.
 */

export { AceEditorDirective, AceEditorModule };
//# sourceMappingURL=ng-ace-tern.js.map