CKeditor dialog Plugin dynamic content elements (Set on runtime like in onShow methode)

Question

Actually, I want to show the attributes of clicked/selected element in the dialog, first, it does properly but when I close the dialog and open for any other element its show the prev attributes list because let listAttrElements = getListOfItems(elAttributes);

this line won't run again until reloading the page. I just want to update the list whenever the modal opens for a single element, close open again for another element then values should be as per another element.

// Our dialog definition.
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
let selection = editor.getSelection();
let element = selection.getStartElement();
let elAttributes = Object.keys(element.getAttributes());
let listAttrElements = getListOfItems(elAttributes);
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Attributes',
minWidth: 400,
minHeight: 200,

    // Dialog window content definition.
    contents: [
        {
            // Definition of the Basic Settings dialog tab (page).
            id: 'basic',
            // label: 'Basic Settings',

            // The tab content.
            elements: listAttrElements
        }
    ],
    // Invoked when the dialog is loaded.
    onShow: function() {
        console.log('here in on show');
    },

    // This method is invoked once a user clicks the OK button, confirming the dialog.
    onOk: function() {
        CKEDITOR.dialog.getCurrent().reset();
    },
    onLoad: () => {
        console.log('loaded')
    }
};

});
function getListOfItems (attrObj) {
return attrObj.map ((el, index) => { return {
// Text input field for the abbreviation text.
type: 'checkbox',
id: index,
label: el,
// Called by the main setupContent method call on dialog initialization.
setup: function( element ) {
console.log('new setuop require')
this.setValue( element.getText() );
},
// Called by the main commitContent method call on dialog confirmation.
// set value onchange
commit: function( element ) {
element.setText( this.getValue() );
}
}});
}

Thanks in advance for the help!

https://github.com/ckeditor/ckeditor4/issues/4906#issuecomment-927666316

Answer 1

This is how I solved it:

    editor.on('dialogHide', function (evt) {
      if (evt.data.getName()=== 'abbrDialog') {
        editor._.storedDialogs['abbrDialog'] = false
      }
    });