@azure/communication-react 1.5.1-alpha-202305260013 → 1.5.1-alpha-202305300013

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

@@ -56,9 +56,17 @@ export const InputBoxComponent = (props) => {
     // Index of the previous selection end in the text field
     const [selectionEndValue, setSelectionEndValue] = useState(null);
     /* @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.
+    // 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] = useState(true);
     /* @conditional-compile-remove(mention) */
+    // Point of start of touch/mouse selection
+    const [interactionStartPoint, setInteractionStartPoint] = useState();
+    /* @conditional-compile-remove(mention) */
+    // Target selection from mouse movement
+    const [targetSelection, setTargetSelection] = useState();
+    /* @conditional-compile-remove(mention) */
     // Caret position in the text field
     const [caretPosition, setCaretPosition] = useState(undefined);
     /* @conditional-compile-remove(mention) */
@@ -227,10 +235,6 @@ export const InputBoxComponent = (props) => {
     /* @conditional-compile-remove(mention) */
     const debouncedQueryUpdate = useDebouncedCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        if (query === undefined) {
-            updateMentionSuggestions([]);
-            return;
-        }
         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);
@@ -320,33 +324,54 @@ export const InputBoxComponent = (props) => {
     }, [setSelectionStartValue, setSelectionEndValue]);
     /* @conditional-compile-remove(mention) */
     const handleOnSelect = useCallback((event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue) => {
-        var _a, _b, _c;
-        /* @conditional-compile-remove(mention) */
-        if (shouldHandleOnMouseDownDuringSelect && event.currentTarget.selectionStart !== null) {
-            // on select was triggered by mouse down
-            const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
-            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
-                // handle mention click
-                if (event.currentTarget.selectionDirection === null) {
-                    event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex);
+        if (shouldHandleOnMouseDownDuringSelect) {
+            if (targetSelection !== undefined) {
+                setSelectionStartValue(targetSelection.start);
+                setSelectionEndValue(targetSelection.end);
+                event.currentTarget.setSelectionRange(targetSelection.start, 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: 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 {
-                    event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex, event.currentTarget.selectionDirection);
+                    setSelectionStartValue(event.currentTarget.selectionStart);
+                    setSelectionEndValue(event.currentTarget.selectionEnd);
                 }
-                setSelectionStartValue(mentionTag.plainTextBeginIndex);
-                setSelectionEndValue((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex);
-            }
-            else {
-                setSelectionStartValue(event.currentTarget.selectionStart);
-                setSelectionEndValue(event.currentTarget.selectionEnd);
             }
         }
         else {
             // selection was changed by keyboard
             updateSelectionIndexesWithMentionIfNeeded(event, inputTextValue, selectionStartValue, selectionEndValue, 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]);
+        // 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 = useCallback((event, tagsValue, htmlTextValue, inputTextValue, currentTriggerStartIndex, previousSelectionStart, previousSelectionEnd, currentSelectionStart, currentSelectionEnd, updatedValue) => __awaiter(void 0, void 0, void 0, function* () {
         var _b;
@@ -405,7 +430,7 @@ export const InputBoxComponent = (props) => {
                     setCurrentTriggerStartIndex(tagIndex);
                 }
                 if (tagIndex === -1) {
-                    yield debouncedQueryUpdate(undefined);
+                    updateMentionSuggestions([]);
                 }
                 else {
                     // In the middle of a @mention lookup
@@ -455,12 +480,44 @@ export const InputBoxComponent = (props) => {
             }
         }
         onChange && onChange(event, result);
-    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, debouncedQueryUpdate]);
+    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
     const getInputFieldTextValue = () => {
         /* @conditional-compile-remove(mention) */
         return inputTextValue;
         return textValue;
     };
+    /* @conditional-compile-remove(mention) */
+    // Adjust the selection range based on a mouse / touch interaction
+    const handleOnMove = 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);
+                }
+                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);
+            }
+        }
+    }, [setTargetSelection, targetSelection, setShouldHandleOnMouseDownDuringSelect, interactionStartPoint, tagsValue]);
     return (React.createElement(Stack, { className: mergedRootStyle },
         React.createElement("div", { className: mergedTextContainerStyle },
             /* @conditional-compile-remove(mention) */ mentionSuggestions.length > 0 && (React.createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
@@ -493,8 +550,9 @@ export const InputBoxComponent = (props) => {
                     handleOnSelect(e, inputTextValue, tagsValue, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue);
                 }, 
                 /* @conditional-compile-remove(mention) */
-                onMouseDown: () => {
-                    // as events order is onMouseDown -> onSelect -> onClick
+                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
@@ -502,11 +560,27 @@ export const InputBoxComponent = (props) => {
                     setShouldHandleOnMouseDownDuringSelect(true);
                 }, 
                 /* @conditional-compile-remove(mention) */
-                onTouchStart: () => {
+                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);
@@ -592,6 +666,31 @@ const findMentionTagForSelection = (tags, selection) => {
     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 };
+    }
+    // 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;
+    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 !== null && tag.plainTextEndIndex !== undefined) {
+        const lastWordEndIndex = textInput.indexOf(' ', selectionEnd);
+        end = Math.max(lastWordEndIndex > -1 ? lastWordEndIndex : tag.plainTextEndIndex, selectionEnd);
+    }
+    return { start, end };
+};
+/* @conditional-compile-remove(mention) */
 /**
  * Find a new the selection index.
  *