npm - @azure/communication-react - Versions diffs - 1.5.1-alpha-202306180015 → 1.5.1-alpha-202306210014 - Mend

@azure/communication-react 1.5.1-alpha-202306180015 → 1.5.1-alpha-202306210014

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextFieldWithMention.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/TextFieldWithMention/TextFieldWithMention.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, FormEvent, useCallback, useRef } from 'react';\nimport { useEffect, useMemo } from 'react';\nimport { useLocale } from '../../localization';\nimport { Announcer } from '../Announcer';\nimport {\n Stack,\n TextField,\n mergeStyles,\n ITextField,\n IconButton,\n TooltipHost,\n ICalloutContentStyles,\n ITextFieldProps\n} from '@fluentui/react';\n\nimport { isEnterKeyEventFromCompositionSession, nullToUndefined } from '../utils';\nimport {\n TagData,\n findMentionTagForSelection,\n findNewSelectionIndexForMention,\n findStringsDiffIndexes,\n getDisplayNameForMentionSuggestion,\n getValidatedIndexInRange,\n htmlStringForMentionSuggestion,\n textToTagParser,\n updateHTML\n} from './mentionTagUtils';\nimport { inputButtonStyle, inputButtonTooltipStyle, iconWrapperStyle } from '../styles/InputBoxComponent.style';\n\nimport { Caret } from 'textarea-caret-ts';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { useTheme } from '../../theming';\n\nimport { MentionLookupOptions, _MentionPopover, Mention } from '../MentionPopover';\n\nimport { useDebouncedCallback } from 'use-debounce';\n\nconst DEFAULT_MENTION_TRIGGER = '@';\n\n/*\n Props for the TextFieldWithMention component.\n \n @private\n /\nexport interface TextFieldWithMentionProps {\n textFieldProps: ITextFieldProps;\n dataUiId?: string;\n textValue: string; // This could be plain text or HTML.\n onChange: (event?: FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string) => void;\n onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onEnterKeyDown?: () => void;\n textFieldRef?: React.RefObject<ITextField>;\n supportNewline?: boolean;\n mentionLookupOptions?: MentionLookupOptions;\n}\n\n/\n @private\n /\nexport const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Element => {\n const {\n textFieldProps,\n dataUiId,\n textValue,\n onChange,\n textFieldRef,\n onKeyDown,\n onEnterKeyDown,\n supportNewline,\n mentionLookupOptions\n } = props;\n const inputBoxRef = useRef<HTMLDivElement>(null);\n\n // Current suggestion list, provided by the callback\n const [mentionSuggestions, setMentionSuggestions] = useState<Mention[]>([]);\n\n // Current suggestion list, provided by the callback\n const [activeSuggestionIndex, setActiveSuggestionIndex] = useState<number \| undefined>(undefined);\n\n // Index of the current trigger character in the text field\n const [currentTriggerStartIndex, setCurrentTriggerStartIndex] = useState<number>(-1);\n\n const [inputTextValue, setInputTextValue] = useState<string>('');\n\n const [tagsValue, setTagsValue] = useState<TagData[]>([]);\n\n // Index of the previous selection start in the text field\n const [selectionStartValue, setSelectionStartValue] = useState<number \| undefined>();\n\n // Index of the previous selection end in the text field\n const [selectionEndValue, setSelectionEndValue] = useState<number \| undefined>();\n\n // Boolean value to check if onMouseDown event should be handled during select as selection range\n // for onMouseDown event is not updated yet and the selection range for mouse click/taps will be\n // updated in onSelect event if needed.\n const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = useState<boolean>(true);\n\n // Boolean flag to check if mouse/touch move event should be handled\n const [shouldHandleMoveEvent, setShouldHandleMoveEvent] = useState<boolean>(false);\n\n // Indexes of start of touch/mouse selection\n const [interactionStartSelection, setInteractionStartSelection] = useState<\n { start: number \| undefined; end: number \| undefined } \| undefined\n >();\n\n // Caret position in the text field\n const [caretPosition, setCaretPosition] = useState<Caret.Position \| undefined>(undefined);\n\n // Index of where the caret is in the text field\n const [caretIndex, setCaretIndex] = useState<number \| undefined>(undefined);\n\n const localeStrings = useLocale().strings;\n\n // Set mention suggestions\n const updateMentionSuggestions = useCallback(\n (suggestions: Mention[]) => {\n setMentionSuggestions(suggestions);\n },\n [setMentionSuggestions]\n );\n\n // Parse the text and get the plain text version to display in the input box\n useEffect(() => {\n const trigger = mentionLookupOptions?.trigger \|\| DEFAULT_MENTION_TRIGGER;\n const parsedHTMLData = textToTagParser(textValue, trigger);\n setInputTextValue(parsedHTMLData.plainText);\n setTagsValue(parsedHTMLData.tags);\n updateMentionSuggestions([]);\n }, [textValue, mentionLookupOptions?.trigger, updateMentionSuggestions]);\n\n useEffect(() => {\n // effect for caret index update\n if (caretIndex === undefined \|\| textFieldRef === undefined \|\| textFieldRef?.current === undefined) {\n return;\n }\n // get validated caret index between 0 and inputTextValue.length otherwise caret will be set to incorrect index\n const updatedCaretIndex = getValidatedIndexInRange({\n min: 0,\n max: inputTextValue.length,\n currentValue: caretIndex\n });\n textFieldRef?.current?.setSelectionRange(updatedCaretIndex, updatedCaretIndex);\n setSelectionStartValue(updatedCaretIndex);\n setSelectionEndValue(updatedCaretIndex);\n }, [caretIndex, inputTextValue.length, textFieldRef, setSelectionStartValue, setSelectionEndValue]);\n\n const onSuggestionSelected = useCallback(\n (suggestion: Mention) => {\n let selectionEnd = textFieldRef?.current?.selectionEnd \|\| -1;\n if (selectionEnd < 0) {\n selectionEnd = 0;\n } else if (selectionEnd > inputTextValue.length) {\n selectionEnd = inputTextValue.length;\n }\n const oldPlainText = inputTextValue;\n const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);\n\n // update plain text with the mention html text\n const newPlainText =\n inputTextValue.substring(0, currentTriggerStartIndex) + mention + inputTextValue.substring(selectionEnd);\n const triggerText = mentionLookupOptions?.trigger ?? DEFAULT_MENTION_TRIGGER;\n // update html text with updated plain text\n const updatedContent = updateHTML({\n htmlText: textValue,\n oldPlainText,\n newPlainText,\n tags: tagsValue,\n startIndex: currentTriggerStartIndex,\n oldPlainTextEndIndex: selectionEnd,\n change: mention,\n mentionTrigger: triggerText\n });\n const displayName = getDisplayNameForMentionSuggestion(suggestion, localeStrings);\n const newCaretIndex = currentTriggerStartIndex + displayName.length + triggerText.length;\n // move the caret in the text field to the end of the mention plain text\n setCaretIndex(newCaretIndex);\n setSelectionEndValue(newCaretIndex);\n setSelectionStartValue(newCaretIndex);\n setCurrentTriggerStartIndex(-1);\n updateMentionSuggestions([]);\n // set focus back to text field\n textFieldRef?.current?.focus();\n setActiveSuggestionIndex(undefined);\n onChange && onChange(undefined, updatedContent.updatedHTML);\n },\n [\n textFieldRef,\n inputTextValue,\n currentTriggerStartIndex,\n mentionLookupOptions?.trigger,\n onChange,\n textValue,\n tagsValue,\n updateMentionSuggestions,\n localeStrings\n ]\n );\n\n const onTextFieldKeyDown = useCallback(\n (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n // caretIndex should be set to undefined when the user is typing\n setCaretIndex(undefined);\n // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.\n // it shouldn't be updated in onMouseUp\n // as onMouseUp can be triggered before or after onSelect event\n // because its order depends on mouse events not selection.\n setShouldHandleOnMouseDownDuringSelect(false);\n\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n\n if (mentionSuggestions.length > 0) {\n if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n const newActiveIndex =\n activeSuggestionIndex === undefined\n ? mentionSuggestions.length - 1\n : Math.max(activeSuggestionIndex - 1, 0);\n setActiveSuggestionIndex(newActiveIndex);\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n const newActiveIndex =\n activeSuggestionIndex === undefined\n ? 0\n : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);\n setActiveSuggestionIndex(newActiveIndex);\n } else if (ev.key === 'Escape') {\n updateMentionSuggestions([]);\n }\n }\n if (ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline)) {\n ev.preventDefault();\n\n // If we are looking up a mention, select the focused suggestion\n if (mentionSuggestions.length > 0 && activeSuggestionIndex !== undefined) {\n const selectedMention = mentionSuggestions[activeSuggestionIndex];\n if (selectedMention) {\n onSuggestionSelected(selectedMention);\n return;\n }\n }\n\n onEnterKeyDown && onEnterKeyDown();\n }\n onKeyDown && onKeyDown(ev);\n },\n [\n onEnterKeyDown,\n onKeyDown,\n supportNewline,\n mentionSuggestions,\n activeSuggestionIndex,\n onSuggestionSelected,\n updateMentionSuggestions\n ]\n );\n\n const debouncedQueryUpdate = useDebouncedCallback(async (query: string) => {\n const suggestions = (await mentionLookupOptions?.onQueryUpdated(query)) ?? [];\n if (suggestions.length === 0) {\n setActiveSuggestionIndex(undefined);\n } else if (activeSuggestionIndex === undefined) {\n // Set the active to the first, if it's not already set\n setActiveSuggestionIndex(0);\n }\n updateMentionSuggestions(suggestions);\n }, 500);\n\n // Update selections index in mention to navigate by words\n const updateSelectionIndexesWithMentionIfNeeded = useCallback(\n ({\n event,\n inputTextValue,\n selectionEndValue,\n selectionStartValue,\n tagsValue\n }: {\n event: FormEvent<HTMLInputElement \| HTMLTextAreaElement>;\n inputTextValue: string;\n selectionEndValue?: number;\n selectionStartValue?: number;\n tagsValue: TagData[];\n }): void => {\n let updatedStartIndex = event.currentTarget.selectionStart;\n let updatedEndIndex = event.currentTarget.selectionEnd;\n if (\n event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&\n event.currentTarget.selectionStart !== null &&\n event.currentTarget.selectionStart !== -1\n ) {\n // just a caret movement/usual typing or deleting\n const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);\n // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n if (\n mentionTag !== undefined &&\n mentionTag.plainTextBeginIndex !== undefined &&\n event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&\n event.currentTarget.selectionStart < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n ) {\n // get updated selection index\n const newSelectionIndex = findNewSelectionIndexForMention({\n tag: mentionTag,\n textValue: inputTextValue,\n currentSelectionIndex: event.currentTarget.selectionStart,\n previousSelectionIndex: selectionStartValue ?? inputTextValue.length\n });\n updatedStartIndex = newSelectionIndex;\n updatedEndIndex = newSelectionIndex;\n }\n } else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {\n // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click\n if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {\n // the selection start is changed\n const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);\n // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n if (\n mentionTag !== undefined &&\n mentionTag.plainTextBeginIndex !== undefined &&\n event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&\n event.currentTarget.selectionStart < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n ) {\n updatedStartIndex = findNewSelectionIndexForMention({\n tag: mentionTag,\n textValue: inputTextValue,\n currentSelectionIndex: event.currentTarget.selectionStart,\n previousSelectionIndex: selectionStartValue ?? inputTextValue.length\n });\n }\n }\n if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {\n // the selection end is changed\n const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);\n // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n if (\n mentionTag !== undefined &&\n mentionTag.plainTextBeginIndex !== undefined &&\n event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex &&\n event.currentTarget.selectionEnd < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n ) {\n updatedEndIndex = findNewSelectionIndexForMention({\n tag: mentionTag,\n textValue: inputTextValue,\n currentSelectionIndex: event.currentTarget.selectionEnd,\n previousSelectionIndex: selectionEndValue ?? inputTextValue.length\n });\n }\n }\n }\n // e.currentTarget.selectionDirection should be set to handle shift + arrow keys\n if (event.currentTarget.selectionDirection === null) {\n event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);\n } else {\n event.currentTarget.setSelectionRange(\n updatedStartIndex,\n updatedEndIndex,\n event.currentTarget.selectionDirection\n );\n }\n setSelectionStartValue(nullToUndefined(updatedStartIndex));\n setSelectionEndValue(nullToUndefined(updatedEndIndex));\n },\n [setSelectionStartValue, setSelectionEndValue]\n );\n\n const handleOnSelect = useCallback(\n ({\n event,\n inputTextValue,\n tags,\n shouldHandleOnMouseDownDuringSelect,\n selectionStartValue,\n selectionEndValue,\n interactionStartSelection\n }: {\n event: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>;\n inputTextValue: string;\n tags: TagData[];\n shouldHandleOnMouseDownDuringSelect: boolean;\n selectionStartValue?: number;\n selectionEndValue?: number;\n interactionStartSelection?: { start: number \| undefined; end: number \| undefined };\n }): void => {\n if (shouldHandleOnMouseDownDuringSelect) {\n if (\n interactionStartSelection !== undefined &&\n (interactionStartSelection.start !== event.currentTarget.selectionStart \|\|\n interactionStartSelection.end !== event.currentTarget.selectionEnd)\n ) {\n // selection was changed by mouse\n // for mouse selection only, it's possible to start selection in the middle of a word in a mention\n // because of this when event.currentTarget.selectionStart === mouseMoveStartPoint.start\n // selectionStartValue for updateSelectionIndexesWithMentionIfNeeded should be set\n // to the end of the input to mimic selection from right to left for the left selection index\n const updatedSelectionStartValue =\n event.currentTarget.selectionStart === interactionStartSelection.start\n ? inputTextValue.length\n : interactionStartSelection.start;\n // selectionStart is always less than selectionEnd so sometimes selectionEnd is user's start of the selection\n // so when event.currentTarget.selectionEnd === mouseMoveStartPoint.end\n // selectionEndValue for updateSelectionIndexesWithMentionIfNeeded should be set\n // to the beginning of the input to mimic selection from left to right for the right selection index\n const updatedSelectionEndValue =\n event.currentTarget.selectionEnd === interactionStartSelection.end ? 0 : interactionStartSelection.end;\n updateSelectionIndexesWithMentionIfNeeded({\n event,\n inputTextValue,\n selectionStartValue: updatedSelectionStartValue,\n selectionEndValue: updatedSelectionEndValue,\n tagsValue: tags\n });\n setInteractionStartSelection(undefined);\n setShouldHandleOnMouseDownDuringSelect(false);\n } else if (event.currentTarget.selectionStart !== null) {\n // on select was triggered by mouse down/up with no movement\n const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);\n if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {\n // handle mention click by selecting the whole mention\n // if the selection is not on the bounds of the mention\n const mentionEndIndex = mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex;\n // disable selection for clicks on mention bounds\n if (\n event.currentTarget.selectionStart !== event.currentTarget.selectionEnd \|\|\n (event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex &&\n event.currentTarget.selectionStart !== mentionEndIndex)\n ) {\n if (event.currentTarget.selectionDirection === null) {\n event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, mentionEndIndex);\n } else {\n event.currentTarget.setSelectionRange(\n mentionTag.plainTextBeginIndex,\n mentionEndIndex,\n event.currentTarget.selectionDirection\n );\n }\n setSelectionStartValue(mentionTag.plainTextBeginIndex);\n setSelectionEndValue(mentionEndIndex);\n } else {\n // bounds of the mention were selected\n setSelectionStartValue(event.currentTarget.selectionStart);\n setSelectionEndValue(event.currentTarget.selectionEnd);\n }\n } else {\n // not a mention tag\n setSelectionStartValue(event.currentTarget.selectionStart);\n setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));\n }\n setInteractionStartSelection(undefined);\n setShouldHandleOnMouseDownDuringSelect(false);\n }\n } else {\n // selection was changed by keyboard\n updateSelectionIndexesWithMentionIfNeeded({\n event,\n inputTextValue,\n selectionStartValue,\n selectionEndValue,\n tagsValue: tags\n });\n }\n },\n [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]\n );\n\n type HandleOnChangeProps = {\n currentSelectionEnd?: number;\n currentSelectionStart?: number;\n currentTriggerStartIndex: number;\n event: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>;\n htmlTextValue: string;\n inputTextValue: string;\n previousSelectionEnd?: number;\n previousSelectionStart?: number;\n tagsValue: TagData[];\n updatedValue?: string;\n };\n\n const handleOnChange = useCallback(\n async ({\n currentSelectionEnd,\n currentSelectionStart,\n currentTriggerStartIndex,\n event,\n htmlTextValue,\n inputTextValue,\n previousSelectionEnd,\n previousSelectionStart,\n tagsValue,\n updatedValue\n }: HandleOnChangeProps): Promise<void> => {\n debouncedQueryUpdate.cancel();\n if (event.currentTarget === null) {\n return;\n }\n // handle backspace change\n // onSelect is not called for backspace as selection is not changed and local caret index is outdated\n setCaretIndex(undefined);\n const newValue = updatedValue ?? '';\n const triggerText = mentionLookupOptions?.trigger ?? DEFAULT_MENTION_TRIGGER;\n\n const newTextLength = newValue.length;\n // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly\n const currentSelectionEndValue = getValidatedIndexInRange({\n min: 0,\n max: newTextLength,\n currentValue: currentSelectionEnd\n });\n const currentSelectionStartValue = getValidatedIndexInRange({\n min: 0,\n max: newTextLength,\n currentValue: currentSelectionStart\n });\n const previousSelectionStartValue = getValidatedIndexInRange({\n min: 0,\n max: inputTextValue.length,\n currentValue: previousSelectionStart\n });\n const previousSelectionEndValue = getValidatedIndexInRange({\n min: 0,\n max: inputTextValue.length,\n currentValue: previousSelectionEnd\n });\n\n // If we are enabled for lookups,\n if (mentionLookupOptions !== undefined) {\n // Look at the range of the change for a trigger character\n const triggerPriorIndex = newValue.lastIndexOf(triggerText, currentSelectionEndValue - 1);\n // Update the caret position, used for positioning the suggestions popover\n const textField = event.currentTarget;\n const relativePosition = Caret.getRelativePosition(textField);\n const adjustOffset = Math.max(0, textField.scrollHeight - textField.clientHeight);\n relativePosition.top -= adjustOffset;\n setCaretPosition(relativePosition);\n\n if (triggerPriorIndex !== undefined) {\n // trigger is found\n const isSpaceBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex) === ' ';\n const wordAtSelection = newValue.substring(triggerPriorIndex, currentSelectionEndValue);\n let tagIndex = currentTriggerStartIndex;\n if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0) {\n //no space before the trigger <- continuation of the previous word\n tagIndex = -1;\n setCurrentTriggerStartIndex(tagIndex);\n } else if (wordAtSelection === triggerText) {\n // start of the mention\n tagIndex = currentSelectionEndValue - triggerText.length;\n if (tagIndex < 0) {\n tagIndex = 0;\n }\n setCurrentTriggerStartIndex(tagIndex);\n }\n if (tagIndex === -1) {\n updateMentionSuggestions([]);\n } else {\n // In the middle of a @mention lookup\n if (tagIndex > -1) {\n const query = wordAtSelection.substring(triggerText.length, wordAtSelection.length);\n if (query !== undefined) {\n await debouncedQueryUpdate(query);\n }\n }\n }\n }\n }\n let result = '';\n if (tagsValue.length === 0) {\n // no tags in the string and newValue should be used as a result string\n result = newValue;\n } else {\n // there are tags in the text value and htmlTextValue is html string\n // find diff between old and new text\n const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({\n oldText: inputTextValue,\n newText: newValue,\n previousSelectionStart: previousSelectionStartValue,\n previousSelectionEnd: previousSelectionEndValue,\n currentSelectionStart: currentSelectionStartValue,\n currentSelectionEnd: currentSelectionEndValue\n });\n const change = newValue.substring(changeStart, newChangeEnd);\n // get updated html string\n const updatedContent = updateHTML({\n htmlText: htmlTextValue,\n oldPlainText: inputTextValue,\n newPlainText: newValue,\n tags: tagsValue,\n startIndex: changeStart,\n oldPlainTextEndIndex: oldChangeEnd,\n change,\n mentionTrigger: triggerText\n });\n result = updatedContent.updatedHTML;\n // update caret index if needed\n if (updatedContent.updatedSelectionIndex !== undefined) {\n setCaretIndex(updatedContent.updatedSelectionIndex);\n setSelectionEndValue(updatedContent.updatedSelectionIndex);\n setSelectionStartValue(updatedContent.updatedSelectionIndex);\n }\n }\n\n onChange && onChange(event, result);\n },\n [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]\n );\n\n // Adjust the selection range based on a mouse / touch interaction\n const handleOnMove = useCallback(\n ({\n event,\n selectionStartValue,\n selectionEndValue,\n interactionStartSelection,\n shouldHandleMoveEvent\n }: {\n event: React.UIEvent<HTMLInputElement \| HTMLTextAreaElement>;\n selectionStartValue: number \| undefined;\n selectionEndValue: number \| undefined;\n interactionStartSelection: { start: number \| undefined; end: number \| undefined } \| undefined;\n shouldHandleMoveEvent: boolean;\n }) => {\n if (\n shouldHandleMoveEvent &&\n interactionStartSelection === undefined &&\n (event.currentTarget.selectionStart !== selectionStartValue \|\|\n event.currentTarget.selectionEnd !== selectionEndValue)\n ) {\n setInteractionStartSelection({\n start: nullToUndefined(event.currentTarget.selectionStart),\n end: nullToUndefined(event.currentTarget.selectionEnd)\n });\n }\n },\n []\n );\n\n // Adjust the selection range based on a mouse / touch interaction\n const handleOnInteractionStarted = useCallback(() => {\n setInteractionStartSelection(undefined);\n setShouldHandleMoveEvent(true);\n setShouldHandleOnMouseDownDuringSelect(true);\n }, []);\n\n // Adjust the selection range based on a mouse / touch interaction\n const handleOnInteractionCompleted = useCallback(() => {\n setShouldHandleMoveEvent(false);\n }, []);\n\n const announcerText = useMemo(() => {\n if (activeSuggestionIndex === undefined) {\n return undefined;\n }\n const currentMention = mentionSuggestions[activeSuggestionIndex ?? 0];\n return currentMention?.displayText.length > 0\n ? currentMention?.displayText\n : localeStrings.participantItem.displayNamePlaceholder;\n }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);\n\n return (\n <>\n {mentionSuggestions.length > 0 && (\n <_MentionPopover\n suggestions={mentionSuggestions}\n activeSuggestionIndex={activeSuggestionIndex}\n target={inputBoxRef}\n targetPositionOffset={caretPosition}\n onRenderSuggestionItem={mentionLookupOptions?.onRenderSuggestionItem}\n onSuggestionSelected={onSuggestionSelected}\n onDismiss={() => {\n updateMentionSuggestions([]);\n }}\n />\n )}\n {announcerText !== undefined && <Announcer announcementString={announcerText} ariaLive={'polite'} />}\n <TextField\n {...textFieldProps}\n data-ui-id={dataUiId}\n value={inputTextValue}\n onChange={(e, newValue) => {\n // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html\n // Prevents React from resetting event's properties\n e.persist();\n setInputTextValue(newValue ?? '');\n handleOnChange({\n event: e,\n tagsValue,\n htmlTextValue: textValue,\n inputTextValue,\n currentTriggerStartIndex,\n previousSelectionStart: nullToUndefined(selectionStartValue),\n previousSelectionEnd: nullToUndefined(selectionEndValue),\n currentSelectionStart: nullToUndefined(e.currentTarget.selectionStart),\n currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),\n updatedValue: newValue\n });\n }}\n onSelect={(e) => {\n handleOnSelect({\n event: e,\n inputTextValue,\n shouldHandleOnMouseDownDuringSelect,\n selectionEndValue,\n selectionStartValue,\n tags: tagsValue,\n interactionStartSelection\n });\n }}\n onMouseDown={() => {\n // as events order is onMouseDown -> onMouseMove -> onMouseUp -> onSelect -> onClick\n // onClick and onMouseDown can't handle clicking on mention event because\n // onMouseDown doesn't have correct selectionRange yet and\n // onClick already has wrong range as it's called after onSelect that updates the selection range\n // so we need to handle onMouseDown to prevent onSelect default behavior\n handleOnInteractionStarted();\n }}\n onMouseMove={(event) => {\n handleOnMove({\n event,\n selectionStartValue,\n selectionEndValue,\n interactionStartSelection,\n shouldHandleMoveEvent\n });\n }}\n onMouseUp={() => {\n handleOnInteractionCompleted();\n }}\n onTouchStart={() => {\n handleOnInteractionStarted();\n }}\n onTouchMove={(event) => {\n handleOnMove({\n event,\n selectionStartValue,\n selectionEndValue,\n interactionStartSelection,\n shouldHandleMoveEvent\n });\n }}\n onTouchEnd={() => {\n handleOnInteractionCompleted;\n }}\n onBlur={() => {\n // setup all flags to default values when text field loses focus\n setShouldHandleOnMouseDownDuringSelect(false);\n setCaretIndex(undefined);\n setSelectionStartValue(undefined);\n setSelectionEndValue(undefined);\n }}\n onKeyDown={onTextFieldKeyDown}\n elementRef={inputBoxRef}\n />\n </>\n );\n};\n\n/\n Props for displaying a send button besides the text input area.\n \n @private\n /\nexport type InputBoxButtonProps = {\n onRenderIcon: (isHover: boolean) => JSX.Element;\n onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n className?: string;\n id?: string;\n ariaLabel?: string;\n tooltipContent?: string;\n};\n\n/\n @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n const [isHover, setIsHover] = useState(false);\n const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return (\n <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n <IconButton\n className={mergedButtonStyle}\n ariaLabel={ariaLabel}\n onClick={onClick}\n id={id}\n onMouseEnter={() => {\n setIsHover(true);\n }}\n onMouseLeave={() => {\n setIsHover(false);\n }}\n // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n />\n </TooltipHost>\n );\n};\n"]}
1	+ {"version":3,"file":"TextFieldWithMention.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/TextFieldWithMention/TextFieldWithMention.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, FormEvent, useCallback, useRef } from 'react';\nimport { useEffect, useMemo } from 'react';\nimport { useLocale } from '../../localization';\nimport { Announcer } from '../Announcer';\nimport {\n Stack,\n TextField,\n mergeStyles,\n ITextField,\n IconButton,\n TooltipHost,\n ICalloutContentStyles,\n ITextFieldProps\n} from '@fluentui/react';\n\nimport { isEnterKeyEventFromCompositionSession, nullToUndefined } from '../utils';\nimport {\n TagData,\n findMentionTagForSelection,\n findNewSelectionIndexForMention,\n findStringsDiffIndexes,\n getDisplayNameForMentionSuggestion,\n getValidatedIndexInRange,\n htmlStringForMentionSuggestion,\n textToTagParser,\n updateHTML\n} from './mentionTagUtils';\nimport { inputButtonStyle, inputButtonTooltipStyle, iconWrapperStyle } from '../styles/InputBoxComponent.style';\n\nimport { Caret } from 'textarea-caret-ts';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { useTheme } from '../../theming';\n\nimport { MentionLookupOptions, _MentionPopover, Mention } from '../MentionPopover';\n\nimport { useDebouncedCallback } from 'use-debounce';\n\nconst DEFAULT_MENTION_TRIGGER = '@';\n\n/*\n Props for the TextFieldWithMention component.\n \n @private\n /\nexport interface TextFieldWithMentionProps {\n textFieldProps: ITextFieldProps;\n dataUiId?: string;\n textValue: string; // This could be plain text or HTML.\n onChange: (event?: FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string) => void;\n onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onEnterKeyDown?: () => void;\n textFieldRef?: React.RefObject<ITextField>;\n supportNewline?: boolean;\n mentionLookupOptions?: MentionLookupOptions;\n}\n\n/\n @private\n /\nexport const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Element => {\n const {\n textFieldProps,\n dataUiId,\n textValue,\n onChange,\n textFieldRef,\n onKeyDown,\n onEnterKeyDown,\n supportNewline,\n mentionLookupOptions\n } = props;\n const inputBoxRef = useRef<HTMLDivElement>(null);\n\n // Current suggestion list, provided by the callback\n const [mentionSuggestions, setMentionSuggestions] = useState<Mention[]>([]);\n\n // Current suggestion list, provided by the callback\n const [activeSuggestionIndex, setActiveSuggestionIndex] = useState<number \| undefined>(undefined);\n\n // Index of the current trigger character in the text field\n const [currentTriggerStartIndex, setCurrentTriggerStartIndex] = useState<number>(-1);\n\n const [inputTextValue, setInputTextValue] = useState<string>('');\n\n const [tagsValue, setTagsValue] = useState<TagData[]>([]);\n\n // Index of the previous selection start in the text field\n const [selectionStartValue, setSelectionStartValue] = useState<number \| undefined>();\n\n // Index of the previous selection end in the text field\n const [selectionEndValue, setSelectionEndValue] = useState<number \| undefined>();\n\n // Boolean value to check if onMouseDown event should be handled during select as selection range\n // for onMouseDown event is not updated yet and the selection range for mouse click/taps will be\n // updated in onSelect event if needed.\n const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = useState<boolean>(true);\n\n // Boolean flag to check if mouse/touch move event should be handled\n const [shouldHandleMoveEvent, setShouldHandleMoveEvent] = useState<boolean>(false);\n\n // Indexes of start of touch/mouse selection\n const [interactionStartSelection, setInteractionStartSelection] = useState<\n { start: number \| undefined; end: number \| undefined } \| undefined\n >();\n\n // Caret position in the text field\n const [caretPosition, setCaretPosition] = useState<Caret.Position \| undefined>(undefined);\n\n // Index of where the caret is in the text field\n const [caretIndex, setCaretIndex] = useState<number \| undefined>(undefined);\n\n const localeStrings = useLocale().strings;\n\n // Set mention suggestions\n const updateMentionSuggestions = useCallback(\n (suggestions: Mention[]) => {\n setMentionSuggestions(suggestions);\n },\n [setMentionSuggestions]\n );\n\n // Parse the text and get the plain text version to display in the input box\n useEffect(() => {\n const trigger = mentionLookupOptions?.trigger \|\| DEFAULT_MENTION_TRIGGER;\n const parsedHTMLData = textToTagParser(textValue, trigger);\n setInputTextValue(parsedHTMLData.plainText);\n setTagsValue(parsedHTMLData.tags);\n updateMentionSuggestions([]);\n }, [textValue, mentionLookupOptions?.trigger, updateMentionSuggestions]);\n\n useEffect(() => {\n // effect for caret index update\n if (caretIndex === undefined \|\| textFieldRef === undefined \|\| textFieldRef?.current === undefined) {\n return;\n }\n // get validated caret index between 0 and inputTextValue.length otherwise caret will be set to incorrect index\n const updatedCaretIndex = getValidatedIndexInRange({\n min: 0,\n max: inputTextValue.length,\n currentValue: caretIndex\n });\n textFieldRef?.current?.setSelectionRange(updatedCaretIndex, updatedCaretIndex);\n setSelectionStartValue(updatedCaretIndex);\n setSelectionEndValue(updatedCaretIndex);\n }, [caretIndex, inputTextValue.length, textFieldRef, setSelectionStartValue, setSelectionEndValue]);\n\n const onSuggestionSelected = useCallback(\n (suggestion: Mention) => {\n let selectionEnd = textFieldRef?.current?.selectionEnd \|\| -1;\n if (selectionEnd < 0) {\n selectionEnd = 0;\n } else if (selectionEnd > inputTextValue.length) {\n selectionEnd = inputTextValue.length;\n }\n const oldPlainText = inputTextValue;\n const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);\n\n // update plain text with the mention html text\n const triggerText = mentionLookupOptions?.trigger ?? DEFAULT_MENTION_TRIGGER;\n // update html text with updated plain text\n const updatedContent = updateHTML({\n htmlText: textValue,\n oldPlainText,\n tags: tagsValue,\n startIndex: currentTriggerStartIndex,\n oldPlainTextEndIndex: selectionEnd,\n change: mention,\n mentionTrigger: triggerText\n });\n const displayName = getDisplayNameForMentionSuggestion(suggestion, localeStrings);\n const newCaretIndex = currentTriggerStartIndex + displayName.length + triggerText.length;\n // move the caret in the text field to the end of the mention plain text\n setCaretIndex(newCaretIndex);\n setSelectionEndValue(newCaretIndex);\n setSelectionStartValue(newCaretIndex);\n setCurrentTriggerStartIndex(-1);\n updateMentionSuggestions([]);\n // set focus back to text field\n textFieldRef?.current?.focus();\n setActiveSuggestionIndex(undefined);\n onChange && onChange(undefined, updatedContent.updatedHTML);\n },\n [\n textFieldRef,\n inputTextValue,\n currentTriggerStartIndex,\n mentionLookupOptions?.trigger,\n onChange,\n textValue,\n tagsValue,\n updateMentionSuggestions,\n localeStrings\n ]\n );\n\n const onTextFieldKeyDown = useCallback(\n (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n // caretIndex should be set to undefined when the user is typing\n setCaretIndex(undefined);\n // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.\n // it shouldn't be updated in onMouseUp\n // as onMouseUp can be triggered before or after onSelect event\n // because its order depends on mouse events not selection.\n setShouldHandleOnMouseDownDuringSelect(false);\n\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n\n if (mentionSuggestions.length > 0) {\n if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n const newActiveIndex =\n activeSuggestionIndex === undefined\n ? mentionSuggestions.length - 1\n : Math.max(activeSuggestionIndex - 1, 0);\n setActiveSuggestionIndex(newActiveIndex);\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n const newActiveIndex =\n activeSuggestionIndex === undefined\n ? 0\n : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);\n setActiveSuggestionIndex(newActiveIndex);\n } else if (ev.key === 'Escape') {\n updateMentionSuggestions([]);\n }\n }\n if (ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline)) {\n ev.preventDefault();\n\n // If we are looking up a mention, select the focused suggestion\n if (mentionSuggestions.length > 0 && activeSuggestionIndex !== undefined) {\n const selectedMention = mentionSuggestions[activeSuggestionIndex];\n if (selectedMention) {\n onSuggestionSelected(selectedMention);\n return;\n }\n }\n\n onEnterKeyDown && onEnterKeyDown();\n }\n onKeyDown && onKeyDown(ev);\n },\n [\n onEnterKeyDown,\n onKeyDown,\n supportNewline,\n mentionSuggestions,\n activeSuggestionIndex,\n onSuggestionSelected,\n updateMentionSuggestions\n ]\n );\n\n const debouncedQueryUpdate = useDebouncedCallback(async (query: string) => {\n const suggestions = (await mentionLookupOptions?.onQueryUpdated(query)) ?? [];\n if (suggestions.length === 0) {\n setActiveSuggestionIndex(undefined);\n } else if (activeSuggestionIndex === undefined) {\n // Set the active to the first, if it's not already set\n setActiveSuggestionIndex(0);\n }\n updateMentionSuggestions(suggestions);\n }, 500);\n\n // Update selections index in mention to navigate by words\n const updateSelectionIndexesWithMentionIfNeeded = useCallback(\n ({\n event,\n inputTextValue,\n selectionEndValue,\n selectionStartValue,\n tagsValue\n }: {\n event: FormEvent<HTMLInputElement \| HTMLTextAreaElement>;\n inputTextValue: string;\n selectionEndValue?: number;\n selectionStartValue?: number;\n tagsValue: TagData[];\n }): void => {\n let updatedStartIndex = event.currentTarget.selectionStart;\n let updatedEndIndex = event.currentTarget.selectionEnd;\n if (\n event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&\n event.currentTarget.selectionStart !== null &&\n event.currentTarget.selectionStart !== -1\n ) {\n // just a caret movement/usual typing or deleting\n const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);\n // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n if (\n mentionTag !== undefined &&\n mentionTag.plainTextBeginIndex !== undefined &&\n event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&\n event.currentTarget.selectionStart < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n ) {\n // get updated selection index\n const newSelectionIndex = findNewSelectionIndexForMention({\n tag: mentionTag,\n textValue: inputTextValue,\n currentSelectionIndex: event.currentTarget.selectionStart,\n previousSelectionIndex: selectionStartValue ?? inputTextValue.length\n });\n updatedStartIndex = newSelectionIndex;\n updatedEndIndex = newSelectionIndex;\n }\n } else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {\n // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click\n if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {\n // the selection start is changed\n const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);\n // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n if (\n mentionTag !== undefined &&\n mentionTag.plainTextBeginIndex !== undefined &&\n event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&\n event.currentTarget.selectionStart < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n ) {\n updatedStartIndex = findNewSelectionIndexForMention({\n tag: mentionTag,\n textValue: inputTextValue,\n currentSelectionIndex: event.currentTarget.selectionStart,\n previousSelectionIndex: selectionStartValue ?? inputTextValue.length\n });\n }\n }\n if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {\n // the selection end is changed\n const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);\n // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n if (\n mentionTag !== undefined &&\n mentionTag.plainTextBeginIndex !== undefined &&\n event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex &&\n event.currentTarget.selectionEnd < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n ) {\n updatedEndIndex = findNewSelectionIndexForMention({\n tag: mentionTag,\n textValue: inputTextValue,\n currentSelectionIndex: event.currentTarget.selectionEnd,\n previousSelectionIndex: selectionEndValue ?? inputTextValue.length\n });\n }\n }\n }\n // e.currentTarget.selectionDirection should be set to handle shift + arrow keys\n if (event.currentTarget.selectionDirection === null) {\n event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);\n } else {\n event.currentTarget.setSelectionRange(\n updatedStartIndex,\n updatedEndIndex,\n event.currentTarget.selectionDirection\n );\n }\n setSelectionStartValue(nullToUndefined(updatedStartIndex));\n setSelectionEndValue(nullToUndefined(updatedEndIndex));\n },\n [setSelectionStartValue, setSelectionEndValue]\n );\n\n const handleOnSelect = useCallback(\n ({\n event,\n inputTextValue,\n tags,\n shouldHandleOnMouseDownDuringSelect,\n selectionStartValue,\n selectionEndValue,\n interactionStartSelection\n }: {\n event: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>;\n inputTextValue: string;\n tags: TagData[];\n shouldHandleOnMouseDownDuringSelect: boolean;\n selectionStartValue?: number;\n selectionEndValue?: number;\n interactionStartSelection?: { start: number \| undefined; end: number \| undefined };\n }): void => {\n if (shouldHandleOnMouseDownDuringSelect) {\n if (\n interactionStartSelection !== undefined &&\n (interactionStartSelection.start !== event.currentTarget.selectionStart \|\|\n interactionStartSelection.end !== event.currentTarget.selectionEnd)\n ) {\n // selection was changed by mouse\n // for mouse selection only, it's possible to start selection in the middle of a word in a mention\n // because of this when event.currentTarget.selectionStart === mouseMoveStartPoint.start\n // selectionStartValue for updateSelectionIndexesWithMentionIfNeeded should be set\n // to the end of the input to mimic selection from right to left for the left selection index\n const updatedSelectionStartValue =\n event.currentTarget.selectionStart === interactionStartSelection.start\n ? inputTextValue.length\n : interactionStartSelection.start;\n // selectionStart is always less than selectionEnd so sometimes selectionEnd is user's start of the selection\n // so when event.currentTarget.selectionEnd === mouseMoveStartPoint.end\n // selectionEndValue for updateSelectionIndexesWithMentionIfNeeded should be set\n // to the beginning of the input to mimic selection from left to right for the right selection index\n const updatedSelectionEndValue =\n event.currentTarget.selectionEnd === interactionStartSelection.end ? 0 : interactionStartSelection.end;\n updateSelectionIndexesWithMentionIfNeeded({\n event,\n inputTextValue,\n selectionStartValue: updatedSelectionStartValue,\n selectionEndValue: updatedSelectionEndValue,\n tagsValue: tags\n });\n setInteractionStartSelection(undefined);\n setShouldHandleOnMouseDownDuringSelect(false);\n } else if (event.currentTarget.selectionStart !== null) {\n // on select was triggered by mouse down/up with no movement\n const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);\n if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {\n // handle mention click by selecting the whole mention\n // if the selection is not on the bounds of the mention\n const mentionEndIndex = mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex;\n // disable selection for clicks on mention bounds\n if (\n event.currentTarget.selectionStart !== event.currentTarget.selectionEnd \|\|\n (event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex &&\n event.currentTarget.selectionStart !== mentionEndIndex)\n ) {\n if (event.currentTarget.selectionDirection === null) {\n event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, mentionEndIndex);\n } else {\n event.currentTarget.setSelectionRange(\n mentionTag.plainTextBeginIndex,\n mentionEndIndex,\n event.currentTarget.selectionDirection\n );\n }\n setSelectionStartValue(mentionTag.plainTextBeginIndex);\n setSelectionEndValue(mentionEndIndex);\n } else {\n // bounds of the mention were selected\n setSelectionStartValue(event.currentTarget.selectionStart);\n setSelectionEndValue(event.currentTarget.selectionEnd);\n }\n } else {\n // not a mention tag\n setSelectionStartValue(event.currentTarget.selectionStart);\n setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));\n }\n setInteractionStartSelection(undefined);\n setShouldHandleOnMouseDownDuringSelect(false);\n }\n } else {\n // selection was changed by keyboard\n updateSelectionIndexesWithMentionIfNeeded({\n event,\n inputTextValue,\n selectionStartValue,\n selectionEndValue,\n tagsValue: tags\n });\n }\n },\n [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]\n );\n\n type HandleOnChangeProps = {\n currentSelectionEnd?: number;\n currentSelectionStart?: number;\n currentTriggerStartIndex: number;\n event: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>;\n htmlTextValue: string;\n inputTextValue: string;\n previousSelectionEnd?: number;\n previousSelectionStart?: number;\n tagsValue: TagData[];\n updatedValue?: string;\n };\n\n const handleOnChange = useCallback(\n async ({\n currentSelectionEnd,\n currentSelectionStart,\n currentTriggerStartIndex,\n event,\n htmlTextValue,\n inputTextValue,\n previousSelectionEnd,\n previousSelectionStart,\n tagsValue,\n updatedValue\n }: HandleOnChangeProps): Promise<void> => {\n debouncedQueryUpdate.cancel();\n if (event.currentTarget === null) {\n return;\n }\n // handle backspace change\n // onSelect is not called for backspace as selection is not changed and local caret index is outdated\n setCaretIndex(undefined);\n const newValue = updatedValue ?? '';\n const triggerText = mentionLookupOptions?.trigger ?? DEFAULT_MENTION_TRIGGER;\n\n const newTextLength = newValue.length;\n // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly\n const currentSelectionEndValue = getValidatedIndexInRange({\n min: 0,\n max: newTextLength,\n currentValue: currentSelectionEnd\n });\n const currentSelectionStartValue = getValidatedIndexInRange({\n min: 0,\n max: newTextLength,\n currentValue: currentSelectionStart\n });\n const previousSelectionStartValue = getValidatedIndexInRange({\n min: 0,\n max: inputTextValue.length,\n currentValue: previousSelectionStart\n });\n const previousSelectionEndValue = getValidatedIndexInRange({\n min: 0,\n max: inputTextValue.length,\n currentValue: previousSelectionEnd\n });\n\n // If we are enabled for lookups,\n if (mentionLookupOptions !== undefined) {\n // Look at the range of the change for a trigger character\n const triggerPriorIndex = newValue.lastIndexOf(triggerText, currentSelectionEndValue - 1);\n // Update the caret position, used for positioning the suggestions popover\n const textField = event.currentTarget;\n const relativePosition = Caret.getRelativePosition(textField);\n const adjustOffset = Math.max(0, textField.scrollHeight - textField.clientHeight);\n relativePosition.top -= adjustOffset;\n setCaretPosition(relativePosition);\n\n if (triggerPriorIndex !== undefined) {\n // trigger is found\n const isSpaceBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex) === ' ';\n const wordAtSelection = newValue.substring(triggerPriorIndex, currentSelectionEndValue);\n let tagIndex = currentTriggerStartIndex;\n if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0) {\n //no space before the trigger <- continuation of the previous word\n tagIndex = -1;\n setCurrentTriggerStartIndex(tagIndex);\n } else if (wordAtSelection === triggerText) {\n // start of the mention\n tagIndex = currentSelectionEndValue - triggerText.length;\n if (tagIndex < 0) {\n tagIndex = 0;\n }\n setCurrentTriggerStartIndex(tagIndex);\n }\n if (tagIndex === -1) {\n updateMentionSuggestions([]);\n } else {\n // In the middle of a @mention lookup\n if (tagIndex > -1) {\n const query = wordAtSelection.substring(triggerText.length, wordAtSelection.length);\n if (query !== undefined) {\n await debouncedQueryUpdate(query);\n }\n }\n }\n }\n }\n\n const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({\n oldText: inputTextValue,\n newText: newValue,\n previousSelectionStart: previousSelectionStartValue,\n previousSelectionEnd: previousSelectionEndValue,\n currentSelectionStart: currentSelectionStartValue,\n currentSelectionEnd: currentSelectionEndValue\n });\n\n const change = newValue.substring(changeStart, newChangeEnd);\n const updatedContent = updateHTML({\n htmlText: htmlTextValue,\n oldPlainText: inputTextValue,\n tags: tagsValue,\n startIndex: changeStart,\n oldPlainTextEndIndex: oldChangeEnd,\n change,\n mentionTrigger: triggerText\n });\n\n // update caret index if needed\n if (updatedContent.updatedSelectionIndex !== undefined) {\n setCaretIndex(updatedContent.updatedSelectionIndex);\n setSelectionEndValue(updatedContent.updatedSelectionIndex);\n setSelectionStartValue(updatedContent.updatedSelectionIndex);\n }\n\n onChange && onChange(event, updatedContent.updatedHTML);\n },\n [debouncedQueryUpdate, mentionLookupOptions, onChange, updateMentionSuggestions]\n );\n\n // Adjust the selection range based on a mouse / touch interaction\n const handleOnMove = useCallback(\n ({\n event,\n selectionStartValue,\n selectionEndValue,\n interactionStartSelection,\n shouldHandleMoveEvent\n }: {\n event: React.UIEvent<HTMLInputElement \| HTMLTextAreaElement>;\n selectionStartValue: number \| undefined;\n selectionEndValue: number \| undefined;\n interactionStartSelection: { start: number \| undefined; end: number \| undefined } \| undefined;\n shouldHandleMoveEvent: boolean;\n }) => {\n if (\n shouldHandleMoveEvent &&\n interactionStartSelection === undefined &&\n (event.currentTarget.selectionStart !== selectionStartValue \|\|\n event.currentTarget.selectionEnd !== selectionEndValue)\n ) {\n setInteractionStartSelection({\n start: nullToUndefined(event.currentTarget.selectionStart),\n end: nullToUndefined(event.currentTarget.selectionEnd)\n });\n }\n },\n []\n );\n\n // Adjust the selection range based on a mouse / touch interaction\n const handleOnInteractionStarted = useCallback(() => {\n setInteractionStartSelection(undefined);\n setShouldHandleMoveEvent(true);\n setShouldHandleOnMouseDownDuringSelect(true);\n }, []);\n\n // Adjust the selection range based on a mouse / touch interaction\n const handleOnInteractionCompleted = useCallback(() => {\n setShouldHandleMoveEvent(false);\n }, []);\n\n const announcerText = useMemo(() => {\n if (activeSuggestionIndex === undefined) {\n return undefined;\n }\n const currentMention = mentionSuggestions[activeSuggestionIndex ?? 0];\n return currentMention?.displayText.length > 0\n ? currentMention?.displayText\n : localeStrings.participantItem.displayNamePlaceholder;\n }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);\n\n return (\n <>\n {mentionSuggestions.length > 0 && (\n <_MentionPopover\n suggestions={mentionSuggestions}\n activeSuggestionIndex={activeSuggestionIndex}\n target={inputBoxRef}\n targetPositionOffset={caretPosition}\n onRenderSuggestionItem={mentionLookupOptions?.onRenderSuggestionItem}\n onSuggestionSelected={onSuggestionSelected}\n onDismiss={() => {\n updateMentionSuggestions([]);\n }}\n />\n )}\n {announcerText !== undefined && <Announcer announcementString={announcerText} ariaLive={'polite'} />}\n <TextField\n {...textFieldProps}\n data-ui-id={dataUiId}\n value={inputTextValue}\n onChange={(e, newValue) => {\n // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html\n // Prevents React from resetting event's properties\n e.persist();\n setInputTextValue(newValue ?? '');\n handleOnChange({\n event: e,\n tagsValue,\n htmlTextValue: textValue,\n inputTextValue,\n currentTriggerStartIndex,\n previousSelectionStart: nullToUndefined(selectionStartValue),\n previousSelectionEnd: nullToUndefined(selectionEndValue),\n currentSelectionStart: nullToUndefined(e.currentTarget.selectionStart),\n currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),\n updatedValue: newValue\n });\n }}\n onSelect={(e) => {\n handleOnSelect({\n event: e,\n inputTextValue,\n shouldHandleOnMouseDownDuringSelect,\n selectionEndValue,\n selectionStartValue,\n tags: tagsValue,\n interactionStartSelection\n });\n }}\n onMouseDown={() => {\n // as events order is onMouseDown -> onMouseMove -> onMouseUp -> onSelect -> onClick\n // onClick and onMouseDown can't handle clicking on mention event because\n // onMouseDown doesn't have correct selectionRange yet and\n // onClick already has wrong range as it's called after onSelect that updates the selection range\n // so we need to handle onMouseDown to prevent onSelect default behavior\n handleOnInteractionStarted();\n }}\n onMouseMove={(event) => {\n handleOnMove({\n event,\n selectionStartValue,\n selectionEndValue,\n interactionStartSelection,\n shouldHandleMoveEvent\n });\n }}\n onMouseUp={() => {\n handleOnInteractionCompleted();\n }}\n onTouchStart={() => {\n handleOnInteractionStarted();\n }}\n onTouchMove={(event) => {\n handleOnMove({\n event,\n selectionStartValue,\n selectionEndValue,\n interactionStartSelection,\n shouldHandleMoveEvent\n });\n }}\n onTouchEnd={() => {\n handleOnInteractionCompleted;\n }}\n onBlur={() => {\n // setup all flags to default values when text field loses focus\n setShouldHandleOnMouseDownDuringSelect(false);\n setCaretIndex(undefined);\n setSelectionStartValue(undefined);\n setSelectionEndValue(undefined);\n }}\n onKeyDown={onTextFieldKeyDown}\n elementRef={inputBoxRef}\n />\n </>\n );\n};\n\n/\n Props for displaying a send button besides the text input area.\n \n @private\n /\nexport type InputBoxButtonProps = {\n onRenderIcon: (isHover: boolean) => JSX.Element;\n onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n className?: string;\n id?: string;\n ariaLabel?: string;\n tooltipContent?: string;\n};\n\n/\n @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n const [isHover, setIsHover] = useState(false);\n const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return (\n <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n <IconButton\n className={mergedButtonStyle}\n ariaLabel={ariaLabel}\n onClick={onClick}\n id={id}\n onMouseEnter={() => {\n setIsHover(true);\n }}\n onMouseLeave={() => {\n setIsHover(false);\n }}\n // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n />\n </TooltipHost>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.d.ts CHANGED Viewed

@@ -54,7 +54,6 @@ export declare const findNewSelectionIndexForMention: (props: NewSelectionIndexF
 declare type UpdateHTMLProps = {
     htmlText: string;
     oldPlainText: string;
-    newPlainText: string;
     tags: TagData[];
     startIndex: number;
     oldPlainTextEndIndex: number;

package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js CHANGED Viewed

@@ -204,10 +204,14 @@ const getTagClosingTagInfo = (tag) => {
  * @returns Updated HTML and selection index if the selection index should be set.
  */
 export const updateHTML = (props) => {
-    const { htmlText, oldPlainText, newPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger } = props;
+    const { htmlText, oldPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger } = props;
     if (tags.length === 0 || (startIndex === 0 && oldPlainTextEndIndex === oldPlainText.length - 1)) {
         // no tags added yet or the whole text is changed
-        return { updatedHTML: newPlainText, updatedSelectionIndex: undefined };
+        const changeWithSkippedChars = escapeHTMLChars(change);
+        const updatedHTML = escapeHTMLChars(oldPlainText.substring(0, startIndex)) +
+            changeWithSkippedChars +
+            escapeHTMLChars(oldPlainText.substring(oldPlainTextEndIndex));
+        return { updatedHTML, updatedSelectionIndex: undefined };
     }
     let result = '';
     let lastProcessedHTMLIndex = 0;
@@ -217,7 +221,7 @@ export const updateHTML = (props) => {
     // e.g.: change is after and partially in tag => change will be added after the tag and outdated text in the tag will be removed
     // e.g.: change is on the beginning of the tag => change will be added before the tag
     // e.g.: change is on the end of the tag => change will be added to the tag if it's not mention and after the tag if it's mention
-    let processedChange = change;
+    let processedChange = escapeHTMLChars(change);
     // end tag plain text index of the last processed tag
     let lastProcessedPlainTextTagEndIndex = 0;
     // as some tags/text can be removed fully, selection should be updated correctly
@@ -239,13 +243,13 @@ export const updateHTML = (props) => {
         if (startIndex <= tag.plainTextBeginIndex) {
             // change start is before the open tag
             // Math.max(lastProcessedPlainTextTagEndIndex, startIndex) is used as startIndex may not be in [[previous tag].plainTextEndIndex - tag.plainTextBeginIndex] range
-            const startChangeDiff = tag.plainTextBeginIndex - Math.max(lastProcessedPlainTextTagEndIndex, startIndex);
+            const startChangeDiff = getChangeDiff(oldPlainText, Math.max(lastProcessedPlainTextTagEndIndex, startIndex), tag.plainTextBeginIndex);
             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex - startChangeDiff) + processedChange;
             processedChange = '';
             if (oldPlainTextEndIndex <= tag.plainTextBeginIndex) {
                 // the whole change is before tag start
                 // mentionTag length can be ignored here as the change is before the tag
-                const endChangeDiff = tag.plainTextBeginIndex - oldPlainTextEndIndex;
+                const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, tag.plainTextBeginIndex);
                 lastProcessedHTMLIndex = tag.openTagIndex - endChangeDiff;
                 // the change is handled; exit
                 break;
@@ -275,13 +279,13 @@ export const updateHTML = (props) => {
                         if (startIndex !== tag.plainTextBeginIndex && startIndex !== closingTagInfo.plainTextEndIndex) {
                             // mention tag should be deleted when user tries to edit it in the middle
                             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-                            changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                            changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
                         }
                         else if (startIndex === tag.plainTextBeginIndex) {
                             // non empty change at the beginning of the mention tag to be added before the mention tag
                             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-                            changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                            changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = tag.openTagIndex;
                         }
                         else if (startIndex === closingTagInfo.plainTextEndIndex) {
@@ -289,12 +293,13 @@ export const updateHTML = (props) => {
                             result +=
                                 htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
                                     processedChange;
-                            changeNewEndIndex = closingTagInfo.plainTextEndIndex + processedChange.length;
+                            changeNewEndIndex = closingTagInfo.plainTextEndIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
                         }
                         processedChange = '';
                     }
                     else {
+                        // When change is empty, it means that this change is a deletion
                         const updateMentionTagResult = handleMentionTagUpdate({
                             htmlText,
                             oldPlainText,
@@ -322,7 +327,6 @@ export const updateHTML = (props) => {
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
                         oldPlainText,
-                        newPlainText,
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
@@ -334,13 +338,13 @@ export const updateHTML = (props) => {
                 }
                 else {
                     // no subtags
-                    const startChangeDiff = startIndex - tag.plainTextBeginIndex;
+                    const startChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, startIndex);
                     result +=
                         htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff) +
                             processedChange;
                     processedChange = '';
                     if (oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
-                        const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex;
+                        const endChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, oldPlainTextEndIndex);
                         lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
                     }
                     else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
@@ -379,7 +383,6 @@ export const updateHTML = (props) => {
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
                         oldPlainText,
-                        newPlainText,
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
@@ -439,7 +442,6 @@ export const updateHTML = (props) => {
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
                         oldPlainText,
-                        newPlainText,
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
@@ -455,7 +457,7 @@ export const updateHTML = (props) => {
                         htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length) + processedChange;
                     processedChange = '';
                     // oldPlainTextEndIndex already includes mentionTag length
-                    const endChangeDiff = closingTagInfo.plainTextEndIndex - oldPlainTextEndIndex;
+                    const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, closingTagInfo.plainTextEndIndex);
                     // as change may be before the end of the tag, we need to add the rest of the tag
                     lastProcessedHTMLIndex = closingTagInfo.closeTagIdx - endChangeDiff;
                 }
@@ -467,9 +469,9 @@ export const updateHTML = (props) => {
         if (i === tags.length - 1 && oldPlainTextEndIndex >= closingTagInfo.plainTextEndIndex) {
             // the last tag should handle the end of the change if needed
             // oldPlainTextEndIndex already includes mentionTag length
-            const endChangeDiff = oldPlainTextEndIndex - closingTagInfo.plainTextEndIndex;
+            const endChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, oldPlainTextEndIndex);
             if (startIndex >= closingTagInfo.plainTextEndIndex) {
-                const startChangeDiff = startIndex - closingTagInfo.plainTextEndIndex;
+                const startChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, startIndex);
                 result +=
                     htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + startChangeDiff) + processedChange;
             }
@@ -619,17 +621,18 @@ export const textToTagParser = (text, trigger) => {
         if (!foundHtmlTag) {
             if (parseIndex !== 0) {
                 // Add the remaining text to the plain text representation
-                plainTextRepresentation += text.substring(parseIndex);
+                const newText = text.substring(parseIndex);
+                plainTextRepresentation += unEscapeHtmlCharacters(newText);
             }
             else {
-                plainTextRepresentation = text;
+                plainTextRepresentation = unEscapeHtmlCharacters(text);
             }
             break;
         }
         if (foundHtmlTag.type === 'open' || foundHtmlTag.type === 'self-closing') {
             const nextTag = parseOpenTag(foundHtmlTag.content, foundHtmlTag.startIdx);
             // Add the plain text between the last tag and this one found
-            plainTextRepresentation += text.substring(parseIndex, foundHtmlTag.startIdx);
+            plainTextRepresentation += unEscapeHtmlCharacters(text.substring(parseIndex, foundHtmlTag.startIdx));
             nextTag.plainTextBeginIndex = plainTextRepresentation.length;
             if (foundHtmlTag.type === 'open') {
                 tagParseStack.push(nextTag);
@@ -655,14 +658,14 @@ export const textToTagParser = (text, trigger) => {
                             plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);
                 }
                 if (!currentOpenTag.subTags) {
-                    plainTextRepresentation += currentOpenTag.content;
+                    plainTextRepresentation += unEscapeHtmlCharacters(currentOpenTag.content);
                 }
                 else if (currentOpenTag.subTags.length > 0) {
                     // Add text after the last tag
                     const lastSubTag = currentOpenTag.subTags[currentOpenTag.subTags.length - 1];
                     const startOfRemainingText = ((_a = lastSubTag.closingTagIndex) !== null && _a !== void 0 ? _a : lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;
                     const trailingText = currentOpenTag.content.substring(startOfRemainingText);
-                    plainTextRepresentation += trailingText;
+                    plainTextRepresentation += unEscapeHtmlCharacters(trailingText);
                 }
                 currentOpenTag.plainTextEndIndex = plainTextRepresentation.length;
                 addTag(currentOpenTag, tagParseStack, tags);
@@ -750,4 +753,30 @@ const addTag = (tag, parseStack, tags) => {
         }
     }
 };
+// We should revisit this in the future when we support other text such as rich text editing.
+const escapeHTMLChars = (text) => {
+    const mentionRegex = new RegExp(`<${MSFT_MENTION_TAG}(.*?)>(.*?)</${MSFT_MENTION_TAG}>`, 'i');
+    if (!text.match(mentionRegex)) {
+        return text
+            .replace(/&(?![A-Z]+;)/gi, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    return text;
+};
+const getChangeDiff = (plainText, startIndex, endIndex) => {
+    return endIndex - startIndex + getLengthDiffForEscapedHtmlChars(plainText, startIndex, endIndex);
+};
+const getLengthDiffForEscapedHtmlChars = (text, startIndex, endIndex) => {
+    var _a, _b;
+    const subText = text.substring(startIndex, endIndex);
+    const escapedAngleBracketCount = ((_a = subText.match(/(<)|(>)/g)) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    let escapedCharLength = escapedAngleBracketCount * ('&lt;'.length - '<'.length);
+    const escapedAmpersandCount = ((_b = subText.match(/&/g)) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    escapedCharLength += escapedAmpersandCount * ('&amp;'.length - '&'.length);
+    return escapedCharLength;
+};
+const unEscapeHtmlCharacters = (text) => {
+    return text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+};
 //# sourceMappingURL=mentionTagUtils.js.map