const options = DevExpress.RichEdit.createOptions();

var changeWidthImageSizeCommandId = 'ChangeWidthImageSize';
var changeHeightImageSizeCommandId = 'ChangeHeightImageSize';
/** @type {DevExpress.RichEdit.Image} */
var selectedImage = null;
/** @type {DevExpress.RichEdit.RibbonNumberBoxItem} */
var changeWidthImageSizeItem = null;
/** @type {DevExpress.RichEdit.RibbonNumberBoxItem} */
var changeHeightImageSizeItem = null;

/** @param {DevExpress.RichEdit.RichEdit} richEdit */
function getSelectedImage(richEdit) {
    const selIntervals = richEdit.selection.intervals;
    if(selIntervals.length === 1 && selIntervals[0].length === 1) {
        var images = richEdit.selection.activeSubDocument.images.find(selIntervals);
        if(images.length == 1 && images[0].interval.start == selIntervals[0].start)
            return images[0];
    }
    return null;
}
function deleteSizeItems(ribbon) {
    var foTab = ribbon.getTab(DevExpress.RichEdit.RibbonTabType.FloatingObjectsFormat);
    foTab.removeItem(changeWidthImageSizeItem.id);
    foTab.removeItem(changeHeightImageSizeItem.id);
    changeWidthImageSizeItem = null;
    changeHeightImageSizeItem = null;
}
options.events.selectionChanged = function (s, e) {
    selectedImage = getSelectedImage(s);
    if(selectedImage) {
        s.updateRibbon(function(ribbon) {
            if(changeWidthImageSizeItem)
                deleteSizeItems(ribbon);
            changeWidthImageSizeItem = new DevExpress.RichEdit.RibbonNumberBoxItem(changeWidthImageSizeCommandId, 'Image Width', { 
                step: 0.1,
                width: 110,
                format: '#0.##',
                value: richEdit.unitConverter.twipsToInches(selectedImage.actualSize.width),
            });
            changeHeightImageSizeItem = new DevExpress.RichEdit.RibbonNumberBoxItem(changeHeightImageSizeCommandId, 'Image Height', {
                step: 0.1,
                width: 110,
                format: '#0.##',
                value: richEdit.unitConverter.twipsToInches(selectedImage.actualSize.height),
            });
            var foTab = ribbon.getTab(DevExpress.RichEdit.RibbonTabType.FloatingObjectsFormat);
            foTab.insertItemBefore(changeWidthImageSizeItem, DevExpress.RichEdit.FloatingObjectsFormatTabItemId.BringForwardMenu);
            foTab.insertItemBefore(changeHeightImageSizeItem, DevExpress.RichEdit.FloatingObjectsFormatTabItemId.BringForwardMenu);
        });
    }
    else {
        if(changeWidthImageSizeItem) {
            s.updateRibbon(function(ribbon) {
                deleteSizeItems(ribbon);
            });
        }
    }
};
options.events.customCommandExecuted = function(s, e) {
    switch(e.commandName) {
        case changeWidthImageSizeCommandId:
        case changeHeightImageSizeCommandId: {
            if(selectedImage) {
                var size = selectedImage.actualSize;
                if(e.commandName === changeWidthImageSizeCommandId)
                    size.width = s.unitConverter.inchesToTwips(e.parameter);
                else
                    size.height = s.unitConverter.inchesToTwips(e.parameter);
                selectedImage.actualSize = size;
            }
            break;
        }
    }
};