sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove editor onpaste handler (#5971)

Browse Source
This commit is contained in:
Aakansha Doshi 2022-12-07 23:05:57 +05:30 committed by GitHub
parent 808366d112
commit 65d84a5d5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 0 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/element/textWysiwyg.test.tsx
View File

@ -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,

34
src/element/textWysiwyg.tsx
View File

@ -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,