fix: keyboard-zooming in wysiwyg should zoom canvas (#4676)

src/components/App.tsx

@@ -1931,7 +1931,6 @@ class App extends React.Component<AppProps, AppState> {
 
     textWysiwyg({
       id: element.id,
-      appState: this.state,
       canvas: this.canvas,
       getViewportCoords: (x, y) => {
         const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(

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", () => {

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);