Add selectionStart and selectionEnd variables to markdown input ref
Skalakid opened this issue · 1 comments
Skalakid commented
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,
},
});
robertKozik commented
Issue resolved in #176