scratchfoundation / scratchfoundation/scratch-blocks
Block/script clipboard, shared
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 2.8k
- Forks
- 1.6k
- Avg merge
- 4h 51m
- Merged PRs (30d)
- 12
Description
One feature that would be really handy is the ability to copy and paste Scratch blocks. At the moment (Scratch 2.0), you can already do this in some ways:
- Select "duplicate" from a block's context menu
- Drag a block or script onto a sprite in the sprites pane
- Use the "stamp" button in the toolbar to copy the block or script
- Use the backpack to bring blocks or scripts from one sprite to another, even across projects and devices
The last item there is similar to what I'm suggesting - copying actual block data to the system clipboard.
It's better than using the backpack, because:
- Systems are starting to implement shared clipboards, meaning the clipboard is shared across multiple devices
- And even if you're on a device that doesn't have shared clipboards, the clipboard is generally shared among all the applications on your device, meaning you could have two browser windows open, each working on Scratch projects
- Because of shared clipboards, you don't need to be logged into the same account as the account you copied the block from, unlike the backpack
- It's quick - you don't need to reload the entire page to see the most recent items in the backpack (though this should be fixed, for what reason should you need to reload the page to see items in your backpack?)
- Depending on how scripts are copied - I'm thinking the JSON representation of the script you'd find in an sb3 project - you could probably upload a script onto the internet, so that people can copy from your document to their project
I'm thinking it shouldn't be very difficult to implement this. Here's a quick code mockup:
// When a script, block, etc. is created:
// 'copy' is probably localized to 'Copy to clipboard'
block.contextMenu.addItem('copy', function() {
// This function doesn't exist with this name, of course. I'm not entirely certain what
// the exact code to copy is but it's possible and has been done on many sites
// and web applications before.
// Also, I don't know what the name of the function to convert a script to JSON is,
// so I'm using "serialize" :)
// I'm also assuming there's a "duplicate" method on blocks that behaves however
// we want duplicating scripts to be have, (copy child blocks, blocks below, etc.)
// Could probably name this method better but it's for the demo :)
copyToBrowserClipboard(block.duplicate().serialize())
})
The trouble is pasting. There are a couple of ways we could do this:
- Make a hidden input box that's always selected when you're using the workspace. Input only works via paste. Kind of a dirty hack, and you can't use a context menu -> paste method if you do it that way.
- Show a prompt asking for the user to paste a block. I like this more.
The nice thing about using a prompt is that it can be a custom dialog - for example, before a block is actually pasted into the workspace, you might be able to see a picture of the block in the dialog. It can be triggered via context menu, or by listening for a Command/Control-V press.
Mockup code for prompt:
function pastePrompt() {
const prompt = makePastePrompt()
prompt.addEventListener('done', function() {
workspace.addScript(prompt.value) // see below section, "things to consider"
})
}
workspace.contextMenu.addItem('paste', pastePrompt)
workspace.addEventListener('key', function(key) {
// isCombo is a fake function here that will check if a key press is the right character,
// has the right modifiers (command/control), etc. for mockup
if (isCombo(key, 'Command+V')) {
pastePrompt()
}
})
Things to consider:
- Where should blocks be pasted to? Where the mouse clicked?
- If you copy a reporter, where will it go? Can you use the paste prompt on an input?
- What if you try to paste a stack block into an input?
- Can you paste a script between two blocks, if it fits?
- Would it just be better to make the block be automatically grabbed when you accept the paste, or would that be confusing or surprising?
I guess this is getting kind of long.. that's all I have for this suggestion! What should be changed? (Probably the title of this issue.. maybe it would better fit as a "design" issue.)
edit: this could probably work with sprites, as well, but I'm not sure how to save costumes or sounds - maybe as data URIs? But those have length limits..
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the existing duplicate, sprite-drag, stamp, and backpack behaviors described in the issue, then resolve the open questions about paste placement, block types, and keyboard or context-menu entry points. Done means the agreed clipboard format and copy/paste behavior are specified for blocks or scripts, including how invalid paste targets are handled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100