Wysiwyg-editor: Insert HTML function places html at the beginning of the editor

[DerekJDev]

Expected behavior.

Inserted HTML to be placed at cursor position

Actual behavior.

Inserted HTML is placed at the begging of the text editor

Steps to reproduce the problem.

    `$.FroalaEditor.DefineIcon('dynContent',` { NAME: 'users' });
    $.FroalaEditor.RegisterCommand('dynContent', {
        title: 'Insert dynamic content',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
            let editor = this;
            var insertHtml;
            let dialogRef = self.dialog.open(DynamicContentDialog, {
                height: '700px',
                width: '1000px'
            });
            dialogRef.afterClosed().subscribe(result => {
                if (result != null) {
                    insertHtml = result.string;
                    editor.html.insert(result.string)
                }
            });
        }
    });`

If you have a function inside the callback parameter of register command, it inserts the result of that function at the beginning of the editor.

OS.

Windows 10
Note: I'm using angular 4 and angular material 2 for the custom dialog

Browser.

Google Chrome

[stefanneculai]

That is most likely happening because the selection is being lost when you open the custom dialog. The best way to overcome this, would be to save selection using the selection.save method before opening the dialog modal and then call selection.restore just before inserting the HTML.

[DerekJDev]

@stefanneculai Thanks, that works!

[nivensookharan]

@Derekjohnson277 I see that you managed to get a custom dialog to open. Are you able to share how you managed to achieve this? Or how you managed to inject the dialog into self (window)
Im using Angular 4 with Material 2.

Your assistance will be greatly appreciated

TIA