Back to Remotion

Copy and Paste in the Editor Starter

packages/docs/docs/editor-starter/copy-paste.mdx

4.0.4751.4 KB
Original Source

The Remotion Editor Starter implements copying and pasting from layers.

Considerations

When reading the browser's Clipboard API, only the following MIME types are supported:

  • text/plain
  • text/html
  • image/png

None of these are the ideal MIME types for copying items.

We are therefore using a workaround that is used by Figma and tldraw: The items are serialized, put into a <div> and then copied to the clipboard with the MIME type text/html. This prevents overwriting the text/plain slot.

Ways of copy-pasting

Copy and pasting works by right-clicking on an item, or using the standard keyboard shortcuts:

  • <kbd>Cmd</kbd>/<kbd>Ctrl</kbd>+<kbd>X</kbd> to cut
  • <kbd>Cmd</kbd>/<kbd>Ctrl</kbd>+<kbd>C</kbd> to copy
  • <kbd>Cmd</kbd>/<kbd>Ctrl</kbd>+<kbd>V</kbd> to paste

Pasting

When pasting contents, the Editor Starter first checks if the clipboard data has the MIME type text/html and deserializes the contents of the <div> into items.

Items are being copied and assigned a new unique ID before being added to the top of the timeline.

Customizing

The logic for copy-paste can be found under src/editor/clipboard.

See also