Refactor paste code (#1102)

src/components/App.tsx

@@ -560,44 +560,20 @@ export class App extends React.Component<any, AppState> {
       if (
         // if no ClipboardEvent supplied, assume we're pasting via contextMenu
         //  thus these checks don't make sense
-        !event ||
+        event &&
-        (elementUnderCursor instanceof HTMLCanvasElement &&
+        (!(elementUnderCursor instanceof HTMLCanvasElement) ||
-          !isWritableElement(target))
+          isWritableElement(target))
       ) {
-        const data = await getClipboardContent(event);
+        return;
-        if (data.elements) {
-          this.addElementsFromPaste(data.elements);
-        } else if (data.text) {
-          const { x, y } = viewportCoordsToSceneCoords(
-            { clientX: cursorX, clientY: cursorY },
-            this.state,
-            this.canvas,
-            window.devicePixelRatio,
-          );
-
-          const element = newTextElement({
-            x: x,
-            y: y,
-            strokeColor: this.state.currentItemStrokeColor,
-            backgroundColor: this.state.currentItemBackgroundColor,
-            fillStyle: this.state.currentItemFillStyle,
-            strokeWidth: this.state.currentItemStrokeWidth,
-            roughness: this.state.currentItemRoughness,
-            opacity: this.state.currentItemOpacity,
-            text: data.text,
-            font: this.state.currentItemFont,
-          });
-
-          globalSceneState.replaceAllElements([
-            ...globalSceneState.getAllElements(),
-            element,
-          ]);
-          this.setState({ selectedElementIds: { [element.id]: true } });
-          history.resumeRecording();
-        }
-        this.selectShapeTool("selection");
-        event?.preventDefault();
       }
+      const data = await getClipboardContent(event);
+      if (data.elements) {
+        this.addElementsFromPaste(data.elements);
+      } else if (data.text) {
+        this.addTextFromPaste(data.text);
+      }
+      this.selectShapeTool("selection");
+      event?.preventDefault();
     },
   );
 
@@ -639,6 +615,35 @@ export class App extends React.Component<any, AppState> {
     });
   };
 
+  private addTextFromPaste(text: any) {
+    const { x, y } = viewportCoordsToSceneCoords(
+      { clientX: cursorX, clientY: cursorY },
+      this.state,
+      this.canvas,
+      window.devicePixelRatio,
+    );
+
+    const element = newTextElement({
+      x: x,
+      y: y,
+      strokeColor: this.state.currentItemStrokeColor,
+      backgroundColor: this.state.currentItemBackgroundColor,
+      fillStyle: this.state.currentItemFillStyle,
+      strokeWidth: this.state.currentItemStrokeWidth,
+      roughness: this.state.currentItemRoughness,
+      opacity: this.state.currentItemOpacity,
+      text: text,
+      font: this.state.currentItemFont,
+    });
+
+    globalSceneState.replaceAllElements([
+      ...globalSceneState.getAllElements(),
+      element,
+    ]);
+    this.setState({ selectedElementIds: { [element.id]: true } });
+    history.resumeRecording();
+  }
+
   // Collaboration
 
   setAppState = (obj: any) => {