diff --git a/src/components/App.tsx b/src/components/App.tsx index a1792b2c..afbe51ee 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1931,7 +1931,6 @@ class App extends React.Component { textWysiwyg({ id: element.id, - appState: this.state, canvas: this.canvas, getViewportCoords: (x, y) => { const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords( diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx index 75a7ea14..ffe6ea17 100644 --- a/src/element/textWysiwyg.test.tsx +++ b/src/element/textWysiwyg.test.tsx @@ -2,7 +2,7 @@ import ReactDOM from "react-dom"; import ExcalidrawApp from "../excalidraw-app"; import { render, screen } from "../tests/test-utils"; import { Keyboard, Pointer, UI } from "../tests/helpers/ui"; -import { KEYS } from "../keys"; +import { CODES, KEYS } from "../keys"; import { fireEvent } from "../tests/test-utils"; import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants"; import { @@ -18,6 +18,8 @@ const mouse = new Pointer("mouse"); describe("textWysiwyg", () => { describe("Test unbounded text", () => { + const { h } = window; + let textarea: HTMLTextAreaElement; let textElement: ExcalidrawTextElement; beforeEach(async () => { @@ -197,6 +199,38 @@ describe("textWysiwyg", () => { ); expect(textElement.fontSize).toBe(origFontSize); }); + + it("zooming via keyboard should zoom canvas", () => { + expect(h.state.zoom.value).toBe(1); + textarea.dispatchEvent( + new KeyboardEvent("keydown", { + code: CODES.MINUS, + ctrlKey: true, + }), + ); + expect(h.state.zoom.value).toBe(0.9); + textarea.dispatchEvent( + new KeyboardEvent("keydown", { + code: CODES.NUM_SUBTRACT, + ctrlKey: true, + }), + ); + expect(h.state.zoom.value).toBe(0.8); + textarea.dispatchEvent( + new KeyboardEvent("keydown", { + code: CODES.NUM_ADD, + ctrlKey: true, + }), + ); + expect(h.state.zoom.value).toBe(0.9); + textarea.dispatchEvent( + new KeyboardEvent("keydown", { + code: CODES.EQUAL, + ctrlKey: true, + }), + ); + expect(h.state.zoom.value).toBe(1); + }); }); describe("Test bounded text", () => { diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 53b56c42..b0ab5f2c 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -25,6 +25,7 @@ import { actionDecreaseFontSize, actionIncreaseFontSize, } from "../actions/actionProperties"; +import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas"; import App from "../components/App"; const normalizeText = (text: string) => { @@ -60,7 +61,6 @@ const getTransform = ( export const textWysiwyg = ({ id, - appState, onChange, onSubmit, getViewportCoords, @@ -70,7 +70,6 @@ export const textWysiwyg = ({ app, }: { id: ExcalidrawElement["id"]; - appState: AppState; onChange?: (text: string) => void; onSubmit: (data: { text: string; @@ -102,6 +101,7 @@ export const textWysiwyg = ({ let originalContainerHeight: number; const updateWysiwygStyle = () => { + const appState = app.state; const updatedElement = Scene.getScene(element)?.getElement( id, ) as ExcalidrawTextElement; @@ -291,7 +291,15 @@ export const textWysiwyg = ({ editable.onkeydown = (event) => { event.stopPropagation(); - if (actionDecreaseFontSize.keyTest(event)) { + if (actionZoomIn.keyTest(event)) { + event.preventDefault(); + app.actionManager.executeAction(actionZoomIn); + updateWysiwygStyle(); + } else if (actionZoomOut.keyTest(event)) { + event.preventDefault(); + app.actionManager.executeAction(actionZoomOut); + updateWysiwygStyle(); + } else if (actionDecreaseFontSize.keyTest(event)) { app.actionManager.executeAction(actionDecreaseFontSize); } else if (actionIncreaseFontSize.keyTest(event)) { app.actionManager.executeAction(actionIncreaseFontSize);