Jodit dialog system

The Jodit dialog system allows you to create modals with title, footer, and content. Each dialog is created as a separate inheritor component [[View]].

Several basic wrappers are available out of the box to quickly create basic windows: [[Alert]]/[[Confirm]]/[[Prompt]]

Jodit.Alert('Hello world!', () => {
    // After OK
});
Jodit.Confirm('Are you sure?', 'Confirm Dialog', yes => {
    if (yes) {
        // do something
    }
});
Jodit.Prompt('Enter your name', 'Prompt Dialog', name => {
    if (name.length < 3) {
        Jodit.Alert('The name must be at least 3 letters');
        return false;
    }
    // do something
});
Copy

Each of these wrappers returns an [[IDialog]] object, and you can expand the open window.

const dialog = Jodit.Alert('Hello world!', () => {
    // After OK
});
dialog.setContent('Buy buy world! =)');
Copy

Note that you do not need to call the [[Dialog.open]] method.

For a simpler setup, you can immediately create an instance [[Dialog]] and already fully manage its contents:

const dialog = new Jodit.modules.Dialog();
dialog.setHeader('The header!');
dialog.setContent('Content');
dialog.setFooter([
    new Jodit.modules.UIButton(dialog).onAction(() => {
        dialog.close();
    })
]);
dialog.open();
Copy

In all of these examples, the dialog opens regardless of Jodit's settings, specifically the selected language and theme. To make the dialog open in the same theme as the editor, you can set the theme in its settings, or you can use the [[IDlg]] trait.

const dialog = new Jodit.modules.Dialog({
    theme: 'dark'
});

// or

const editor = new Jodit('#editor', {
    theme: 'dark'
});
const dialog = editor.dlg();
editor.alert('Hello world!');
editor.confirm('Hello world?', yes => {
    console.log('Ok?', yes);
});
Copy

Copy