Adding a custom file manager

[webzille]

I'm trying to implement my own filemanager with suneditor but having problems creating it.

var customFileManager = {
    name: 'customFileManager',
    display: 'container',
    title: 'File Manager',
    innerHTML: '<i class="fas fa-folder"></i>', 
    buttonClass: '',
    add: function (core, targetElement) {
        const titleList = {
            en: 'File Manager'
        }
        this.title = titleList[core.lang.code];
    },
    onClick: function (core) {
        // Opens the filemanager than resolves the selected files
        fileManagerWindow('image').then(function(selectedFiles) {

            console.log(selectedFiles);
        });
    },
    // Other properties and methods as needed
};

function fileManagerWindow(type) {
    var fileManagerRoute = '{{ route('filemanager', ':type') }}';
    var fileManagerWindow = window.open(
        fileManagerRoute.replace(':type', type),
        'File Manager',
        'resizable=true,scrollbars=true,fullscreen=true'
    );

    return new Promise(function(resolve, reject) {
        window.addEventListener('beforeunload', function() {
            var selectedFiles = fileManagerWindow.selectedFiles;
            resolve(selectedFiles);
        });

        window.addEventListener('message', function(event) {
            if (event.source === fileManagerWindow) {
                var selectedFiles = event.data;
                resolve(selectedFiles);
            }
        });
    });
}

That is my code, and than in my suneditor init, I have the following

                /* The plugin for the customFileManager */
                plugins: [customFileManager],

And in the buttonlist I've added the ['customFileManager'] to be a button. It shows up and I get the following error in the console.

Uncaught TypeError: n is undefined

I've traced the problem to this:

containerOn: function(e) {
    this._bindedContainerOff && this._bindedContainerOff();
    const t = this._containerName = e.getAttribute("data-command"),
        n = this.container = this._menuTray[t];  /* the 't' is 'customFileManager' but it's not present in menuTray and n is undefined */
    this.containerActiveButton = e, this._setMenuPosition(e, n), this._bindedContainerOff = this.containerOff.bind(this), this.addDocEvent("mousedown", this._bindedContainerOff, !1), this.plugins[t].on && this.plugins[t].on.call(this), this._antiBlur = !0
},

The const t there is essentially set to customFileManager but it doesn't exist in the this._menuTray object, therefore that n is undefined and when it gets to _setMenuPosition it's trying to set some styles on an undefined variable.

All I want to happen when I click that button is for my window to open where I can manipulate the filesystem in the scope of the filemanager and then pass the selected files to the suneditor.

On a side note, is autosave going to be ever part of suneditor?

[webzille]

var customFileManager = {
    name: 'customFileManager',
    display: 'container',
    title: 'File Manager',
    innerHTML: '<i class="fas fa-folder"></i>',
    buttonClass: '',
    add: function (core, targetElement) {
        const context = core.context;
        context.customSubmenu = {
            targetButton: targetElement,
            textElement: null,
            currentSpan: null
        };
        const titleList = {
            en: 'File Manager'
        };
        this.title = titleList[core.lang.code];
        

        // Generate submenu HTML
        // Always bind "core" when calling a plugin function
        let listDiv = this.setSubmenu(core);

        // Input tag caching
        context.customSubmenu.textElement = listDiv.querySelector('input');

        // You must bind "core" object when registering an event.
        /** add event listeners */
        listDiv.querySelector('.se-btn-primary').addEventListener('click', this.onClick.bind(core));

        // Required
        // You must add the "submenu" element using the "core.initMenuTarget" method.
        /** append target button menu */
        core.initMenuTarget(this.name, targetElement, listDiv);
    },
    setSubmenu: function (core) {
        const listDiv = core.util.createElement('DIV');
        // Required
        // A "se-submenu" class is required for the top level element.
        listDiv.className = 'se-menu-container se-submenu se-list-layer';
        listDiv.innerHTML = '' +
            '<div class="se-list-inner">' +
                '<ul class="se-list-basic"">' +
                    '<li>' +
                        '<div class="se-form-group">' +
                            '<button type="button" class="se-btn-primary se-tooltip">' +
                                '<strong>Add</strong>' +
                                '<span class="se-tooltip-inner">' +
                                    '<span class="se-tooltip-text">Open FileManager</span>' +
                                '</span>' +
                            '</button>' +
                        '</div>' +
                    '</li>' +
                '</ul>' +
            '</div>';

        return listDiv;
    },
    onClick: function (core, e, targetElement) {
        fileManagerWindow(core, targetElement, 'image')
            .then(function(selectedFiles) {
                selectedFiles.forEach(function(file) {
                    // Insert each file as an image (doesn't work... says it's not a function in the console).
                    core.insertImage(file);
                });
            })
            .catch(function(error) {
                console.error(error);
            });
    },
};

adding that submenu makes it work (somewhat) (got it from an example plugin) but I don't want that submenu. I just want the filemanager window to open.

My other problem is actually placing the array of images into the editor. Before that, I would like to get rid of the submenu