From 65d84a5d5a2224323c6717876bba6346414d7dbe Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Wed, 7 Dec 2022 23:05:57 +0530 Subject: [PATCH] fix: remove editor onpaste handler (#5971) --- src/element/textWysiwyg.test.tsx | 158 ------------------------------- src/element/textWysiwyg.tsx | 34 ------- 2 files changed, 192 deletions(-) diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx index a3929cf3..f2ef40b5 100644 --- a/src/element/textWysiwyg.test.tsx +++ b/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, diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index ffa75d31..a9737b46 100644 --- a/src/element/textWysiwyg.tsx +++ b/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,