ng-ace/ng-ace.js

An ace editor directive for angular.

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

let brace = require('brace');
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 = brace.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();
    }
}
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.js.map