diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 3e2e603c95cc..395e6b1c618a 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -2514,7 +2514,7 @@ PODS: - RNGoogleSignin (10.0.1): - GoogleSignIn (~> 7.0) - React-Core - - RNLiveMarkdown (0.1.221): + - RNLiveMarkdown (0.1.223): - DoubleConversion - glog - hermes-engine @@ -2534,10 +2534,10 @@ PODS: - ReactCodegen - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - - RNLiveMarkdown/newarch (= 0.1.221) + - RNLiveMarkdown/newarch (= 0.1.223) - RNReanimated/worklets - Yoga - - RNLiveMarkdown/newarch (0.1.221): + - RNLiveMarkdown/newarch (0.1.223): - DoubleConversion - glog - hermes-engine @@ -3412,7 +3412,7 @@ SPEC CHECKSUMS: RNFS: 4ac0f0ea233904cb798630b3c077808c06931688 RNGestureHandler: 364e6862a112045bb5c5d35601f0bdb0304af979 RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0 - RNLiveMarkdown: 9940212ca19bf54101b585178e691ee040b82c35 + RNLiveMarkdown: 5c76c659b125006ff525a095b65184ecb72392f3 RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81 rnmapbox-maps: d184c8d3213acf4c97ec71fbbb6f9d4954552d80 RNPermissions: 0b1429b55af59d1d08b75a8be2459f65a8ac3f28 diff --git a/package-lock.json b/package-lock.json index 167a9c9fa843..9befce9c5196 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "dependencies": { "@dotlottie/react-player": "^1.6.3", "@expensify/react-native-background-task": "file:./modules/background-task", - "@expensify/react-native-live-markdown": "0.1.221", + "@expensify/react-native-live-markdown": "0.1.223", "@expo/metro-runtime": "^4.0.0", "@firebase/app": "^0.10.10", "@firebase/performance": "^0.6.8", @@ -3642,9 +3642,9 @@ "link": true }, "node_modules/@expensify/react-native-live-markdown": { - "version": "0.1.221", - "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.221.tgz", - "integrity": "sha512-2CeBE1LsNvslaqYmPlf1hsl5gqG3eMsn+7jUSAZ4YmQqz1iLKJn+ryQVE4Rl0eLeeikWDlKvqX9isQHgKofLgw==", + "version": "0.1.223", + "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.223.tgz", + "integrity": "sha512-rE5cQ9lBDP2tqtR4Tta3PNx2i5K83sdht1meYMvmLPqFVy7C9A743wzZe6oudVnhSDem8MbU4NMJStadp9xn6Q==", "license": "MIT", "workspaces": [ "./example", diff --git a/package.json b/package.json index 94ded80495b4..297b440b988e 100644 --- a/package.json +++ b/package.json @@ -76,8 +76,8 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.221", "@expensify/react-native-background-task": "file:./modules/background-task", + "@expensify/react-native-live-markdown": "0.1.223", "@expo/metro-runtime": "^4.0.0", "@firebase/app": "^0.10.10", "@firebase/performance": "^0.6.8", diff --git a/src/stories/Composer.stories.tsx b/src/stories/Composer.stories.tsx index a92dc0e789a0..efb8e05614e2 100644 --- a/src/stories/Composer.stories.tsx +++ b/src/stories/Composer.stories.tsx @@ -5,7 +5,7 @@ import React, {useState} from 'react'; import {Image, View} from 'react-native'; import type {FileObject} from '@components/AttachmentModal'; import Composer from '@components/Composer'; -import type {ComposerProps} from '@components/Composer/types'; +import type {ComposerProps, CustomSelectionChangeEvent, TextSelection} from '@components/Composer/types'; import RenderHTML from '@components/RenderHTML'; import Text from '@components/Text'; import withNavigationFallback from '@components/withNavigationFallback'; @@ -28,11 +28,17 @@ const story: Meta = { const parser = new ExpensiMark(); +const DEFAULT_VALUE = `Composer can do the following: + + * It can contain MD e.g. *bold* _italic_ + * Supports Pasted Images via Ctrl+V`; + function Default(props: ComposerProps) { const StyleUtils = useStyleUtils(); const [pastedFile, setPastedFile] = useState(null); - const [comment, setComment] = useState(props.defaultValue); + const [comment, setComment] = useState(DEFAULT_VALUE); const renderedHTML = parser.replace(comment ?? ''); + const [selection, setSelection] = useState(() => ({start: DEFAULT_VALUE.length, end: DEFAULT_VALUE.length, positionX: 0, positionY: 0})); return ( @@ -41,8 +47,13 @@ function Default(props: ComposerProps) { // eslint-disable-next-line react/jsx-props-no-spreading {...props} multiline + value={comment} onChangeText={setComment} onPasteFile={setPastedFile} + selection={selection} + onSelectionChange={(e: CustomSelectionChangeEvent) => { + setSelection(e.nativeEvent.selection); + }} style={[defaultStyles.textInputCompose, defaultStyles.w100, defaultStyles.verticalAlignTop]} /> @@ -73,10 +84,6 @@ Default.args = { autoFocus: true, placeholder: 'Compose Text Here', placeholderTextColor: defaultTheme.placeholderText, - defaultValue: `Composer can do the following: - - * It can contain MD e.g. *bold* _italic_ - * Supports Pasted Images via Ctrl+V`, isDisabled: false, maxLines: 16, };