aceeditor

WARNING: This bundle is deprecated and will be removed in an upcoming release.

The ACE Editor bundle integrates the ACE Editor in map.apps which is the primary editor for Cloud9 IDE. It can be used like a normal widget to display code content.

Usage

The component ACEEditor is defined as a component factory. Possible properties for the newInstance method:

// component declaration in manifest.json file
 {
   "name": "MyComponent",
   "references": [{
     "name": "aceEditorCF",
     "providing": "ct.framework.api.ComponentFactory",
     "filter": "(Component-Name=ACEEditor)"
   }]
 }

 // component implementation
define(["dojo/_base/declare"],function(declare){

    return declare([],{
    
        createACEEditorWidget: function(){
            // use component factory
            var params = {
                // language in the editor is json
                "mode" : "json"
            };
            var editorComponentInstance = this._editorComponentInstance = this.aceEditorCF.newInstance(params);
            
            var editorWidget = editorInstance.getInstance();
            
            // set a new text on the widget
            editorWidget.set("value", "{ 'x': 1 }");
            
            // for value changes watch on value property
            editorWidget.watch("value", function(name,oldvalue, newvalue){});
            
            // access to ace editor is provided by aceEditor property, it is lazy initialized so you have to watch it too
            
            var aceEditor = editorWidget.get("aceEditor");
            if (!aceEditor){
                var handle = editorWidget.watch("aceEditor", function(name,oldvalue, editor){
                    handle.unwatch();
                    // do something with the editor, see ace editor website for api
                    aceEditor = editor;
                });
            }
            
            return editorWidget;
        },
        
        destroyACEEditorWidget : function(){
            // IMPORTANT
            // call "dispose" to destroy the widget
            this._editorComponentInstance.dispose();
        }
    });
});

Motivation

The bundle contains a default ACEEditor widget which can be integrated in custom code and also provides an integration for the dataform bundle.

Constraints

The syntax validation support is limited to browsers which support HTML 5 web workers (https://caniuse.com/#feat=webworkers). In json mode a validation fallback exists that produces a general "not valid" error without column or row positions. The error is directly annotated at the last edited line. For all other languages no validation fallback exists.

Use Cases

Dataform integration

If dataform bundle and aceeditor bundle both are loaded you can use the new type aceeditor within dataform declarations. It has the same possible properties like the ACEEditor widget. Sample:

{
    "dataform-version":"1.0.0",
    "type" : "wizardpanel",
    "showCancel" : true,
    "children":[{    
        "type" : "aceeditor",
        "field" : "json",
        "required" :true,
        "mode" : "json"
    }]
}

Use ACE API directly

To use the ACE Editor API directly without the provided widgets, the ACELoader component has to be used.

// component declaration in manifest.json file
{
    "name": "MyComponent",
    "references": [{
        "name": "_aceLoader",
        "providing": "aceeditor.ACELoader"
    }]
}

// component implementation
define(["dojo/_base/declare"],function(declare){
    
    return declare([],{
    
        useACEApi: function(){
            this._aceLoader.ace().then(function(ace) {
                var editor = ace.edit(aDomNode);
                ...
            });
        }
    
    });
});