fix: only handle cut/paste events inside excalidraw (#3484)

* fix: only hand cut/paste events inside excalidraw

* changelog

* check if excalidraw is active for copy event

* check if active element is part of excalidraw
This commit is contained in:
Aakansha Doshi 2021-04-25 15:13:42 +05:30 committed by GitHub
parent 004d3180b5
commit 5c42cb5be4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 17 deletions

View File

@ -1153,7 +1153,10 @@ class App extends React.Component<AppProps, AppState> {
// Copy/paste
private onCut = withBatchedUpdates((event: ClipboardEvent) => {
if (isWritableElement(event.target)) {
const isExcalidrawActive = this.excalidrawContainerRef.current?.contains(
document.activeElement,
);
if (!isExcalidrawActive || isWritableElement(event.target)) {
return;
}
this.cutAll();
@ -1161,22 +1164,10 @@ class App extends React.Component<AppProps, AppState> {
});
private onCopy = withBatchedUpdates((event: ClipboardEvent) => {
const activeSelection = document.getSelection();
// if there's a selected text is outside the component, prevent our copy
// action
if (
activeSelection?.anchorNode &&
// it can happen that certain interactions will create a selection
// outside (or potentially inside) the component without actually
// selecting anything (i.e. the selection range is collapsed). Copying
// in such case wouldn't copy anything to the clipboard anyway, so prevent
// our copy handler only if the selection isn't collapsed
!activeSelection.isCollapsed &&
!this.excalidrawContainerRef.current!.contains(activeSelection.anchorNode)
) {
return;
}
if (isWritableElement(event.target)) {
const isExcalidrawActive = this.excalidrawContainerRef.current?.contains(
document.activeElement,
);
if (!isExcalidrawActive || isWritableElement(event.target)) {
return;
}
this.copyAll();
@ -1239,6 +1230,13 @@ class App extends React.Component<AppProps, AppState> {
async (event: ClipboardEvent | null) => {
// #686
const target = document.activeElement;
const isExcalidrawActive = this.excalidrawContainerRef.current?.contains(
target,
);
if (!isExcalidrawActive) {
return;
}
const elementUnderCursor = document.elementFromPoint(cursorX, cursorY);
if (
// if no ClipboardEvent supplied, assume we're pasting via contextMenu

View File

@ -38,6 +38,7 @@ Please add the latest change on the top under the correct section.
### Fixes
- Only handle cut/paste events inside excalidraw [#3484](https://github.com/excalidraw/excalidraw/pull/3484).
- Make history local to a given Excalidraw instance. This fixes a case where history was getting shared when you have multiple Excalidraw components on the same page [#3481](https://github.com/excalidraw/excalidraw/pull/3481).
- Use active Excalidraw component when editing text. This fixes a case where text editing was not working when you have multiple Excalidraw components on the same page [#3478](https://github.com/excalidraw/excalidraw/pull/3478).