How to use the @hpcc-js/codemirror.JSEditor function in @hpcc-js/codemirror

import { JSEditor } from "@hpcc-js/codemirror";
import { Widget } from "@hpcc-js/common";
import { PropertyEditor } from "@hpcc-js/other";
import { DockPanel } from "@hpcc-js/phosphor";
import { DemoWidget } from "./DemoWidget.js";

declare const System: any;

export class App extends DockPanel {

    _skipUpdate: boolean = false;
    _editor = new JSEditor()
        .on("changes", (changes) => {
            this.changed(this._editor);
        })
        ;
    _propEditor = new PropertyEditor();
    _demo = new DemoWidget()
        .on("changed", (widget: Widget) => {
            this.changed(this._demo);
        })
        ;

    constructor(path) {
        super();
        this._propEditor.monitor((id, newValue, oldValue, source) => {
            this.changed(this._propEditor);
        });

function App(path) {
            var _this = _super.call(this) || this;
            _this._editor = new codemirror_1.JSEditor()
                .on("changes", function (changes) {
                _this.changed(_this._editor);
            });
            _this._propEditor = new other_1.PropertyEditor();
            _this._demo = new DemoWidget_js_1.DemoWidget()
                .on("changed", function (widget) {
                _this.changed(_this._demo);
            });
            _this._propEditor.monitor(function (id, newValue, oldValue, source) {
                _this.changed(_this._propEditor);
            });
            window["cm_editor"] = _this._editor;
            _this.addWidget(_this._demo, '<div>');
            _this.addWidget(_this._propEditor, "Properties", "split-right", _this._demo);
            _this.addWidget(_this._editor, "JavaScript", "split-bottom", _this._demo);
            return _this;</div>

import { JSEditor } from "@hpcc-js/codemirror";

const code = `\
function foo(a, b) {
    return a + b;
}
function bar(c, d) {
    return foo(c, d) + (c * d);
}
`;

let count = 0;
new JSEditor()
    .target("target")
    .javascript(code)
    .render(w => {
        setInterval(function () {
            count++;
            count % 2 ? w.highlightSubstring("a") : w.removeAllHighlight();
        }, 1500)
    })
    ;

import { JSEditor } from "@hpcc-js/codemirror";
import { SplitPanel } from "@hpcc-js/phosphor";
import { Sample } from "./sample.js";

export class SourceSample extends SplitPanel {

    jsEditor = new JSEditor()
        .on("changes", () => {
            this.sample
                .data([[this.infostring(), this.jsEditor.text()]])
                .lazyRender()
                ;
        });
    sample = new Sample();

    constructor() {
        super("horizontal");

        this
            .addWidget(this.jsEditor)
            .addWidget(this.sample)
            ;
    }