Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP Bump live markdown and migrate to worklet parser #53813

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions ios/NewExpensify.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -637,7 +637,6 @@
"${PODS_CONFIGURATION_BUILD_DIR}/GoogleUtilities/GoogleUtilities_Privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/PromisesObjC/FBLPromises_Privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
"${PODS_ROOT}/../../node_modules/@expensify/react-native-live-markdown/parser/react-native-live-markdown-parser.js",
"${PODS_CONFIGURATION_BUILD_DIR}/RNSVG/RNSVGFilters.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
Expand All @@ -658,7 +657,6 @@
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleUtilities_Privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FBLPromises_Privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/react-native-live-markdown-parser.js",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNSVGFilters.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
Expand Down Expand Up @@ -843,7 +841,6 @@
"${PODS_CONFIGURATION_BUILD_DIR}/GoogleUtilities/GoogleUtilities_Privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/PromisesObjC/FBLPromises_Privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
"${PODS_ROOT}/../../node_modules/@expensify/react-native-live-markdown/parser/react-native-live-markdown-parser.js",
"${PODS_CONFIGURATION_BUILD_DIR}/RNSVG/RNSVGFilters.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
Expand All @@ -864,7 +861,6 @@
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleUtilities_Privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FBLPromises_Privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/react-native-live-markdown-parser.js",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNSVGFilters.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
Expand Down
10 changes: 6 additions & 4 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2391,7 +2391,7 @@ PODS:
- RNGoogleSignin (10.0.1):
- GoogleSignIn (~> 7.0)
- React-Core
- RNLiveMarkdown (0.1.187):
- RNLiveMarkdown (0.1.198):
- DoubleConversion
- glog
- hermes-engine
Expand All @@ -2411,9 +2411,10 @@ PODS:
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- RNLiveMarkdown/newarch (= 0.1.187)
- RNLiveMarkdown/newarch (= 0.1.198)
- RNReanimated/worklets
- Yoga
- RNLiveMarkdown/newarch (0.1.187):
- RNLiveMarkdown/newarch (0.1.198):
- DoubleConversion
- glog
- hermes-engine
Expand All @@ -2433,6 +2434,7 @@ PODS:
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- RNReanimated/worklets
- Yoga
- RNLocalize (2.2.6):
- React-Core
Expand Down Expand Up @@ -3271,7 +3273,7 @@ SPEC CHECKSUMS:
RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
RNGestureHandler: 8781e2529230a1bc3ea8d75e5c3cd071b6c6aed7
RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0
RNLiveMarkdown: 8338447b39fcd86596c74b9e0e9509e365a2dd3b
RNLiveMarkdown: 0294a9daa00d493a2e967c1e056ed60125c1119c
RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
rnmapbox-maps: 460d6ff97ae49c7d5708c3212c6521697c36a0c4
RNPermissions: 0b1429b55af59d1d08b75a8be2459f65a8ac3f28
Expand Down
48 changes: 37 additions & 11 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
},
"dependencies": {
"@dotlottie/react-player": "^1.6.3",
"@expensify/react-native-live-markdown": "0.1.187",
"@expensify/react-native-live-markdown": "0.1.198",
"@expo/metro-runtime": "~3.2.3",
"@firebase/app": "^0.10.10",
"@firebase/performance": "^0.6.8",
Expand Down Expand Up @@ -108,7 +108,7 @@
"date-fns-tz": "^3.2.0",
"dom-serializer": "^0.2.2",
"domhandler": "^4.3.0",
"expensify-common": "2.0.106",
"expensify-common": "2.0.109",
"expo": "51.0.31",
"expo-av": "14.0.7",
"expo-image": "1.12.15",
Expand Down
16 changes: 12 additions & 4 deletions src/components/RNMarkdownTextInput.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type {MarkdownTextInputProps} from '@expensify/react-native-live-markdown';
import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
import {MarkdownTextInput, parseExpensiMark} from '@expensify/react-native-live-markdown';
import type {ForwardedRef} from 'react';
import React from 'react';
import type {TextInput} from 'react-native';
Expand All @@ -10,23 +10,31 @@ import useTheme from '@hooks/useTheme';
const AnimatedMarkdownTextInput = Animated.createAnimatedComponent(MarkdownTextInput);

type AnimatedMarkdownTextInputRef = typeof AnimatedMarkdownTextInput & TextInput & HTMLInputElement;
// Make the parser prop optional for this component because we are always defaulting to `parseExpensiMark`
type RNMarkdownTextInputWithRefProps = Omit<MarkdownTextInputProps, 'parser'> & {
parser?: MarkdownTextInputProps['parser'];
};

function RNMarkdownTextInputWithRef(props: MarkdownTextInputProps, ref: ForwardedRef<AnimatedMarkdownTextInputRef>) {
function RNMarkdownTextInputWithRef(props: RNMarkdownTextInputWithRefProps, ref: ForwardedRef<AnimatedMarkdownTextInputRef>) {
const theme = useTheme();

const {parser, ...restProps} = props;
const parserFunction = parser ?? parseExpensiMark;

return (
<AnimatedMarkdownTextInput
allowFontScaling={false}
textBreakStrategy="simple"
keyboardAppearance={theme.colorScheme}
parser={parserFunction}
ref={(refHandle) => {
if (typeof ref !== 'function') {
return;
}
ref(refHandle as AnimatedMarkdownTextInputRef);
ref(refHandle as unknown as AnimatedMarkdownTextInputRef);
}}
// eslint-disable-next-line
{...props}
{...restProps}
/>
);
}
Expand Down
31 changes: 0 additions & 31 deletions src/components/ReportActionItem/ReportPreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -532,37 +532,6 @@ function ReportPreview({
)}
</View>
</View>
{shouldShowSettlementButton && (
<AnimatedSettlementButton
onlyShowPayElsewhere={onlyShowPayElsewhere}
isPaidAnimationRunning={isPaidAnimationRunning}
onAnimationFinish={stopAnimation}
formattedAmount={getSettlementAmount() ?? ''}
currency={iouReport?.currency}
policyID={policyID}
chatReportID={chatReportID}
iouReport={iouReport}
onPress={confirmPayment}
onPaymentOptionsShow={onPaymentOptionsShow}
onPaymentOptionsHide={onPaymentOptionsHide}
confirmApproval={confirmApproval}
enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
addBankAccountRoute={bankAccountRoute}
shouldHidePaymentOptions={!shouldShowPayButton}
shouldShowApproveButton={shouldShowApproveButton}
shouldDisableApproveButton={shouldDisableApproveButton}
kycWallAnchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
paymentMethodDropdownAnchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
isDisabled={isOffline && !canAllowSettlement}
isLoading={!isOffline && !canAllowSettlement}
/>
)}
{!!shouldShowExportIntegrationButton && !shouldShowSettlementButton && (
<ExportWithDropdownMenu
policy={policy}
Expand Down
10 changes: 6 additions & 4 deletions src/components/TextInput/BaseTextInput/index.native.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ function BaseTextInput(
autoCorrect = true,
prefixCharacter = '',
inputID,
isMarkdownEnabled = false,
isParserEnabled = false,
parser,
excludedMarkdownStyles = [],
shouldShowClearButton = false,
prefixContainerStyle = [],
Expand All @@ -72,8 +73,8 @@ function BaseTextInput(
}: BaseTextInputProps,
ref: ForwardedRef<BaseTextInputRef>,
) {
const InputComponent = isMarkdownEnabled ? RNMarkdownTextInput : RNTextInput;
const isAutoGrowHeightMarkdown = isMarkdownEnabled && autoGrowHeight;
const InputComponent = isParserEnabled ? RNMarkdownTextInput : RNTextInput;
const isAutoGrowHeightMarkdown = isParserEnabled && autoGrowHeight;

const inputProps = {shouldSaveDraft: false, shouldUseDefaultValue: false, ...props};
const theme = useTheme();
Expand All @@ -99,7 +100,7 @@ function BaseTextInput(
const labelTranslateY = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y)).current;
const input = useRef<TextInput | null>(null);
const isLabelActive = useRef(initialActiveLabel);
useHtmlPaste(input, undefined, false, isMarkdownEnabled);
useHtmlPaste(input, undefined, false, isParserEnabled);

// AutoFocus which only works on mount:
useEffect(() => {
Expand Down Expand Up @@ -384,6 +385,7 @@ function BaseTextInput(
readOnly={isReadOnly}
defaultValue={defaultValue}
markdownStyle={markdownStyle}
parser={parser}
/>
{isFocused && !isReadOnly && shouldShowClearButton && !!value && <TextInputClearButton onPressButton={() => setValue('')} />}
{!!inputProps.isLoading && (
Expand Down
Loading
Loading