Insert Menu

There are many features in Chorus which use insert menus. The API allows to create your own by instantiating InsertMenu constructor, which looks like this: InsertMenu(values), where values stands for an array of enums.

In this example, we are going to create an insert menu containing items, opened when a dot is typed in the area, and will insert the name of the selected item to the area content:

function onAreaTextChange(change, area) {
    if(change.getInserted() == '.') {
        const menu = new InsertMenu(getItems());
        menu.setOnSelect(() => {
            area.insertText(area.getCaretPosition(), menu.getSelected());
        });
        const caretBounds = area.getLocalCaretBounds();
        menu.setLayoutX(caretBounds.getMinX());
        menu.setLayoutY(caretBounds.getMinY());
        menu.show()
    }
}

Custom members

To use custom values with an insert menu, you just need to pass an array of InsertMenuMembers to the InsertMenu constructor. A member can be instantiated this way: new InsertMenuMember(name, icons), where name is the name displayed and icons is an optional array of Images.

const menu = new InsertMenu([
    new InsertMenuMember('Member 1', [new Image('1.png')]),
    new InsertMenuMember('Member 2'),
    new InsertMenuMember('Member 3', [new Image('3.png'), new Image('4.png')])
]);