Commands for plain text editor

cypress/e2e/composer/composer.spec.ts

@@ -117,128 +117,64 @@ describe("Composer", () => {
             cy.viewRoomByName("Composing Room");
         });
 
-        describe("commands", () => {
+        describe("Commands", () => {
             // TODO add tests for rich text mode
 
-            describe("plain text mode", () => {
-                it("autocomplete opens when / is pressed and contains autocomplete items", () => {
+            describe("Plain text mode", () => {
+                it("autocomplete behaviour tests", () => {
                     // Select plain text mode after composer is ready
                     cy.get("div[contenteditable=true]").should("exist");
                     cy.findByRole("button", { name: "Hide formatting" }).click();
 
-                    // Type a /
+                    // Typing a single / displays the autocomplete menu and contents
                     cy.findByRole("textbox").type("/");
 
-                    // Check that the autocomplete options are visible and there are more than 0
-                    cy.findByTestId("autocomplete-wrapper").within(() => {
-                        cy.findAllByRole("presentation").should("have.length.above", 0);
-                    });
-                });
-
-                it("autocomplete can be used to enter a command", () => {
-                    // Select plain text mode after composer is ready
-                    cy.get("div[contenteditable=true]").should("exist");
-                    cy.findByRole("button", { name: "Hide formatting" }).click();
+                    // Check that the autocomplete options are visible and there are more than 0 items
+                    cy.findByTestId("autocomplete-wrapper").should("not.be.empty");
 
-                    // Type a message
-                    cy.findByRole("textbox").type("/spo");
+                    // Entering `//` or `/ ` hides the autocomplete contents
+                    cy.findByRole("textbox").type(" ");
+                    cy.findByTestId("autocomplete-wrapper").should("be.empty");
+                    cy.findByRole("textbox").type("{Backspace}");
+                    cy.findByTestId("autocomplete-wrapper").should("not.be.empty");
+                    cy.findByRole("textbox").type("{Backspace}/");
+                    cy.findByTestId("autocomplete-wrapper").should("be.empty");
 
-                    // Check that the autocomplete /spoiler option is visible and click it
+                    // Typing a command that takes no arguments (/devtools) and selecting by click works
+                    cy.findByRole("textbox").type("{Backspace}dev");
                     cy.findByTestId("autocomplete-wrapper").within(() => {
-                        cy.findByText("/spoiler").click();
+                        cy.findByText("/devtools").click();
                     });
-
-                    // Check the autocomplete is closed and the composer contains the completion
+                    // Check it has closed the autocomplete and put the text into the composer
                     cy.findByTestId("autocomplete-wrapper").should("not.be.visible");
                     cy.findByRole("textbox").within(() => {
-                        cy.findByText("/spoiler").should("exist");
+                        cy.findByText("/devtools").should("exist");
                     });
-                });
-
-                it("autocomplete can be used to write and send a command that takes arguments", () => {
-                    // Select plain text mode after composer is ready
-                    cy.get("div[contenteditable=true]").should("exist");
-                    cy.findByRole("button", { name: "Hide formatting" }).click();
-
-                    // Type a message
-                    cy.findByRole("textbox").type("/spo");
+                    // Send the message and check the devtools dialog appeared, then close it
+                    cy.findByRole("button", { name: "Send message" }).click();
+                    cy.findByRole("dialog").within(() => {
+                        cy.findByText("Developer Tools").should("exist");
+                    });
+                    cy.findByRole("button", { name: "Close dialog" }).click();
 
-                    // Check that the autocomplete /spoiler option is visible and click it
+                    // Typing a command that takes arguments (/spoiler) and selecting with enter works
+                    cy.findByRole("textbox").type("/spoil");
                     cy.findByTestId("autocomplete-wrapper").within(() => {
-                        cy.findByText("/spoiler").click();
+                        cy.findByText("/spoiler").should("exist");
                     });
-
-                    // Check the autocomplete is closed and the composer contains the completion
+                    cy.findByRole("textbox").type("{Enter}");
+                    // Check it has closed the autocomplete and put the text into the composer
                     cy.findByTestId("autocomplete-wrapper").should("not.be.visible");
                     cy.findByRole("textbox").within(() => {
                         cy.findByText("/spoiler").should("exist");
                     });
-
-                    // Type some more text then send the message
-                    const argumentText = "this is the spoiler text";
-                    cy.findByRole("textbox").type(argumentText);
+                    // Enter some more text, then send the message
+                    cy.findByRole("textbox").type("this is the spoiler text ");
                     cy.findByRole("button", { name: "Send message" }).click();
-
                     // Check that a spoiler item has appeared in the timeline and contains the spoiler command text
                     cy.get("span.mx_EventTile_spoiler").should("exist");
                     cy.findByText("this is the spoiler text").should("exist");
                 });
-
-                it("autocomplete can be used to write and send a command that takes no arguments", () => {
-                    // Select plain text mode after composer is ready
-                    cy.get("div[contenteditable=true]").should("exist");
-                    cy.findByRole("button", { name: "Hide formatting" }).click();
-
-                    // Type a message
-                    cy.findByRole("textbox").type("/dev");
-
-                    // Check that the autocomplete /spoiler option is visible and click it
-                    cy.findByTestId("autocomplete-wrapper").within(() => {
-                        cy.findByText("/devtools").click();
-                    });
-
-                    // Check the autocomplete is closed and the composer contains the completion
-                    cy.findByTestId("autocomplete-wrapper").should("not.be.visible");
-                    cy.findByRole("textbox").within(() => {
-                        cy.findByText("/devtools").should("exist");
-                    });
-
-                    // Click the send message button
-                    cy.findByRole("button", { name: "Send message" }).click();
-
-                    // Check that the devtools dialog menu has appeared
-                    cy.findByRole("dialog").within(() => {
-                        cy.findByText("Developer Tools").should("exist");
-                    });
-                });
-
-                it("autocomplete is not displayed for a message starting with //", () => {
-                    // Select plain text mode after composer is ready
-                    cy.get("div[contenteditable=true]").should("exist");
-                    cy.findByRole("button", { name: "Hide formatting" }).click();
-
-                    // Type a message
-                    cy.findByRole("textbox").type("//anyText");
-
-                    // Check that the autocomplete options are not visible
-                    cy.findByTestId("autocomplete-wrapper").within(() => {
-                        cy.findAllByRole("presentation").should("have.length", 0);
-                    });
-                });
-
-                it("autocomplete is not displayed when user inserts whitespace after command", () => {
-                    // Select plain text mode after composer is ready
-                    cy.get("div[contenteditable=true]").should("exist");
-                    cy.findByRole("button", { name: "Hide formatting" }).click();
-
-                    // Type a message
-                    cy.findByRole("textbox").type("/spoiler followed by a space");
-
-                    // Check that the autocomplete options are not visible
-                    cy.findByTestId("autocomplete-wrapper").within(() => {
-                        cy.findAllByRole("presentation").should("have.length", 0);
-                    });
-                });
             });
         });
 

src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import React, { MutableRefObject, ReactNode, useRef } from "react";
+import React, { MutableRefObject, ReactNode } from "react";
 
 import { useComposerFunctions } from "../hooks/useComposerFunctions";
 import { useIsFocused } from "../hooks/useIsFocused";
@@ -24,7 +24,6 @@ import { usePlainTextListeners } from "../hooks/usePlainTextListeners";
 import { useSetCursorPosition } from "../hooks/useSetCursorPosition";
 import { ComposerFunctions } from "../types";
 import { Editor } from "./Editor";
-import Autocomplete from "../../Autocomplete";
 import { WysiwygAutocomplete } from "./WysiwygAutocomplete";
 
 interface PlainTextComposerProps {
@@ -50,10 +49,9 @@ export function PlainTextComposer({
     leftComponent,
     rightComponent,
 }: PlainTextComposerProps): JSX.Element {
-    const autocompleteRef = useRef<Autocomplete | null>(null);
-
     const {
         ref: editorRef,
+        autocompleteRef,
         onInput,
         onPaste,
         onKeyDown,
@@ -63,7 +61,7 @@ export function PlainTextComposer({
         onSelect,
         handleCommand,
         handleMention,
-    } = usePlainTextListeners(autocompleteRef, initialContent, onChange, onSend);
+    } = usePlainTextListeners(initialContent, onChange, onSend);
 
     const composerFunctions = useComposerFunctions(editorRef, setContent);
     usePlainTextInitialization(initialContent, editorRef);

src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts

@@ -37,13 +37,29 @@ function amendInnerHtml(text: string): string {
         .replace(/<\/div>/g, "");
 }
 
+/**
+ * Generates all of the listeners and the ref to be attached to the editor. Also returns
+ * pieces of state and utility functions that are required for use in other hooks and by
+ * the autocomplete component.
+ *
+ * @param initialContent - can set the content of the editor on mount
+ * @param onChange - called whenever there is change in the editor content
+ * @param onSend - called whenever the user sends the message
+ * @returns
+ * - `ref`: a ref object which the caller must attach to the HTML `div` node for the editor
+ * * `autocompleteRef`: a ref object which the caller must attach to the autocomplete component
+ * - `content`: state representing the editor's current text content
+ * - `setContent`: the setter for the content state
+ * - `onInput`, `onPaste`, `onKeyDown`: handlers for input, paste and keyDown events
+ * - the output from the {@link useSuggestion} hook
+ */
 export function usePlainTextListeners(
-    autocompleteRef: React.RefObject<Autocomplete>,
     initialContent?: string,
     onChange?: (content: string) => void,
     onSend?: () => void,
 ): {
     ref: RefObject<HTMLDivElement>;
+    autocompleteRef: React.RefObject<Autocomplete>;
     content?: string;
     onInput(event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>): void;
     onPaste(event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>): void;
@@ -55,6 +71,7 @@ export function usePlainTextListeners(
     suggestion: MappedSuggestion | null;
 } {
     const ref = useRef<HTMLDivElement | null>(null);
+    const autocompleteRef = useRef<Autocomplete | null>(null);
     const [content, setContent] = useState<string | undefined>(initialContent);
 
     const send = useCallback(() => {
@@ -122,6 +139,7 @@ export function usePlainTextListeners(
 
     return {
         ref,
+        autocompleteRef,
         onInput,
         onPaste: onInput,
         onKeyDown,