How to implement clipboard actions via ProseMirror?

1

Context

We’re building an application using TipTap editor which uses ProseMirror behind the scenes. As part of this application, we have a file menu bar where we let the user perform basic Clipboard Actions. This is, copy / cut / paste / duplicate current selection, not via keyboard shortcuts but buttons on the menu instead. We’re interested on supporting these features for text / images / tables and it’s worth noting we need to preserve styles (bold, underline, etc) when copy / pasting text.

Screen Shot 2022-11-07 at 10.13.25 AM

Ask

  • What would be the high level approach to solve this via ProseMirror primitives?
    • The way we’ve been thinking about this is:
      • Get current selection
      • Get nodes associated to that selection
      • Get HTML associated to nodes
      • Write HTML to Clipboard via Clipboard API.

While above idea works nicely for most cases, it still doesn’t cover all. (e.g. text with marks etc). So we’re starting to question whether or not our approach might be the correct one.

Thoughts?

2

As far as I know, JavaScript cannot read from the clipboard without the user initiating a native paste event, so I’m not sure this is going to be something you can do.

3

Hey @marijn!

So there is this API that would help us achieve attaching metadata to the clipboard.

Am I missing something?

4

The browser only lets you write/read plain text and HTML to the clipboard, so metadata would have to go into some kind of structured HTML format.

1 Like