Khan Academy

Copy-Pasting More than Just Text

Worked on a cool little feature today: adding copy-paste functionality for our widgets. Take a look at the way it worked previously: nocopypastaThose are sad faces, if you couldn’t tell

This happens because normally when you copy-paste, you just copy the [[☃ image 1]] part but don’t get any of the metadata associated with that widget.

Take a look at what it looks like now:

copypastaMuch improvement.

First, I stick a listener on the jQuery events for cut, copy, and pasting (found out about them from this outdated but still useful blog post). When a user cuts/copies a piece of text in the editor I check to see if he/she’s finna’ move a widget too. If there are widgets to preserve, I grab the widget metadata, serialize it as a JSON string, and toss it into localStorage. On a paste, I check to see if I have some widget data previously stored. If so, then include that data with the paste. If there are conflicting widget names (eg. the section I’m pasting into already has a widget called “image 1”) I don’t override what’s already there.

Check out the commit on Github for the nitty-gritty details!

This also has the nifty feature of being able to copy-paste widgets from an entirely different page to another :). Quite pleased with how simple it ended up being.