ace-editor-ng9/fesm2015/ace-editor-ng9.js

A fork from ng2-ace-editor updated to work with Angular 9

import { __decorate } from 'tslib';
import { EventEmitter, ElementRef, NgZone, Output, Input, Directive, Component, forwardRef, NgModule } from '@angular/core';
import 'brace';
import 'brace/theme/monokai';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

let AceEditorDirective = class AceEditorDirective {
    constructor(elementRef, zone) {
        this.zone = zone;
        this.textChanged = new EventEmitter();
        this.textChange = new EventEmitter();
        this._options = {};
        this._readOnly = false;
        this._theme = "monokai";
        this._mode = "html";
        this._autoUpdateContent = true;
        this._durationBeforeCallback = 0;
        this._text = "";
        let el = elementRef.nativeElement;
        this.zone.runOutsideAngular(() => {
            this.editor = ace["edit"](el);
        });
        this.editor.$blockScrolling = Infinity;
    }
    ngOnInit() {
        this.init();
        this.initEvents();
    }
    ngOnDestroy() {
        this.editor.destroy();
    }
    init() {
        this.editor.setOptions(this._options || {});
        this.editor.setTheme(`ace/theme/${this._theme}`);
        this.setMode(this._mode);
        this.editor.setReadOnly(this._readOnly);
    }
    initEvents() {
        this.editor.on('change', () => this.updateText());
        this.editor.on('paste', () => this.updateText());
    }
    updateText() {
        let newVal = this.editor.getValue();
        if (newVal === this.oldText) {
            return;
        }
        if (!this._durationBeforeCallback) {
            this._text = newVal;
            this.zone.run(() => {
                this.textChange.emit(newVal);
                this.textChanged.emit(newVal);
            });
        }
        else {
            if (this.timeoutSaving != null) {
                clearTimeout(this.timeoutSaving);
            }
            this.timeoutSaving = setTimeout(() => {
                this._text = newVal;
                this.zone.run(() => {
                    this.textChange.emit(newVal);
                    this.textChanged.emit(newVal);
                });
                this.timeoutSaving = null;
            }, this._durationBeforeCallback);
        }
        this.oldText = newVal;
    }
    set options(options) {
        this._options = options;
        this.editor.setOptions(options || {});
    }
    set readOnly(readOnly) {
        this._readOnly = readOnly;
        this.editor.setReadOnly(readOnly);
    }
    set theme(theme) {
        this._theme = theme;
        this.editor.setTheme(`ace/theme/${theme}`);
    }
    set mode(mode) {
        this.setMode(mode);
    }
    setMode(mode) {
        this._mode = mode;
        if (typeof this._mode === 'object') {
            this.editor.getSession().setMode(this._mode);
        }
        else {
            this.editor.getSession().setMode(`ace/mode/${this._mode}`);
        }
    }
    get text() {
        return this._text;
    }
    set text(text) {
        this.setText(text);
    }
    setText(text) {
        if (this._text !== text) {
            if (text === null || text === undefined) {
                text = "";
            }
            if (this._autoUpdateContent === true) {
                this._text = text;
                this.editor.setValue(text);
                this.editor.clearSelection();
            }
        }
    }
    set autoUpdateContent(status) {
        this._autoUpdateContent = status;
    }
    set durationBeforeCallback(num) {
        this.setDurationBeforeCallback(num);
    }
    setDurationBeforeCallback(num) {
        this._durationBeforeCallback = num;
    }
    get aceEditor() {
        return this.editor;
    }
};
AceEditorDirective.ctorParameters = () => [
    { type: ElementRef },
    { type: NgZone }
];
__decorate([
    Output()
], AceEditorDirective.prototype, "textChanged", void 0);
__decorate([
    Output()
], AceEditorDirective.prototype, "textChange", void 0);
__decorate([
    Input()
], AceEditorDirective.prototype, "options", null);
__decorate([
    Input()
], AceEditorDirective.prototype, "readOnly", null);
__decorate([
    Input()
], AceEditorDirective.prototype, "theme", null);
__decorate([
    Input()
], AceEditorDirective.prototype, "mode", null);
__decorate([
    Input()
], AceEditorDirective.prototype, "text", null);
__decorate([
    Input()
], AceEditorDirective.prototype, "autoUpdateContent", null);
__decorate([
    Input()
], AceEditorDirective.prototype, "durationBeforeCallback", null);
AceEditorDirective = __decorate([
    Directive({
        selector: '[ace-editor]'
    })
], AceEditorDirective);

