[MM-54861] Command + K shortcut to hyperlink text doesn't work when editing a post (#30195)

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx

@@ -55,6 +55,7 @@ import Constants, {
     AdvancedTextEditor as AdvancedTextEditorConst,
     UserStatuses,
     ModalIdentifiers,
+    AdvancedTextEditorTextboxIds,
 } from 'utils/constants';
 import {canUploadFiles as canUploadFilesAccordingToConfig} from 'utils/file_utils';
 import type {ApplyMarkdownOptions} from 'utils/markdown/apply_markdown';
@@ -132,22 +133,17 @@ const AdvancedTextEditor = ({
     const getDraftSelector = useMemo(makeGetDraft, []);
     const getDisplayName = useMemo(makeGetDisplayName, []);
 
-    let textboxId = 'textbox';
-
-    switch (location) {
-    case Locations.CENTER:
-        textboxId = 'post_textbox';
-        break;
-    case Locations.RHS_COMMENT:
-        textboxId = 'reply_textbox';
-        break;
-    case Locations.MODAL:
-        textboxId = 'modal_textbox';
-        break;
-    }
-
+    let textboxId: string;
     if (isInEditMode) {
-        textboxId = 'edit_textbox';
+        textboxId = AdvancedTextEditorTextboxIds.InEditMode;
+    } else if (location === Locations.CENTER) {
+        textboxId = AdvancedTextEditorTextboxIds.InCenter;
+    } else if (location === Locations.RHS_COMMENT) {
+        textboxId = AdvancedTextEditorTextboxIds.InRHSComment;
+    } else if (location === Locations.MODAL) {
+        textboxId = AdvancedTextEditorTextboxIds.InModal;
+    } else {
+        textboxId = AdvancedTextEditorTextboxIds.Default;
     }
 
     const isRHS = Boolean(postId && !isThreadView);

webapp/channels/src/utils/constants.tsx

@@ -751,6 +751,14 @@ export const AdvancedTextEditor = {
     EDIT: 'edit',
 };
 
+export const AdvancedTextEditorTextboxIds = {
+    InCenter: 'post_textbox',
+    InRHSComment: 'reply_textbox',
+    InModal: 'modal_textbox',
+    InEditMode: 'edit_textbox',
+    Default: 'textbox',
+};
+
 export const TELEMETRY_CATEGORIES = {
     CLOUD_PURCHASING: 'cloud_purchasing',
     CLOUD_PRICING: 'cloud_pricing',

webapp/channels/src/utils/utils.test.tsx

@@ -9,7 +9,7 @@ import store from 'stores/redux_store';
 
 import * as lineBreakHelpers from 'tests/helpers/line_break_helpers';
 import * as ua from 'tests/helpers/user_agent_mocks';
-import Constants, {ValidationErrors} from 'utils/constants';
+import Constants, {ValidationErrors, AdvancedTextEditorTextboxIds} from 'utils/constants';
 import * as Utils from 'utils/utils';
 
 describe('Utils.getDisplayNameByUser', () => {
@@ -498,3 +498,77 @@ describe('Utils.numberToFixedDynamic', () => {
         });
     });
 });
+
+describe('isTextSelectedInPostOrReply', () => {
+    function createKeyboardEvent(target: Partial<HTMLTextAreaElement>) {
+        return {
+            target: {
+                selectionStart: 0,
+                selectionEnd: 0,
+                id: AdvancedTextEditorTextboxIds.Default,
+                ...target,
+            },
+        } as unknown as KeyboardEvent;
+    }
+
+    test('returns false when not typing in a textbox', () => {
+        const event = createKeyboardEvent({
+            id: 'not_a_textbox',
+        });
+        expect(Utils.isTextSelectedInPostOrReply(event)).toBe(false);
+    });
+
+    test('returns false when no text is selected in center textbox', () => {
+        const event = createKeyboardEvent({
+            id: AdvancedTextEditorTextboxIds.InCenter,
+            selectionStart: 5,
+            selectionEnd: 5,
+        });
+        expect(Utils.isTextSelectedInPostOrReply(event)).toBe(false);
+    });
+
+    test('returns true when text is selected in center textbox', () => {
+        const event = createKeyboardEvent({
+            id: AdvancedTextEditorTextboxIds.InCenter,
+            selectionStart: 0,
+            selectionEnd: 5,
+        });
+        expect(Utils.isTextSelectedInPostOrReply(event)).toBe(true);
+    });
+
+    test('returns false when no text is selected in RHS comment textbox', () => {
+        const event = createKeyboardEvent({
+            id: AdvancedTextEditorTextboxIds.InRHSComment,
+            selectionStart: 3,
+            selectionEnd: 3,
+        });
+        expect(Utils.isTextSelectedInPostOrReply(event)).toBe(false);
+    });
+
+    test('returns true when text is selected in RHS comment textbox', () => {
+        const event = createKeyboardEvent({
+            id: AdvancedTextEditorTextboxIds.InRHSComment,
+            selectionStart: 0,
+            selectionEnd: 3,
+        });
+        expect(Utils.isTextSelectedInPostOrReply(event)).toBe(true);
+    });
+
+    test('returns false when no text is selected in edit mode textbox', () => {
+        const event = createKeyboardEvent({
+            id: AdvancedTextEditorTextboxIds.InEditMode,
+            selectionStart: 7,
+            selectionEnd: 7,
+        });
+        expect(Utils.isTextSelectedInPostOrReply(event)).toBe(false);
+    });
+
+    test('returns true when text is selected in edit mode textbox', () => {
+        const event = createKeyboardEvent({
+            id: AdvancedTextEditorTextboxIds.InEditMode,
+            selectionStart: 0,
+            selectionEnd: 7,
+        });
+        expect(Utils.isTextSelectedInPostOrReply(event)).toBe(true);
+    });
+});

webapp/channels/src/utils/utils.tsx

@@ -55,7 +55,7 @@ import {focusPost} from 'components/permalink_view/actions';
 import type {TextboxElement} from 'components/textbox';
 
 import {getHistory} from 'utils/browser_history';
-import Constants, {FileTypes, ValidationErrors, A11yCustomEventTypes} from 'utils/constants';
+import Constants, {FileTypes, ValidationErrors, A11yCustomEventTypes, AdvancedTextEditorTextboxIds} from 'utils/constants';
 import type {A11yFocusEventDetail} from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
 import * as UserAgent from 'utils/user_agent';
@@ -1439,13 +1439,18 @@ function isSelection() {
     return selection!.type === 'Range';
 }
 
+/**
+ * Checks if text is selected in the a textbox in center or in RHS or in edit mode of post
+ */
 export function isTextSelectedInPostOrReply(e: React.KeyboardEvent | KeyboardEvent) {
     const {id} = e.target as HTMLElement;
 
-    const isTypingInPost = id === 'post_textbox';
-    const isTypingInReply = id === 'reply_textbox';
+    const isTypingInValidTextbox =
+    id === AdvancedTextEditorTextboxIds.InCenter ||
+    id === AdvancedTextEditorTextboxIds.InRHSComment ||
+    id === AdvancedTextEditorTextboxIds.InEditMode;
 
-    if (!isTypingInPost && !isTypingInReply) {
+    if (isTypingInValidTextbox === false) {
         return false;
     }