smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: cmd/ctrl native browser behavior blocked in inputs (#4589)

Browse source 
* fix: cmd/ctrl native browser behavior blocked in inputs

* add basic test for fontSize increase/decrease via keyboard

* add tests for fontSize resizing via keyboard outside wysiwyg

* Update src/element/textWysiwyg.test.tsx

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

* Update src/tests/resize.test.tsx

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

* Update src/tests/resize.test.tsx

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
David Luzar 2022-01-13 19:53:22 +01:00 • committed by GitHub
parent dba71e358d
commit 1fd2fe56ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 83 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/element/textWysiwyg.test.tsx
View file

@ -5,7 +5,10 @@ import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
import { KEYS } from "../keys";
import { fireEvent } from "../tests/test-utils";
import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
import { ExcalidrawTextElementWithContainer } from "./types";
import {
ExcalidrawTextElement,
ExcalidrawTextElementWithContainer,
} from "./types";
import * as textElementUtils from "./textElement";
// Unmount ReactDOM from root
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@ -16,12 +19,13 @@ const mouse = new Pointer("mouse");
describe("textWysiwyg", () => {
describe("Test unbounded text", () => {
let textarea: HTMLTextAreaElement;
let textElement: ExcalidrawTextElement;
beforeEach(async () => {
await render(<ExcalidrawApp />);
const element = UI.createElement("text");
textElement = UI.createElement("text");
mouse.clickOn(element);
mouse.clickOn(textElement);
textarea = document.querySelector(
".excalidraw-textEditorContainer > textarea",
)!;
@ -171,7 +175,30 @@ describe("textWysiwyg", () => {
expect(textarea.value).toEqual(`Line#1\nLine#2`);
});
it("should resize text via shortcuts while in wysiwyg", () => {
textarea.value = "abc def";
const origFontSize = textElement.fontSize;
textarea.dispatchEvent(
new KeyboardEvent("keydown", {
key: KEYS.CHEVRON_RIGHT,
ctrlKey: true,
shiftKey: true,
}),
);
expect(textElement.fontSize).toBe(origFontSize * 1.1);
textarea.dispatchEvent(
new KeyboardEvent("keydown", {
key: KEYS.CHEVRON_LEFT,
ctrlKey: true,
shiftKey: true,
}),
);
expect(textElement.fontSize).toBe(origFontSize);
});
});
describe("Test bounded text", () => {
let rectangle: any;
const {

20
src/element/textWysiwyg.tsx
View file

@ -17,6 +17,11 @@ import {
getContainerElement,
wrapText,
} from "./textElement";
import {
actionDecreaseFontSize,
actionIncreaseFontSize,
} from "../actions/actionProperties";
import App from "../components/App";
const normalizeText = (text: string) => {
return (
@ -60,6 +65,7 @@ export const textWysiwyg = ({
element,
canvas,
excalidrawContainer,
app,
}: {
id: ExcalidrawElement["id"];
appState: AppState;
@ -73,6 +79,7 @@ export const textWysiwyg = ({
element: ExcalidrawTextElement;
canvas: HTMLCanvasElement | null;
excalidrawContainer: HTMLDivElement | null;
app: App;
}) => {
const textPropertiesUpdated = (
updatedElement: ExcalidrawTextElement,
@ -293,16 +300,18 @@ export const textWysiwyg = ({
}
editable.onkeydown = (event) => {
if (!event[KEYS.CTRL_OR_CMD]) {
event.stopPropagation();
}
if (event.key === KEYS.ESCAPE) {
event.stopPropagation();
if (actionDecreaseFontSize.keyTest(event)) {
app.actionManager.executeAction(actionDecreaseFontSize);
} else if (actionIncreaseFontSize.keyTest(event)) {
app.actionManager.executeAction(actionIncreaseFontSize);
} else if (event.key === KEYS.ESCAPE) {
event.preventDefault();
submittedViaKeyboard = true;
handleSubmit();
} else if (event.key === KEYS.ENTER && event[KEYS.CTRL_OR_CMD]) {
event.preventDefault();
event.stopPropagation();
if (event.isComposing || event.keyCode === 229) {
return;
}
@ -315,7 +324,6 @@ export const textWysiwyg = ({
event.code === CODES.BRACKET_RIGHT))
) {
event.preventDefault();
event.stopPropagation();
if (event.shiftKey || event.code === CODES.BRACKET_LEFT) {
outdent();
} else {