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

package/dist/dist-esm/react-components/src/components/InputBoxComponent.js

@@ -17,6 +17,9 @@ import { useLocale } from '../localization';
 /* @conditional-compile-remove(mention) */
 import { Announcer } from './Announcer';
 import { Stack, TextField, mergeStyles, concatStyleSets, IconButton, TooltipHost } from '@fluentui/react';
+import { isEnterKeyEventFromCompositionSession } from './utils';
+/* @conditional-compile-remove(mention) */
+import { nullToUndefined, undefinedToNull } from './utils';
 import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';
 /* @conditional-compile-remove(mention) */
 import { Caret } from 'textarea-caret-ts';
@@ -53,10 +56,10 @@ export const InputBoxComponent = (props) => {
     const [tagsValue, setTagsValue] = useState([]);
     /* @conditional-compile-remove(mention) */
     // Index of the previous selection start in the text field
-    const [selectionStartValue, setSelectionStartValue] = useState(null);
+    const [selectionStartValue, setSelectionStartValue] = useState();
     /* @conditional-compile-remove(mention) */
     // Index of the previous selection end in the text field
-    const [selectionEndValue, setSelectionEndValue] = useState(null);
+    const [selectionEndValue, setSelectionEndValue] = 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
@@ -182,33 +185,26 @@ export const InputBoxComponent = (props) => {
         // because its order depends on mouse events not selection.
         /* @conditional-compile-remove(mention) */
         setShouldHandleOnMouseDownDuringSelect(false);
-        // Uses KeyCode 229 and which code 229 to determine if the press of the enter key is from a composition session or not (Safari only)
-        if (ev.nativeEvent.isComposing || ev.nativeEvent.keyCode === 229 || ev.nativeEvent.which === 229) {
+        if (isEnterKeyEventFromCompositionSession(ev)) {
             return;
         }
-        if (ev.key === 'ArrowUp') {
-            /* @conditional-compile-remove(mention) */
-            if (mentionSuggestions.length > 0) {
+        /* @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') {
-            /* @conditional-compile-remove(mention) */
-            if (mentionSuggestions.length > 0) {
+            else if (ev.key === 'ArrowDown') {
                 ev.preventDefault();
                 const newActiveIndex = activeSuggestionIndex === undefined
                     ? 0
                     : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
                 setActiveSuggestionIndex(newActiveIndex);
             }
-        }
-        else if (ev.key === 'Escape') {
-            /* @conditional-compile-remove(mention) */
-            if (mentionSuggestions.length > 0) {
+            else if (ev.key === 'Escape') {
                 updateMentionSuggestions([]);
             }
         }
@@ -257,7 +253,7 @@ export const InputBoxComponent = (props) => {
     }), 500);
     /* @conditional-compile-remove(mention) */
     // Update selections index in mention to navigate by words
-    const updateSelectionIndexesWithMentionIfNeeded = useCallback((event, inputTextValue, selectionStartValue, selectionEndValue, tagsValue) => {
+    const updateSelectionIndexesWithMentionIfNeeded = useCallback(({ event, inputTextValue, selectionEndValue, selectionStartValue, tagsValue }) => {
         var _a, _b, _c;
         let updatedStartIndex = event.currentTarget.selectionStart;
         let updatedEndIndex = event.currentTarget.selectionEnd;
@@ -324,16 +320,16 @@ export const InputBoxComponent = (props) => {
         else {
             event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex, event.currentTarget.selectionDirection);
         }
-        setSelectionStartValue(updatedStartIndex);
-        setSelectionEndValue(updatedEndIndex);
+        setSelectionStartValue(nullToUndefined(updatedStartIndex));
+        setSelectionEndValue(nullToUndefined(updatedEndIndex));
     }, [setSelectionStartValue, setSelectionEndValue]);
     /* @conditional-compile-remove(mention) */
-    const handleOnSelect = useCallback((event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue) => {
+    const handleOnSelect = useCallback(({ event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue }) => {
         if (shouldHandleOnMouseDownDuringSelect) {
             if (targetSelection !== undefined) {
                 setSelectionStartValue(targetSelection.start);
                 setSelectionEndValue(targetSelection.end);
-                event.currentTarget.setSelectionRange(targetSelection.start, targetSelection.end);
+                event.currentTarget.setSelectionRange(targetSelection.start, undefinedToNull(targetSelection.end));
                 setTargetSelection(undefined);
             }
             else if (event.currentTarget.selectionStart !== null) {
@@ -345,7 +341,7 @@ export const InputBoxComponent = (props) => {
                     const selectionRange = rangeOfWordInSelection({
                         textInput: inputTextValue,
                         selectionStart: event.currentTarget.selectionStart,
-                        selectionEnd: event.currentTarget.selectionEnd,
+                        selectionEnd: nullToUndefined(event.currentTarget.selectionEnd),
                         tag: mentionTag
                     });
                     if (event.currentTarget.selectionDirection === null) {
@@ -359,13 +355,19 @@ export const InputBoxComponent = (props) => {
                 }
                 else {
                     setSelectionStartValue(event.currentTarget.selectionStart);
-                    setSelectionEndValue(event.currentTarget.selectionEnd);
+                    setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
                 }
             }
         }
         else {
             // selection was changed by keyboard
-            updateSelectionIndexesWithMentionIfNeeded(event, inputTextValue, selectionStartValue, selectionEndValue, tags);
+            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
@@ -378,7 +380,7 @@ export const InputBoxComponent = (props) => {
         setSelectionEndValue
     ]);
     /* @conditional-compile-remove(mention) */
-    const handleOnChange = useCallback((event, tagsValue, htmlTextValue, inputTextValue, currentTriggerStartIndex, previousSelectionStart, previousSelectionEnd, currentSelectionStart, currentSelectionEnd, updatedValue) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleOnChange = useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter(void 0, void 0, void 0, function* () {
         var _b;
         debouncedQueryUpdate.cancel();
         if (event.currentTarget === null) {
@@ -479,7 +481,7 @@ export const InputBoxComponent = (props) => {
             });
             result = updatedContent.updatedHTML;
             // update caret index if needed
-            if (updatedContent.updatedSelectionIndex !== null) {
+            if (updatedContent.updatedSelectionIndex !== undefined) {
                 setCaretIndex(updatedContent.updatedSelectionIndex);
                 setSelectionEndValue(updatedContent.updatedSelectionIndex);
                 setSelectionStartValue(updatedContent.updatedSelectionIndex);
@@ -548,7 +550,18 @@ export const InputBoxComponent = (props) => {
                     /* @conditional-compile-remove(mention) */
                     setInputTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
                     /* @conditional-compile-remove(mention) */
-                    handleOnChange(e, tagsValue, textValue, inputTextValue, currentTriggerStartIndex, selectionStartValue === null ? undefined : selectionStartValue, selectionEndValue === null ? undefined : selectionEndValue, e.currentTarget.selectionStart === null ? undefined : e.currentTarget.selectionStart, e.currentTarget.selectionEnd === null ? undefined : e.currentTarget.selectionEnd, 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
+                    });
                     /* @conditional-compile-remove(mention) */
                     return;
                     onChange(e, newValue);
@@ -564,7 +577,14 @@ export const InputBoxComponent = (props) => {
                         }
                         return;
                     }
-                    handleOnSelect(e, inputTextValue, tagsValue, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue);
+                    handleOnSelect({
+                        event: e,
+                        inputTextValue,
+                        shouldHandleOnMouseDownDuringSelect,
+                        selectionEndValue,
+                        selectionStartValue,
+                        tags: tagsValue
+                    });
                 }, 
                 /* @conditional-compile-remove(mention) */
                 onMouseDown: (e) => {
@@ -602,8 +622,8 @@ export const InputBoxComponent = (props) => {
                     // setup all flags to default values when text field loses focus
                     setShouldHandleOnMouseDownDuringSelect(false);
                     setCaretIndex(undefined);
-                    setSelectionStartValue(null);
-                    setSelectionEndValue(null);
+                    setSelectionStartValue(undefined);
+                    setSelectionEndValue(undefined);
                     // Dismiss the suggestions on blur, after enough time to select by mouse if needed
                     setTimeout(() => {
                         setMentionSuggestions([]);
@@ -660,12 +680,11 @@ const getValidatedIndexInRange = (props) => {
  */
 const findMentionTagForSelection = (tags, selection) => {
     let mentionTag = undefined;
-    for (let i = 0; i < tags.length; i++) {
-        const tag = tags[i];
+    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
-            break;
+            return false;
         }
         else if (tag.plainTextBeginIndex !== undefined &&
             tag.plainTextBeginIndex <= selection &&
@@ -675,27 +694,28 @@ const findMentionTagForSelection = (tags, selection) => {
                 const selectedTag = findMentionTagForSelection(tag.subTags, selection);
                 if (selectedTag !== undefined) {
                     mentionTag = selectedTag;
-                    break;
+                    return false;
                 }
             }
             else if (tag.tagType === MSFT_MENTION_TAG) {
                 mentionTag = tag;
-                break;
+                return false;
             }
         }
-    }
+        return true;
+    });
     return mentionTag;
 };
 /* @conditional-compile-remove(mention) */
 const rangeOfWordInSelection = ({ textInput, selectionStart, selectionEnd, tag }) => {
     var _a;
     if (tag.plainTextBeginIndex === undefined) {
-        return { start: selectionStart, end: selectionEnd === null ? selectionStart : selectionEnd };
+        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 === null ? selectionStart : selectionEnd;
+    let end = selectionEnd === undefined ? selectionStart : selectionEnd;
     const firstWordStartIndex = textInput.lastIndexOf(' ', selectionStart);
     if (firstWordStartIndex === tag.plainTextBeginIndex) {
         start = firstWordStartIndex;
@@ -705,7 +725,7 @@ const rangeOfWordInSelection = ({ textInput, selectionStart, selectionEnd, tag }
     }
     const firstWordEndIndex = textInput.indexOf(' ', selectionStart);
     end = Math.max(firstWordEndIndex + 1, (_a = tag.plainTextEndIndex) !== null && _a !== void 0 ? _a : firstWordEndIndex + 1);
-    if (selectionEnd !== null && tag.plainTextEndIndex !== undefined) {
+    if (selectionEnd !== undefined && tag.plainTextEndIndex !== undefined) {
         const lastWordEndIndex = textInput.indexOf(' ', selectionEnd);
         end = Math.max(lastWordEndIndex > -1 ? lastWordEndIndex : tag.plainTextEndIndex, selectionEnd);
     }
@@ -768,11 +788,11 @@ const handleMentionTagUpdate = (props) => {
             result: '',
             updatedChange: processedChange,
             htmlIndex: lastProcessedHTMLIndex,
-            plainTextSelectionEndIndex: null
+            plainTextSelectionEndIndex: undefined
         };
     }
     let result = '';
-    let plainTextSelectionEndIndex = null;
+    let plainTextSelectionEndIndex;
     let rangeStart;
     let rangeEnd;
     // check if space symbol is handled in case if string looks like '<1 2 3>'
@@ -801,7 +821,7 @@ const handleMentionTagUpdate = (props) => {
     }
     if (rangeStart === tag.plainTextBeginIndex && rangeEnd === plainTextEndIndex) {
         // the whole tag should be removed
-        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
+        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
         plainTextSelectionEndIndex = tag.plainTextBeginIndex + processedChange.length;
         processedChange = '';
         lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
@@ -815,7 +835,7 @@ const handleMentionTagUpdate = (props) => {
             startChangeDiff = rangeStart - tag.plainTextBeginIndex - mentionTagLength;
         }
         endChangeDiff = rangeEnd - tag.plainTextBeginIndex - mentionTagLength;
-        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff);
+        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;
@@ -824,7 +844,7 @@ const handleMentionTagUpdate = (props) => {
             // if the change is inside the tag, the selection should start with rangeStart
             plainTextSelectionEndIndex = rangeStart + processedChange.length;
         }
-        lastProcessedHTMLIndex = tag.openTagIdx + tag.openTagBody.length + endChangeDiff;
+        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 };
@@ -841,17 +861,17 @@ const getTagClosingTagInfo = (tag) => {
     let plainTextEndIndex = 0;
     let closeTagIdx = 0;
     let closeTagLength = 0;
-    if (tag.plainTextEndIndex !== undefined && tag.closeTagIdx !== undefined) {
+    if (tag.plainTextEndIndex !== undefined && tag.closingTagIndex !== undefined) {
         // close tag exists
         plainTextEndIndex = tag.plainTextEndIndex;
-        closeTagIdx = tag.closeTagIdx;
+        closeTagIdx = tag.closingTagIndex;
         // tag.tagType.length + </>
         closeTagLength = tag.tagType.length + 3;
     }
     else if (tag.plainTextBeginIndex !== undefined) {
         // no close tag
         plainTextEndIndex = tag.plainTextBeginIndex;
-        closeTagIdx = tag.openTagIdx + tag.openTagBody.length;
+        closeTagIdx = tag.openTagIndex + tag.openTagBody.length;
         closeTagLength = 0;
     }
     return { plainTextEndIndex, closeTagIdx, closeTagLength };
@@ -868,7 +888,7 @@ 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: null };
+        return { updatedHTML: newPlainText, updatedSelectionIndex: undefined };
     }
     let result = '';
     let lastProcessedHTMLIndex = 0;
@@ -882,7 +902,7 @@ const updateHTML = (props) => {
     // 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 = null;
+    let changeNewEndIndex;
     for (let i = 0; i < tags.length; i++) {
         const tag = tags[i];
         if (tag.plainTextBeginIndex === undefined) {
@@ -901,19 +921,19 @@ const updateHTML = (props) => {
             // 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.openTagIdx - startChangeDiff) + processedChange;
+            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.openTagIdx - endChangeDiff;
+                lastProcessedHTMLIndex = tag.openTagIndex - endChangeDiff;
                 // the change is handled; exit
                 break;
             }
             else {
                 // change continues in the tag
-                lastProcessedHTMLIndex = tag.openTagIdx;
+                lastProcessedHTMLIndex = tag.openTagIndex;
                 // proceed to the next check
             }
         }
@@ -922,8 +942,8 @@ const updateHTML = (props) => {
             // 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 subtags
-                result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
+                // 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
@@ -935,15 +955,15 @@ const updateHTML = (props) => {
                     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.openTagIdx) + processedChange;
+                            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.openTagIdx) + processedChange;
+                            result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
                             changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
-                            lastProcessedHTMLIndex = tag.openTagIdx;
+                            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
@@ -978,7 +998,7 @@ const updateHTML = (props) => {
                 }
                 else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
                     // with subtags
-                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
                     lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
@@ -997,12 +1017,12 @@ const updateHTML = (props) => {
                     // no subtags
                     const startChangeDiff = startIndex - tag.plainTextBeginIndex;
                     result +=
-                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff) +
+                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff) +
                             processedChange;
                     processedChange = '';
                     if (oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
                         const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex;
-                        lastProcessedHTMLIndex = tag.openTagIdx + tag.openTagBody.length + endChangeDiff;
+                        lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
                     }
                     else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
                         lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
@@ -1035,7 +1055,7 @@ const updateHTML = (props) => {
                 }
                 else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
                     // with subtags
-                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
                     lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
@@ -1051,7 +1071,7 @@ const updateHTML = (props) => {
                 }
                 else {
                     // no subtags
-                    result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff);
+                    result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff);
                     lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
                 }
                 // proceed with the next calculations
@@ -1066,7 +1086,7 @@ const updateHTML = (props) => {
             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.openTagIdx);
+                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
@@ -1095,7 +1115,7 @@ const updateHTML = (props) => {
                 }
                 else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
                     // with subtags
-                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
                     lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
@@ -1113,7 +1133,7 @@ const updateHTML = (props) => {
                 else {
                     // no subtags
                     result +=
-                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length) + processedChange;
+                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length) + processedChange;
                     processedChange = '';
                     // oldPlainTextEndIndex already includes mentionTag length
                     const endChangeDiff = closingTagInfo.plainTextEndIndex - oldPlainTextEndIndex;
@@ -1312,7 +1332,7 @@ const textToTagParser = (text, trigger) => {
             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.openTagIdx + currentOpenTag.openTagBody.length, foundHtmlTag.startIdx);
+                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 =
@@ -1326,7 +1346,7 @@ const textToTagParser = (text, trigger) => {
                 else if (currentOpenTag.subTags.length > 0) {
                     // Add text after the last tag
                     const lastSubTag = currentOpenTag.subTags[currentOpenTag.subTags.length - 1];
-                    const startOfRemainingText = ((_a = lastSubTag.closeTagIdx) !== null && _a !== void 0 ? _a : lastSubTag.openTagIdx) + lastSubTag.tagType.length + 3;
+                    const startOfRemainingText = ((_a = lastSubTag.closingTagIndex) !== null && _a !== void 0 ? _a : lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;
                     const trailingText = currentOpenTag.content.substring(startOfRemainingText);
                     plainTextRepresentation += trailingText;
                 }
@@ -1334,7 +1354,7 @@ const textToTagParser = (text, trigger) => {
                 addTag(currentOpenTag, tagParseStack, tags);
             }
             else {
-                console.error('Unexpected close tag found. Got "' +
+                throw new Error('Unexpected close tag found. Got "' +
                     closeTagType +
                     '" but expected "' +
                     ((_b = tagParseStack[tagParseStack.length - 1]) === null || _b === void 0 ? void 0 : _b.tagType) +
@@ -1355,7 +1375,7 @@ const parseOpenTag = (tag, startIdx) => {
         .replace('/', '');
     return {
         tagType,
-        openTagIdx: startIdx,
+        openTagIndex: startIdx,
         openTagBody: tag
     };
 };
@@ -1392,18 +1412,18 @@ const addTag = (tag, parseStack, tags) => {
     const parentTag = parseStack[parseStack.length - 1];
     if (parentTag) {
         // Adjust the open tag index to be relative to the parent tag
-        const parentContentStartIdx = parentTag.openTagIdx + parentTag.openTagBody.length;
-        const relativeIdx = tag.openTagIdx - parentContentStartIdx;
-        tag.openTagIdx = relativeIdx;
+        const parentContentStartIdx = parentTag.openTagIndex + parentTag.openTagBody.length;
+        const relativeIdx = tag.openTagIndex - parentContentStartIdx;
+        tag.openTagIndex = relativeIdx;
     }
-    if (!tag.closeTagIdx) {
+    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.closeTagIdx = tag.openTagIdx;
+            tag.closingTagIndex = tag.openTagIndex;
         }
         else {
             // Otherwise, the close tag index is the open tag index + the open tag body + the content length
-            tag.closeTagIdx = tag.openTagIdx + tag.openTagBody.length + ((_a = tag.content) !== null && _a !== void 0 ? _a : []).length;
+            tag.closingTagIndex = tag.openTagIndex + tag.openTagBody.length + ((_a = tag.content) !== null && _a !== void 0 ? _a : []).length;
         }
     }
     // Put the tag where it belongs