Fix link creation with backward selection (#9986)

Fix link creation with backward selection

Author: florianduros

cypress/e2e/composer/composer.spec.ts

@@ -98,7 +98,7 @@ describe("Composer", () => {
         });
     });
 
-    describe("WYSIWYG", () => {
+    describe("Rich text editor", () => {
         beforeEach(() => {
             cy.enableLabsFeature("feature_wysiwyg_composer");
             cy.initTestUser(homeserver, "Janet").then(() => {
@@ -165,5 +165,25 @@ describe("Composer", () => {
                 cy.contains(".mx_EventTile_body", "my message 3");
             });
         });
+
+        describe("links", () => {
+            it("create link with a forward selection", () => {
+                // Type a message
+                cy.get("div[contenteditable=true]").type("my message 0{selectAll}");
+
+                // Open link modal
+                cy.get('button[aria-label="Link"]').click();
+                // Fill the link field
+                cy.get('input[label="Link"]').type("https://matrix.org/");
+                // Click on save
+                cy.get('button[type="submit"]').click();
+                // Send the message
+                cy.get('div[aria-label="Send message"]').click();
+
+                // It was sent
+                cy.contains(".mx_EventTile_body a", "my message 0");
+                cy.get(".mx_EventTile_body a").should("have.attr", "href").and("include", "https://matrix.org/");
+            });
+        });
     });
 });

src/components/views/rooms/wysiwyg_composer/ComposerContext.ts

@@ -20,7 +20,7 @@ import { SubSelection } from "./types";
 
 export function getDefaultContextValue(): { selection: SubSelection } {
     return {
-        selection: { anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0 },
+        selection: { anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0, isForward: true },
     };
 }
 

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

@@ -44,6 +44,7 @@ export function useComposerFunctions(
                         anchorOffset: anchorOffset + text.length,
                         focusNode: ref.current.firstChild,
                         focusOffset: focusOffset + text.length,
+                        isForward: true,
                     });
                     setContent(ref.current.innerHTML);
                 }

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

@@ -23,11 +23,15 @@ function setSelectionContext(composerContext: ComposerContextState): void {
     const selection = document.getSelection();
 
     if (selection) {
+        const range = selection.getRangeAt(0);
+        const isForward = range.startContainer === selection.anchorNode && range.startOffset === selection.anchorOffset;
+
         composerContext.selection = {
             anchorNode: selection.anchorNode,
             anchorOffset: selection.anchorOffset,
             focusNode: selection.focusNode,
             focusOffset: selection.focusOffset,
+            isForward,
         };
     }
 }

src/components/views/rooms/wysiwyg_composer/types.ts

@@ -19,4 +19,6 @@ export type ComposerFunctions = {
     insertText: (text: string) => void;
 };
 
-export type SubSelection = Pick<Selection, "anchorNode" | "anchorOffset" | "focusNode" | "focusOffset">;
+export type SubSelection = Pick<Selection, "anchorNode" | "anchorOffset" | "focusNode" | "focusOffset"> & {
+    isForward: boolean;
+};

src/components/views/rooms/wysiwyg_composer/utils/selection.ts

@@ -19,9 +19,14 @@ import { SubSelection } from "../types";
 export function setSelection(selection: SubSelection): Promise<void> {
     if (selection.anchorNode && selection.focusNode) {
         const range = new Range();
-        range.setStart(selection.anchorNode, selection.anchorOffset);
-        range.setEnd(selection.focusNode, selection.focusOffset);
 
+        if (selection.isForward) {
+            range.setStart(selection.anchorNode, selection.anchorOffset);
+            range.setEnd(selection.focusNode, selection.focusOffset);
+        } else {
+            range.setStart(selection.focusNode, selection.focusOffset);
+            range.setEnd(selection.anchorNode, selection.anchorOffset);
+        }
         document.getSelection()?.removeAllRanges();
         document.getSelection()?.addRange(range);
     }

test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx

@@ -299,6 +299,7 @@ describe("SendWysiwygComposer", () => {
                     anchorOffset: 2,
                     focusNode: textNode,
                     focusOffset: 2,
+                    isForward: true,
                 });
                 // the event is not automatically fired by jest
                 document.dispatchEvent(new CustomEvent("selectionchange"));
@@ -308,6 +309,32 @@ describe("SendWysiwygComposer", () => {
                 // Then
                 await waitFor(() => expect(screen.getByRole("textbox")).toHaveTextContent(/wo🦫rd/));
             });
+
+            it("Should add an emoji when a word is selected", async () => {
+                // When
+                screen.getByRole("textbox").focus();
+                screen.getByRole("textbox").innerHTML = "word";
+                fireEvent.input(screen.getByRole("textbox"), {
+                    data: "word",
+                    inputType: "insertText",
+                });
+
+                const textNode = screen.getByRole("textbox").firstChild;
+                await setSelection({
+                    anchorNode: textNode,
+                    anchorOffset: 3,
+                    focusNode: textNode,
+                    focusOffset: 2,
+                    isForward: false,
+                });
+                // the event is not automatically fired by jest
+                document.dispatchEvent(new CustomEvent("selectionchange"));
+
+                emojiButton.click();
+
+                // Then
+                await waitFor(() => expect(screen.getByRole("textbox")).toHaveTextContent(/wo🦫d/));
+            });
         },
     );
 });

test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx

@@ -35,6 +35,7 @@ describe("LinkModal", () => {
         anchorNode: null,
         focusOffset: 3,
         anchorOffset: 4,
+        isForward: true,
     };
 
     const customRender = (isTextEnabled: boolean, onClose: () => void, isEditing = false) => {