Fix link creation with backward selection

Author: florianduros

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/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) => {