[Due for payment 2025-03-21] [$500] Feature request : Upgrade task titles with markdown rendering

[m-natarajan]

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

---

Version Number:
Reproducible in staging?: New Feature
Reproducible in production?: New Feature
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): ts_external_expensify_convert

Background: The primary use of tasks today is Concierge assigning a specific set of onboarding task to the user. Each task currently has a numbered list of steps, generally ending with a link we want them to click. However, we see that some users don't realize the task can be clicked, meaning they don't see the instructions, meaning they don't click the link.

Problem: When new users don't realize the task title is clickable, they don't see the instructions, and thus don't do the call to action.

Solution: Please render task names using the same markdown>html processing as we do normal comments, to allow hyperlinks to be put into titles, in order to shorten the path to the CTA to one click. In other words, make task titles work like task descriptions:

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• 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/~021863958075863531330
• Upwork Job ID: 1863958075863531330
• Last Price Increase: 2024-12-07
• Automatic offers:
• Krishna2323 | Contributor | 105277373

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @muttmuure (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

@muttmuure Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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

[melvin-bot]

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

[quinthar]

Hm, why hasn't this had any proposals? Also, why is the job listing "private"?

[melvin-bot]

Upwork job price has been updated to $500

[mallenexpensify]

The job shows as public to me in Upwork.
Likely no proposals cuz it's at the lowest price, I bumped to $500 to get 👀
If no proposals are submitted by Monday I can try to rally a contributor.

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-12-07 22:35:47 UTC.

Proposal

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

Feature request : Upgrade task titles with markdown rendering

What is the root cause of that problem?

New feature

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

• First create a custom html element model named task-title and add mixedUAStyles: {...styles.taskTitleMenuItem},.
  

  App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

  Lines 29 to 32 in b595f5d

  	const customHTMLElementModels = useMemo(
  	() => ({
  	edited: HTMLElementModel.fromCustomModel({
  	tagName: 'edited',

• Create a component named TaskTitleRenderer.tsx for rendering task titles. Pseudo-code
• In HTMLRenderers/index.ts add 'task-title': TaskTitleRenderer, in HTMLEngineProviderComponentList.
• In TaskView, instead of using a text element for task title use RenderHTML and enclose the title with <task-title></task-title> tag.
• Update getReportName to return return Parser.htmlToText(report?.reportName ?? ''); if if (isTaskReport(report)) { is true.
• Update getTaskTitleFromReport to also use Parser.htmlToText when returning task title.
  

  App/src/libs/TaskUtils.ts

  Lines 41 to 46 in b595f5d

  	function getTaskTitleFromReport(taskReport: OnyxEntry<Report>, fallbackTitle = ''): string {
  	// We need to check for reportID, not just reportName, because when a receiver opens the task for the first time,
  	// an optimistic report is created with the only property – reportName: 'Chat report',
  	// and it will be displayed as the task title without checking for reportID to be present.
  	return taskReport?.reportID && taskReport.reportName ? taskReport.reportName : fallbackTitle;
  	}

  
  

  App/src/libs/ReportUtils.ts

  Line 3920 in b595f5d

  function getReportName(

• In TaskTitlePage update the title limit if needed and add props like shouldSubmitForm, autoGrowHeight (only if want to make it multiline) and few other props.
  

  App/src/pages/tasks/TaskTitlePage.tsx

  Line 43 in b595f5d

  } else if (title.length > CONST.TITLE_CHARACTER_LIMIT) {

  
  

  App/src/pages/tasks/TaskTitlePage.tsx

  Lines 100 to 103 in b595f5d

  	<InputWrapper
  	InputComponent={TextInput}
  	role={CONST.ROLE.PRESENTATION}
  	inputID={INPUT_IDS.TITLE}

• There will be other changes, such as when creating or updating a task, we will need to parse the title and pass it to the backend, just like we do with the description. Additionally, we will need to update the backend to allow the report name to use markdown characters, and we will also need to increase the length limit for the report name, specifically for tasks.

Test Branch

• NOTE: this will only work with optimistic data as the backend trims the markdown characters.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?


What alternative solutions did you explore? (Optional)

• Instead of saving the html on the reportName property we can create a new property or use unused property for task reports like privateNotes.

Result

Monosnap.screencast.2024-12-07.10-42-17.mp4

[mallenexpensify]

@mananjadhav 👀 plz on the proposal above. Thx

[mananjadhav]

Yes I had reviewed the proposal partially on the weekend. The proposal looks good, minor code changes and other areas to make updates can be covered in the implementation.

🎀 👀 🎀

[melvin-bot]

Triggered auto assignment to @johnmlee101, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mallenexpensify]

@JmillsExpensify Vic is out, can you please wrap this issue up? Thx

[mananjadhav]

@JmillsExpensify Quick bump on this one.

@roryabraham All of the linked PRs are now merged. I was wondering if this could be paid out. Also considering the scope of the issue was much larger than anticipated can we please bump the price for this one?

Also @roryabraham if you got a chance to go through this comment.

[melvin-bot]

@JmillsExpensify Huh... This is 4 days overdue. Who can take care of this?

[roryabraham]

All of the linked PRs are now merged. I was wondering if this could be paid out. Also considering the scope of the issue was much larger than anticipated can we please bump the price for this one?

This appears ready for payout. I think it would be reasonable to increase the bounty for this one. @mananjadhav What price do you think is fair?

[JmillsExpensify]

Waiting for final payment amount.

[Krishna2323]

Hi everyone,

After evaluating the time and effort we’ve put into this feature, I feel that $1500 would be a fair amount.
This PR stretched over several months, and the original PR itself involved extensive discussions, numerous changes, and handling of many edge cases.

Even after the initial implementation, we had to address several regressions — many of which were quite nuanced — and we put a lot of effort and time into resolving them as well.

Honestly, during the time I was working on this PR, I lost track of posting new proposals, which felt like a significant setback for me personally, and I’m still trying to get back into the flow.

That said, I completely understand if any other amount feels more appropriate from a broader perspective — I’m comfortable with that too.

Honestly, I even feel a little weird putting a number to it because it was a big learning experience for me, and I'm really grateful for the opportunity to work on this.

Thanks a lot for considering! 🙏

cc: @mananjadhav

[melvin-bot]

@JmillsExpensify Huh... This is 4 days overdue. Who can take care of this?

[roryabraham]

$1500 seems reasonable to me as well 👍🏼

[mananjadhav]

I agree with @Krishna2323's assessment. @JmillsExpensify can you help with the same?

[Krishna2323]

@VictoriaExpensify, since it has been decided to increase the bounty on this issue, I just wanted to clarify that I have already received $500. #53175 (comment)

[mananjadhav]

Thanks for the update @Krishna2323. I think it's @JmillsExpensify who's going to take care of the payout here.

[mallenexpensify]

Contributor: @Krishna2323 paid $1000 via Upwork (alreadypaid $500 here. Payment was on same job, $1k was added as a bonus )
Contributor+: @mananjadhav due $1500 via NewDot.

Do we need regression tests here? Seems like we would. cc @mananjadhav

[mananjadhav]

Yes. I'll need some time to build the regression tests. Quick question, do we have any set of regression tests for markdown fields? Ideally we would need the same tests here as well.

[JmillsExpensify]

Thanks @mallenexpensify for the quick assist!

[mallenexpensify]

do we have any set of regression tests for markdown fields?

These are the tests I see when I search Markdown

Can you access TestRail? Looks like you have read-only access @mananjadhav

do we have any set of regression tests for markdown fields?

[mananjadhav]

Looks like you have read-only access

Ohh I forgot. I'll have to check. I'll check this on the weekend and try to build the test cases.

[garrettmknight]

$1500 approved for @mananjadhav

[melvin-bot]

@JmillsExpensify Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@JmillsExpensify Still overdue 6 days?! Let's take care of this!

[mananjadhav]

I am copying the tests from individual PRs. Should have them ready by today/tomorrow.

[melvin-bot]

@JmillsExpensify 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[mananjadhav]

✅ Regression Test Proposal

1. Basic Markdown Rendering in Task Title

   • Go to any chat.
   • Click/tap on + > Assign task.
   • Paste the following in the title and description fields:

     This is a sentence without any markdown styling.
     Simple sentence with a [link](https://github.com/Expensify/App/issues) , `inline code` and ~line-through~ text.
     # heading with a [link](https://github.com/Expensify/App/issues) and `inline code`.
     > Blockquote with a [link](https://github.com/Expensify/App/issues) and `inline code`.
     A simple text with a ~line-through~ and _italic_ word.
     # A heading with a line-through and italic word.
     *This sentence is bolded using "**"*
     > We should also check emojis 😅
     # And emojis in a heading 😅
     > Whats missing🤔? Please test the missing ones🥶.
     

   • Click "Next" and confirm:
     • Markdown is correctly rendered in title input and matches description.
   • Click "Confirm Task".
   • Validate:
     • Task preview renders markdown properly.
     • Task detail page displays rendered markdown correctly.
     • Text after # and between ** is not incorrectly bolded.

2. Copy Task Title and Validate Markdown Copy Behavior

   • Create a task with markdown in the title.
   • Right click on the task preview > Copy to clipboard.
   • Paste the content.
   • Ensure the pasted title retains proper markdown formatting.

3. Blockquote Hover and Rendering Validation

   • Create a task with blockquote (> block text) in the title.
   • Hover on the task preview in chat.
   • Validate:
     • Blockquote line is visible on hover.
     • Clicking task shows the blockquote rendered as normal text in the task view.

4. Multiline Markdown and Edge Case Formatting

   • Use multiline markdown in title: > > hey, then update to just hey.
   • Confirm:
     • Title renders as normal text.
     • No layout issues or excess spacing in task report header.

5. Image Markdown Handling

   • Create a task with an inline image markdown in title:

     [![300](https://picsum.photos/id/1067/200/300)](https://example.com)
     

   • Validate:
     • Confirmation page does not show image.
     • Task preview shows link instead of image.
     • Task detail view also renders link (no image shown).

6. Search Router Single-line Enforcement

   • Create a task with a multiline title.
   • Open the search router (top right).
   • Confirm:
     • Title is rendered as a single line.

7. Code Block and Link Overlap

   • Create task with title:

     [long link name](https://github.com/Expensify/App/issues/google.com)
     inline code
     

   • Verify:
     • Inline code does not overlap with the link visually.

8. Onboarding Flow Consistency

   • Go through onboarding:
     • Choose “Manage my team’s expenses”
     • Select “1–10 employees”
     • Choose “None”
   • Login using magic link after onboarding.
   • Log in on Android app with same account.
   • Open Concierge chat.
   • Tap any task and verify:
     • Task name remains consistent across navigation.

9. Strikethrough Style for Completed Tasks

   • Open a report and create a task.
   • Complete the task.
   • Confirm:
     • Strikethrough is applied in preview for completed task.

@mallenexpensify Can you please add this to the Task title regression test suite?

Once added we're good to close this one.

[JmillsExpensify]

Regression tests created so closing this one out.