@azure/communication-react 1.5.1-alpha-202306060014 → 1.5.1-alpha-202306070014

package/dist/dist-cjs/communication-react/index.js

@@ -167,7 +167,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202306060014';
+var telemetryVersion = '1.5.1-alpha-202306070014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5808,32 +5808,6 @@ const DEFAULT_COMPONENT_ICONS = {
     ChangeSpokenLanguageIcon: React__default['default'].createElement(reactIcons.PersonVoice20Regular, null)
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @internal
- * Announcer component to maker aria announcements on actions
- */
-const Announcer$1 = (props) => {
-    const { announcementString, ariaLive } = props;
-    return React__default['default'].createElement(react.Stack, { "aria-label": announcementString, "aria-live": ariaLive, styles: announcerStyles });
-};
-/**
- * Styles to hide the announcer from view but still existing on the DOM tree it so that narration can happen.
- */
-const announcerStyles = {
-    root: {
-        position: 'absolute',
-        width: '1px',
-        height: '1px',
-        padding: 0,
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(0,0,0,0)',
-        whiteSpace: 'nowrap',
-        border: 0
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -5966,1605 +5940,1604 @@ const getPerceptualBrightnessOfHexColor = (hexColor) => {
 
 // Copyright (c) Microsoft Corporation.
 /**
- * @private
- * z-index to ensure that chat container has lower z-index than mention popover
- */
-const CHAT_CONTAINER_ZINDEX$1 = 1;
-/**
- * @private
- */
-const mentionPopoverContainerStyle = (theme) => react.mergeStyles({
-    boxShadow: theme.effects.elevation16,
-    background: theme.semanticColors.bodyBackground,
-    overflow: 'visible',
-    // zIndex to set the mentionPopover above the chat container
-    zIndex: CHAT_CONTAINER_ZINDEX$1 + 1
-});
-/**
- * @private
+ * @internal
+ * Announcer component to maker aria announcements on actions
  */
-const headerStyleThemed = (theme) => {
-    return {
-        root: {
-            color: theme.palette.neutralSecondary,
-            margin: '0.5rem 1rem 0.25rem',
-            fontSize: theme.fonts.smallPlus.fontSize
-        }
-    };
+const Announcer$1 = (props) => {
+    const { announcementString, ariaLive } = props;
+    return React__default['default'].createElement(react.Stack, { "aria-label": announcementString, "aria-live": ariaLive, styles: announcerStyles });
 };
 /**
- * @private
+ * Styles to hide the announcer from view but still existing on the DOM tree it so that narration can happen.
  */
-react.mergeStyles({
-    height: '100%',
-    overflowY: 'visible',
-    overflowX: 'hidden'
-});
+const announcerStyles = {
+    root: {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        padding: 0,
+        margin: '-1px',
+        overflow: 'hidden',
+        clip: 'rect(0,0,0,0)',
+        whiteSpace: 'nowrap',
+        border: 0
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+const MSFT_MENTION_TAG = 'msft-mention';
 /**
+ * Get validated value for index between min and max values. If currentValue is not defined, -1 will be used instead.
+ *
  * @private
+ * @param props - Props for finding a valid index in range.
+ * @returns Valid index in the range.
  */
-const suggestionListStyle = react.mergeStyles({
-    padding: '0.25rem 0rem 0',
-    overflow: 'visible'
-});
+const getValidatedIndexInRange = (props) => {
+    const { min, max, currentValue } = props;
+    let updatedValue = currentValue !== null && currentValue !== void 0 ? currentValue : -1;
+    updatedValue = Math.max(min, updatedValue);
+    updatedValue = Math.min(updatedValue, max);
+    return updatedValue;
+};
 /**
+ * Find mention tag for selection if exists.
+ *
  * @private
+ * @param tags - Existing list of tags.
+ * @param selection - Selection index.
+ * @returns Mention tag if exists, otherwise undefined.
  */
-const suggestionItemWrapperStyle = (theme) => {
-    return react.mergeStyles({
-        margin: '0.05rem 0.1rem',
-        '&:focus-visible': {
-            outline: `${theme.palette.black} solid 0.1rem`
+const findMentionTagForSelection = (tags, selection) => {
+    let mentionTag = undefined;
+    tags.every((tag) => {
+        const closingTagInfo = getTagClosingTagInfo(tag);
+        if (tag.plainTextBeginIndex !== undefined && tag.plainTextBeginIndex > selection) {
+            // no need to check further as the selection is before the tag
+            return false;
+        }
+        else if (tag.plainTextBeginIndex !== undefined &&
+            tag.plainTextBeginIndex <= selection &&
+            selection <= closingTagInfo.plainTextEndIndex) {
+            // no need to check if tag doesn't contain selection
+            if (tag.subTags !== undefined && tag.subTags.length !== 0) {
+                const selectedTag = findMentionTagForSelection(tag.subTags, selection);
+                if (selectedTag !== undefined) {
+                    mentionTag = selectedTag;
+                    return false;
+                }
+            }
+            else if (tag.tagType === MSFT_MENTION_TAG) {
+                mentionTag = tag;
+                return false;
+            }
         }
+        return true;
     });
+    return mentionTag;
 };
 /**
+ * Get the indices of the word for the selection.
  * @private
+ *
  */
-const suggestionItemStackStyle = (theme, isSuggestionHovered, activeBorder) => {
-    return react.mergeStyles({
-        width: '10rem',
-        alignItems: 'center',
-        height: '36px',
-        padding: '0 0.75rem',
-        background: isSuggestionHovered ? theme.palette.neutralLight : theme.palette.white,
-        border: activeBorder ? `0.0625rem solid ${theme.palette.neutralSecondary}` : 'none'
-    });
+const rangeOfWordInSelection = ({ textInput, selectionStart, selectionEnd, tag }) => {
+    var _a;
+    if (tag.plainTextBeginIndex === undefined) {
+        return { start: selectionStart, end: selectionEnd === undefined ? selectionStart : selectionEnd };
+    }
+    // Look at start word index and optionally end word index.
+    // Select combination of the two and return the range.
+    let start = selectionStart;
+    let end = selectionEnd === undefined ? selectionStart : selectionEnd;
+    const firstWordStartIndex = textInput.lastIndexOf(' ', selectionStart);
+    if (firstWordStartIndex === tag.plainTextBeginIndex) {
+        start = firstWordStartIndex;
+    }
+    else {
+        start = Math.max(firstWordStartIndex + 1, tag.plainTextBeginIndex);
+    }
+    const firstWordEndIndex = textInput.indexOf(' ', selectionStart);
+    end = Math.max(firstWordEndIndex + 1, (_a = tag.plainTextEndIndex) !== null && _a !== void 0 ? _a : firstWordEndIndex + 1);
+    if (selectionEnd !== undefined && tag.plainTextEndIndex !== undefined) {
+        const lastWordEndIndex = textInput.indexOf(' ', selectionEnd);
+        end = Math.max(lastWordEndIndex > -1 ? lastWordEndIndex : tag.plainTextEndIndex, selectionEnd);
+    }
+    return { start, end };
 };
-
-// Copyright (c) Microsoft Corporation.
 /**
- * Component to render a pop-up of mention suggestions.
+ * Find a new the selection index.
  *
- * @internal
+ * @private
+ * @param props - Props for finding new selection index for mention.
+ * @returns New selection index if it is inside of a mention tag, otherwise the current selection.
  */
-const _MentionPopover = (props) => {
-    const { suggestions, activeSuggestionIndex, title, target, targetPositionOffset, onRenderSuggestionItem, onSuggestionSelected, onDismiss, location } = props;
-    const theme = react.useTheme();
-    /* @conditional-compile-remove(mention) */
-    const ids = useIdentifiers();
-    const localeStrings = useLocale$1().strings;
-    const popoverRef = React.useRef();
-    const [position, setPosition] = React.useState({ left: 0 });
-    const [hoveredSuggestion, setHoveredSuggestion] = React.useState(undefined);
-    const [changedSelection, setChangedSelection] = React.useState(undefined); // Selection UI as per teams
-    const dismissPopoverWhenClickingOutside = React.useCallback((e) => {
-        const target = e.target;
-        if (popoverRef.current && !popoverRef.current.contains(target)) {
-            onDismiss && onDismiss();
-        }
-    }, [onDismiss]);
-    React.useEffect(() => {
-        if (changedSelection === undefined) {
-            setChangedSelection(false);
+const findNewSelectionIndexForMention = (props) => {
+    var _a;
+    const { tag, textValue, currentSelectionIndex, previousSelectionIndex } = props;
+    // check if this is a mention tag and selection should be updated
+    if (tag.tagType !== MSFT_MENTION_TAG ||
+        tag.plainTextBeginIndex === undefined ||
+        currentSelectionIndex === previousSelectionIndex ||
+        tag.plainTextEndIndex === undefined) {
+        return currentSelectionIndex;
+    }
+    let spaceIndex = 0;
+    if (currentSelectionIndex <= previousSelectionIndex) {
+        // the cursor is moved to the left, find the last index before the cursor
+        spaceIndex = textValue.lastIndexOf(' ', currentSelectionIndex !== null && currentSelectionIndex !== void 0 ? currentSelectionIndex : 0);
+        if (spaceIndex === -1) {
+            // no space before the selection, use the beginning of the tag
+            spaceIndex = tag.plainTextBeginIndex;
         }
-        else if (changedSelection === false) {
-            setChangedSelection(true);
+    }
+    else {
+        // the cursor is moved to the right, find the fist index after the cursor
+        spaceIndex = textValue.indexOf(' ', currentSelectionIndex !== null && currentSelectionIndex !== void 0 ? currentSelectionIndex : 0);
+        if (spaceIndex === -1) {
+            // no space after the selection, use the end of the tag
+            spaceIndex = (_a = tag.plainTextEndIndex) !== null && _a !== void 0 ? _a : tag.plainTextBeginIndex;
         }
-    }, [activeSuggestionIndex, changedSelection]);
-    React.useEffect(() => {
-        window && window.addEventListener('click', dismissPopoverWhenClickingOutside);
-        return () => {
-            window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);
+    }
+    spaceIndex = Math.max(tag.plainTextBeginIndex, spaceIndex);
+    spaceIndex = Math.min(tag.plainTextEndIndex, spaceIndex);
+    return spaceIndex;
+};
+/**
+ * Handle mention tag edit and by word deleting
+ *
+ * @private
+ * @param props - Props for mention update HTML function.
+ * @returns Updated texts and indexes.
+ */
+const handleMentionTagUpdate = (props) => {
+    const { htmlText, oldPlainText, change, tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength } = props;
+    let processedChange = props.processedChange;
+    let lastProcessedHTMLIndex = props.lastProcessedHTMLIndex;
+    if (tag.tagType !== MSFT_MENTION_TAG || tag.plainTextBeginIndex === undefined) {
+        // not a mention tag
+        return {
+            result: '',
+            updatedChange: processedChange,
+            htmlIndex: lastProcessedHTMLIndex,
+            plainTextSelectionEndIndex: undefined
         };
-    }, [dismissPopoverWhenClickingOutside]);
-    // Determine popover position
-    React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const rect = (_a = target === null || target === void 0 ? void 0 : target.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const maxWidth = 200;
-        const finalPosition = { maxWidth };
-        // Figure out whether it will fit horizontally
-        const leftOffset = (_b = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.left) !== null && _b !== void 0 ? _b : 0;
-        if (leftOffset + maxWidth > ((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0)) {
-            finalPosition.right = ((_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0) - leftOffset;
-        }
-        else {
-            finalPosition.left = leftOffset;
+    }
+    let result = '';
+    let plainTextSelectionEndIndex;
+    let rangeStart;
+    let rangeEnd;
+    // check if space symbol is handled in case if string looks like '<1 2 3>'
+    let isSpaceLengthHandled = false;
+    rangeStart = oldPlainText.lastIndexOf(' ', startIndex);
+    if (rangeStart !== -1 && rangeStart !== undefined && rangeStart > tag.plainTextBeginIndex) {
+        isSpaceLengthHandled = true;
+    }
+    rangeEnd = oldPlainText.indexOf(' ', oldPlainTextEndIndex);
+    if (rangeEnd === -1 || rangeEnd === undefined) {
+        // check if space symbol is not found
+        rangeEnd = plainTextEndIndex;
+    }
+    else if (!isSpaceLengthHandled) {
+        // +1 to include the space symbol
+        rangeEnd += 1;
+    }
+    isSpaceLengthHandled = true;
+    if (rangeStart === -1 || rangeStart === undefined || rangeStart < tag.plainTextBeginIndex) {
+        // rangeStart should be at least equal to tag.plainTextBeginIndex
+        rangeStart = tag.plainTextBeginIndex;
+    }
+    if (rangeEnd > plainTextEndIndex) {
+        // rangeEnd should be at most equal to plainTextEndIndex
+        rangeEnd = plainTextEndIndex;
+    }
+    if (rangeStart === tag.plainTextBeginIndex && rangeEnd === plainTextEndIndex) {
+        // the whole tag should be removed
+        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
+        plainTextSelectionEndIndex = tag.plainTextBeginIndex + processedChange.length;
+        processedChange = '';
+        lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+    }
+    else {
+        // only part of the tag should be removed
+        let startChangeDiff = 0;
+        let endChangeDiff = 0;
+        // need to check only rangeStart > tag.plainTextBeginIndex as when rangeStart === tag.plainTextBeginIndex startChangeDiff = 0 and mentionTagLength shouldn't be subtracted
+        if (rangeStart > tag.plainTextBeginIndex) {
+            startChangeDiff = rangeStart - tag.plainTextBeginIndex - mentionTagLength;
         }
-        if (location === 'below') {
-            finalPosition.top = ((_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0) + ((_f = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _f !== void 0 ? _f : 0);
+        endChangeDiff = rangeEnd - tag.plainTextBeginIndex - mentionTagLength;
+        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff);
+        if (startIndex < tag.plainTextBeginIndex) {
+            // if the change is before the tag, the selection should start from startIndex (rangeStart will be equal to tag.plainTextBeginIndex)
+            plainTextSelectionEndIndex = startIndex + change.length;
         }
         else {
-            // (location === 'above')
-            finalPosition.bottom = ((_g = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : 0) - ((_h = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _h !== void 0 ? _h : 0);
-        }
-        setPosition(finalPosition);
-    }, [location, target, targetPositionOffset]);
-    const handleOnKeyDown = React.useCallback((e) => {
-        switch (e.key) {
-            case 'Escape':
-                onDismiss && onDismiss();
-                break;
-        }
-    }, [onDismiss]);
-    const personaRenderer = React.useCallback((displayName) => {
-        const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;
-        const avatarOptions = {
-            text: (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayNamePlaceholder,
-            size: react.PersonaSize.size24,
-            initialsColor: theme.palette.neutralLight,
-            initialsTextColor: theme.palette.neutralSecondary,
-            showOverflowTooltip: false,
-            showUnknownPersonaCoin: !(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === displayNamePlaceholder
-        };
-        return React__default['default'].createElement(react.Persona, Object.assign({}, avatarOptions));
-    }, [localeStrings, theme]);
-    const defaultOnRenderSuggestionItem = React.useCallback((suggestion, onSuggestionSelected, active) => {
-        return (React__default['default'].createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: (e) => {
-                handleOnKeyDown(e);
-            }, className: suggestionItemWrapperStyle(theme) },
-            React__default['default'].createElement(react.Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, (changedSelection !== null && changedSelection !== void 0 ? changedSelection : false) && active) }, personaRenderer(suggestion.displayText))));
-    }, [
-        handleOnKeyDown,
-        theme,
-        /* @conditional-compile-remove(mention) */
-        ids,
-        hoveredSuggestion,
-        changedSelection,
-        personaRenderer
-    ]);
-    const getHeaderTitle = React.useCallback(() => {
-        if (title) {
-            return title;
+            // if the change is inside the tag, the selection should start with rangeStart
+            plainTextSelectionEndIndex = rangeStart + processedChange.length;
         }
-        /* @conditional-compile-remove(mention) */
-        return localeStrings.mentionPopover.mentionPopoverHeader;
-    }, [localeStrings, title]);
-    return (React__default['default'].createElement("div", { ref: popoverRef },
-        React__default['default'].createElement(react.Stack, { className: react.mergeStyles({
-                maxHeight: 212,
-                maxWidth: position.maxWidth
-            }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
-            React__default['default'].createElement(react.Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
-            React__default['default'].createElement(react.Stack
-            /* @conditional-compile-remove(mention) */
-            , { "data-ui-id": ids.mentionSuggestionList, className: suggestionListStyle }, suggestions.map((suggestion, index) => {
-                const active = index === activeSuggestionIndex;
-                return onRenderSuggestionItem
-                    ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
-                    : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
-            })))));
+        lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
+        // processed change should not be changed as it should be added after the tag
+    }
+    return { result, updatedChange: processedChange, htmlIndex: lastProcessedHTMLIndex, plainTextSelectionEndIndex };
 };
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+/**
+ * Get closing tag information if exists otherwise return information as for self closing tag
+ *
+ * @private
+ * @param tag - Tag data.
+ * @returns Closing tag information for the provided tag.
+ */
+const getTagClosingTagInfo = (tag) => {
+    let plainTextEndIndex = 0;
+    let closeTagIdx = 0;
+    let closeTagLength = 0;
+    if (tag.plainTextEndIndex !== undefined && tag.closingTagIndex !== undefined) {
+        // close tag exists
+        plainTextEndIndex = tag.plainTextEndIndex;
+        closeTagIdx = tag.closingTagIndex;
+        // tag.tagType.length + </>
+        closeTagLength = tag.tagType.length + 3;
+    }
+    else if (tag.plainTextBeginIndex !== undefined) {
+        // no close tag
+        plainTextEndIndex = tag.plainTextBeginIndex;
+        closeTagIdx = tag.openTagIndex + tag.openTagBody.length;
+        closeTagLength = 0;
+    }
+    return { plainTextEndIndex, closeTagIdx, closeTagLength };
 };
-/* @conditional-compile-remove(mention) */
-const DEFAULT_MENTION_TRIGGER = '@';
-/* @conditional-compile-remove(mention) */
-const MSFT_MENTION_TAG = 'msft-mention';
 /**
+ * Go through the text and update it with the changed text
+ *
  * @private
+ * @param props - Props for update HTML function.
+ * @returns Updated HTML and selection index if the selection index should be set.
  */
-const InputBoxComponent = (props) => {
-    const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, 
-    /* @conditional-compile-remove(mention) */
-    mentionLookupOptions, children } = props;
-    const inputBoxRef = React.useRef(null);
-    /* @conditional-compile-remove(mention) */
-    // Current suggestion list, provided by the callback
-    const [mentionSuggestions, setMentionSuggestions] = React.useState([]);
-    /* @conditional-compile-remove(mention) */
-    // Current suggestion list, provided by the callback
-    const [activeSuggestionIndex, setActiveSuggestionIndex] = React.useState(undefined);
-    /* @conditional-compile-remove(mention) */
-    // Index of the current trigger character in the text field
-    const [currentTriggerStartIndex, setCurrentTriggerStartIndex] = React.useState(-1);
-    /* @conditional-compile-remove(mention) */
-    const [inputTextValue, setInputTextValue] = React.useState('');
-    /* @conditional-compile-remove(mention) */
-    const [tagsValue, setTagsValue] = React.useState([]);
-    /* @conditional-compile-remove(mention) */
-    // Index of the previous selection start in the text field
-    const [selectionStartValue, setSelectionStartValue] = React.useState();
-    /* @conditional-compile-remove(mention) */
-    // Index of the previous selection end in the text field
-    const [selectionEndValue, setSelectionEndValue] = React.useState();
-    /* @conditional-compile-remove(mention) */
-    // Boolean value to check if onMouseDown event should be handled during select as selection range
-    // for onMouseDown event is not updated yet and the selection range for mouse click/taps will be
-    // updated in onSelect event if needed.
-    const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = React.useState(true);
-    /* @conditional-compile-remove(mention) */
-    // Point of start of touch/mouse selection
-    const [interactionStartPoint, setInteractionStartPoint] = React.useState();
-    /* @conditional-compile-remove(mention) */
-    // Target selection from mouse movement
-    const [targetSelection, setTargetSelection] = React.useState();
-    /* @conditional-compile-remove(mention) */
-    // Caret position in the text field
-    const [caretPosition, setCaretPosition] = React.useState(undefined);
-    /* @conditional-compile-remove(mention) */
-    // Index of where the caret is in the text field
-    const [caretIndex, setCaretIndex] = React.useState(undefined);
-    /* @conditional-compile-remove(mention) */
-    const localeStrings = useLocale$1().strings;
-    /* @conditional-compile-remove(mention) */
-    // Set mention suggestions
-    const updateMentionSuggestions = React.useCallback((suggestions) => {
-        setMentionSuggestions(suggestions);
-    }, [setMentionSuggestions]);
-    /* @conditional-compile-remove(mention) */
-    // Parse the text and get the plain text version to display in the input box
-    React.useEffect(() => {
-        const trigger = (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) || DEFAULT_MENTION_TRIGGER;
-        const parsedHTMLData = textToTagParser(textValue, trigger);
-        setInputTextValue(parsedHTMLData.plainText);
-        setTagsValue(parsedHTMLData.tags);
-        updateMentionSuggestions([]);
-    }, [textValue, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, updateMentionSuggestions]);
-    const mergedRootStyle = react.mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
-    const mergedInputFieldStyle = react.mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
-    /* @conditional-compile-remove(mention) */
-    React.useEffect(() => {
-        var _a;
-        // effect for caret index update
-        if (caretIndex === undefined || textFieldRef === undefined || (textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === undefined) {
-            return;
+const updateHTML = (props) => {
+    const { htmlText, oldPlainText, newPlainText, 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 };
+    }
+    let result = '';
+    let lastProcessedHTMLIndex = 0;
+    // the value can be updated with empty string when the change covers more than 1 place (tag + before or after the tag)
+    // in this case change won't be added as part of the tag
+    // e.g.: change is before and partially in tag => change will be added before the tag and outdated text in the tag will be removed
+    // 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;
+    // 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
+    let changeNewEndIndex;
+    for (let i = 0; i < tags.length; i++) {
+        const tag = tags[i];
+        if (tag.plainTextBeginIndex === undefined) {
+            continue;
         }
-        // get validated caret index between 0 and inputTextValue.length otherwise caret will be set to incorrect index
-        const updatedCaretIndex = getValidatedIndexInRange({
-            min: 0,
-            max: inputTextValue.length,
-            currentValue: caretIndex
-        });
-        (_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(updatedCaretIndex, updatedCaretIndex);
-        setSelectionStartValue(updatedCaretIndex);
-        setSelectionEndValue(updatedCaretIndex);
-    }, [caretIndex, inputTextValue.length, textFieldRef, setSelectionStartValue, setSelectionEndValue]);
-    const mergedTextContainerStyle = react.mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
-    const mergedTextFieldStyle = react.concatStyleSets(textFieldStyle, {
-        fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
-        errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage,
-        suffix: {
-            backgroundColor: 'transparent',
-            // Remove empty space in the suffix area when adding newline-style buttons
-            display: props.inlineChildren ? 'flex' : 'contents',
-            padding: '0 0.25rem'
-        }
-    });
-    const mergedChildrenStyle = react.mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);
-    /* @conditional-compile-remove(mention) */
-    const onSuggestionSelected = React.useCallback((suggestion) => {
-        var _a, _b, _c;
-        let selectionEnd = ((_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.selectionEnd) || -1;
-        if (selectionEnd < 0) {
-            selectionEnd = 0;
-        }
-        else if (selectionEnd > inputTextValue.length) {
-            selectionEnd = inputTextValue.length;
-        }
-        const oldPlainText = inputTextValue;
-        const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);
-        // update plain text with the mention html text
-        const newPlainText = inputTextValue.substring(0, currentTriggerStartIndex) + mention + inputTextValue.substring(selectionEnd);
-        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
-        // update html text with updated plain text
-        const updatedContent = updateHTML({
-            htmlText: textValue,
-            oldPlainText,
-            newPlainText,
-            tags: tagsValue,
-            startIndex: currentTriggerStartIndex,
-            oldPlainTextEndIndex: selectionEnd,
-            change: mention,
-            mentionTrigger: triggerText
-        });
-        const displayName = getDisplayNameForMentionSuggestion(suggestion, localeStrings);
-        const newCaretIndex = currentTriggerStartIndex + displayName.length + triggerText.length;
-        // move the caret in the text field to the end of the mention plain text
-        setCaretIndex(newCaretIndex);
-        setSelectionEndValue(newCaretIndex);
-        setSelectionStartValue(newCaretIndex);
-        setCurrentTriggerStartIndex(-1);
-        updateMentionSuggestions([]);
-        // set focus back to text field
-        (_c = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _c === void 0 ? void 0 : _c.focus();
-        setActiveSuggestionIndex(undefined);
-        onChange && onChange(undefined, updatedContent.updatedHTML);
-    }, [
-        textFieldRef,
-        inputTextValue,
-        currentTriggerStartIndex,
-        mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger,
-        onChange,
-        textValue,
-        tagsValue,
-        /* @conditional-compile-remove(mention) */
-        updateMentionSuggestions,
-        /* @conditional-compile-remove(mention) */
-        localeStrings
-    ]);
-    const onTextFieldKeyDown = React.useCallback((ev) => {
-        /* @conditional-compile-remove(mention) */
-        // caretIndex should be set to undefined when the user is typing
-        setCaretIndex(undefined);
-        // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.
-        // it shouldn't be updated in onMouseUp
-        // as onMouseUp can be triggered before or after onSelect event
-        // because its order depends on mouse events not selection.
-        /* @conditional-compile-remove(mention) */
-        setShouldHandleOnMouseDownDuringSelect(false);
-        if (isEnterKeyEventFromCompositionSession(ev)) {
-            return;
+        // all plain text indexes includes trigger length for the mention that shouldn't be included in
+        // htmlText.substring because html strings don't include the trigger
+        // mentionTagLength will be set only for mention tag, otherwise should be 0
+        let mentionTagLength = 0;
+        let isMentionTag = false;
+        if (tag.tagType === MSFT_MENTION_TAG) {
+            mentionTagLength = mentionTrigger.length;
+            isMentionTag = true;
         }
-        /* @conditional-compile-remove(mention) */
-        if (mentionSuggestions.length > 0) {
-            if (ev.key === 'ArrowUp') {
-                ev.preventDefault();
-                const newActiveIndex = activeSuggestionIndex === undefined
-                    ? mentionSuggestions.length - 1
-                    : Math.max(activeSuggestionIndex - 1, 0);
-                setActiveSuggestionIndex(newActiveIndex);
-            }
-            else if (ev.key === 'ArrowDown') {
-                ev.preventDefault();
-                const newActiveIndex = activeSuggestionIndex === undefined
-                    ? 0
-                    : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
-                setActiveSuggestionIndex(newActiveIndex);
+        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);
+            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;
+                lastProcessedHTMLIndex = tag.openTagIndex - endChangeDiff;
+                // the change is handled; exit
+                break;
             }
-            else if (ev.key === 'Escape') {
-                updateMentionSuggestions([]);
+            else {
+                // change continues in the tag
+                lastProcessedHTMLIndex = tag.openTagIndex;
+                // proceed to the next check
             }
         }
-        if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
-            ev.preventDefault();
-            // If we are looking up a mention, select the focused suggestion
-            /* @conditional-compile-remove(mention) */
-            if (mentionSuggestions.length > 0 && activeSuggestionIndex !== undefined) {
-                const selectedMention = mentionSuggestions[activeSuggestionIndex];
-                if (selectedMention) {
-                    onSuggestionSelected(selectedMention);
-                    return;
+        const closingTagInfo = getTagClosingTagInfo(tag);
+        if (startIndex <= closingTagInfo.plainTextEndIndex) {
+            // change started before the end tag
+            if (startIndex <= tag.plainTextBeginIndex && oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
+                // the change is a tag or starts before the tag
+                // tag should be removed, no matter if there are sub-tags
+                result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
+                processedChange = '';
+                lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
+                // the change is handled; exit
+                break;
+            }
+            else if (startIndex >= tag.plainTextBeginIndex && oldPlainTextEndIndex <= closingTagInfo.plainTextEndIndex) {
+                // the change is between the tag
+                if (isMentionTag) {
+                    if (change !== '') {
+                        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;
+                            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;
+                            lastProcessedHTMLIndex = tag.openTagIndex;
+                        }
+                        else if (startIndex === closingTagInfo.plainTextEndIndex) {
+                            // non empty change at the end of the mention tag to be added after the mention tag
+                            result +=
+                                htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
+                                    processedChange;
+                            changeNewEndIndex = closingTagInfo.plainTextEndIndex + processedChange.length;
+                            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
+                        }
+                        processedChange = '';
+                    }
+                    else {
+                        const updateMentionTagResult = handleMentionTagUpdate({
+                            htmlText,
+                            oldPlainText,
+                            lastProcessedHTMLIndex,
+                            processedChange,
+                            change,
+                            tag,
+                            closeTagIdx: closingTagInfo.closeTagIdx,
+                            closeTagLength: closingTagInfo.closeTagLength,
+                            plainTextEndIndex: closingTagInfo.plainTextEndIndex,
+                            startIndex,
+                            oldPlainTextEndIndex,
+                            mentionTagLength
+                        });
+                        result += updateMentionTagResult.result;
+                        changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;
+                        processedChange = updateMentionTagResult.updatedChange;
+                        lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
+                    }
+                }
+                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
+                    // with subtags
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
+                    const updatedContent = updateHTML({
+                        htmlText: tag.content,
+                        oldPlainText,
+                        newPlainText,
+                        tags: tag.subTags,
+                        startIndex,
+                        oldPlainTextEndIndex,
+                        change: processedChange,
+                        mentionTrigger
+                    });
+                    result += stringBefore + updatedContent.updatedHTML;
+                    changeNewEndIndex = updatedContent.updatedSelectionIndex;
+                }
+                else {
+                    // no subtags
+                    const startChangeDiff = startIndex - tag.plainTextBeginIndex;
+                    result +=
+                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff) +
+                            processedChange;
+                    processedChange = '';
+                    if (oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
+                        const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex;
+                        lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
+                    }
+                    else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
+                        lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
+                    }
                 }
+                // the change is handled; exit
+                break;
             }
-            onEnterKeyDown && onEnterKeyDown();
-        }
-        onKeyDown && onKeyDown(ev);
-    }, [
-        onEnterKeyDown,
-        onKeyDown,
-        supportNewline,
-        /* @conditional-compile-remove(mention) */
-        mentionSuggestions,
-        /* @conditional-compile-remove(mention) */
-        activeSuggestionIndex,
-        /* @conditional-compile-remove(mention) */
-        onSuggestionSelected,
-        /* @conditional-compile-remove(mention) */
-        updateMentionSuggestions
-    ]);
-    const onRenderChildren = () => {
-        return (React__default['default'].createElement(react.Stack, { horizontal: true, className: mergedChildrenStyle }, children));
-    };
-    /* @conditional-compile-remove(mention) */
-    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$w(void 0, void 0, void 0, function* () {
-        var _a;
-        const suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
-        if (suggestions.length === 0) {
-            setActiveSuggestionIndex(undefined);
-        }
-        else if (activeSuggestionIndex === undefined) {
-            // Set the active to the first, if it's not already set
-            setActiveSuggestionIndex(0);
-        }
-        updateMentionSuggestions(suggestions);
-    }), 500);
-    /* @conditional-compile-remove(mention) */
-    // Update selections index in mention to navigate by words
-    const updateSelectionIndexesWithMentionIfNeeded = React.useCallback(({ event, inputTextValue, selectionEndValue, selectionStartValue, tagsValue }) => {
-        var _a, _b, _c;
-        let updatedStartIndex = event.currentTarget.selectionStart;
-        let updatedEndIndex = event.currentTarget.selectionEnd;
-        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&
-            event.currentTarget.selectionStart !== null &&
-            event.currentTarget.selectionStart !== -1) {
-            // just a caret movement/usual typing or deleting
-            const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
-            // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
-            if (mentionTag !== undefined &&
-                mentionTag.plainTextBeginIndex !== undefined &&
-                event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
-                event.currentTarget.selectionStart < ((_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex)) {
-                // get updated selection index
-                const newSelectionIndex = findNewSelectionIndexForMention({
-                    tag: mentionTag,
-                    textValue: inputTextValue,
-                    currentSelectionIndex: event.currentTarget.selectionStart,
-                    previousSelectionIndex: selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : inputTextValue.length
-                });
-                updatedStartIndex = newSelectionIndex;
-                updatedEndIndex = newSelectionIndex;
-            }
-        }
-        else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {
-            // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click
-            if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {
-                // the selection start is changed
-                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
-                // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
-                if (mentionTag !== undefined &&
-                    mentionTag.plainTextBeginIndex !== undefined &&
-                    event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
-                    event.currentTarget.selectionStart < ((_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex)) {
-                    updatedStartIndex = findNewSelectionIndexForMention({
-                        tag: mentionTag,
-                        textValue: inputTextValue,
-                        currentSelectionIndex: event.currentTarget.selectionStart,
-                        previousSelectionIndex: selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : inputTextValue.length
+            else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
+                // the change started in the tag but finishes somewhere further
+                const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;
+                if (isMentionTag) {
+                    const updateMentionTagResult = handleMentionTagUpdate({
+                        htmlText,
+                        oldPlainText,
+                        lastProcessedHTMLIndex,
+                        processedChange: '',
+                        change,
+                        tag,
+                        closeTagIdx: closingTagInfo.closeTagIdx,
+                        closeTagLength: closingTagInfo.closeTagLength,
+                        plainTextEndIndex: closingTagInfo.plainTextEndIndex,
+                        startIndex,
+                        oldPlainTextEndIndex,
+                        mentionTagLength
                     });
+                    result += updateMentionTagResult.result;
+                    lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
+                    // no need to handle plainTextSelectionEndIndex as the change will be added later
                 }
-            }
-            if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {
-                // the selection end is changed
-                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);
-                // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
-                if (mentionTag !== undefined &&
-                    mentionTag.plainTextBeginIndex !== undefined &&
-                    event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex &&
-                    event.currentTarget.selectionEnd < ((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex)) {
-                    updatedEndIndex = findNewSelectionIndexForMention({
-                        tag: mentionTag,
-                        textValue: inputTextValue,
-                        currentSelectionIndex: event.currentTarget.selectionEnd,
-                        previousSelectionIndex: selectionEndValue !== null && selectionEndValue !== void 0 ? selectionEndValue : inputTextValue.length
+                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
+                    // with subtags
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
+                    const updatedContent = updateHTML({
+                        htmlText: tag.content,
+                        oldPlainText,
+                        newPlainText,
+                        tags: tag.subTags,
+                        startIndex,
+                        oldPlainTextEndIndex,
+                        change: '',
+                        mentionTrigger
                     });
+                    result += stringBefore + updatedContent.updatedHTML;
+                }
+                else {
+                    // no subtags
+                    result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff);
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
                 }
+                // proceed with the next calculations
             }
-        }
-        // e.currentTarget.selectionDirection should be set to handle shift + arrow keys
-        if (event.currentTarget.selectionDirection === null) {
-            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);
-        }
-        else {
-            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex, event.currentTarget.selectionDirection);
-        }
-        setSelectionStartValue(nullToUndefined(updatedStartIndex));
-        setSelectionEndValue(nullToUndefined(updatedEndIndex));
-    }, [setSelectionStartValue, setSelectionEndValue]);
-    /* @conditional-compile-remove(mention) */
-    const handleOnSelect = React.useCallback(({ event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue }) => {
-        if (shouldHandleOnMouseDownDuringSelect) {
-            if (targetSelection !== undefined) {
-                setSelectionStartValue(targetSelection.start);
-                setSelectionEndValue(targetSelection.end);
-                event.currentTarget.setSelectionRange(targetSelection.start, undefinedToNull(targetSelection.end));
-                setTargetSelection(undefined);
+            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
+                // the change starts before  the tag and finishes after it
+                // tag should be removed, no matter if there are subtags
+                // no need to save anything between lastProcessedHTMLIndex and closeTagIdx + closeTagLength
+                lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
+                // proceed with the next calculations
             }
-            else if (event.currentTarget.selectionStart !== null) {
-                // on select was triggered by mouse down/up with no movement
-                const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
-                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
-                    // handle mention click
-                    // Get range of word that was clicked on
-                    const selectionRange = rangeOfWordInSelection({
-                        textInput: inputTextValue,
-                        selectionStart: event.currentTarget.selectionStart,
-                        selectionEnd: nullToUndefined(event.currentTarget.selectionEnd),
-                        tag: mentionTag
+            else if (startIndex === tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
+                // the change starts in the tag and finishes after it
+                // tag should be removed, no matter if there are subtags
+                result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex);
+                // processedChange shouldn't be updated as it will be added after the tag
+                lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
+                // proceed with the next calculations
+            }
+            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
+                // the change  starts before the tag and ends in a tag
+                if (isMentionTag) {
+                    // mention tag
+                    const updateMentionTagResult = handleMentionTagUpdate({
+                        htmlText,
+                        oldPlainText,
+                        lastProcessedHTMLIndex,
+                        processedChange: '',
+                        change,
+                        tag,
+                        closeTagIdx: closingTagInfo.closeTagIdx,
+                        closeTagLength: closingTagInfo.closeTagLength,
+                        plainTextEndIndex: closingTagInfo.plainTextEndIndex,
+                        startIndex,
+                        oldPlainTextEndIndex,
+                        mentionTagLength
                     });
-                    if (event.currentTarget.selectionDirection === null) {
-                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end);
-                    }
-                    else {
-                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end, event.currentTarget.selectionDirection);
-                    }
-                    setSelectionStartValue(selectionRange.start);
-                    setSelectionEndValue(selectionRange.end);
+                    changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;
+                    result += updateMentionTagResult.result;
+                    lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
+                }
+                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
+                    // with subtags
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
+                    const updatedContent = updateHTML({
+                        htmlText: tag.content,
+                        oldPlainText,
+                        newPlainText,
+                        tags: tag.subTags,
+                        startIndex,
+                        oldPlainTextEndIndex,
+                        change: processedChange,
+                        mentionTrigger
+                    });
+                    processedChange = '';
+                    result += stringBefore + updatedContent.updatedHTML;
                 }
                 else {
-                    setSelectionStartValue(event.currentTarget.selectionStart);
-                    setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
+                    // no subtags
+                    result +=
+                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length) + processedChange;
+                    processedChange = '';
+                    // oldPlainTextEndIndex already includes mentionTag length
+                    const endChangeDiff = closingTagInfo.plainTextEndIndex - oldPlainTextEndIndex;
+                    // as change may be before the end of the tag, we need to add the rest of the tag
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx - endChangeDiff;
                 }
+                // the change is handled; exit
+                break;
             }
+            lastProcessedPlainTextTagEndIndex = closingTagInfo.plainTextEndIndex;
         }
-        else {
-            // selection was changed by keyboard
-            updateSelectionIndexesWithMentionIfNeeded({
-                event,
-                inputTextValue,
-                selectionStartValue,
-                selectionEndValue,
-                tagsValue: tags
-            });
-        }
-        // don't set setShouldHandleOnMouseDownDuringSelect(false) here as setSelectionRange
-        // could trigger additional calls of onSelect event and they may not be handled correctly
-        // (because of setSelectionRange calls or rerender)
-    }, [
-        updateSelectionIndexesWithMentionIfNeeded,
-        targetSelection,
-        setTargetSelection,
-        setSelectionStartValue,
-        setSelectionEndValue
-    ]);
-    /* @conditional-compile-remove(mention) */
-    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$w(void 0, void 0, void 0, function* () {
-        var _b;
-        debouncedQueryUpdate.cancel();
-        if (event.currentTarget === null) {
-            return;
+        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;
+            if (startIndex >= closingTagInfo.plainTextEndIndex) {
+                const startChangeDiff = startIndex - closingTagInfo.plainTextEndIndex;
+                result +=
+                    htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + startChangeDiff) + processedChange;
+            }
+            else {
+                result +=
+                    htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
+                        processedChange;
+            }
+            processedChange = '';
+            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + endChangeDiff;
+            // the change is handled; exit
+            // break is not required here as this is the last element but added for consistency
+            break;
         }
-        // handle backspace change
-        // onSelect is not called for backspace as selection is not changed and local caret index is outdated
-        setCaretIndex(undefined);
-        const newValue = updatedValue !== null && updatedValue !== void 0 ? updatedValue : '';
-        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
-        const newTextLength = newValue.length;
-        // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly
-        const currentSelectionEndValue = getValidatedIndexInRange({
-            min: 0,
-            max: newTextLength,
-            currentValue: currentSelectionEnd
-        });
-        const currentSelectionStartValue = getValidatedIndexInRange({
-            min: 0,
-            max: newTextLength,
-            currentValue: currentSelectionStart
-        });
-        const previousSelectionStartValue = getValidatedIndexInRange({
-            min: 0,
-            max: inputTextValue.length,
-            currentValue: previousSelectionStart
-        });
-        const previousSelectionEndValue = getValidatedIndexInRange({
-            min: 0,
-            max: inputTextValue.length,
-            currentValue: previousSelectionEnd
-        });
-        // If we are enabled for lookups,
-        if (mentionLookupOptions !== undefined) {
-            // Look at the range of the change for a trigger character
-            const triggerPriorIndex = newValue.lastIndexOf(triggerText, currentSelectionEndValue - 1);
-            // Update the caret position, if not doing a lookup
-            setCaretPosition(textareaCaretTs.Caret.getRelativePosition(event.currentTarget));
-            if (triggerPriorIndex !== undefined) {
-                // trigger is found
-                const isSpaceBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex) === ' ';
-                const wordAtSelection = newValue.substring(triggerPriorIndex, currentSelectionEndValue);
-                let tagIndex = currentTriggerStartIndex;
-                if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0) {
-                    //no space before the trigger <- continuation of the previous word
-                    tagIndex = -1;
-                    setCurrentTriggerStartIndex(tagIndex);
-                }
-                else if (wordAtSelection === triggerText) {
-                    // start of the mention
-                    tagIndex = currentSelectionEndValue - triggerText.length;
-                    if (tagIndex < 0) {
-                        tagIndex = 0;
-                    }
-                    setCurrentTriggerStartIndex(tagIndex);
-                }
-                if (tagIndex === -1) {
-                    updateMentionSuggestions([]);
-                }
-                else {
-                    // In the middle of a @mention lookup
-                    if (tagIndex > -1) {
-                        const query = wordAtSelection.substring(triggerText.length, wordAtSelection.length);
-                        if (query !== undefined) {
-                            yield debouncedQueryUpdate(query);
-                        }
-                    }
+    }
+    if (lastProcessedHTMLIndex < htmlText.length) {
+        // add the rest of the html string
+        result += htmlText.substring(lastProcessedHTMLIndex);
+    }
+    return { updatedHTML: result, updatedSelectionIndex: changeNewEndIndex };
+};
+/**
+ * Given the oldText and newText, find the start index, old end index and new end index for the changes
+ *
+ * @private
+ * @param props - Props for finding stings diff indexes function.
+ * @returns Indexes for change start and ends in new and old texts. The old and new end indexes are exclusive.
+ */
+const findStringsDiffIndexes = (props) => {
+    const { oldText, newText, previousSelectionStart, previousSelectionEnd, currentSelectionStart, currentSelectionEnd } = props;
+    const newTextLength = newText.length;
+    const oldTextLength = oldText.length;
+    // let changeStart = 0;
+    let newChangeEnd = newTextLength;
+    let oldChangeEnd = oldTextLength;
+    const previousSelectionStartValue = previousSelectionStart > -1 ? previousSelectionStart : oldTextLength;
+    const previousSelectionEndValue = previousSelectionEnd > -1 ? previousSelectionEnd : oldTextLength;
+    const currentSelectionStartValue = currentSelectionStart > -1 ? currentSelectionStart : newTextLength;
+    const currentSelectionEndValue = currentSelectionEnd > -1 ? currentSelectionEnd : newTextLength;
+    const changeStart = Math.min(previousSelectionStartValue, previousSelectionEndValue, currentSelectionStartValue, currentSelectionEndValue, newTextLength, oldTextLength);
+    if (oldTextLength < newTextLength) {
+        //insert or replacement
+        if (oldTextLength === changeStart) {
+            // when change was at the end of string
+            // change is found
+            newChangeEnd = newTextLength;
+            oldChangeEnd = oldTextLength;
+        }
+        else {
+            for (let i = 1; i < newTextLength && oldTextLength - i >= changeStart; i++) {
+                newChangeEnd = newTextLength - i - 1;
+                oldChangeEnd = oldTextLength - i - 1;
+                if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
+                    // change is found
+                    break;
                 }
             }
+            // make indexes exclusive
+            newChangeEnd += 1;
+            oldChangeEnd += 1;
         }
-        let result = '';
-        if (tagsValue.length === 0) {
-            // no tags in the string and newValue should be used as a result string
-            result = newValue;
+    }
+    else if (oldTextLength > newTextLength) {
+        //deletion or replacement
+        if (newTextLength === changeStart) {
+            // when change was at the end of string
+            // change is found
+            newChangeEnd = newTextLength;
+            oldChangeEnd = oldTextLength;
         }
         else {
-            // there are tags in the text value and htmlTextValue is html string
-            // find diff between old and new text
-            const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
-                oldText: inputTextValue,
-                newText: newValue,
-                previousSelectionStart: previousSelectionStartValue,
-                previousSelectionEnd: previousSelectionEndValue,
-                currentSelectionStart: currentSelectionStartValue,
-                currentSelectionEnd: currentSelectionEndValue
-            });
-            const change = newValue.substring(changeStart, newChangeEnd);
-            // get updated html string
-            const updatedContent = updateHTML({
-                htmlText: htmlTextValue,
-                oldPlainText: inputTextValue,
-                newPlainText: newValue,
-                tags: tagsValue,
-                startIndex: changeStart,
-                oldPlainTextEndIndex: oldChangeEnd,
-                change,
-                mentionTrigger: triggerText
-            });
-            result = updatedContent.updatedHTML;
-            // update caret index if needed
-            if (updatedContent.updatedSelectionIndex !== undefined) {
-                setCaretIndex(updatedContent.updatedSelectionIndex);
-                setSelectionEndValue(updatedContent.updatedSelectionIndex);
-                setSelectionStartValue(updatedContent.updatedSelectionIndex);
-            }
-        }
-        onChange && onChange(event, result);
-    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
-    const getInputFieldTextValue = () => {
-        /* @conditional-compile-remove(mention) */
-        return inputTextValue;
-    };
-    /* @conditional-compile-remove(mention) */
-    // Adjust the selection range based on a mouse / touch interaction
-    const handleOnMove = React.useCallback((event) => {
-        var _a;
-        let targetStart = event.currentTarget.selectionStart;
-        let targetEnd = event.currentTarget.selectionEnd;
-        // Should we do anything?
-        if (interactionStartPoint !== undefined &&
-            // And did selection change?
-            targetStart !== null &&
-            (targetStart !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.start) || targetEnd !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.end))) {
-            const direction = event.clientX > interactionStartPoint.x ? 'forward' : 'backward';
-            const mentionTag = findMentionTagForSelection(tagsValue, direction === 'backward'
-                ? event.currentTarget.selectionStart
-                : (_a = event.currentTarget.selectionEnd) !== null && _a !== void 0 ? _a : event.currentTarget.selectionStart);
-            let updateCurrentTarget = false;
-            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
-                targetStart = Math.min(mentionTag.plainTextBeginIndex, targetStart);
-                if (mentionTag.plainTextEndIndex !== undefined && targetEnd !== null) {
-                    targetEnd = Math.max(mentionTag.plainTextEndIndex, targetEnd);
+            for (let i = 1; i < oldTextLength && newTextLength - i >= changeStart; i++) {
+                newChangeEnd = newTextLength - i - 1;
+                oldChangeEnd = oldTextLength - i - 1;
+                if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
+                    // change is found
+                    break;
                 }
-                updateCurrentTarget = true;
-                setShouldHandleOnMouseDownDuringSelect(false);
             }
-            // Update selection range
-            setTargetSelection({ start: targetStart, end: targetEnd });
-            if (updateCurrentTarget) {
-                // Only set the control, if the values are updated
-                event.currentTarget.setSelectionRange(targetStart, targetEnd, direction);
+            // make indexes exclusive
+            newChangeEnd += 1;
+            oldChangeEnd += 1;
+        }
+    }
+    else {
+        // replacement
+        for (let i = 1; i < oldTextLength && oldTextLength - i >= changeStart; i++) {
+            newChangeEnd = newTextLength - i - 1;
+            oldChangeEnd = oldTextLength - i - 1;
+            if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
+                // change is found
+                break;
             }
         }
-    }, [setTargetSelection, targetSelection, setShouldHandleOnMouseDownDuringSelect, interactionStartPoint, tagsValue]);
-    /* @conditional-compile-remove(mention) */
-    const announcerText = React.useMemo(() => {
-        if (activeSuggestionIndex === undefined) {
-            return undefined;
+        // make indexes exclusive if they aren't equal to the length of the string
+        if (newChangeEnd !== newText.length) {
+            newChangeEnd += 1;
         }
-        const currentMention = mentionSuggestions[activeSuggestionIndex !== null && activeSuggestionIndex !== void 0 ? activeSuggestionIndex : 0];
-        return (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0
-            ? currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText
-            : localeStrings.participantItem.displayNamePlaceholder;
-    }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);
-    return (React__default['default'].createElement(react.Stack, { className: mergedRootStyle },
-        React__default['default'].createElement("div", { className: mergedTextContainerStyle },
-            /* @conditional-compile-remove(mention) */ mentionSuggestions.length > 0 && (React__default['default'].createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
-                    updateMentionSuggestions([]);
-                } })),
-            /* @conditional-compile-remove(mention) */ announcerText !== undefined && (React__default['default'].createElement(Announcer$1, { announcementString: announcerText, ariaLive: 'polite' })),
-            React__default['default'].createElement(react.TextField, { autoFocus: props.autoFocus === 'sendBoxTextField', "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedInputFieldStyle, placeholder: placeholderText, value: getInputFieldTextValue(), onChange: (e, newValue) => {
-                    // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html
-                    /* @conditional-compile-remove(mention) */
-                    // Prevents React from resetting event's properties
-                    e.persist();
-                    /* @conditional-compile-remove(mention) */
-                    setInputTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
-                    /* @conditional-compile-remove(mention) */
-                    handleOnChange({
-                        event: e,
-                        tagsValue,
-                        htmlTextValue: textValue,
-                        inputTextValue,
-                        currentTriggerStartIndex,
-                        previousSelectionStart: nullToUndefined(selectionStartValue),
-                        previousSelectionEnd: nullToUndefined(selectionEndValue),
-                        currentSelectionStart: nullToUndefined(e.currentTarget.selectionStart),
-                        currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),
-                        updatedValue: newValue
-                    });
-                    /* @conditional-compile-remove(mention) */
-                    return;
-                }, 
-                /* @conditional-compile-remove(mention) */
-                onSelect: (e) => {
-                    // update selection if needed
-                    if (caretIndex !== undefined) {
-                        setCaretIndex(undefined);
-                        // sometimes setting selectionRage in effect for updating caretIndex doesn't work as expected and onSelect should handle this case
-                        if (caretIndex !== e.currentTarget.selectionStart || caretIndex !== e.currentTarget.selectionEnd) {
-                            e.currentTarget.setSelectionRange(caretIndex, caretIndex);
-                        }
-                        return;
-                    }
-                    handleOnSelect({
-                        event: e,
-                        inputTextValue,
-                        shouldHandleOnMouseDownDuringSelect,
-                        selectionEndValue,
-                        selectionStartValue,
-                        tags: tagsValue
-                    });
-                }, 
-                /* @conditional-compile-remove(mention) */
-                onMouseDown: (e) => {
-                    setInteractionStartPoint({ x: e.clientX, y: e.clientY });
-                    // as events order is onMouseDown -> onMouseMove -> onMouseUp -> onSelect -> onClick
-                    // onClick and onMouseDown can't handle clicking on mention event because
-                    // onMouseDown doesn't have correct selectionRange yet and
-                    // onClick already has wrong range as it's called after onSelect that updates the selection range
-                    // so we need to handle onMouseDown to prevent onSelect default behavior
-                    setShouldHandleOnMouseDownDuringSelect(true);
-                }, 
-                /* @conditional-compile-remove(mention) */
-                onMouseMove: handleOnMove, 
-                /* @conditional-compile-remove(mention) */
-                onMouseUp: () => {
-                    setInteractionStartPoint(undefined);
-                }, 
-                /* @conditional-compile-remove(mention) */
-                onTouchStart: (e) => {
-                    setInteractionStartPoint({
-                        x: e.targetTouches.item(0).clientX,
-                        y: e.targetTouches.item(0).clientY
-                    });
-                    // see onMouseDown for more details
-                    setShouldHandleOnMouseDownDuringSelect(true);
-                }, 
-                /* @conditional-compile-remove(mention) */
-                onTouchMove: handleOnMove, 
-                /* @conditional-compile-remove(mention) */
-                onTouchEnd: () => {
-                    setInteractionStartPoint(undefined);
-                }, 
-                /* @conditional-compile-remove(mention) */
-                onBlur: () => {
-                    // setup all flags to default values when text field loses focus
-                    setShouldHandleOnMouseDownDuringSelect(false);
-                    setCaretIndex(undefined);
-                    setSelectionStartValue(undefined);
-                    setSelectionEndValue(undefined);
-                    // Dismiss the suggestions on blur, after enough time to select by mouse if needed
-                    setTimeout(() => {
-                        setMentionSuggestions([]);
-                    }, 200);
-                }, autoComplete: "off", onKeyDown: onTextFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage, onRenderSuffix: onRenderChildren, elementRef: inputBoxRef }))));
+        if (oldChangeEnd !== oldText.length) {
+            oldChangeEnd += 1;
+        }
+    }
+    return { changeStart, oldChangeEnd, newChangeEnd };
 };
 /**
+ * Get the html string for the mention suggestion.
+ *
  * @private
+ * @param suggestion - The mention suggestion.
+ * @param localeStrings - The locale strings.
+ * @returns The html string for the mention suggestion.
  */
-const InputBoxButton = (props) => {
-    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;
-    const [isHover, setIsHover] = React.useState(false);
-    const mergedButtonStyle = react.mergeStyles(inputButtonStyle, className);
-    const theme = useTheme();
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
-    // Place callout with no gap between it and the button.
-    const calloutProps = {
-        gapSpace: 0,
-        styles: calloutStyle,
-        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
-    };
-    return (React__default['default'].createElement(react.TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
-        React__default['default'].createElement(react.IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
-                setIsHover(true);
-            }, onMouseLeave: () => {
-                setIsHover(false);
-            }, 
-            // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
-            onRenderIcon: () => React__default['default'].createElement(react.Stack, { className: iconWrapperStyle$1 }, onRenderIcon(isHover)) })));
+const htmlStringForMentionSuggestion = (suggestion, localeStrings) => {
+    const idHTML = ' id ="' + suggestion.id + '"';
+    const displayTextHTML = ' displayText ="' + suggestion.displayText + '"';
+    const displayText = getDisplayNameForMentionSuggestion(suggestion, localeStrings);
+    return '<' + MSFT_MENTION_TAG + idHTML + displayTextHTML + '>' + displayText + '</' + MSFT_MENTION_TAG + '>';
 };
-/* @conditional-compile-remove(mention) */
 /**
- * Get validated value for index between min and max values. If currentValue is not defined, -1 will be used instead.
+ * Get display name for the mention suggestion.
  *
  * @private
- * @param props - Props for finding a valid index in range.
- * @returns Valid index in the range.
+ *
+ * @param suggestion - The mention suggestion.
+ * @param localeStrings - The locale strings.
+ * @returns The display name for the mention suggestion or display name placeholder if display name is empty.
  */
-const getValidatedIndexInRange = (props) => {
-    const { min, max, currentValue } = props;
-    let updatedValue = currentValue !== null && currentValue !== void 0 ? currentValue : -1;
-    updatedValue = Math.max(min, updatedValue);
-    updatedValue = Math.min(updatedValue, max);
-    return updatedValue;
+const getDisplayNameForMentionSuggestion = (suggestion, localeStrings) => {
+    const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;
+    return suggestion.displayText !== '' ? suggestion.displayText : displayNamePlaceholder !== null && displayNamePlaceholder !== void 0 ? displayNamePlaceholder : '';
 };
-/* @conditional-compile-remove(mention) */
 /**
- * Find mention tag for selection if exists.
- *
+ * Parse the text and return the tags and the plain text in one go
  * @private
- * @param tags - Existing list of tags.
- * @param selection - Selection index.
- * @returns Mention tag if exists, otherwise undefined.
+ * @param text - The text to parse for HTML tags
+ * @param trigger The trigger to show for the mention tag in plain text
+ *
+ * @returns An array of tags and the plain text representation
  */
-const findMentionTagForSelection = (tags, selection) => {
-    let mentionTag = undefined;
-    tags.every((tag) => {
-        const closingTagInfo = getTagClosingTagInfo(tag);
-        if (tag.plainTextBeginIndex !== undefined && tag.plainTextBeginIndex > selection) {
-            // no need to check further as the selection is before the tag
-            return false;
+const textToTagParser = (text, trigger) => {
+    var _a, _b;
+    const tags = []; // Tags passed back to the caller
+    const tagParseStack = []; // Local stack to use while parsing
+    let plainTextRepresentation = '';
+    let parseIndex = 0;
+    while (parseIndex < text.length) {
+        const foundHtmlTag = findNextHtmlTag(text, parseIndex);
+        if (!foundHtmlTag) {
+            if (parseIndex !== 0) {
+                // Add the remaining text to the plain text representation
+                plainTextRepresentation += text.substring(parseIndex);
+            }
+            else {
+                plainTextRepresentation = text;
+            }
+            break;
         }
-        else if (tag.plainTextBeginIndex !== undefined &&
-            tag.plainTextBeginIndex <= selection &&
-            selection <= closingTagInfo.plainTextEndIndex) {
-            // no need to check if tag doesn't contain selection
-            if (tag.subTags !== undefined && tag.subTags.length !== 0) {
-                const selectedTag = findMentionTagForSelection(tag.subTags, selection);
-                if (selectedTag !== undefined) {
-                    mentionTag = selectedTag;
-                    return false;
+        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);
+            nextTag.plainTextBeginIndex = plainTextRepresentation.length;
+            if (foundHtmlTag.type === 'open') {
+                tagParseStack.push(nextTag);
+            }
+            else {
+                nextTag.content = '';
+                nextTag.plainTextBeginIndex = plainTextRepresentation.length;
+                nextTag.plainTextEndIndex = plainTextRepresentation.length;
+                addTag(nextTag, tagParseStack, tags);
+            }
+        }
+        if (foundHtmlTag.type === 'close') {
+            const currentOpenTag = tagParseStack.pop();
+            const closeTagType = foundHtmlTag.content.substring(2, foundHtmlTag.content.length - 1).toLowerCase();
+            if (currentOpenTag && currentOpenTag.tagType === closeTagType) {
+                // Tag startIdx is absolute to the text. This is updated later to be relative to the parent tag
+                currentOpenTag.content = text.substring(currentOpenTag.openTagIndex + currentOpenTag.openTagBody.length, foundHtmlTag.startIdx);
+                // Insert the plain text pieces for the sub tags
+                if (currentOpenTag.tagType === MSFT_MENTION_TAG) {
+                    plainTextRepresentation =
+                        plainTextRepresentation.slice(0, currentOpenTag.plainTextBeginIndex) +
+                            trigger +
+                            plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);
+                }
+                if (!currentOpenTag.subTags) {
+                    plainTextRepresentation += 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;
+                }
+                currentOpenTag.plainTextEndIndex = plainTextRepresentation.length;
+                addTag(currentOpenTag, tagParseStack, tags);
             }
-            else if (tag.tagType === MSFT_MENTION_TAG) {
-                mentionTag = tag;
-                return false;
+            else {
+                throw new Error('Unexpected close tag found. Got "' +
+                    closeTagType +
+                    '" but expected "' +
+                    ((_b = tagParseStack[tagParseStack.length - 1]) === null || _b === void 0 ? void 0 : _b.tagType) +
+                    '"');
             }
         }
-        return true;
-    });
-    return mentionTag;
+        // Update parsing index; move past the end of the close tag
+        parseIndex = foundHtmlTag.startIdx + foundHtmlTag.content.length;
+    } // While parseIndex < text.length loop
+    return { tags, plainText: plainTextRepresentation };
 };
-/* @conditional-compile-remove(mention) */
-const rangeOfWordInSelection = ({ textInput, selectionStart, selectionEnd, tag }) => {
-    var _a;
-    if (tag.plainTextBeginIndex === undefined) {
-        return { start: selectionStart, end: selectionEnd === undefined ? selectionStart : selectionEnd };
+const parseOpenTag = (tag, startIdx) => {
+    const tagType = tag
+        .substring(1, tag.length - 1)
+        .split(' ')[0]
+        .toLowerCase()
+        .replace('/', '');
+    return {
+        tagType,
+        openTagIndex: startIdx,
+        openTagBody: tag
+    };
+};
+const findNextHtmlTag = (text, startIndex) => {
+    const tagStartIndex = text.indexOf('<', startIndex);
+    if (tagStartIndex === -1) {
+        // No more tags
+        return undefined;
     }
-    // Look at start word index and optionally end word index.
-    // Select combination of the two and return the range.
-    let start = selectionStart;
-    let end = selectionEnd === undefined ? selectionStart : selectionEnd;
-    const firstWordStartIndex = textInput.lastIndexOf(' ', selectionStart);
-    if (firstWordStartIndex === tag.plainTextBeginIndex) {
-        start = firstWordStartIndex;
+    const tagEndIndex = text.indexOf('>', tagStartIndex);
+    if (tagEndIndex === -1) {
+        // No close tag
+        return undefined;
     }
-    else {
-        start = Math.max(firstWordStartIndex + 1, tag.plainTextBeginIndex);
+    const tag = text.substring(tagStartIndex, tagEndIndex + 1);
+    let type = 'open';
+    if (tag[1] === '/') {
+        type = 'close';
     }
-    const firstWordEndIndex = textInput.indexOf(' ', selectionStart);
-    end = Math.max(firstWordEndIndex + 1, (_a = tag.plainTextEndIndex) !== null && _a !== void 0 ? _a : firstWordEndIndex + 1);
-    if (selectionEnd !== undefined && tag.plainTextEndIndex !== undefined) {
-        const lastWordEndIndex = textInput.indexOf(' ', selectionEnd);
-        end = Math.max(lastWordEndIndex > -1 ? lastWordEndIndex : tag.plainTextEndIndex, selectionEnd);
+    else if (tag[tag.length - 2] === '/') {
+        type = 'self-closing';
     }
-    return { start, end };
+    return {
+        content: tag,
+        startIdx: tagStartIndex,
+        type
+    };
 };
-/* @conditional-compile-remove(mention) */
-/**
- * Find a new the selection index.
- *
- * @private
- * @param props - Props for finding new selection index for mention.
- * @returns New selection index if it is inside of a mention tag, otherwise the current selection.
- */
-const findNewSelectionIndexForMention = (props) => {
+const addTag = (tag, parseStack, tags) => {
     var _a;
-    const { tag, textValue, currentSelectionIndex, previousSelectionIndex } = props;
-    // check if this is a mention tag and selection should be updated
-    if (tag.tagType !== MSFT_MENTION_TAG ||
-        tag.plainTextBeginIndex === undefined ||
-        currentSelectionIndex === previousSelectionIndex ||
-        tag.plainTextEndIndex === undefined) {
-        return currentSelectionIndex;
+    // Add as sub-tag to the parent stack tag, if there is one
+    const parentTag = parseStack[parseStack.length - 1];
+    if (parentTag) {
+        // Adjust the open tag index to be relative to the parent tag
+        const parentContentStartIdx = parentTag.openTagIndex + parentTag.openTagBody.length;
+        const relativeIdx = tag.openTagIndex - parentContentStartIdx;
+        tag.openTagIndex = relativeIdx;
     }
-    let spaceIndex = 0;
-    if (currentSelectionIndex <= previousSelectionIndex) {
-        // the cursor is moved to the left, find the last index before the cursor
-        spaceIndex = textValue.lastIndexOf(' ', currentSelectionIndex !== null && currentSelectionIndex !== void 0 ? currentSelectionIndex : 0);
-        if (spaceIndex === -1) {
-            // no space before the selection, use the beginning of the tag
-            spaceIndex = tag.plainTextBeginIndex;
+    if (!tag.closingTagIndex) {
+        // If the tag is self-closing, the close tag is the same as the open tag
+        if (tag.openTagBody[tag.openTagBody.length - 2] === '/') {
+            tag.closingTagIndex = tag.openTagIndex;
         }
+        else {
+            // Otherwise, the close tag index is the open tag index + the open tag body + the content length
+            tag.closingTagIndex = tag.openTagIndex + tag.openTagBody.length + ((_a = tag.content) !== null && _a !== void 0 ? _a : []).length;
+        }
+    }
+    // Put the tag where it belongs
+    if (!parentTag) {
+        tags.push(tag);
     }
     else {
-        // the cursor is moved to the right, find the fist index after the cursor
-        spaceIndex = textValue.indexOf(' ', currentSelectionIndex !== null && currentSelectionIndex !== void 0 ? currentSelectionIndex : 0);
-        if (spaceIndex === -1) {
-            // no space after the selection, use the end of the tag
-            spaceIndex = (_a = tag.plainTextEndIndex) !== null && _a !== void 0 ? _a : tag.plainTextBeginIndex;
+        if (!parentTag.subTags) {
+            parentTag.subTags = [tag];
+        }
+        else {
+            parentTag.subTags.push(tag);
         }
     }
-    spaceIndex = Math.max(tag.plainTextBeginIndex, spaceIndex);
-    spaceIndex = Math.min(tag.plainTextEndIndex, spaceIndex);
-    return spaceIndex;
 };
-/* @conditional-compile-remove(mention) */
+
+// Copyright (c) Microsoft Corporation.
 /**
- * Handle mention tag edit and by word deleting
- *
  * @private
- * @param props - Props for mention update HTML function.
- * @returns Updated texts and indexes.
+ * z-index to ensure that chat container has lower z-index than mention popover
  */
-const handleMentionTagUpdate = (props) => {
-    const { htmlText, oldPlainText, change, tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength } = props;
-    let processedChange = props.processedChange;
-    let lastProcessedHTMLIndex = props.lastProcessedHTMLIndex;
-    if (tag.tagType !== MSFT_MENTION_TAG || tag.plainTextBeginIndex === undefined) {
-        // not a mention tag
-        return {
-            result: '',
-            updatedChange: processedChange,
-            htmlIndex: lastProcessedHTMLIndex,
-            plainTextSelectionEndIndex: undefined
-        };
-    }
-    let result = '';
-    let plainTextSelectionEndIndex;
-    let rangeStart;
-    let rangeEnd;
-    // check if space symbol is handled in case if string looks like '<1 2 3>'
-    let isSpaceLengthHandled = false;
-    rangeStart = oldPlainText.lastIndexOf(' ', startIndex);
-    if (rangeStart !== -1 && rangeStart !== undefined && rangeStart > tag.plainTextBeginIndex) {
-        isSpaceLengthHandled = true;
-    }
-    rangeEnd = oldPlainText.indexOf(' ', oldPlainTextEndIndex);
-    if (rangeEnd === -1 || rangeEnd === undefined) {
-        // check if space symbol is not found
-        rangeEnd = plainTextEndIndex;
-    }
-    else if (!isSpaceLengthHandled) {
-        // +1 to include the space symbol
-        rangeEnd += 1;
-    }
-    isSpaceLengthHandled = true;
-    if (rangeStart === -1 || rangeStart === undefined || rangeStart < tag.plainTextBeginIndex) {
-        // rangeStart should be at least equal to tag.plainTextBeginIndex
-        rangeStart = tag.plainTextBeginIndex;
-    }
-    if (rangeEnd > plainTextEndIndex) {
-        // rangeEnd should be at most equal to plainTextEndIndex
-        rangeEnd = plainTextEndIndex;
-    }
-    if (rangeStart === tag.plainTextBeginIndex && rangeEnd === plainTextEndIndex) {
-        // the whole tag should be removed
-        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-        plainTextSelectionEndIndex = tag.plainTextBeginIndex + processedChange.length;
-        processedChange = '';
-        lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
-    }
-    else {
-        // only part of the tag should be removed
-        let startChangeDiff = 0;
-        let endChangeDiff = 0;
-        // need to check only rangeStart > tag.plainTextBeginIndex as when rangeStart === tag.plainTextBeginIndex startChangeDiff = 0 and mentionTagLength shouldn't be subtracted
-        if (rangeStart > tag.plainTextBeginIndex) {
-            startChangeDiff = rangeStart - tag.plainTextBeginIndex - mentionTagLength;
-        }
-        endChangeDiff = rangeEnd - tag.plainTextBeginIndex - mentionTagLength;
-        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff);
-        if (startIndex < tag.plainTextBeginIndex) {
-            // if the change is before the tag, the selection should start from startIndex (rangeStart will be equal to tag.plainTextBeginIndex)
-            plainTextSelectionEndIndex = startIndex + change.length;
+const CHAT_CONTAINER_ZINDEX$1 = 1;
+/**
+ * @private
+ */
+const mentionPopoverContainerStyle = (theme) => react.mergeStyles({
+    boxShadow: theme.effects.elevation16,
+    background: theme.semanticColors.bodyBackground,
+    overflow: 'visible',
+    // zIndex to set the mentionPopover above the chat container
+    zIndex: CHAT_CONTAINER_ZINDEX$1 + 1
+});
+/**
+ * @private
+ */
+const headerStyleThemed = (theme) => {
+    return {
+        root: {
+            color: theme.palette.neutralSecondary,
+            margin: '0.5rem 1rem 0.25rem',
+            fontSize: theme.fonts.smallPlus.fontSize
         }
-        else {
-            // if the change is inside the tag, the selection should start with rangeStart
-            plainTextSelectionEndIndex = rangeStart + processedChange.length;
+    };
+};
+/**
+ * @private
+ */
+react.mergeStyles({
+    height: '100%',
+    overflowY: 'visible',
+    overflowX: 'hidden'
+});
+/**
+ * @private
+ */
+const suggestionListStyle = react.mergeStyles({
+    padding: '0.25rem 0rem 0',
+    overflow: 'visible'
+});
+/**
+ * @private
+ */
+const suggestionItemWrapperStyle = (theme) => {
+    return react.mergeStyles({
+        margin: '0.05rem 0.1rem',
+        '&:focus-visible': {
+            outline: `${theme.palette.black} solid 0.1rem`
         }
-        lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
-        // processed change should not be changed as it should be added after the tag
-    }
-    return { result, updatedChange: processedChange, htmlIndex: lastProcessedHTMLIndex, plainTextSelectionEndIndex };
+    });
 };
-/* @conditional-compile-remove(mention) */
 /**
- * Get closing tag information if exists otherwise return information as for self closing tag
- *
  * @private
- * @param tag - Tag data.
- * @returns Closing tag information for the provided tag.
  */
-const getTagClosingTagInfo = (tag) => {
-    let plainTextEndIndex = 0;
-    let closeTagIdx = 0;
-    let closeTagLength = 0;
-    if (tag.plainTextEndIndex !== undefined && tag.closingTagIndex !== undefined) {
-        // close tag exists
-        plainTextEndIndex = tag.plainTextEndIndex;
-        closeTagIdx = tag.closingTagIndex;
-        // tag.tagType.length + </>
-        closeTagLength = tag.tagType.length + 3;
-    }
-    else if (tag.plainTextBeginIndex !== undefined) {
-        // no close tag
-        plainTextEndIndex = tag.plainTextBeginIndex;
-        closeTagIdx = tag.openTagIndex + tag.openTagBody.length;
-        closeTagLength = 0;
-    }
-    return { plainTextEndIndex, closeTagIdx, closeTagLength };
+const suggestionItemStackStyle = (theme, isSuggestionHovered, activeBorder) => {
+    return react.mergeStyles({
+        width: '10rem',
+        alignItems: 'center',
+        height: '36px',
+        padding: '0 0.75rem',
+        background: isSuggestionHovered ? theme.palette.neutralLight : theme.palette.white,
+        border: activeBorder ? `0.0625rem solid ${theme.palette.neutralSecondary}` : 'none'
+    });
 };
-/* @conditional-compile-remove(mention) */
+
+// Copyright (c) Microsoft Corporation.
 /**
- * Go through the text and update it with the changed text
+ * Component to render a pop-up of mention suggestions.
  *
- * @private
- * @param props - Props for update HTML function.
- * @returns Updated HTML and selection index if the selection index should be set.
+ * @internal
  */
-const updateHTML = (props) => {
-    const { htmlText, oldPlainText, newPlainText, 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 };
-    }
-    let result = '';
-    let lastProcessedHTMLIndex = 0;
-    // the value can be updated with empty string when the change covers more than 1 place (tag + before or after the tag)
-    // in this case change won't be added as part of the tag
-    // e.g.: change is before and partially in tag => change will be added before the tag and outdated text in the tag will be removed
-    // 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;
-    // 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
-    let changeNewEndIndex;
-    for (let i = 0; i < tags.length; i++) {
-        const tag = tags[i];
-        if (tag.plainTextBeginIndex === undefined) {
-            continue;
+const _MentionPopover = (props) => {
+    const { suggestions, activeSuggestionIndex, title, target, targetPositionOffset, onRenderSuggestionItem, onSuggestionSelected, onDismiss, location } = props;
+    const theme = react.useTheme();
+    /* @conditional-compile-remove(mention) */
+    const ids = useIdentifiers();
+    const localeStrings = useLocale$1().strings;
+    const popoverRef = React.useRef();
+    const [position, setPosition] = React.useState({ left: 0 });
+    const [hoveredSuggestion, setHoveredSuggestion] = React.useState(undefined);
+    const [changedSelection, setChangedSelection] = React.useState(undefined); // Selection UI as per teams
+    const dismissPopoverWhenClickingOutside = React.useCallback((e) => {
+        const target = e.target;
+        if (popoverRef.current && !popoverRef.current.contains(target)) {
+            onDismiss && onDismiss();
         }
-        // all plain text indexes includes trigger length for the mention that shouldn't be included in
-        // htmlText.substring because html strings don't include the trigger
-        // mentionTagLength will be set only for mention tag, otherwise should be 0
-        let mentionTagLength = 0;
-        let isMentionTag = false;
-        if (tag.tagType === MSFT_MENTION_TAG) {
-            mentionTagLength = mentionTrigger.length;
-            isMentionTag = true;
+    }, [onDismiss]);
+    React.useEffect(() => {
+        if (changedSelection === undefined) {
+            setChangedSelection(false);
         }
-        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);
-            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;
-                lastProcessedHTMLIndex = tag.openTagIndex - endChangeDiff;
-                // the change is handled; exit
-                break;
-            }
-            else {
-                // change continues in the tag
-                lastProcessedHTMLIndex = tag.openTagIndex;
-                // proceed to the next check
-            }
+        else if (changedSelection === false) {
+            setChangedSelection(true);
         }
-        const closingTagInfo = getTagClosingTagInfo(tag);
-        if (startIndex <= closingTagInfo.plainTextEndIndex) {
-            // change started before the end tag
-            if (startIndex <= tag.plainTextBeginIndex && oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
-                // the change is a tag or starts before the tag
-                // tag should be removed, no matter if there are sub-tags
-                result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-                processedChange = '';
-                lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
-                // the change is handled; exit
-                break;
-            }
-            else if (startIndex >= tag.plainTextBeginIndex && oldPlainTextEndIndex <= closingTagInfo.plainTextEndIndex) {
-                // the change is between the tag
-                if (isMentionTag) {
-                    if (change !== '') {
-                        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;
-                            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;
-                            lastProcessedHTMLIndex = tag.openTagIndex;
-                        }
-                        else if (startIndex === closingTagInfo.plainTextEndIndex) {
-                            // non empty change at the end of the mention tag to be added after the mention tag
-                            result +=
-                                htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
-                                    processedChange;
-                            changeNewEndIndex = closingTagInfo.plainTextEndIndex + processedChange.length;
-                            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
-                        }
-                        processedChange = '';
-                    }
-                    else {
-                        const updateMentionTagResult = handleMentionTagUpdate({
-                            htmlText,
-                            oldPlainText,
-                            lastProcessedHTMLIndex,
-                            processedChange,
-                            change,
-                            tag,
-                            closeTagIdx: closingTagInfo.closeTagIdx,
-                            closeTagLength: closingTagInfo.closeTagLength,
-                            plainTextEndIndex: closingTagInfo.plainTextEndIndex,
-                            startIndex,
-                            oldPlainTextEndIndex,
-                            mentionTagLength
-                        });
-                        result += updateMentionTagResult.result;
-                        changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;
-                        processedChange = updateMentionTagResult.updatedChange;
-                        lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
-                    }
-                }
-                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
-                    // with subtags
-                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
-                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
-                    const updatedContent = updateHTML({
-                        htmlText: tag.content,
-                        oldPlainText,
-                        newPlainText,
-                        tags: tag.subTags,
-                        startIndex,
-                        oldPlainTextEndIndex,
-                        change: processedChange,
-                        mentionTrigger
-                    });
-                    result += stringBefore + updatedContent.updatedHTML;
-                    changeNewEndIndex = updatedContent.updatedSelectionIndex;
-                }
-                else {
-                    // no subtags
-                    const startChangeDiff = startIndex - tag.plainTextBeginIndex;
-                    result +=
-                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff) +
-                            processedChange;
-                    processedChange = '';
-                    if (oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
-                        const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex;
-                        lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
-                    }
-                    else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
-                        lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
-                    }
-                }
-                // the change is handled; exit
+    }, [activeSuggestionIndex, changedSelection]);
+    React.useEffect(() => {
+        window && window.addEventListener('click', dismissPopoverWhenClickingOutside);
+        return () => {
+            window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);
+        };
+    }, [dismissPopoverWhenClickingOutside]);
+    // Determine popover position
+    React.useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const rect = (_a = target === null || target === void 0 ? void 0 : target.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const maxWidth = 200;
+        const finalPosition = { maxWidth };
+        // Figure out whether it will fit horizontally
+        const leftOffset = (_b = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.left) !== null && _b !== void 0 ? _b : 0;
+        if (leftOffset + maxWidth > ((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0)) {
+            finalPosition.right = ((_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0) - leftOffset;
+        }
+        else {
+            finalPosition.left = leftOffset;
+        }
+        if (location === 'below') {
+            finalPosition.top = ((_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0) + ((_f = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _f !== void 0 ? _f : 0);
+        }
+        else {
+            // (location === 'above')
+            finalPosition.bottom = ((_g = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : 0) - ((_h = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _h !== void 0 ? _h : 0);
+        }
+        setPosition(finalPosition);
+    }, [location, target, targetPositionOffset]);
+    const handleOnKeyDown = React.useCallback((e) => {
+        switch (e.key) {
+            case 'Escape':
+                onDismiss && onDismiss();
                 break;
+        }
+    }, [onDismiss]);
+    const personaRenderer = React.useCallback((displayName) => {
+        const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;
+        const avatarOptions = {
+            text: (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayNamePlaceholder,
+            size: react.PersonaSize.size24,
+            initialsColor: theme.palette.neutralLight,
+            initialsTextColor: theme.palette.neutralSecondary,
+            showOverflowTooltip: false,
+            showUnknownPersonaCoin: !(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === displayNamePlaceholder
+        };
+        return React__default['default'].createElement(react.Persona, Object.assign({}, avatarOptions));
+    }, [localeStrings, theme]);
+    const defaultOnRenderSuggestionItem = React.useCallback((suggestion, onSuggestionSelected, active) => {
+        return (React__default['default'].createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: (e) => {
+                handleOnKeyDown(e);
+            }, className: suggestionItemWrapperStyle(theme) },
+            React__default['default'].createElement(react.Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, (changedSelection !== null && changedSelection !== void 0 ? changedSelection : false) && active) }, personaRenderer(suggestion.displayText))));
+    }, [
+        handleOnKeyDown,
+        theme,
+        /* @conditional-compile-remove(mention) */
+        ids,
+        hoveredSuggestion,
+        changedSelection,
+        personaRenderer
+    ]);
+    const getHeaderTitle = React.useCallback(() => {
+        if (title) {
+            return title;
+        }
+        /* @conditional-compile-remove(mention) */
+        return localeStrings.mentionPopover.mentionPopoverHeader;
+    }, [localeStrings, title]);
+    return (React__default['default'].createElement("div", { ref: popoverRef },
+        React__default['default'].createElement(react.Stack, { className: react.mergeStyles({
+                maxHeight: 212,
+                maxWidth: position.maxWidth
+            }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
+            React__default['default'].createElement(react.Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
+            React__default['default'].createElement(react.Stack
+            /* @conditional-compile-remove(mention) */
+            , { "data-ui-id": ids.mentionSuggestionList, className: suggestionListStyle }, suggestions.map((suggestion, index) => {
+                const active = index === activeSuggestionIndex;
+                return onRenderSuggestionItem
+                    ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
+                    : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
+            })))));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const DEFAULT_MENTION_TRIGGER = '@';
+/**
+ * @private
+ */
+const TextFieldWithMention = (props) => {
+    const { textFieldProps, dataUiId, textValue, onChange, textFieldRef, onKeyDown, onEnterKeyDown, supportNewline, mentionLookupOptions } = props;
+    const inputBoxRef = React.useRef(null);
+    // Current suggestion list, provided by the callback
+    const [mentionSuggestions, setMentionSuggestions] = React.useState([]);
+    // Current suggestion list, provided by the callback
+    const [activeSuggestionIndex, setActiveSuggestionIndex] = React.useState(undefined);
+    // Index of the current trigger character in the text field
+    const [currentTriggerStartIndex, setCurrentTriggerStartIndex] = React.useState(-1);
+    const [inputTextValue, setInputTextValue] = React.useState('');
+    const [tagsValue, setTagsValue] = React.useState([]);
+    // Index of the previous selection start in the text field
+    const [selectionStartValue, setSelectionStartValue] = React.useState();
+    // Index of the previous selection end in the text field
+    const [selectionEndValue, setSelectionEndValue] = React.useState();
+    // Boolean value to check if onMouseDown event should be handled during select as selection range
+    // for onMouseDown event is not updated yet and the selection range for mouse click/taps will be
+    // updated in onSelect event if needed.
+    const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = React.useState(true);
+    // Point of start of touch/mouse selection
+    const [interactionStartPoint, setInteractionStartPoint] = React.useState();
+    // Target selection from mouse movement
+    const [targetSelection, setTargetSelection] = React.useState();
+    // Caret position in the text field
+    const [caretPosition, setCaretPosition] = React.useState(undefined);
+    // Index of where the caret is in the text field
+    const [caretIndex, setCaretIndex] = React.useState(undefined);
+    const localeStrings = useLocale$1().strings;
+    // Set mention suggestions
+    const updateMentionSuggestions = React.useCallback((suggestions) => {
+        setMentionSuggestions(suggestions);
+    }, [setMentionSuggestions]);
+    // Parse the text and get the plain text version to display in the input box
+    React.useEffect(() => {
+        const trigger = (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) || DEFAULT_MENTION_TRIGGER;
+        const parsedHTMLData = textToTagParser(textValue, trigger);
+        setInputTextValue(parsedHTMLData.plainText);
+        setTagsValue(parsedHTMLData.tags);
+        updateMentionSuggestions([]);
+    }, [textValue, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, updateMentionSuggestions]);
+    React.useEffect(() => {
+        var _a;
+        // effect for caret index update
+        if (caretIndex === undefined || textFieldRef === undefined || (textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === undefined) {
+            return;
+        }
+        // get validated caret index between 0 and inputTextValue.length otherwise caret will be set to incorrect index
+        const updatedCaretIndex = getValidatedIndexInRange({
+            min: 0,
+            max: inputTextValue.length,
+            currentValue: caretIndex
+        });
+        (_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(updatedCaretIndex, updatedCaretIndex);
+        setSelectionStartValue(updatedCaretIndex);
+        setSelectionEndValue(updatedCaretIndex);
+    }, [caretIndex, inputTextValue.length, textFieldRef, setSelectionStartValue, setSelectionEndValue]);
+    const onSuggestionSelected = React.useCallback((suggestion) => {
+        var _a, _b, _c;
+        let selectionEnd = ((_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.selectionEnd) || -1;
+        if (selectionEnd < 0) {
+            selectionEnd = 0;
+        }
+        else if (selectionEnd > inputTextValue.length) {
+            selectionEnd = inputTextValue.length;
+        }
+        const oldPlainText = inputTextValue;
+        const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);
+        // update plain text with the mention html text
+        const newPlainText = inputTextValue.substring(0, currentTriggerStartIndex) + mention + inputTextValue.substring(selectionEnd);
+        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
+        // update html text with updated plain text
+        const updatedContent = updateHTML({
+            htmlText: textValue,
+            oldPlainText,
+            newPlainText,
+            tags: tagsValue,
+            startIndex: currentTriggerStartIndex,
+            oldPlainTextEndIndex: selectionEnd,
+            change: mention,
+            mentionTrigger: triggerText
+        });
+        const displayName = getDisplayNameForMentionSuggestion(suggestion, localeStrings);
+        const newCaretIndex = currentTriggerStartIndex + displayName.length + triggerText.length;
+        // move the caret in the text field to the end of the mention plain text
+        setCaretIndex(newCaretIndex);
+        setSelectionEndValue(newCaretIndex);
+        setSelectionStartValue(newCaretIndex);
+        setCurrentTriggerStartIndex(-1);
+        updateMentionSuggestions([]);
+        // set focus back to text field
+        (_c = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+        setActiveSuggestionIndex(undefined);
+        onChange && onChange(undefined, updatedContent.updatedHTML);
+    }, [
+        textFieldRef,
+        inputTextValue,
+        currentTriggerStartIndex,
+        mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger,
+        onChange,
+        textValue,
+        tagsValue,
+        updateMentionSuggestions,
+        localeStrings
+    ]);
+    const onTextFieldKeyDown = React.useCallback((ev) => {
+        // caretIndex should be set to undefined when the user is typing
+        setCaretIndex(undefined);
+        // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.
+        // it shouldn't be updated in onMouseUp
+        // as onMouseUp can be triggered before or after onSelect event
+        // because its order depends on mouse events not selection.
+        setShouldHandleOnMouseDownDuringSelect(false);
+        if (isEnterKeyEventFromCompositionSession(ev)) {
+            return;
+        }
+        if (mentionSuggestions.length > 0) {
+            if (ev.key === 'ArrowUp') {
+                ev.preventDefault();
+                const newActiveIndex = activeSuggestionIndex === undefined
+                    ? mentionSuggestions.length - 1
+                    : Math.max(activeSuggestionIndex - 1, 0);
+                setActiveSuggestionIndex(newActiveIndex);
             }
-            else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
-                // the change started in the tag but finishes somewhere further
-                const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;
-                if (isMentionTag) {
-                    const updateMentionTagResult = handleMentionTagUpdate({
-                        htmlText,
-                        oldPlainText,
-                        lastProcessedHTMLIndex,
-                        processedChange: '',
-                        change,
-                        tag,
-                        closeTagIdx: closingTagInfo.closeTagIdx,
-                        closeTagLength: closingTagInfo.closeTagLength,
-                        plainTextEndIndex: closingTagInfo.plainTextEndIndex,
-                        startIndex,
-                        oldPlainTextEndIndex,
-                        mentionTagLength
-                    });
-                    result += updateMentionTagResult.result;
-                    lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
-                    // no need to handle plainTextSelectionEndIndex as the change will be added later
-                }
-                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
-                    // with subtags
-                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
-                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
-                    const updatedContent = updateHTML({
-                        htmlText: tag.content,
-                        oldPlainText,
-                        newPlainText,
-                        tags: tag.subTags,
-                        startIndex,
-                        oldPlainTextEndIndex,
-                        change: '',
-                        mentionTrigger
-                    });
-                    result += stringBefore + updatedContent.updatedHTML;
-                }
-                else {
-                    // no subtags
-                    result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff);
-                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
-                }
-                // proceed with the next calculations
-            }
-            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
-                // the change starts before  the tag and finishes after it
-                // tag should be removed, no matter if there are subtags
-                // no need to save anything between lastProcessedHTMLIndex and closeTagIdx + closeTagLength
-                lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
-                // proceed with the next calculations
+            else if (ev.key === 'ArrowDown') {
+                ev.preventDefault();
+                const newActiveIndex = activeSuggestionIndex === undefined
+                    ? 0
+                    : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
+                setActiveSuggestionIndex(newActiveIndex);
             }
-            else if (startIndex === tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
-                // the change starts in the tag and finishes after it
-                // tag should be removed, no matter if there are subtags
-                result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex);
-                // processedChange shouldn't be updated as it will be added after the tag
-                lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
-                // proceed with the next calculations
+            else if (ev.key === 'Escape') {
+                updateMentionSuggestions([]);
             }
-            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
-                // the change  starts before the tag and ends in a tag
-                if (isMentionTag) {
-                    // mention tag
-                    const updateMentionTagResult = handleMentionTagUpdate({
-                        htmlText,
-                        oldPlainText,
-                        lastProcessedHTMLIndex,
-                        processedChange: '',
-                        change,
-                        tag,
-                        closeTagIdx: closingTagInfo.closeTagIdx,
-                        closeTagLength: closingTagInfo.closeTagLength,
-                        plainTextEndIndex: closingTagInfo.plainTextEndIndex,
-                        startIndex,
-                        oldPlainTextEndIndex,
-                        mentionTagLength
-                    });
-                    changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;
-                    result += updateMentionTagResult.result;
-                    lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
-                }
-                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
-                    // with subtags
-                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
-                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
-                    const updatedContent = updateHTML({
-                        htmlText: tag.content,
-                        oldPlainText,
-                        newPlainText,
-                        tags: tag.subTags,
-                        startIndex,
-                        oldPlainTextEndIndex,
-                        change: processedChange,
-                        mentionTrigger
-                    });
-                    processedChange = '';
-                    result += stringBefore + updatedContent.updatedHTML;
-                }
-                else {
-                    // no subtags
-                    result +=
-                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length) + processedChange;
-                    processedChange = '';
-                    // oldPlainTextEndIndex already includes mentionTag length
-                    const endChangeDiff = closingTagInfo.plainTextEndIndex - oldPlainTextEndIndex;
-                    // as change may be before the end of the tag, we need to add the rest of the tag
-                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx - endChangeDiff;
+        }
+        if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
+            ev.preventDefault();
+            // If we are looking up a mention, select the focused suggestion
+            if (mentionSuggestions.length > 0 && activeSuggestionIndex !== undefined) {
+                const selectedMention = mentionSuggestions[activeSuggestionIndex];
+                if (selectedMention) {
+                    onSuggestionSelected(selectedMention);
+                    return;
                 }
-                // the change is handled; exit
-                break;
             }
-            lastProcessedPlainTextTagEndIndex = closingTagInfo.plainTextEndIndex;
+            onEnterKeyDown && onEnterKeyDown();
         }
-        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;
-            if (startIndex >= closingTagInfo.plainTextEndIndex) {
-                const startChangeDiff = startIndex - closingTagInfo.plainTextEndIndex;
-                result +=
-                    htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + startChangeDiff) + processedChange;
-            }
-            else {
-                result +=
-                    htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
-                        processedChange;
-            }
-            processedChange = '';
-            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + endChangeDiff;
-            // the change is handled; exit
-            // break is not required here as this is the last element but added for consistency
-            break;
+        onKeyDown && onKeyDown(ev);
+    }, [
+        onEnterKeyDown,
+        onKeyDown,
+        supportNewline,
+        mentionSuggestions,
+        activeSuggestionIndex,
+        onSuggestionSelected,
+        updateMentionSuggestions
+    ]);
+    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$w(void 0, void 0, void 0, function* () {
+        var _a;
+        const suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
+        if (suggestions.length === 0) {
+            setActiveSuggestionIndex(undefined);
         }
-    }
-    if (lastProcessedHTMLIndex < htmlText.length) {
-        // add the rest of the html string
-        result += htmlText.substring(lastProcessedHTMLIndex);
-    }
-    return { updatedHTML: result, updatedSelectionIndex: changeNewEndIndex };
-};
-/* @conditional-compile-remove(mention) */
-/**
- * Given the oldText and newText, find the start index, old end index and new end index for the changes
- *
- * @private
- * @param props - Props for finding stings diff indexes function.
- * @returns Indexes for change start and ends in new and old texts. The old and new end indexes are exclusive.
- */
-const findStringsDiffIndexes = (props) => {
-    const { oldText, newText, previousSelectionStart, previousSelectionEnd, currentSelectionStart, currentSelectionEnd } = props;
-    const newTextLength = newText.length;
-    const oldTextLength = oldText.length;
-    // let changeStart = 0;
-    let newChangeEnd = newTextLength;
-    let oldChangeEnd = oldTextLength;
-    const previousSelectionStartValue = previousSelectionStart > -1 ? previousSelectionStart : oldTextLength;
-    const previousSelectionEndValue = previousSelectionEnd > -1 ? previousSelectionEnd : oldTextLength;
-    const currentSelectionStartValue = currentSelectionStart > -1 ? currentSelectionStart : newTextLength;
-    const currentSelectionEndValue = currentSelectionEnd > -1 ? currentSelectionEnd : newTextLength;
-    const changeStart = Math.min(previousSelectionStartValue, previousSelectionEndValue, currentSelectionStartValue, currentSelectionEndValue, newTextLength, oldTextLength);
-    if (oldTextLength < newTextLength) {
-        //insert or replacement
-        if (oldTextLength === changeStart) {
-            // when change was at the end of string
-            // change is found
-            newChangeEnd = newTextLength;
-            oldChangeEnd = oldTextLength;
+        else if (activeSuggestionIndex === undefined) {
+            // Set the active to the first, if it's not already set
+            setActiveSuggestionIndex(0);
+        }
+        updateMentionSuggestions(suggestions);
+    }), 500);
+    // Update selections index in mention to navigate by words
+    const updateSelectionIndexesWithMentionIfNeeded = React.useCallback(({ event, inputTextValue, selectionEndValue, selectionStartValue, tagsValue }) => {
+        var _a, _b, _c;
+        let updatedStartIndex = event.currentTarget.selectionStart;
+        let updatedEndIndex = event.currentTarget.selectionEnd;
+        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&
+            event.currentTarget.selectionStart !== null &&
+            event.currentTarget.selectionStart !== -1) {
+            // just a caret movement/usual typing or deleting
+            const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
+            // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
+            if (mentionTag !== undefined &&
+                mentionTag.plainTextBeginIndex !== undefined &&
+                event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
+                event.currentTarget.selectionStart < ((_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex)) {
+                // get updated selection index
+                const newSelectionIndex = findNewSelectionIndexForMention({
+                    tag: mentionTag,
+                    textValue: inputTextValue,
+                    currentSelectionIndex: event.currentTarget.selectionStart,
+                    previousSelectionIndex: selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : inputTextValue.length
+                });
+                updatedStartIndex = newSelectionIndex;
+                updatedEndIndex = newSelectionIndex;
+            }
         }
-        else {
-            for (let i = 1; i < newTextLength && oldTextLength - i >= changeStart; i++) {
-                newChangeEnd = newTextLength - i - 1;
-                oldChangeEnd = oldTextLength - i - 1;
-                if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
-                    // change is found
-                    break;
+        else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {
+            // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click
+            if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {
+                // the selection start is changed
+                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
+                // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
+                if (mentionTag !== undefined &&
+                    mentionTag.plainTextBeginIndex !== undefined &&
+                    event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
+                    event.currentTarget.selectionStart < ((_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex)) {
+                    updatedStartIndex = findNewSelectionIndexForMention({
+                        tag: mentionTag,
+                        textValue: inputTextValue,
+                        currentSelectionIndex: event.currentTarget.selectionStart,
+                        previousSelectionIndex: selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : inputTextValue.length
+                    });
+                }
+            }
+            if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {
+                // the selection end is changed
+                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);
+                // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
+                if (mentionTag !== undefined &&
+                    mentionTag.plainTextBeginIndex !== undefined &&
+                    event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex &&
+                    event.currentTarget.selectionEnd < ((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex)) {
+                    updatedEndIndex = findNewSelectionIndexForMention({
+                        tag: mentionTag,
+                        textValue: inputTextValue,
+                        currentSelectionIndex: event.currentTarget.selectionEnd,
+                        previousSelectionIndex: selectionEndValue !== null && selectionEndValue !== void 0 ? selectionEndValue : inputTextValue.length
+                    });
                 }
             }
-            // make indexes exclusive
-            newChangeEnd += 1;
-            oldChangeEnd += 1;
         }
-    }
-    else if (oldTextLength > newTextLength) {
-        //deletion or replacement
-        if (newTextLength === changeStart) {
-            // when change was at the end of string
-            // change is found
-            newChangeEnd = newTextLength;
-            oldChangeEnd = oldTextLength;
+        // e.currentTarget.selectionDirection should be set to handle shift + arrow keys
+        if (event.currentTarget.selectionDirection === null) {
+            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);
         }
         else {
-            for (let i = 1; i < oldTextLength && newTextLength - i >= changeStart; i++) {
-                newChangeEnd = newTextLength - i - 1;
-                oldChangeEnd = oldTextLength - i - 1;
-                if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
-                    // change is found
-                    break;
-                }
-            }
-            // make indexes exclusive
-            newChangeEnd += 1;
-            oldChangeEnd += 1;
+            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex, event.currentTarget.selectionDirection);
         }
-    }
-    else {
-        // replacement
-        for (let i = 1; i < oldTextLength && oldTextLength - i >= changeStart; i++) {
-            newChangeEnd = newTextLength - i - 1;
-            oldChangeEnd = oldTextLength - i - 1;
-            if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
-                // change is found
-                break;
+        setSelectionStartValue(nullToUndefined(updatedStartIndex));
+        setSelectionEndValue(nullToUndefined(updatedEndIndex));
+    }, [setSelectionStartValue, setSelectionEndValue]);
+    const handleOnSelect = React.useCallback(({ event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue }) => {
+        if (shouldHandleOnMouseDownDuringSelect) {
+            if (targetSelection !== undefined) {
+                setSelectionStartValue(targetSelection.start);
+                setSelectionEndValue(targetSelection.end);
+                event.currentTarget.setSelectionRange(targetSelection.start, undefinedToNull(targetSelection.end));
+                setTargetSelection(undefined);
+            }
+            else if (event.currentTarget.selectionStart !== null) {
+                // on select was triggered by mouse down/up with no movement
+                const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
+                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                    // handle mention click
+                    // Get range of word that was clicked on
+                    const selectionRange = rangeOfWordInSelection({
+                        textInput: inputTextValue,
+                        selectionStart: event.currentTarget.selectionStart,
+                        selectionEnd: nullToUndefined(event.currentTarget.selectionEnd),
+                        tag: mentionTag
+                    });
+                    if (event.currentTarget.selectionDirection === null) {
+                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end);
+                    }
+                    else {
+                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end, event.currentTarget.selectionDirection);
+                    }
+                    setSelectionStartValue(selectionRange.start);
+                    setSelectionEndValue(selectionRange.end);
+                }
+                else {
+                    setSelectionStartValue(event.currentTarget.selectionStart);
+                    setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
+                }
             }
         }
-        // make indexes exclusive if they aren't equal to the length of the string
-        if (newChangeEnd !== newText.length) {
-            newChangeEnd += 1;
+        else {
+            // selection was changed by keyboard
+            updateSelectionIndexesWithMentionIfNeeded({
+                event,
+                inputTextValue,
+                selectionStartValue,
+                selectionEndValue,
+                tagsValue: tags
+            });
         }
-        if (oldChangeEnd !== oldText.length) {
-            oldChangeEnd += 1;
+        // don't set setShouldHandleOnMouseDownDuringSelect(false) here as setSelectionRange
+        // could trigger additional calls of onSelect event and they may not be handled correctly
+        // (because of setSelectionRange calls or rerender)
+    }, [
+        updateSelectionIndexesWithMentionIfNeeded,
+        targetSelection,
+        setTargetSelection,
+        setSelectionStartValue,
+        setSelectionEndValue
+    ]);
+    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$w(void 0, void 0, void 0, function* () {
+        var _b;
+        debouncedQueryUpdate.cancel();
+        if (event.currentTarget === null) {
+            return;
         }
-    }
-    return { changeStart, oldChangeEnd, newChangeEnd };
-};
-/* @conditional-compile-remove(mention) */
-/**
- * Get the html string for the mention suggestion.
- *
- * @private
- * @param suggestion - The mention suggestion.
- * @param localeStrings - The locale strings.
- * @returns The html string for the mention suggestion.
- */
-const htmlStringForMentionSuggestion = (suggestion, localeStrings) => {
-    const idHTML = ' id ="' + suggestion.id + '"';
-    const displayTextHTML = ' displayText ="' + suggestion.displayText + '"';
-    const displayText = getDisplayNameForMentionSuggestion(suggestion, localeStrings);
-    return '<' + MSFT_MENTION_TAG + idHTML + displayTextHTML + '>' + displayText + '</' + MSFT_MENTION_TAG + '>';
-};
-/* @conditional-compile-remove(mention) */
-/**
- * Get display name for the mention suggestion.
- *
- * @private
- *
- * @param suggestion - The mention suggestion.
- * @param localeStrings - The locale strings.
- * @returns The display name for the mention suggestion or display name placeholder if display name is empty.
- */
-const getDisplayNameForMentionSuggestion = (suggestion, localeStrings) => {
-    const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;
-    return suggestion.displayText !== '' ? suggestion.displayText : displayNamePlaceholder !== null && displayNamePlaceholder !== void 0 ? displayNamePlaceholder : '';
-};
-/* @conditional-compile-remove(mention) */
-/**
- * Parse the text and return the tags and the plain text in one go
- * @private
- * @param text - The text to parse for HTML tags
- * @param trigger The trigger to show for the mention tag in plain text
- *
- * @returns An array of tags and the plain text representation
- */
-const textToTagParser = (text, trigger) => {
-    var _a, _b;
-    const tags = []; // Tags passed back to the caller
-    const tagParseStack = []; // Local stack to use while parsing
-    let plainTextRepresentation = '';
-    let parseIndex = 0;
-    while (parseIndex < text.length) {
-        const foundHtmlTag = findNextHtmlTag(text, parseIndex);
-        if (!foundHtmlTag) {
-            if (parseIndex !== 0) {
-                // Add the remaining text to the plain text representation
-                plainTextRepresentation += text.substring(parseIndex);
-            }
-            else {
-                plainTextRepresentation = text;
+        // handle backspace change
+        // onSelect is not called for backspace as selection is not changed and local caret index is outdated
+        setCaretIndex(undefined);
+        const newValue = updatedValue !== null && updatedValue !== void 0 ? updatedValue : '';
+        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
+        const newTextLength = newValue.length;
+        // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly
+        const currentSelectionEndValue = getValidatedIndexInRange({
+            min: 0,
+            max: newTextLength,
+            currentValue: currentSelectionEnd
+        });
+        const currentSelectionStartValue = getValidatedIndexInRange({
+            min: 0,
+            max: newTextLength,
+            currentValue: currentSelectionStart
+        });
+        const previousSelectionStartValue = getValidatedIndexInRange({
+            min: 0,
+            max: inputTextValue.length,
+            currentValue: previousSelectionStart
+        });
+        const previousSelectionEndValue = getValidatedIndexInRange({
+            min: 0,
+            max: inputTextValue.length,
+            currentValue: previousSelectionEnd
+        });
+        // If we are enabled for lookups,
+        if (mentionLookupOptions !== undefined) {
+            // Look at the range of the change for a trigger character
+            const triggerPriorIndex = newValue.lastIndexOf(triggerText, currentSelectionEndValue - 1);
+            // Update the caret position, if not doing a lookup
+            setCaretPosition(textareaCaretTs.Caret.getRelativePosition(event.currentTarget));
+            if (triggerPriorIndex !== undefined) {
+                // trigger is found
+                const isSpaceBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex) === ' ';
+                const wordAtSelection = newValue.substring(triggerPriorIndex, currentSelectionEndValue);
+                let tagIndex = currentTriggerStartIndex;
+                if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0) {
+                    //no space before the trigger <- continuation of the previous word
+                    tagIndex = -1;
+                    setCurrentTriggerStartIndex(tagIndex);
+                }
+                else if (wordAtSelection === triggerText) {
+                    // start of the mention
+                    tagIndex = currentSelectionEndValue - triggerText.length;
+                    if (tagIndex < 0) {
+                        tagIndex = 0;
+                    }
+                    setCurrentTriggerStartIndex(tagIndex);
+                }
+                if (tagIndex === -1) {
+                    updateMentionSuggestions([]);
+                }
+                else {
+                    // In the middle of a @mention lookup
+                    if (tagIndex > -1) {
+                        const query = wordAtSelection.substring(triggerText.length, wordAtSelection.length);
+                        if (query !== undefined) {
+                            yield debouncedQueryUpdate(query);
+                        }
+                    }
+                }
             }
-            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);
-            nextTag.plainTextBeginIndex = plainTextRepresentation.length;
-            if (foundHtmlTag.type === 'open') {
-                tagParseStack.push(nextTag);
-            }
-            else {
-                nextTag.content = '';
-                nextTag.plainTextBeginIndex = plainTextRepresentation.length;
-                nextTag.plainTextEndIndex = plainTextRepresentation.length;
-                addTag(nextTag, tagParseStack, tags);
+        let result = '';
+        if (tagsValue.length === 0) {
+            // no tags in the string and newValue should be used as a result string
+            result = newValue;
+        }
+        else {
+            // there are tags in the text value and htmlTextValue is html string
+            // find diff between old and new text
+            const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
+                oldText: inputTextValue,
+                newText: newValue,
+                previousSelectionStart: previousSelectionStartValue,
+                previousSelectionEnd: previousSelectionEndValue,
+                currentSelectionStart: currentSelectionStartValue,
+                currentSelectionEnd: currentSelectionEndValue
+            });
+            const change = newValue.substring(changeStart, newChangeEnd);
+            // get updated html string
+            const updatedContent = updateHTML({
+                htmlText: htmlTextValue,
+                oldPlainText: inputTextValue,
+                newPlainText: newValue,
+                tags: tagsValue,
+                startIndex: changeStart,
+                oldPlainTextEndIndex: oldChangeEnd,
+                change,
+                mentionTrigger: triggerText
+            });
+            result = updatedContent.updatedHTML;
+            // update caret index if needed
+            if (updatedContent.updatedSelectionIndex !== undefined) {
+                setCaretIndex(updatedContent.updatedSelectionIndex);
+                setSelectionEndValue(updatedContent.updatedSelectionIndex);
+                setSelectionStartValue(updatedContent.updatedSelectionIndex);
             }
         }
-        if (foundHtmlTag.type === 'close') {
-            const currentOpenTag = tagParseStack.pop();
-            const closeTagType = foundHtmlTag.content.substring(2, foundHtmlTag.content.length - 1).toLowerCase();
-            if (currentOpenTag && currentOpenTag.tagType === closeTagType) {
-                // Tag startIdx is absolute to the text. This is updated later to be relative to the parent tag
-                currentOpenTag.content = text.substring(currentOpenTag.openTagIndex + currentOpenTag.openTagBody.length, foundHtmlTag.startIdx);
-                // Insert the plain text pieces for the sub tags
-                if (currentOpenTag.tagType === MSFT_MENTION_TAG) {
-                    plainTextRepresentation =
-                        plainTextRepresentation.slice(0, currentOpenTag.plainTextBeginIndex) +
-                            trigger +
-                            plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);
-                }
-                if (!currentOpenTag.subTags) {
-                    plainTextRepresentation += 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;
+        onChange && onChange(event, result);
+    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
+    // Adjust the selection range based on a mouse / touch interaction
+    const handleOnMove = React.useCallback((event) => {
+        var _a;
+        let targetStart = event.currentTarget.selectionStart;
+        let targetEnd = event.currentTarget.selectionEnd;
+        // Should we do anything?
+        if (interactionStartPoint !== undefined &&
+            // And did selection change?
+            targetStart !== null &&
+            (targetStart !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.start) || targetEnd !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.end))) {
+            const direction = event.clientX > interactionStartPoint.x ? 'forward' : 'backward';
+            const mentionTag = findMentionTagForSelection(tagsValue, direction === 'backward'
+                ? event.currentTarget.selectionStart
+                : (_a = event.currentTarget.selectionEnd) !== null && _a !== void 0 ? _a : event.currentTarget.selectionStart);
+            let updateCurrentTarget = false;
+            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                targetStart = Math.min(mentionTag.plainTextBeginIndex, targetStart);
+                if (mentionTag.plainTextEndIndex !== undefined && targetEnd !== null) {
+                    targetEnd = Math.max(mentionTag.plainTextEndIndex, targetEnd);
                 }
-                currentOpenTag.plainTextEndIndex = plainTextRepresentation.length;
-                addTag(currentOpenTag, tagParseStack, tags);
+                updateCurrentTarget = true;
+                setShouldHandleOnMouseDownDuringSelect(false);
             }
-            else {
-                throw new Error('Unexpected close tag found. Got "' +
-                    closeTagType +
-                    '" but expected "' +
-                    ((_b = tagParseStack[tagParseStack.length - 1]) === null || _b === void 0 ? void 0 : _b.tagType) +
-                    '"');
+            // Update selection range
+            setTargetSelection({ start: targetStart, end: targetEnd });
+            if (updateCurrentTarget) {
+                // Only set the control, if the values are updated
+                event.currentTarget.setSelectionRange(targetStart, targetEnd, direction);
             }
         }
-        // Update parsing index; move past the end of the close tag
-        parseIndex = foundHtmlTag.startIdx + foundHtmlTag.content.length;
-    } // While parseIndex < text.length loop
-    return { tags, plainText: plainTextRepresentation };
-};
-/* @conditional-compile-remove(mention) */
-const parseOpenTag = (tag, startIdx) => {
-    const tagType = tag
-        .substring(1, tag.length - 1)
-        .split(' ')[0]
-        .toLowerCase()
-        .replace('/', '');
-    return {
-        tagType,
-        openTagIndex: startIdx,
-        openTagBody: tag
-    };
-};
-/* @conditional-compile-remove(mention) */
-const findNextHtmlTag = (text, startIndex) => {
-    const tagStartIndex = text.indexOf('<', startIndex);
-    if (tagStartIndex === -1) {
-        // No more tags
-        return undefined;
-    }
-    const tagEndIndex = text.indexOf('>', tagStartIndex);
-    if (tagEndIndex === -1) {
-        // No close tag
-        return undefined;
-    }
-    const tag = text.substring(tagStartIndex, tagEndIndex + 1);
-    let type = 'open';
-    if (tag[1] === '/') {
-        type = 'close';
-    }
-    else if (tag[tag.length - 2] === '/') {
-        type = 'self-closing';
-    }
-    return {
-        content: tag,
-        startIdx: tagStartIndex,
-        type
-    };
+    }, [setTargetSelection, targetSelection, setShouldHandleOnMouseDownDuringSelect, interactionStartPoint, tagsValue]);
+    const announcerText = React.useMemo(() => {
+        if (activeSuggestionIndex === undefined) {
+            return undefined;
+        }
+        const currentMention = mentionSuggestions[activeSuggestionIndex !== null && activeSuggestionIndex !== void 0 ? activeSuggestionIndex : 0];
+        return (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0
+            ? currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText
+            : localeStrings.participantItem.displayNamePlaceholder;
+    }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        mentionSuggestions.length > 0 && (React__default['default'].createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
+                updateMentionSuggestions([]);
+            } })),
+        announcerText !== undefined && React__default['default'].createElement(Announcer$1, { announcementString: announcerText, ariaLive: 'polite' }),
+        React__default['default'].createElement(react.TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: inputTextValue, onChange: (e, newValue) => {
+                // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html
+                // Prevents React from resetting event's properties
+                e.persist();
+                setInputTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                handleOnChange({
+                    event: e,
+                    tagsValue,
+                    htmlTextValue: textValue,
+                    inputTextValue,
+                    currentTriggerStartIndex,
+                    previousSelectionStart: nullToUndefined(selectionStartValue),
+                    previousSelectionEnd: nullToUndefined(selectionEndValue),
+                    currentSelectionStart: nullToUndefined(e.currentTarget.selectionStart),
+                    currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),
+                    updatedValue: newValue
+                });
+            }, onSelect: (e) => {
+                handleOnSelect({
+                    event: e,
+                    inputTextValue,
+                    shouldHandleOnMouseDownDuringSelect,
+                    selectionEndValue,
+                    selectionStartValue,
+                    tags: tagsValue
+                });
+            }, onMouseDown: (e) => {
+                setInteractionStartPoint({ x: e.clientX, y: e.clientY });
+                // as events order is onMouseDown -> onMouseMove -> onMouseUp -> onSelect -> onClick
+                // onClick and onMouseDown can't handle clicking on mention event because
+                // onMouseDown doesn't have correct selectionRange yet and
+                // onClick already has wrong range as it's called after onSelect that updates the selection range
+                // so we need to handle onMouseDown to prevent onSelect default behavior
+                setShouldHandleOnMouseDownDuringSelect(true);
+            }, onMouseMove: handleOnMove, onMouseUp: () => {
+                setInteractionStartPoint(undefined);
+            }, onTouchStart: (e) => {
+                setInteractionStartPoint({
+                    x: e.targetTouches.item(0).clientX,
+                    y: e.targetTouches.item(0).clientY
+                });
+                // see onMouseDown for more details
+                setShouldHandleOnMouseDownDuringSelect(true);
+            }, onTouchMove: handleOnMove, onTouchEnd: () => {
+                setInteractionStartPoint(undefined);
+            }, onBlur: () => {
+                // setup all flags to default values when text field loses focus
+                setShouldHandleOnMouseDownDuringSelect(false);
+                setCaretIndex(undefined);
+                setSelectionStartValue(undefined);
+                setSelectionEndValue(undefined);
+            }, onKeyDown: onTextFieldKeyDown, elementRef: inputBoxRef }))));
 };
-/* @conditional-compile-remove(mention) */
-const addTag = (tag, parseStack, tags) => {
-    var _a;
-    // Add as sub-tag to the parent stack tag, if there is one
-    const parentTag = parseStack[parseStack.length - 1];
-    if (parentTag) {
-        // Adjust the open tag index to be relative to the parent tag
-        const parentContentStartIdx = parentTag.openTagIndex + parentTag.openTagBody.length;
-        const relativeIdx = tag.openTagIndex - parentContentStartIdx;
-        tag.openTagIndex = relativeIdx;
-    }
-    if (!tag.closingTagIndex) {
-        // If the tag is self-closing, the close tag is the same as the open tag
-        if (tag.openTagBody[tag.openTagBody.length - 2] === '/') {
-            tag.closingTagIndex = tag.openTagIndex;
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const InputBoxComponent = (props) => {
+    const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
+    const mergedRootStyle = react.mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
+    const mergedInputFieldStyle = react.mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
+    const mergedTextContainerStyle = react.mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
+    const mergedTextFieldStyle = react.concatStyleSets(textFieldStyle, {
+        fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
+        errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage,
+        suffix: {
+            backgroundColor: 'transparent',
+            // Remove empty space in the suffix area when adding newline-style buttons
+            display: props.inlineChildren ? 'flex' : 'contents',
+            padding: '0 0.25rem'
         }
-        else {
-            // Otherwise, the close tag index is the open tag index + the open tag body + the content length
-            tag.closingTagIndex = tag.openTagIndex + tag.openTagBody.length + ((_a = tag.content) !== null && _a !== void 0 ? _a : []).length;
+    });
+    const mergedChildrenStyle = react.mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);
+    const onTextFieldKeyDown = React.useCallback((ev) => {
+        if (isEnterKeyEventFromCompositionSession(ev)) {
+            return;
         }
-    }
-    // Put the tag where it belongs
-    if (!parentTag) {
-        tags.push(tag);
-    }
-    else {
-        if (!parentTag.subTags) {
-            parentTag.subTags = [tag];
+        if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
+            ev.preventDefault();
+            onEnterKeyDown && onEnterKeyDown();
         }
-        else {
-            parentTag.subTags.push(tag);
+        onKeyDown && onKeyDown(ev);
+    }, [onEnterKeyDown, onKeyDown, supportNewline]);
+    const onRenderChildren = () => {
+        return (React__default['default'].createElement(react.Stack, { horizontal: true, className: mergedChildrenStyle }, children));
+    };
+    const renderTextField = () => {
+        const textFieldProps = {
+            autoFocus: props.autoFocus === 'sendBoxTextField',
+            multiline: true,
+            autoAdjustHeight: true,
+            multiple: false,
+            resizable: false,
+            componentRef: textFieldRef,
+            id,
+            inputClassName: mergedInputFieldStyle,
+            placeholder: placeholderText,
+            autoComplete: 'off',
+            styles: mergedTextFieldStyle,
+            disabled,
+            errorMessage,
+            onRenderSuffix: onRenderChildren
+        };
+        /* @conditional-compile-remove(mention) */
+        const textFieldWithMentionProps = {
+            textFieldProps: textFieldProps,
+            dataUiId: dataUiId,
+            textValue: textValue,
+            onChange: onChange,
+            onKeyDown: onKeyDown,
+            onEnterKeyDown: onEnterKeyDown,
+            textFieldRef: textFieldRef,
+            supportNewline: supportNewline,
+            mentionLookupOptions: props.mentionLookupOptions
+        };
+        /* @conditional-compile-remove(mention) */
+        if (props.mentionLookupOptions) {
+            return React__default['default'].createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
         }
-    }
+        return (React__default['default'].createElement(react.TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown })));
+    };
+    return (React__default['default'].createElement(react.Stack, { className: mergedRootStyle },
+        React__default['default'].createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
+};
+/**
+ * @private
+ */
+const InputBoxButton = (props) => {
+    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;
+    const [isHover, setIsHover] = React.useState(false);
+    const mergedButtonStyle = react.mergeStyles(inputButtonStyle, className);
+    const theme = useTheme();
+    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
+    // Place callout with no gap between it and the button.
+    const calloutProps = {
+        gapSpace: 0,
+        styles: calloutStyle,
+        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
+    };
+    return (React__default['default'].createElement(react.TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
+        React__default['default'].createElement(react.IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
+                setIsHover(true);
+            }, onMouseLeave: () => {
+                setIsHover(false);
+            }, 
+            // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
+            onRenderIcon: () => React__default['default'].createElement(react.Stack, { className: iconWrapperStyle$1 }, onRenderIcon(isHover)) })));
 };
 
 // Copyright (c) Microsoft Corporation.