New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Override Draft.js copy-paste to preserve full editor content #2

Merged
merged 21 commits into from Jun 3, 2018
Commits
Jump to file or symbol
Failed to load files and symbols.
+25 −14
Diff settings

Always

Just for now

Viewing a subset of changes. View all

feat(copy-paste): finish copy source registration implementation

  • Loading branch information...
thibaudcolas committed May 21, 2018
commit 7ce0af429c5262c5077766fdab31fdff19bdd898
Copy path View file
@@ -10,35 +10,46 @@ import {
} from "draft-js";
import getFragmentFromSelection from "draft-js/lib/getFragmentFromSelection";
const sourceEditors = {};
const copyHandlersRegistry = {};
export const registerCopySource = (ref: ElementRef<Editor>) => {
// TODO Do we want to keep this registry?
sourceEditors[ref.getEditorKey()] = ref;
const editorContainer = ref.editorContainer.parentNode;
editorContainer.addEventListener("copy", (e) => {
// TODO Use internal clipboard directly instead of this?
const key = ref.getEditorKey();
const onCopy = (e) => {
// Get clipboard content like Draft.js would.
// https://github.com/facebook/draft-js/blob/37989027063ccc8279bfdc99a813b857549512a6/src/component/handlers/edit/editOnCopy.js#L34
const fragment = getFragmentFromSelection(ref._latestEditorState);
if (fragment) {
const content = ContentState.createFromBlockArray(fragment.toArray());
// TODO Should clean this up from the DOM after the copy has been handled.
const serialisedContent = JSON.stringify(convertToRaw(content));
e.target.setAttribute(
"data-draftjs-conductor-fragment",
JSON.stringify(convertToRaw(content)),
serialisedContent,
);
// TODO Is it necessary to clean this up from the DOM?
// TODO Look at React docs for HTML modifications to React-controlled elements.
// TODO Find a way to remove the attribute as soon as the browser handled the copy event.
window.setTimeout(() => {
e.target.removeAttribute("data-draftjs-conductor-fragment");
}, 100);
}
});
};
document.addEventListener("paste", (e) => {
console.log(e.clipboardData.getData("text/plain"));
console.log(e.clipboardData.getData("text/html"));
});
editorContainer.addEventListener("copy", onCopy);
copyHandlersRegistry[key] = onCopy;
};
export const unregisterCopySource = (ref: ElementRef<Editor>) => {
delete sourceEditors[ref.getEditorKey()];
const editorContainer = ref.editorContainer.parentNode;
const key = ref.getEditorKey();
const onCopy = copyHandlersRegistry[key];
editorContainer.removeEventListener("copy", onCopy);
delete copyHandlersRegistry[key];
};
export const handleDraftEditorPastedText = (
ProTip! Use n and p to navigate between commits in a pull request.