var AceEditorComponent_1;
let AceEditorComponent = AceEditorComponent_1 = class AceEditorComponent {
    constructor(elementRef, zone) {
        this.zone = zone;
        this.textChanged = new EventEmitter();
        this.textChange = new EventEmitter();
        this.style = {};
        this._options = {};
        this._readOnly = false;
        this._theme = "monokai";
        this._mode = "html";
        this._autoUpdateContent = true;
        this._durationBeforeCallback = 0;
        this._text = "";
        this._onChange = (_) => {
        };
        let el = elementRef.nativeElement;
        this.zone.runOutsideAngular(() => {
            this._editor = ace['edit'](el);
        });
        this._editor.$blockScrolling = Infinity;
    }
    ngOnInit() {
        this.init();
        this.initEvents();
    }
    ngOnDestroy() {
        this._editor.destroy();
    }
    init() {
        this.setOptions(this._options || {});
        this.setTheme(this._theme);
        this.setMode(this._mode);
        this.setReadOnly(this._readOnly);
    }
    initEvents() {
        this._editor.on('change', () => this.updateText());
        this._editor.on('paste', () => this.updateText());
    }
    updateText() {
        let newVal = this._editor.getValue();
        if (newVal === this.oldText) {
            return;
        }
        if (!this._durationBeforeCallback) {
            this._text = newVal;
            this.zone.run(() => {
                this.textChange.emit(newVal);
                this.textChanged.emit(newVal);
            });
            this._onChange(newVal);
        }
        else {
            if (this.timeoutSaving) {
                clearTimeout(this.timeoutSaving);
            }
            this.timeoutSaving = setTimeout(() => {
                this._text = newVal;
                this.zone.run(() => {
                    this.textChange.emit(newVal);
                    this.textChanged.emit(newVal);
                });
                this.timeoutSaving = null;
            }, this._durationBeforeCallback);
        }
        this.oldText = newVal;
    }
    set options(options) {
        this.setOptions(options);
    }
    setOptions(options) {
        this._options = options;
        this._editor.setOptions(options || {});
    }
    set readOnly(readOnly) {
        this.setReadOnly(readOnly);
    }
    setReadOnly(readOnly) {
        this._readOnly = readOnly;
        this._editor.setReadOnly(readOnly);
    }
    set theme(theme) {
        this.setTheme(theme);
    }
    setTheme(theme) {
        this._theme = theme;
        this._editor.setTheme(`ace/theme/${theme}`);
    }
    set mode(mode) {
        this.setMode(mode);
    }
    setMode(mode) {
        this._mode = mode;
        if (typeof this._mode === 'object') {
            this._editor.getSession().setMode(this._mode);
        }
        else {
            this._editor.getSession().setMode(`ace/mode/${this._mode}`);
        }
    }
    get value() {
        return this.text;
    }
    set value(value) {
        this.setText(value);
    }
    writeValue(value) {
        this.setText(value);
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) { }
    get text() {
        return this._text;
    }
    set text(text) {
        this.setText(text);
    }
    setText(text) {
        if (text === null || text === undefined) {
            text = "";
        }
        if (this._text !== text && this._autoUpdateContent === true) {
            this._text = text;
            this._editor.setValue(text);
            this._onChange(text);
            this._editor.clearSelection();
        }
    }
    set autoUpdateContent(status) {
        this.setAutoUpdateContent(status);
    }
    setAutoUpdateContent(status) {
        this._autoUpdateContent = status;
    }
    set durationBeforeCallback(num) {
        this.setDurationBeforeCallback(num);
    }
    setDurationBeforeCallback(num) {
        this._durationBeforeCallback = num;
    }
    getEditor() {
        return this._editor;
    }
};
AceEditorComponent.ctorParameters = () => [
    { type: ElementRef },
    { type: NgZone }
];
__decorate([
    Output()
], AceEditorComponent.prototype, "textChanged", void 0);
__decorate([
    Output()
], AceEditorComponent.prototype, "textChange", void 0);
__decorate([
    Input()
], AceEditorComponent.prototype, "style", void 0);
__decorate([
    Input()
], AceEditorComponent.prototype, "options", null);
__decorate([
    Input()
], AceEditorComponent.prototype, "readOnly", null);
__decorate([
    Input()
], AceEditorComponent.prototype, "theme", null);
__decorate([
    Input()
], AceEditorComponent.prototype, "mode", null);
__decorate([
    Input()
], AceEditorComponent.prototype, "value", null);
__decorate([
    Input()
], AceEditorComponent.prototype, "text", null);
__decorate([
    Input()
], AceEditorComponent.prototype, "autoUpdateContent", null);
__decorate([
    Input()
], AceEditorComponent.prototype, "durationBeforeCallback", null);
AceEditorComponent = AceEditorComponent_1 = __decorate([
    Component({
        selector: 'ace-editor',
        template: '',
        providers: [{
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AceEditorComponent_1),
                multi: true
            }],
        styles: [':host { display:block;width:100%; }']
    })
], AceEditorComponent);

const list = [
    AceEditorComponent,
    AceEditorDirective
];
let AceEditorModule = class AceEditorModule {
};
AceEditorModule = __decorate([
    NgModule({
        declarations: [
            ...list
        ],
        imports: [],
        providers: [],
        exports: list
    })
], AceEditorModule);

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

export { AceEditorComponent, AceEditorDirective, AceEditorModule };
//# sourceMappingURL=ace-editor-ng9.js.map