Copy and paste

  • Blockly supports copying, cutting, and pasting for built-in components like blocks and workspace comments using keyboard shortcuts and context menus.

  • By default, objects can only be pasted into the workspace they were copied from, except when copied from a flyout into its target workspace.

  • The @blockly/plugin-cross-tab-copy-paste plugin allows copying and pasting blocks across different workspaces or even application tabs.

  • Custom clipboard behavior can be implemented by managing keyboard shortcuts and using the Blockly.clipboard namespace methods.

  • Arbitrary items can be made copy/paste compatible by implementing specific interfaces (ICopyable, IDraggable, IDeletable, ICopyData, IPaster) and registering a corresponding paster.

Blockly supports copy, cut, and paste operations for a number of its built-in components, like blocks, workspace comments, and bubbles.

Default clipboard behavior

Blockly core comes with keyboard shortcuts that can cut, copy, or paste blocks, workspace comments, and any other components that implement the ICopyable, IDraggable, and IDeletable interfaces. It also comes with a context menu option for duplicating a block. You can modify or remove those default shortcuts and menu items as needed.

In the default clipboard implementation, copyable objects can only be pasted into the workspace they were copied from, or into the target workspace if they were copied from a flyout. This means you can copy a block from a flyout into that flyout's target workspace, but you can't copy a block from one main workspace to another.

Copy and paste across workspaces and tabs

If you want to allow users to copy blocks from one workspace and paste them into another workspace, or even into a workspace in a copy of your application running in another tab, you can install the @blockly/plugin-cross-tab-copy-paste plugin.

Custom clipboard behavior

If you want different behavior, you can implement a custom clipboard by uninstalling the keyboard shortcuts that come with Blockly and installing others that work differently. To facilitate this, you can use methods in the Blockly.clipboard namespace for copying, pasting, or more fine-grained control such as setting the workspace that an object was copied from.

Custom copyable objects

Arbitrary items can be made compatible with the copy/paste system by using five interfaces: ICopyable, IDraggable, and IDeletable to represent objects that can be copied, ICopyData to represent copied objects, and IPaster to represent objects which can turn copy data back into copyable objects. Every type of ICopyable needs an associated IPaster that can paste that data.

Any object that implements ICopyable,IDraggable, and IDeletable and that has a corresponding IPaster and ICopyData will automatically work with the default clipboard system.

There are very few circumstances where you would want to implement a custom copyable or a custom paster (e.g. the multiselect plugin), because copyable objects are rendered, and you can't add new rendered objects to Blockly. The only rendered objects that can exist within a workspace are blocks, bubbles, and workspace comments.

Implement a copyable

To create a copyable object, you need to implement the ICopyable, IDraggable, and IDeletable interfaces. The latter two interfaces are required so that a pasted object can be manipulated and deleted.

Selectable

The ICopyable interface extends the ISelectable interface, which means you need to implement those methods and properties as well.

Being selectable is required because keyboard shortcuts look at the selected object to figure out what to copy.

class MyCopyable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

Copyable

The ICopyable interface itself has only one required method, toCopyData, which returns a JSON-serializable representation of the copyable object's state, which can be used to recreate the copyable object.

The copy data must also include a paster property, which holds the registered string-name associated with the paster that should paste this copy data. For more information about pasters, see Implement a paster.

class MyCopyable implements ICopyable {
  constructor(workspace, state) {
    this.workspace = workspace;
    this.myState = state;
  }

  toCopyData() {
    return {
      // This string matches the string used to register the paster.
      paster: 'MY_PASTER',
      state: this.myState,
    };
  }
}

ICopyable also has an optional method, isCopyable, which returns whether an object is currently copyable.

Draggable and deletable

For information on implementing IDraggable and IDeletable, see Custom draggables.

Implement a paster

To create a paster, you need to implement the IPaster interface. It only has one method paste which takes in the copy data of the thing it pastes, the workspace to paste the thing into, and an optional coordinate, which is the location to paste the thing at.

class MyPaster implements IPaster {
  paste(copyData, workspace, coordinate) {
    return new MyCopyable(workspace, copyData.state);
    // Optionally position the copyable at the passed coordinate.
    // Optionally select the copyable after it is pasted.
  }
}

Registration

After you have implemented a paster, you need to register it so that you can find the paster associated with a given copy data from its paster property.

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());