Last active
August 4, 2016 23:01
-
-
Save timcase/10a9f655f4bb3891c0e8f8cabb0be2be to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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