Avoid calling prepareToEncrypt onKeyDown (#10828)

* Avoid calling prepareToEncrypt onKeyDown

* Iterate

Author: t3chguy

src/components/views/rooms/BasicMessageComposer.tsx

@@ -107,7 +107,7 @@ interface IProps {
     initialCaret?: DocumentOffset;
     disabled?: boolean;
 
-    onChange?(): void;
+    onChange?(selection: Caret, inputType?: string, diff?: IDiff): void;
     onPaste?(event: ClipboardEvent<HTMLDivElement>, model: EditorModel): boolean;
 }
 
@@ -278,9 +278,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             isTyping,
         );
 
-        if (this.props.onChange) {
-            this.props.onChange();
-        }
+        this.props.onChange?.(selection, inputType, diff);
     };
 
     private showPlaceholder(): void {

src/components/views/rooms/SendMessageComposer.tsx

@@ -59,6 +59,8 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";
 import { addReplyToMessageContent } from "../../../utils/Reply";
 import { doMaybeLocalRoomAction } from "../../../utils/local-room";
+import { Caret } from "../../../editor/caret";
+import { IDiff } from "../../../editor/diff";
 
 /**
  * Build the mentions information based on the editor model (and any related events):
@@ -353,11 +355,6 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                     context: this.context.timelineRenderingType,
                 });
                 break;
-            default:
-                if (this.prepareToEncrypt) {
-                    // This needs to be last!
-                    this.prepareToEncrypt();
-                }
         }
     };
 
@@ -689,8 +686,13 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
         return false;
     };
 
-    private onChange = (): void => {
-        if (this.props.onChange) this.props.onChange(this.model);
+    private onChange = (selection: Caret, inputType?: string, diff?: IDiff): void => {
+        // We call this in here rather than onKeyDown as that would trip it on global shortcuts e.g. Ctrl-k also
+        if (!!diff) {
+            this.prepareToEncrypt?.();
+        }
+
+        this.props.onChange?.(this.model);
     };
 
     private focusComposer = (): void => {

test/components/views/rooms/SendMessageComposer-test.tsx

@@ -18,6 +18,7 @@ import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import { IContent, MatrixClient, MsgType } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
+import userEvent from "@testing-library/user-event";
 
 import SendMessageComposer, {
     attachMentions,
@@ -28,7 +29,7 @@ import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
 import EditorModel from "../../../../src/editor/model";
 import { createPartCreator } from "../../../editor/mock";
-import { createTestClient, mkEvent, mkStubRoom } from "../../../test-utils";
+import { createTestClient, mkEvent, mkStubRoom, stubClient } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import DocumentOffset from "../../../../src/editor/offset";
@@ -574,4 +575,29 @@ describe("<SendMessageComposer/>", () => {
             expect(isQuickReaction(model4)).toBeFalsy();
         });
     });
+
+    it("should call prepareToEncrypt when the user is typing", async () => {
+        const cli = stubClient();
+        cli.isCryptoEnabled = jest.fn().mockReturnValue(true);
+        cli.isRoomEncrypted = jest.fn().mockReturnValue(true);
+        cli.prepareToEncrypt = jest.fn();
+        const room = mkStubRoom("!roomId:server", "Room", cli);
+
+        expect(cli.prepareToEncrypt).not.toHaveBeenCalled();
+
+        const { container } = render(
+            <MatrixClientContext.Provider value={cli}>
+                <SendMessageComposer room={room} toggleStickerPickerOpen={jest.fn()} />
+            </MatrixClientContext.Provider>,
+        );
+
+        const composer = container.querySelector<HTMLDivElement>(".mx_BasicMessageComposer_input")!;
+
+        // Does not trigger on keydown as that'll cause false negatives for global shortcuts
+        await userEvent.type(composer, "[ControlLeft>][KeyK][/ControlLeft]");
+        expect(cli.prepareToEncrypt).not.toHaveBeenCalled();
+
+        await userEvent.type(composer, "Hello");
+        expect(cli.prepareToEncrypt).toHaveBeenCalled();
+    });
 });