Expensify / react-native-live-markdown

Drop-in replacement for React Native's TextInput component with Markdown formatting.
https://www.npmjs.com/package/@expensify/react-native-live-markdown
MIT License
670 stars 45 forks source link

Is it possible to get input cursor `x, y` coordinate? #361

Closed byteab closed 1 month ago

tomekzaw commented 1 month ago

Yes, it should be possible to extend the native code so that onSelectionChange event returns selection.cursorPosition.x and .y as well (on iOS) and its counterpart on Android.

kirillzyusko commented 1 month ago

Hey @ehxxn

You can use https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/input/use-focused-input-handler#onselectionchange to get x/y coordinates

If you want to extend TextInput then you can capture its tag and compare with the tag from event:

const CustomTextInput = (props) => {
  const ref = useRef();
  const [tag, setTag] = useState(-1);

  useEffect(() => {
    setTag(findNodeHandle(ref));
  }, []);

  useFocusedInputHandler({
    onSelectionChange: (e) => {
      "worklet";

      if (e.target === tag) {
        runOnJS(props.customPropHandler)(e);
      }
    }
  }, [tag]);

  return <TextInput ref={ref} {...props} />
}

You may check example app to see how it works in action 👀

byteab commented 1 month ago

Thank you very much! I'll try those solutions

kirillzyusko commented 1 month ago

@ehxxn if you discover, that something is not working or find any bugs - feel free to open new issue in keyboard-controller repository 🙌