Caret position on WEB

src/components/Composer/index.js

@@ -1,5 +1,6 @@
+/* eslint-disable rulesdir/onyx-props-must-have-default */
 import React from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
@@ -15,6 +16,7 @@ import Clipboard from '../../libs/Clipboard';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
+import Text from '../Text';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -73,6 +75,9 @@ const propTypes = {
     /** Whether the composer is full size */
     isComposerFullSize: PropTypes.bool,
 
+    /** Whether the composer is full size */
+    shouldCalculateCaretPosition: PropTypes.bool,
+
     ...withLocalizePropTypes,
 
     ...windowDimensionsPropTypes,
@@ -99,6 +104,7 @@ const defaultProps = {
     isFullComposerAvailable: false,
     setIsFullComposerAvailable: () => {},
     isComposerFullSize: false,
+    shouldCalculateCaretPosition: false,
 };
 
 const IMAGE_EXTENSIONS = {
@@ -129,6 +135,7 @@ class Composer extends React.Component {
                 start: initialValue.length,
                 end: initialValue.length,
             },
+            valueBeforeCaret: '',
         };
 
         this.paste = this.paste.bind(this);
@@ -137,6 +144,8 @@ class Composer extends React.Component {
         this.handleWheel = this.handleWheel.bind(this);
         this.putSelectionInClipboard = this.putSelectionInClipboard.bind(this);
         this.shouldCallUpdateNumberOfLines = this.shouldCallUpdateNumberOfLines.bind(this);
+        this.addCursorPositionToSelectionChange = this.addCursorPositionToSelectionChange.bind(this);
+        this.textRef = React.createRef(null);
     }
 
     componentDidMount() {
@@ -190,6 +199,36 @@ class Composer extends React.Component {
         this.textInput.removeEventListener('wheel', this.handleWheel);
     }
 
+    addCursorPositionToSelectionChange(event) {
+        if (this.props.shouldCalculateCaretPosition) {
+            this.setState(
+                {
+                    valueBeforeCaret: event.target.value.slice(
+                        0,
+                        event.nativeEvent.selection.start,
+                    ),
+                },
+
+                () => {
+                    const customEvent = {
+                        nativeEvent: {
+                            selection: {
+                                start: event.nativeEvent.selection.start,
+                                end: event.nativeEvent.selection.end,
+                                positionX: this.textRef.current.offsetLeft,
+                                positionY: this.textRef.current.offsetTop,
+                            },
+                        },
+                    };
+                    this.props.onSelectionChange(customEvent);
+                },
+            );
+            return;
+        }
+
+        this.props.onSelectionChange(event);
+    }
+
     /**
      * Set pasted text to clipboard
      * @param {String} text
@@ -348,6 +387,7 @@ class Composer extends React.Component {
             updateIsFullComposerAvailable(this.props, numberOfLines);
             this.setState({
                 numberOfLines,
+                width: computedStyle.width,
             });
             this.props.onNumberOfLinesChange(numberOfLines);
         });
@@ -358,28 +398,52 @@ class Composer extends React.Component {
         propStyles.outline = 'none';
         const propsWithoutStyles = _.omit(this.props, 'style');
 
+        // This code creates a hidden text component that helps track the caret position in the visible input.
+
+        const calculationCaretPositionElement = (
+            <View
+                style={{
+                    position: 'absolute',
+                    bottom: -2000,
+                    zIndex: -1,
+                    opacity: 0,
+                }}
+            >
+                <Text
+                    multiline
+                    style={[styles.textInputCompose, {width: this.state.width}]}
+                >
+                    {this.state.valueBeforeCaret}
+                    <Text ref={this.textRef} />
+                </Text>
+            </View>
+        );
+
         // We're disabling autoCorrect for iOS Safari until Safari fixes this issue. See https://github.com/Expensify/App/issues/8592
         return (
-            <RNTextInput
-                autoComplete="off"
-                autoCorrect={!Browser.isMobileSafari()}
-                placeholderTextColor={themeColors.placeholderText}
-                ref={el => this.textInput = el}
-                selection={this.state.selection}
-                onChange={this.shouldCallUpdateNumberOfLines}
-                onSelectionChange={this.onSelectionChange}
-                style={[
-                    propStyles,
-
-                    // We are hiding the scrollbar to prevent it from reducing the text input width,
-                    // so we can get the correct scroll height while calculating the number of lines.
-                    this.state.numberOfLines < this.props.maxLines ? styles.overflowHidden : {},
-                ]}
+            <>
+                <RNTextInput
+                    autoComplete="off"
+                    autoCorrect={!Browser.isMobileSafari()}
+                    placeholderTextColor={themeColors.placeholderText}
+                    ref={el => this.textInput = el}
+                    selection={this.state.selection}
+                    onChange={this.shouldCallUpdateNumberOfLines}
+                    style={[
+                        propStyles,
+
+                        // We are hiding the scrollbar to prevent it from reducing the text input width,
+                        // so we can get the correct scroll height while calculating the number of lines.
+                        this.state.numberOfLines < this.props.maxLines ? styles.overflowHidden : {},
+                    ]}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
-                {...propsWithoutStyles}
-                numberOfLines={this.state.numberOfLines}
-                disabled={this.props.isDisabled}
-            />
+                    {...propsWithoutStyles}
+                    onSelectionChange={this.addCursorPositionToSelectionChange}
+                    numberOfLines={this.state.numberOfLines}
+                    disabled={this.props.isDisabled}
+                />
+                {this.props.shouldCalculateCaretPosition && calculationCaretPositionElement}
+            </>
         );
     }
 }

src/pages/home/report/ReportActionCompose.js

@@ -904,6 +904,7 @@ class ReportActionCompose extends React.Component {
                                                 value={this.state.value}
                                                 numberOfLines={this.props.numberOfLines}
                                                 onNumberOfLinesChange={this.updateNumberOfLines}
+                                                shouldCalculateCaretPosition
                                                 onLayout={(e) => {
                                                     const composerHeight = e.nativeEvent.layout.height;
                                                     if (this.state.composerHeight === composerHeight) {