trying to move tinymce 4 to tinymce 5 with adding a custom filemanager

Question

I am trying to move the tinymce from 4 to version 5, and created a new file for adding a toolbar and a plugin to tinymce called as filemanager.

so while moving i did this change in the plugin file of filemanager

tinymce.PluginManager.add('filemanager', function(editor, url) {

    if (typeof fileManager != 'undefined') {
        var fileManager = editor.settings.fileManager_path;
    } else {
        var fileManager = editor.settings.url_converter_scope.baseURI.directory + '/plugins/filemanager/index.cfm'
    }
    
    // Add a button that opens a window
    editor.ui.registry.addButton('filemanager', {
        tooltip: 'Insert From My Files',
        icon: 'browse',
        onclick: showDialog
    });

    function showDialog() {
            editor.windowManager.open({ 
                url: fileManager,
                title: 'My Files Home',
                width: Number($(window).innerWidth()) - 40,
                height: Number($(window).innerHeight()) - 80  
            });

    }
    // Adds a menu item to the tools menu
    editor.ui.registry.addMenuItem('filemanager', {
        text: 'My Files',
        context: 'insert',
        icon: 'browse',
        onclick: showDialog
    });
});

and got this error in theme.min.js

Uncaught Error: Errors: 
Failed path: (toolbarbutton)
Could not find valid *strict* value for "onAction" in {
  "tooltip": "Insert From My Files",
  "icon": "browse",
  "type": "button"
}

Input object: {
  "tooltip": "Insert From My Files",
  "icon": "browse",
  "type": "button"
}

Update #1

Made couple of changes but still an error

tinymce.PluginManager.add('filemanager', function(editor, url) {
    var openDialog = function () {
    return editor.windowManager.open({
      title: 'My Files',
      width: Number($(window).innerWidth()) - 40,
      height: Number($(window).innerHeight()) - 80,
      onSubmit: function (api) {
        var data = api.getData();
        // Insert content when the window form is submitted
        editor.insertContent('Title: ' + data.title);
        api.close();
      }
    });
  };

    
    // Add a button that opens a window
    editor.ui.registry.addButton('filemanager', {
        tooltip: 'Insert From My Files',
        icon: 'browse',
        onAction: function () {
            openDialog();
        }
    });

    // Adds a menu item to the tools menu
    editor.ui.registry.addMenuItem('filemanager', {
        text: 'My Files',
        context: 'insert',
        icon: 'browse',
        onAction: function() {
            openDialog();
        }
    });

    return {
        getMetadata: function () {
        if (typeof fileManager != 'undefined') {
            var fileManager = editor.settings.fileManager_path;
        } else {
            var fileManager = editor.settings.url_converter_scope.baseURI.directory + '/plugins/filemanager/index.cfm'
        }   
        return  {
            name: "Upload Files",
            url: filemanager
        };
        }
    };
});

Error i am getting now is this one

Uncaught Error: Errors: 
Failed path: (dialog)
Could not find valid *strict* value for "body" in {
  "title": "My Files",
  "width": 1543,
  "height": 302
}
Failed path: (dialog)
Could not find valid *strict* value for "buttons" in {
  "title": "My Files",
  "width": 1543,
  "height": 302
}

Input object: {
  "title": "My Files",
  "width": 1543,
  "height": 302
}