Added support for middleware in edit menu

[ThisIsOstad]

It adds support for the dynamic edit menu in the application. Any other application can now use the osjs/filemanager:contextmenu:edit middleware group to change context/edit menu.

Here is an example of how an application can use this feature:

1. Create a middleware.js file at the root of your application.
2. Change webpack config and add the middleware.js as a separate entry.
3. Add { "filename": "middleware.js", "type": "background" } to the files property in the metadata config.
4. Use a code like this in the created middleware.js file:

import osjs from 'osjs';

osjs.middleware('osjs/filemanager:menu:edit', (({file, isContextMenu}) => {
  if (!isContextMenu) {
    return [];
  }

  return [{
    label: 'Scan',
    disabled: !file.isFile,
    onclick: () => osjs.run('scanner', {file})
  }];
}));

Closes os-js/OS.js#752.

[andersevenrud]

I think it would be useful to have async function support here!

Ex:

const promises = editMenuMiddlewares
  .map(fn => fn({file: item, menuItems: items, isContextMenu}))
const appendItems = await Promise.all(promises)
const menuItems = [...editMenuItems, ...appendItems]

[ThisIsOstad]

There are two problems:

First, the createEditMenu itself is not a async function. Can we make it async? How?

The second problem is that it doesn't support adding an item in a place other than the end of menu items (which is not very important for me).

[andersevenrud]

To make it async, just place an async keyword here:

osjs-filemanager-application/index.js

Line 577 in d5319ee

return ({name, ev}, args, isContextMenu = false) => {

Then await on this:

osjs-filemanager-application/index.js

Line 580 in d5319ee

menu: menuItems[name](args, isContextMenu),

And finally async keyword here

osjs-filemanager-application/index.js

Line 479 in d5319ee

const createEditMenu = (item, isContextMenu) => {

[ThisIsOstad]

Thanks for your help 😁

To make it possible for any application to add multiple items we need to assume that they will return an array, so appendedItems will be an array of arrays and we need a .reduce to make it a flat array. Right?

[andersevenrud]

No problem!

To make it possible for any application to add multiple items we need to assume that they will return an array

Ah, yeah. These callbacks should probably only be able to return arrays.

To flatten it out simply do the following (as I'm not sure if the current babel setup does polyfills of .flatten and .flatMap)::

const promises = editMenuMiddlewares
  .map(fn => fn({file: item, menuItems: items, isContextMenu}))
const appendItems = await Promise.all(promises)
const menuItems = [...editMenuItems, ...([].concat(...appendItems))]

[andersevenrud]

Maybe also sanitize it :)

const appendItems = (await Promise.all(promises))
  .map(item => item instanceof Array)

[ThisIsOstad]

Do you mean filter?

[andersevenrud]

Ops. Yeah, filter 😊

[andersevenrud]

You have confirmed that the latest changes and everything works with this ? 🤓

[ThisIsOstad]

Now it's working 😁

I'd missed an await for menuItemsFromMiddleware.

[andersevenrud]

Sweet! Then I'll merge and release this one as well :)

[andersevenrud]

@osjs/[email protected] is now published with these changes.

Again, thank you very much for this!

[ThisIsOstad]

I really enjoyed it, thank you too 😊