fix: remove editor onpaste handler (#5971)

src/element/textWysiwyg.test.tsx

@@ -10,13 +10,11 @@ import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
 import {
   ExcalidrawTextElement,
   ExcalidrawTextElementWithContainer,
-  FontString,
 } from "./types";
 import * as textElementUtils from "./textElement";
 import { API } from "../tests/helpers/api";
 import { mutateElement } from "./mutateElement";
 import { resize } from "../tests/utils";
-import { getMaxContainerWidth } from "./newElement";
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 
@@ -435,42 +433,6 @@ describe("textWysiwyg", () => {
       );
       expect(h.state.zoom.value).toBe(1);
     });
-
-    it("should paste text correctly", async () => {
-      Keyboard.keyPress(KEYS.ENTER);
-      await new Promise((r) => setTimeout(r, 0));
-      let text = "A quick brown fox jumps over the lazy dog.";
-
-      //@ts-ignore
-      textarea.onpaste({
-        preventDefault: () => {},
-        //@ts-ignore
-        clipboardData: {
-          getData: () => text,
-        },
-      });
-
-      await new Promise((cb) => setTimeout(cb, 0));
-      textarea.blur();
-      expect(textElement.text).toBe(text);
-
-      Keyboard.keyPress(KEYS.ENTER);
-      await new Promise((r) => setTimeout(r, 0));
-      text = "Hello this text should get merged with the existing one";
-      //@ts-ignore
-      textarea.onpaste({
-        preventDefault: () => {},
-        //@ts-ignore
-        clipboardData: {
-          getData: () => text,
-        },
-      });
-      await new Promise((cb) => setTimeout(cb, 0));
-      textarea.blur();
-      expect(textElement.text).toMatchInlineSnapshot(
-        `"A quick brown fox jumps over the lazy dog.Hello this text should get merged with the existing one"`,
-      );
-    });
   });
 
   describe("Test container-bound text", () => {
@@ -953,126 +915,6 @@ describe("textWysiwyg", () => {
       `);
     });
 
-    it("should compute the dimensions correctly when text pasted", async () => {
-      Keyboard.keyPress(KEYS.ENTER);
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-      await new Promise((r) => setTimeout(r, 0));
-      const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
-      let text =
-        "Wikipedia is hosted by the Wikimedia Foundation, a non-profit organization that also hosts a range of other projects.";
-
-      let wrappedText = textElementUtils.wrapText(
-        text,
-        font,
-        getMaxContainerWidth(rectangle),
-      );
-
-      jest
-        .spyOn(textElementUtils, "measureText")
-        .mockImplementation((text, font, maxWidth) => {
-          if (text === wrappedText) {
-            return { width: rectangle.width, height: 200, baseline: 30 };
-          }
-          return { width: 0, height: 0, baseline: 0 };
-        });
-
-      //@ts-ignore
-      editor.onpaste({
-        preventDefault: () => {},
-        //@ts-ignore
-        clipboardData: {
-          getData: () => text,
-        },
-      });
-
-      await new Promise((cb) => setTimeout(cb, 0));
-      editor.blur();
-      expect(rectangle.width).toBe(100);
-      expect(rectangle.height).toBe(210);
-      expect((h.elements[1] as ExcalidrawTextElement).text)
-        .toMatchInlineSnapshot(`
-        "Wikipedi
-        a is 
-        hosted 
-        by the 
-        Wikimedi
-        a 
-        Foundati
-        on, a 
-        non-prof
-        it 
-        organiza
-        tion 
-        that 
-        also 
-        hosts a 
-        range of
-        other 
-        projects
-        ."
-      `);
-      expect(
-        (h.elements[1] as ExcalidrawTextElement).originalText,
-      ).toMatchInlineSnapshot(
-        `"Wikipedia is hosted by the Wikimedia Foundation, a non-profit organization that also hosts a range of other projects."`,
-      );
-
-      text = "Hello this text should get merged with the existing one";
-      wrappedText = textElementUtils.wrapText(
-        text,
-        font,
-        getMaxContainerWidth(rectangle),
-      );
-      //@ts-ignore
-      editor.onpaste({
-        preventDefault: () => {},
-        //@ts-ignore
-        clipboardData: {
-          getData: () => text,
-        },
-      });
-
-      await new Promise((cb) => setTimeout(cb, 0));
-      editor.blur();
-      expect((h.elements[1] as ExcalidrawTextElement).text)
-        .toMatchInlineSnapshot(`
-        "Wikipedi
-        a is 
-        hosted 
-        by the 
-        Wikimedi
-        a 
-        Foundati
-        on, a 
-        non-prof
-        it 
-        organiza
-        tion 
-        that 
-        also 
-        hosts a 
-        range of
-        other 
-        projects
-        .Hello 
-        this 
-        text 
-        should 
-        get 
-        merged 
-        with the
-        existing
-        one"
-      `);
-      expect(
-        (h.elements[1] as ExcalidrawTextElement).originalText,
-      ).toMatchInlineSnapshot(
-        `"Wikipedia is hosted by the Wikimedia Foundation, a non-profit organization that also hosts a range of other projects.Hello this text should get merged with the existing one"`,
-      );
-    });
-
     it("should always bind to selected container and insert it in correct position", async () => {
       const rectangle2 = UI.createElement("rectangle", {
         x: 5,

src/element/textWysiwyg.tsx

@@ -27,7 +27,6 @@ import {
   getContainerDims,
   getContainerElement,
   getTextElementAngle,
-  measureText,
   normalizeText,
   wrapText,
 } from "./textElement";
@@ -39,7 +38,6 @@ import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
 import { getMaxContainerHeight, getMaxContainerWidth } from "./newElement";
 import { LinearElementEditor } from "./linearElementEditor";
-import { parseClipboard } from "../clipboard";
 
 const getTransform = (
   width: number,
@@ -296,38 +294,6 @@ export const textWysiwyg = ({
   updateWysiwygStyle();
 
   if (onChange) {
-    editable.onpaste = async (event) => {
-      event.preventDefault();
-      const clipboardData = await parseClipboard(event, true);
-      if (!clipboardData.text) {
-        return;
-      }
-      const data = normalizeText(clipboardData.text);
-      if (!data) {
-        return;
-      }
-
-      const text = editable.value;
-      const start = Math.min(editable.selectionStart, editable.selectionEnd);
-      const end = Math.max(editable.selectionStart, editable.selectionEnd);
-      const newText = `${text.substring(0, start)}${data}${text.substring(
-        end,
-      )}`;
-
-      const container = getContainerElement(element);
-
-      const font = getFontString({
-        fontSize: app.state.currentItemFontSize,
-        fontFamily: app.state.currentItemFontFamily,
-      });
-
-      const wrappedText = container
-        ? wrapText(newText, font, getMaxContainerWidth(container))
-        : newText;
-      const dimensions = measureText(wrappedText, font);
-      editable.style.height = `${dimensions.height}px`;
-      onChange(newText);
-    };
     editable.oninput = () => {
       const updatedTextElement = Scene.getScene(element)?.getElement(
         id,