How to use @hpcc-js/codemirror - 10 common examples

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

const code = `\
MySample := SAMPLE(Person,10,1) // get every 10th record
SomeFile := DATASET([{'A'},{'B'},{'C'},{'D'},{'E'},
                     {'F'},{'G'},{'H'},{'I'},{'J'},
                     {'K'},{'L'},{'M'},{'N'},{'O'},
                     {'P'},{'Q'},{'R'},{'S'},{'T'},
                     {'U'},{'V'},{'W'},{'X'},{'Y'}],
                     {STRING1 Letter});
Set1 := SAMPLE(SomeFile,5,1); // returns A, F, K, P, U`;

new ECLEditor()
    .ecl(code)
    .target("target")
    .render(w => {
        w
            .highlightInfo(0,8)
            .highlightError(12,18)
            .highlightWarning(78,95)
            ;
    })
    ;

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)
            ;
    }

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

const code = {
    "fruit": "Apple",
    "size": "Large",
    "color": "Red",
    "tags": ["witch", "snake"]
};

new JSONEditor()
    .target("target")
    .json(code)
    .render()
    ;

})
        ;
    private _graphAdapter = new GraphAdapter(this._elementContainer);
    private _pipeline: Graph = new Graph()
        .allowDragging(false)
        .applyScaleOnLayout(true)
        .on("vertex_click", (row: any, col: string, sel: boolean, ext: any) => {
            const obj = row.__lparam[0];
            this.selectionChanged(obj.viz, obj.activity);
        })
        .on("vertex_contextmenu", (row: any, col: string, sel: boolean, ext: any) => {
        })
        ;

    private _tabDDL = new TabPanel();
    private _ddlSchema = new JSONEditor().json(ddl2Schema);
    private _ddlEditor = new DDLEditor();
    private _jsEditor = new JSEditor();
    private _layoutEditor = new JSONEditor();
    private _ddlv1 = new JSONEditor();
    private _ddlv2 = new JSONEditor();

    private _tabRHS = new TabPanel();
    private _splitData = new SplitPanel();
    private _dataProperties: PropertyEditor = new PropertyEditor()
        .show_settings(false)
        .showFields(false)
        ;
    private _preview = new DatasourceTable();
    private _vizProperties: PropertyEditor = new PropertyEditor()
        .show_settings(false)
        .showFields(false)

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

new CSSEditor()
    .css(`\
body {
    margin: 0;
    padding: 15px;
}    
#target {
    position: relative;
    width: 100%;
    height: calc(100vh - 32px);
    border: 1px solid #ed1c24;
}
    `)
    .target("target")
    .render()
    ;

}

    start -> a0;
    start -> b0;
    a1 -> b3;
    b2 -> a3;
    a3 -> a0;
    a3 -> end;
    b3 -> end;

    start [shape=Mdiamond];
    end [shape=Msquare];
}
`;

new DOTEditor()
    .target("target")
    .dot(code)
    .render()
    ;

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

new HTMLEditor()
    .html(`\

    
    
        
        
        <title>hpcc-js</title>
        
        
        
        
        
    
    
        <div style="width:500px;height:500px;"></div>