Skip to content

Instantly share code, notes, and snippets.

@timcase
Last active August 4, 2016 23:01
Show Gist options
  • Save timcase/10a9f655f4bb3891c0e8f8cabb0be2be to your computer and use it in GitHub Desktop.
Save timcase/10a9f655f4bb3891c0e8f8cabb0be2be to your computer and use it in GitHub Desktop.
​It's 4 days now that I've tried to fix a use case of copying and pasting content blocks and I'm sad to say I don't
have it fixed yet. BUT. Five minutes ago I thought of a good idea that I feel fairly confident is going to work.
The use case:
I've already shown that content blocks can be copied and pasted as content blocks. It's already finished
for the case where a person selects a content block sandwiched between two selections of text. Where it's not finished
is if the the content block appears at the beginning or end of a selection, or if it's a content block
alone that's being selected.
The solution I thought of five minutes ago:
(This solution only works when a person selects, presses cmd(ctrl)-c or cmd(ctrl)-x
and then cmd(ctrl)-v, it does not work with context menu copy and paste which is
fine because neither google docs or redactor can do it from the context menu as well)
1) Imagine a user selects an image the previously uploaded which sits insideo of content block. They click ctrl-c to copy.
It's at this point that javascript can be used on the copy or cut event to check and see if the current selection is
a node inside of a content block. If no then do nothing and let normal copy and paste
occur.
2) If yes, get the html for the entire content block, change it so that it has a new unique blockId, and place it in a hidden
contenteditable div ready for pasting.
3) Redactor provides a paste callback that occurs before the text is actually pasted
into the visual layer. During this callback the hidden contenteditable div with the paste ready content block is checked
to see if it contains content. If no then do nothing and let normal copy and paste occur.
4) If yes, replace the html that redactor would paste with our html from the
hidden div. So if redactor was only going to paste an inner image tag
cutting out the wrapping divs that turn an ordinary image into an image content block,
we hijack it to paste our wrapping divs as well as the image.
5) Empty the hidden content editable of it's contents, and let the rest of the normal
paste process finish.
THIS WILL WORK.
I'm out of time to do this today, I will pick this up on monday.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment