Commands for plain text editor

cypress/e2e/composer/composer.spec.ts

@@ -117,6 +117,70 @@ describe("Composer", () => {
             cy.viewRoomByName("Composing Room");
         });
 
+        describe("Commands", () => {
+            // TODO add tests for rich text mode
+
+            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();
+
+                    // 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 items
+                    cy.findByTestId("autocomplete-wrapper").should("not.be.empty");
+
+                    // Entering `//` or `/ ` hides the autocomplete contents
+                    // Add an extra slash for `//`
+                    cy.findByRole("textbox").type("/");
+                    cy.findByTestId("autocomplete-wrapper").should("be.empty");
+                    // Remove the extra slash to go back to `/`
+                    cy.findByRole("textbox").type("{Backspace}");
+                    cy.findByTestId("autocomplete-wrapper").should("not.be.empty");
+                    // Add a trailing space for `/ `
+                    cy.findByRole("textbox").type(" ");
+                    cy.findByTestId("autocomplete-wrapper").should("be.empty");
+
+                    // 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("/devtools").click();
+                    });
+                    // 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("/devtools").should("exist");
+                    });
+                    // 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();
+
+                    // 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").should("exist");
+                    });
+                    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");
+                    });
+                    // 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("sends a message when you click send or press Enter", () => {
             // Type a message
             cy.get("div[contenteditable=true]").type("my message 0");

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

@@ -24,6 +24,7 @@ import { usePlainTextListeners } from "../hooks/usePlainTextListeners";
 import { useSetCursorPosition } from "../hooks/useSetCursorPosition";
 import { ComposerFunctions } from "../types";
 import { Editor } from "./Editor";
+import { WysiwygAutocomplete } from "./WysiwygAutocomplete";
 
 interface PlainTextComposerProps {
     disabled?: boolean;
@@ -48,14 +49,23 @@ export function PlainTextComposer({
     leftComponent,
     rightComponent,
 }: PlainTextComposerProps): JSX.Element {
-    const { ref, onInput, onPaste, onKeyDown, content, setContent } = usePlainTextListeners(
-        initialContent,
-        onChange,
-        onSend,
-    );
-    const composerFunctions = useComposerFunctions(ref, setContent);
-    usePlainTextInitialization(initialContent, ref);
-    useSetCursorPosition(disabled, ref);
+    const {
+        ref: editorRef,
+        autocompleteRef,
+        onInput,
+        onPaste,
+        onKeyDown,
+        content,
+        setContent,
+        suggestion,
+        onSelect,
+        handleCommand,
+        handleMention,
+    } = usePlainTextListeners(initialContent, onChange, onSend);
+
+    const composerFunctions = useComposerFunctions(editorRef, setContent);
+    usePlainTextInitialization(initialContent, editorRef);
+    useSetCursorPosition(disabled, editorRef);
     const { isFocused, onFocus } = useIsFocused();
     const computedPlaceholder = (!content && placeholder) || undefined;
 
@@ -68,15 +78,22 @@ export function PlainTextComposer({
             onInput={onInput}
             onPaste={onPaste}
             onKeyDown={onKeyDown}
+            onSelect={onSelect}
         >
+            <WysiwygAutocomplete
+                ref={autocompleteRef}
+                suggestion={suggestion}
+                handleMention={handleMention}
+                handleCommand={handleCommand}
+            />
             <Editor
-                ref={ref}
+                ref={editorRef}
                 disabled={disabled}
                 leftComponent={leftComponent}
                 rightComponent={rightComponent}
                 placeholder={computedPlaceholder}
             />
-            {children?.(ref, composerFunctions)}
+            {children?.(editorRef, composerFunctions)}
         </div>
     );
 }

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

@@ -33,6 +33,7 @@ import { isCaretAtEnd, isCaretAtStart } from "../utils/selection";
 import { getEventsFromEditorStateTransfer, getEventsFromRoom } from "../utils/event";
 import { endEditing } from "../utils/editing";
 import Autocomplete from "../../Autocomplete";
+import { handleEventWithAutocomplete } from "./utils";
 
 export function useInputEventProcessor(
     onSend: () => void,
@@ -91,50 +92,23 @@ function handleKeyboardEvent(
     editor: HTMLElement,
     roomContext: IRoomState,
     composerContext: ComposerContextState,
-    mxClient: MatrixClient,
+    mxClient: MatrixClient | undefined,
     autocompleteRef: React.RefObject<Autocomplete>,
 ): KeyboardEvent | null {
     const { editorStateTransfer } = composerContext;
     const isEditing = Boolean(editorStateTransfer);
     const isEditorModified = isEditing ? initialContent !== composer.content() : composer.content().length !== 0;
     const action = getKeyBindingsManager().getMessageComposerAction(event);
 
-    const autocompleteIsOpen = autocompleteRef?.current && !autocompleteRef.current.state.hide;
-
     // we need autocomplete to take priority when it is open for using enter to select
-    if (autocompleteIsOpen) {
-        let handled = false;
-        const autocompleteAction = getKeyBindingsManager().getAutocompleteAction(event);
-        const component = autocompleteRef.current;
-        if (component && component.countCompletions() > 0) {
-            switch (autocompleteAction) {
-                case KeyBindingAction.ForceCompleteAutocomplete:
-                case KeyBindingAction.CompleteAutocomplete:
-                    autocompleteRef.current.onConfirmCompletion();
-                    handled = true;
-                    break;
-                case KeyBindingAction.PrevSelectionInAutocomplete:
-                    autocompleteRef.current.moveSelection(-1);
-                    handled = true;
-                    break;
-                case KeyBindingAction.NextSelectionInAutocomplete:
-                    autocompleteRef.current.moveSelection(1);
-                    handled = true;
-                    break;
-                case KeyBindingAction.CancelAutocomplete:
-                    autocompleteRef.current.onEscape(event as {} as React.KeyboardEvent);
-                    handled = true;
-                    break;
-                default:
-                    break; // don't return anything, allow event to pass through
-            }
-        }
+    const isHandledByAutocomplete = handleEventWithAutocomplete(autocompleteRef, event);
+    if (isHandledByAutocomplete) {
+        return event;
+    }
 
-        if (handled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return event;
-        }
+    // taking the client from context gives us an client | undefined type, narrow it down
+    if (mxClient === undefined) {
+        return null;
     }
 
     switch (action) {

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

@@ -15,9 +15,13 @@ limitations under the License.
 */
 
 import { KeyboardEvent, RefObject, SyntheticEvent, useCallback, useRef, useState } from "react";
+import { Attributes, MappedSuggestion } from "@matrix-org/matrix-wysiwyg";
 
 import { useSettingValue } from "../../../../../hooks/useSettings";
 import { IS_MAC, Key } from "../../../../../Keyboard";
+import Autocomplete from "../../Autocomplete";
+import { handleEventWithAutocomplete } from "./utils";
+import { useSuggestion } from "./useSuggestion";
 
 function isDivElement(target: EventTarget): target is HTMLDivElement {
     return target instanceof HTMLDivElement;
@@ -33,20 +37,44 @@ function amendInnerHtml(text: string): string {
         .replace(/<\/div>/g, "");
 }
 
+/**
+ * React hook which 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 - the content of the editor when it is first mounted
+ * @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 function for `content`
+ * - `onInput`, `onPaste`, `onKeyDown`: handlers for input, paste and keyDown events
+ * - the output from the {@link useSuggestion} hook
+ */
 export function usePlainTextListeners(
     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;
     onKeyDown(event: KeyboardEvent<HTMLDivElement>): void;
     setContent(text: string): void;
+    handleMention: (link: string, text: string, attributes: Attributes) => void;
+    handleCommand: (text: string) => void;
+    onSelect: (event: SyntheticEvent<HTMLDivElement>) => void;
+    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(() => {
         if (ref.current) {
             ref.current.innerHTML = "";
@@ -62,6 +90,11 @@ export function usePlainTextListeners(
         [onChange],
     );
 
+    // For separation of concerns, the suggestion handling is kept in a separate hook but is
+    // nested here because we do need to be able to update the `content` state in this hook
+    // when a user selects a suggestion from the autocomplete menu
+    const { suggestion, onSelect, handleCommand, handleMention } = useSuggestion(ref, setText);
+
     const enterShouldSend = !useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
     const onInput = useCallback(
         (event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>) => {
@@ -76,6 +109,13 @@ export function usePlainTextListeners(
 
     const onKeyDown = useCallback(
         (event: KeyboardEvent<HTMLDivElement>) => {
+            // we need autocomplete to take priority when it is open for using enter to select
+            const isHandledByAutocomplete = handleEventWithAutocomplete(autocompleteRef, event);
+            if (isHandledByAutocomplete) {
+                return;
+            }
+
+            // resume regular flow
             if (event.key === Key.ENTER) {
                 // TODO use getKeyBindingsManager().getMessageComposerAction(event) like in useInputEventProcessor
                 const sendModifierIsPressed = IS_MAC ? event.metaKey : event.ctrlKey;
@@ -95,8 +135,20 @@ export function usePlainTextListeners(
                 }
             }
         },
-        [enterShouldSend, send],
+        [autocompleteRef, enterShouldSend, send],
     );
 
-    return { ref, onInput, onPaste: onInput, onKeyDown, content, setContent: setText };
+    return {
+        ref,
+        autocompleteRef,
+        onInput,
+        onPaste: onInput,
+        onKeyDown,
+        content,
+        setContent: setText,
+        suggestion,
+        onSelect,
+        handleCommand,
+        handleMention,
+    };
 }