How to update dynamically custom dropdown in toolbar.

[JalpeshVadgama]

Hello Team,

First of all, You are doing great work for Forola editor.

In our application. We want to dynamically update the newly created dropdown. I have created a dropdown for variables in the editor as per the forola editor document like below.

https://froala.com/wysiwyg-editor/examples/custom-dropdown/

For that, I have used the following code and its works fine as intended.

` FroalaEditor.DefineIcon('dropdown', { NAME: 'plus', SVG_KEY: 'add' });

FroalaEditor.RegisterCommand('dropdown', {
  title: 'Dropdown',
  type: 'dropdown',
  focus: false,
  undo: false,
  refreshAfterCallback: true,
  options: optionsDynamic,// JSON.parse(JSON.stringify(optionsDynamic)),
  callback(cmd: any, val: any) {
    this.html.insert(val);
  },
  refresh(btn) {
    // The current context is the editor instance.
  },
});`

But now I need to change the optionsDynamic based on some condition. Right now it changes the dynamicOption variable but does not affect anything. I have also done clone via JSON.parse but no effect on it.

[AbanoubSameh]

Hi, I had the same problem, we want to update the dropdown on the run time based on some conditions. The is the solution I found:

• Change options instead of object to a function; options: () => this.toolbarDropdownItems
• Use refreshOnShow In the refreshOnShow function you can regenerate the dropdown based on the new data using froalaEditor.button.buildList(['DROPDOWN_BUTTON_NAME']); << this will return the HTML for the toolbar button and dropdown with the items, but you are only interested in the dropdown items, so I created a wrapper HTML element to select only the dropdown items and then replaced the current dropdown items with the new ones as below

FroalaEditor.RegisterCommand('dropdown', {
  title: 'Dropdown',
  type: 'dropdown',
  focus: false,
  undo: false,
  refreshAfterCallback: true,
  options: () => this.toolbarDropdownItems,
  refreshOnShow: ($btn: any, $dropdown: any) => {
              const list = $dropdown.find('ul.fr-dropdown-list');
              const containerElement = document.createElement('div');
              containerElement.innerHTML = this.editor.button.buildList([dropdown]); 
              list.replaceWith(containerElement.querySelector('ul.fr-dropdown-list'));
            },
  callback(cmd: any, val: any) {
    this.html.insert(val);
  },
  refresh(btn) {
    // The current context is the editor instance.
  },
});