[$250] Live markdown for private notes

[roryabraham]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1711641837108169

Action Performed:

1. Open any DM
2. click on the header
3. Click on Private Notes
4. Enter markdown text in the text input

Expected Result:

The markdown styling should render in real-time, as it does for the main chat composer.

Actual Result:

No live markdown formatting.

Workaround:

n/a

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ea926bc5d1af45b0
• Upwork Job ID: 1773389834867847168
• Last Price Increase: 2024-03-28

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ea926bc5d1af45b0

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan (External)

[melvin-bot]

Triggered auto assignment to @puneetlath (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Upwork job price has been updated to $250

[nexarvo]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Live markdown for private notes

What is the root cause of that problem?

This is new feature.

What changes do you think we should make in order to solve the problem?

Use RNMarkdownTextInput in private notes of chat as we're doing for Composer here

App/src/pages/PrivateNotes/PrivateNotesEditPage.tsx

Lines 144 to 158 in 3cf9606

	<InputWrapper
	InputComponent={TextInput}
	role={CONST.ROLE.PRESENTATION}
	inputID={INPUT_IDS.PRIVATE_NOTES}
	label={translate('privateNotes.composerLabel')}
	accessibilityLabel={translate('privateNotes.title')}
	autoCompleteType="off"
	maxLength={CONST.MAX_COMMENT_LENGTH}
	autoCorrect={false}
	autoGrowHeight
	containerStyles={[styles.autoGrowHeightMultilineInput]}
	defaultValue={privateNote}
	value={privateNote}
	onChangeText={(text: string) => {
	debouncedSavePrivateNote(text);

What alternative solutions did you explore? (Optional)

NA

[ZhenjaHorbach]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Live markdown for private notes

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

To fix this issue we can need make some changes

For details page we use InputWrapperWithRef

App/src/pages/PrivateNotes/PrivateNotesEditPage.tsx

Lines 142 to 167 in dfb9ae9

	<InputWrapper
	InputComponent={TextInput}
	role={CONST.ROLE.PRESENTATION}
	inputID={INPUT_IDS.PRIVATE_NOTES}
	label={translate('privateNotes.composerLabel')}
	accessibilityLabel={translate('privateNotes.title')}
	autoCompleteType="off"
	maxLength={CONST.MAX_COMMENT_LENGTH}
	autoCorrect={false}
	autoGrowHeight
	containerStyles={[styles.autoGrowHeightMultilineInput]}
	defaultValue={privateNote}
	value={privateNote}
	onChangeText={(text: string) => {
	debouncedSavePrivateNote(text);
	setPrivateNote(text);
	}}
	ref={(el: AnimatedTextInputRef) => {
	if (!el) {
	return;
	}
	privateNotesInput.current = el;
	updateMultilineInputRange(privateNotesInput.current);
	}}
	/>
	</OfflineWithFeedback>

So we need change InputComponent={TextInput} to InputComponent={RNMarkdownTextInput}

And if needed check that everything works

What alternative solutions did you explore? (Optional)

NA

[ZhenjaHorbach]

@nexarvo
Add a comment that you add link after me )

[nexarvo]

@ZhenjaHorbach sorry but I just added markdown to make review process easy. You also updated problem statement which is core of the issue :)

[allroundexperts]

I can review this since @situchan is OoO for a month.

[puneetlath]

Sounds good.

[allroundexperts]

Thanks for the proposals everyone. I think we can move forward with @nexarvo's proposal. Since this was a super simple issue, I don't feel like adding the link to the component adds a lot of value to the proposal.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @nexarvo You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[puneetlath]

How's it going @nexarvo?

[nexarvo]

@puneetlath @allroundexperts Right now we have a PR under review #39519 which is implementing live markdown for task description and it has code to configure Live Markdown in BaseTextInput. Once that PR is merged we can pass markdownEnabled Prop in InputWrapper in private notes and it will enable the live markdown for private notes. I have tested it and it works well. I think we should hold this one for the mentioned issue and once that is merged we can go ahead with this one.

[puneetlath]

Sounds good. I updated this to be on hold for that.

[roryabraham]

taking this off HOLD

[nexarvo]

PR is ready for review.

[nexarvo]

Hi @puneetlath, this issue was merged into prod 1.2 weeks ago(24 Apr) and the automation for assigning BZ team member did not applied to this issue. Can you please check. Thanks

[puneetlath]

Looks like you're right and this is ready to pay. Looks like the Upwork job has expired. Can you send me a link to your upwork profile so I can send you an offer?

[nexarvo]

Thanks, here is my Upwork profile link: https://www.upwork.com/freelancers/~01b5c4ee99eace8e60

[puneetlath]

Offer here: https://www.upwork.com/nx/wm/offer/102135211

@nexarvo please ping me on this issue when you've accepted.

[nexarvo]

@puneetlath offer accepted

[puneetlath]

Payment summary:

• C - @nexarvo - $250 - paid via Upwork
• C+ @allroundexperts - $250 - to be paid via NewDot

@allroundexperts please request on NewDot.

Thanks everyone!

[JmillsExpensify]

$250 approved for @allroundexperts