How to copy & paste from/to different browser tabs

Developers Modeler
1

I don’t find the success way to copy/paste elements from a browser tab to another one.

My idea is to save the content of the clipboard class into the HTML5 Web Storage (localStorage) this way:

       const getClipboard = modeler.get('clipboard').get();

       localforage.setItem('bpmn', getClipboard).then(value => {
          console.log('Value: ', value);
       }).catch(error => {
          console.log('Error: ', error);
       });

and restore it from localStorage before execute the paste action:

       localforage.getItem('bpmn').then(value => {
         modeler.get('clipboard').set(value);
         modeler.get('editorActions').trigger('paste');
       }).catch(error => {
         console.log('Error: ', error);
       });
2

Make sure that you JSON.stringify the clipboard contents and deserialize them before putting them back to the clipboard. Other than that, the code you’ve pasted looks good to me.

// copy
var clipboardContents = JSON.stringify(modeler.get('clipboard').get());
localforage.setItem('bpmn', clipboardContents);

// paste
localforage.getItem('bpmn').then(function(value) {

  var clipboardContents = JSON.parse(value);
 
  modeler.get('clipboard').set(clipboardContents);
  modeler.get('editorActions').trigger('paste');
});
3

I’ve detected the problem. It’s the JSON.stringify or the JSON.parser

If I do the following it crashes as well:

// copy and paste in the same function:
modeler.get('editorActions').trigger('copy');

var getClipboard = modeler.get('clipboard').get();

// it would return the origional clipboard content, not the case!
var myClipBoard = JSON.parse(JSON.stringify(getClipboard)); 

modeler.get('clipboard').set(myClipBoard);
modeler.get('editorActions').trigger('paste');

Something is getting lost when stringify or parse the content of the clipboard.

4

Is there an alternative to JSON.stringify / JSON.parser to serialize data in Javascript?

5

It looks like the descriptor contains hidden, non-enumerable fields. Could you diff getClipboard and JSON.parse(JSON.stringify(getClipboard))?

6

The original clipboard data is:

18

The $descriptor and $model properties are read-only and cannot be copied.

The stringify and parsed clipboard data is:

43

The __proto__properties inside oldBusinessObject have disappeared.

7

So, we might assume inside our code that oldBusinessObject is an actual model instance rather than a plain object.

You could use the second reviver argument to JSON#parse to re-instantiate the object(s) with the correct types based on the $type attribute.

8

I’ve created an example that should help you out.

9

Thank you very much for your interest and for the effort in the response.

I am very grateful. I take my hat off to you.