[$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: @mananjadhav

[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.

[dannymcclain]

Nice! I think that's exactly what @shawnborton was describing.

[shawnborton]

Yes, that looks great to me! Can you show us what some inline code looks like as well just for posterity?

[Krishna2323]

inline code rendering:

inline_code_block_title_rendere.mp4

[shawnborton]

Nice, that seems good to me - thanks!

[Krishna2323]

@roryabraham, the frontend part is almost done. Is there anything left in the backend PR? From the API response, everything seems to be working.

[melvin-bot]

@mananjadhav Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[mananjadhav]

PR is WIP.

[quinthar]

Looking for engineering volunteer: https://expensify.slack.com/archives/C03TQ48KC/p1740777106523109

[Krishna2323]

@Expensify/design, a few things came up while recording the videos for platforms:

1. Should we apply a line-through style for completed tasks?

Monosnap.screencast.2025-03-01.07-03-32.mp4

2. What should be the size of the inline code block? Should we also render multiline code blocks? Currently, I'm using 19 as the font size for inline code.

web_chrome.mp4

[Krishna2323]

@mananjadhav, you can start reviewing the PR now.

[dubielzyk-expensify]

1. I don't think we should change anything from what it is today, so I like keeping it strike-through on completed tasks like it is today. It does become a bit weird with the code blocks so I could see the argument for removing it and if we did we could either A) keep it same text styling with and without or B) we could apply text-supporting to it to make it more fade out a bit more.
2. I think the sizing of the code block example above look pretty good. I guess we should also support multi-line code as well given we support everything else.

Keen on @Expensify/design thoughts as well. This is becoming pretty hectic, but I guess it's still working. Part of me still kinda wishes we just stuck with links and italics 😂

[shawnborton]

Yup, I agree with everything Jon is saying above. And yeah, I agree that this is feeling slightly silly... but maybe we start with allowing full markdown control here, and then we can scale back if we find it to be an issue. I have a feeling most of our users don't even use markdown or aren't familiar with it.

[dubielzyk-expensify]

Yeah, I'm okay with that 👍

[dannymcclain]

I also agree with Jon and Shawn's thoughts. I'm fine starting with all of it and then scaling back.

[quinthar]

Hi! This project seems stuck, so I've asked @Krishna2323 some questions in Slack here: https://expensify.slack.com/archives/C01GTK53T8Q/p1741054265831269?thread_ts=1734840786.675329&cid=C01GTK53T8Q -- I'd love to get a better understanding of where we are currently at with the front end, so we can identify exactly what needs to happen on the back end.

[quinthar]

Seems like @roryabraham has reviewed #54165 and left comments, and @Krishna2323 is responding to those comments. Once resolved, we can merge.

[quinthar]

Bumped again -- I think we should ship what we've got, remaining issues aren't blockers.

[quinthar]

Merged and going out on Monday!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.