Enhance context menu with plugin

✋ Feature Requests
1

Hi Dato,

When working on our current project, we where trying to build a preset mechanism (which is working fine but too dev to be shared).
One thing we had in mind is being able to add entry in context menus.

As an example, at block level, having a custom entry in context menu that could then allow us to create popin, do copy action, or whatever… could be something magic!

In our case, being able to add an entry in Block context menu saying “Copy block structure to clipboard” would be something perfect.

Thanks for your work !

Best regards

2

Hi Dato community,

Is it me or is this feature new ? https://www.datocms.com/docs/plugin-sdk/dropdown-actions

I think it could do the job … let’s try :slight_smile:

Regarding this feature, do you think there is a way to get the Modular Block JSON structure just like you do with “Copy to clipboard” in localstorage ?

What I would like to do is pretty simple:

  • The user selects 2 Modular blocks he’s created
  • Then, I would like to add a new button in the global context menu bar “Copy selection”:

image
image1820×230 12.8 KB

  • or at field level, a new entry in context menu “Copy selection”:

image
image872×438 37.4 KB

  • when clicking on the this button, it would get a copy of the selected Blocks as JSON.

Is it something possible ?

Thanks for your help.

3

Yes, sorry, it was released back on Oct 9 and we forgot to announce it!

Let me look into the situation re: block copying and get back to you momentarily.

4

Good news/bad news :frowning:

Good news:

In executeFieldDropDownAction(), you can use ctx.formValues to get the block values:

switch (actionId) {
      case "copyAsJson": {
        // This only works on HTTPS, so won't work on localhost during dev unless you add HTTPS to the vite server
        const stringifiedCtx = JSON.stringify(ctx, null, 2)
        await navigator.clipboard.writeText(stringifiedCtx)
        console.log(ctx.formValues['modular_content_field'])
        await ctx.notice("Copied to clipboard")
        break;
      }
      default: {
      }
    }

Screenshot 000489
Screenshot 0004893420×1408 337 KB

Bad news:

As far as I can tell, it has no way to access the selection state of the multi-block selector :frowning:

Even if you could get that from the clientside somehow, cross-frame security restrictions won’t let you easily pass it to the plugin =/

If this functionality has to be in a plugin, you have to render your own UI for filtering/selecting the blocks, separate from the native multi-block selector. It could list (jankily) some of the block fields in a multi-select field, for example, and copy only those… https://www.datocms.com/docs/plugin-sdk/form

Alternative idea… instead of a plugin, might be easier for your editors to just use a bookmarklet? Like:

javascript:((() => { window.focus(); navigator.clipboard.writeText(localStorage.getItem('blocksClipboard')); })());

You can probably also package that into a browser extension if you prefer, which could then do it automatically on localStorage changes…

5

Also pinging @s.verna: (Sorry for the ping, hopefully a quick fix?) Can we just make that selector function natively copy to the clipboard in addition to localStorage? Block "Copy to clipboard" command should actually copy to system clipboard :) [Modified title]

And/or maybe we could use a similar context menu plugin hook for the MultiSelectActionBar?

Would be easier & safer than silly workarounds :slight_smile:

1 Like