diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx index 72a0a547f5..79134183fd 100644 --- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx +++ b/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); diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx index 8f04cfdc00..a33bb5c2d4 100644 --- a/webapp/channels/src/utils/constants.tsx +++ b/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', diff --git a/webapp/channels/src/utils/utils.test.tsx b/webapp/channels/src/utils/utils.test.tsx index 0d126c664c..011638bf8b 100644 --- a/webapp/channels/src/utils/utils.test.tsx +++ b/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) { + 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); + }); +}); diff --git a/webapp/channels/src/utils/utils.tsx b/webapp/channels/src/utils/utils.tsx index 62beab83bd..1238c6afad 100644 --- a/webapp/channels/src/utils/utils.tsx +++ b/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; }