bpmn-js-native-copy-paste

Copy and paste for bpmn-js implemented using the native operating system clipboard. As a result, copy and paste works across browser tabs, windows and applications that build on top of the web platform.

Features

• copy and paste using the system clipboard
• works in modern browsers
• works between different BPMN modeler instances
• works across browser windows
• disables built-in clipboard

Usage

Note

Interaction with the clipboard requires user interaction/confirmation, cf. security considerations. You can fallback to the local clipboard if access is rejected.

Include bpmn-js-native-copy-paste as a module to use the system clipboard:

import NativeCopyPasteModule from 'bpmn-js-native-copy-paste';

const modeler = new BpmnModeler({
  additionalModules: [
    NativeCopyPasteModule
  ]
});

await modeler.importXML(require('./ticket-booking.bpmn'));

Graceful fallback

When access to the system clipboard is rejected you can fallback to local copy and paste:

const eventBus = modeler.get('eventBus');
const nativeCopyPaste = modeler.get('nativeCopyPaste');

eventBus.on('native-copy-paste:error', ({ message, error }) => {

  // toggle off
  nativeCopyPaste.toggle(false);
});

How it Works

We use the clipboard API to read from and write to the operating system clipboard.

During copy we serialize the copy tree to JSON, when re-creating the tree from JSON we use a reviver to re-construct the model types.

The standard paste mechanics implemented by bpmn-js discard BPMN moddle extensions unknown in the target context. This is by design, to prevent polution of users diagrams.

Build and Run

# install dependencies
npm install

# run development setup
npm run dev

Open multiple instances of the test site and copy/paste across.

License

MIT

❤️