Expensify/react-native-live-markdown

Add selectionStart and selectionEnd variables to markdown input ref

Skalakid opened this issue · 1 comments

Objective

Align the markdown input behavior with normal RN TextInput. Add selectionStart and selectionEnd variables to web markdown input ref.

Current state

Currently markdown ref doesn't have any variables with text selection position

Reproduction code

import * as React from 'react';
import {StyleSheet, Text, View, TextInput} from 'react-native';
import {MarkdownTextInput} from '@expensify/react-native-live-markdown';

const DEFAULT_TEXT = ['Hello, *world*!', 'https://expensify.com', '# Lorem ipsum', '> Hello world', '`foo`', '```\nbar\n```', '@here', '@someone@swmansion.com'].join('\n');

export default function App() {
  const [value, setValue] = React.useState(DEFAULT_TEXT);

  // TODO: use MarkdownTextInput ref instead of TextInput ref
  const ref = React.useRef<TextInput>(null);
  const RNref = React.useRef<TextInput>(null);

  return (
    <View style={styles.container}>
      <Text>TextInput multiline</Text>
      <TextInput
        ref={RNref}
        multiline
        autoCapitalize="none"
        value={value}
        onChangeText={setValue}
        style={styles.input}
      />
      <Text>MarkdownTextInput multiline</Text>
      <MarkdownTextInput
        multiline
        autoCapitalize="none"
        value={value}
        onChangeText={setValue}
        style={styles.input}
        ref={ref}
        markdownStyle={{}}
        placeholder="Type here..."
        onKeyPress={(e) => {
          if (!RNref.current) {
            return;
          }
          console.log('Pressed key:', e.key);
          console.log('Selection start:', ref.current?.selectionStart);
          console.log('Selection end:', ref.current?.selectionEnd);

          if (e.key === 'ArrowUp' && ref.current?.selectionStart === 0 && ref.current?.selectionEnd === 0) {
            RNref.current.focus();
          }
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 60,
  },
  platform: {
    alignItems: 'center',
    marginBottom: 20,
  },
  input: {
    fontSize: 20,
    width: 300,
    padding: 5,
    borderColor: 'gray',
    borderWidth: 1,
    textAlignVertical: 'top',
  },
  text: {
    fontFamily: 'Courier New',
    marginTop: 10,
    height: 100,
  },
});

Issue resolved in #176