Fix link creation with backward selection

matrix-org · Jan 25, 2023 · a786c9a · a786c9a
1 parent 441ad40
commit a786c9a
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 4 deletions.
diff --git a/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts b/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 },
     };
 }
 

diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts b/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);
                 }

diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useSelection.ts b/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,
         };
     }
 }

diff --git a/src/components/views/rooms/wysiwyg_composer/types.ts b/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;
+};
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/selection.ts b/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);
     }

diff --git a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/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"));

diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/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) => {