Calling async invokeOperation on sync isEnable

[aujunior]

Good afternoon!

We are developing a button that inserts the table element inside a custom xml.

We want this button to be active only when the table element is allowed by the schema in that context where the cursor is located.

We use Abstraction isEnable() method calling invokeOperation() "GetElementsAtCaretOperation", however, this method is asynchronous and isEnable() is synchronous.

When the method returns the result, the button is not enabled/disabled.

We considered using a workaround by updating the DOM directly, however, we would like to know if there is a better way to solve this problem.

Follow the code for better understanding.

Code: Select all

// The action is enabled only if there is some content selected.
    isEnabled() {
        var elementCaret = new elementAtCaret(this.editor);

        elementCaret.isElementValidAtCaretPosition('table')
            .then( result => {
                this.enableActionByDom(result);
        });

        return false;
    }

    enableActionByDom(enabled){
        if(enabled){
            console.log('ENABLE button using DOM TO DO...');
        }else{
            console.log('DISABLE button using DOM TO DO...');
        }
    }
    //*********************************
    
    async isElementValidAtCaretPosition(element){
        var elementsAtCaret = await this.getElementsAtCaretOperation();
        var isValid = (elementsAtCaret).split(",").includes(element);

        return(isValid);
    }

    async getElementsAtCaretOperation(){
        var elementsAtCaret = '';
        await this.editor.getActionsManager().invokeOperation('com.oxygen.element.GetElementsAtCaretOperation', {})
            .then((str) => {
                elementsAtCaret = str;
                console.log('getElementsAtCaretOperation:', elementsAtCaret);
            });
        return elementsAtCaret;
    }
    
    

[Bogdan Dumitru]

Hello,

Notice that even if an element is not allowed in a position, the Web Author inspects the surrounding positions in order to find one where the element is allowed accordingly to the schema. This is particularly useful when working in the No Tags mode because it allows users to insert elements without having to place the caret exactly where the element is allowed.

But if you precisely want to enable the action just when the table is allowed, consider determining the set of elements that allow the table element, and in the "isEnabled" method use the JavaScript DOM API [1] to check whether the caret is inside such an element or not. That would be the lightest solution. See all the sync.api.dom interfaces from here.

[aujunior]

Thank you Bogdan Dumitru!

It really is very useful for Oxygen to insert the element in the first possible position according to the schema.

We will keep the default behavior of Oxygen.