[$70] Add Markdown text editor for the job description

[maxceem]

We have the ability to edit Job via the form https://platform.topcoder-dev.com/taas/myteams/16873/positions/c8aea4b6-da17-4226-91c3-a00ab7118934/edit

We would like to add Markdown editor for the Job Description field:

Use the same editor and the same approach as for appirio-tech/connect-app#4298 (comment)

[maxceem]

Challenge https://www.topcoder.com/challenges/b38a6b34-7e17-46b3-a80d-d427e3e7da23 has been created for this ticket.

This is an automated message for maxceem via Topcoder X

[maxceem]

@yoution could you please comment this issue, so I could assign you after that for processing the payment.

When we create a project in Connect App using this link https://connect.topcoder-dev.com/new-project/taas-jobs we are creating jobs inside TaaS App and show them like this https://platform.topcoder-dev.com/taas/myteams/17104/positions/e67a48a6-0a6f-4b31-8552-95bebdea03a0 and can edit them like this: https://platform.topcoder-dev.com/taas/myteams/17104/positions/e67a48a6-0a6f-4b31-8552-95bebdea03a0/edit

Task:

• add the same editor https://nhn.github.io/tui.editor/latest/tutorial-example03-editor-with-wysiwyg-mode for the Description field in Job Edit form https://platform.topcoder-dev.com/taas/myteams/17104/positions/e67a48a6-0a6f-4b31-8552-95bebdea03a0/edit
• create a reusable component for the editor, follow our approach for the form we use in TaaS App
• when we show the Job in View mode https://platform.topcoder-dev.com/taas/myteams/17104/positions/e67a48a6-0a6f-4b31-8552-95bebdea03a0 we have to properly format the Markdown description to looks the same as during editing. It should be outputted with the same styles. I saw there was a Viewer component https://github.com/nhn/tui.editor/blob/master/apps/react-editor/src/viewer.js so maybe we can use it or implement a similar way. It's up to you how you think would be the best.

[yoution]

@maxceem please assign to me

[maxceem]

Challenge https://www.topcoder.com/challenges/b38a6b34-7e17-46b3-a80d-d427e3e7da23 has been assigned to yoution.

This is an automated message for maxceem via Topcoder X

[maxceem]

Payment task has been updated: https://www.topcoder.com/challenges/b38a6b34-7e17-46b3-a80d-d427e3e7da23
Payments Complete
Winner: yoution
Copilot: maxceem
Challenge b38a6b34-7e17-46b3-a80d-d427e3e7da23 has been paid and closed.

This is an automated message for maxceem via Topcoder X

[maxceem]

@sandhiyakavi this is ready for QA.

[codejamtc]

@maxceem

Testing URL: https://platform.topcoder-dev.com/taas/myteams/16873/positions/edda7f39-5297-461a-89be-2074faa8bdc8

• When we click on the URL posted on the description; it is redirected to https://platform.topcoder-dev.com/taas/myteams/16873/positions/www.google.com and displayed an error '"id" must be a valid GUID'

bandicam.2021-02-24.13-51-49-219.mp4

• Text on the Job Description section moves up when user opens the edit mode

bandicam.2021-02-24.13-53-27-098.mp4

• After the user adds the ordered list and unordered list; he/she can't remove it by clicking on the same button. User needs to use backspace to delete the numbering and bullets. Same for the Task as well

bandicam.2021-02-24.13-58-32-682.mp4

• Indent and Outdent is not working

bandicam.2021-02-24.14-00-50-705.mp4

[maxceem]

@codejamtc good finigins. We are using some existent editor for this, and all of these are true, but it's not super fast to fix these. I'm not sure how hard would it be to fix these as such an editor usually a complex thing.

@wdprice are we ok with these issues for the current release? We can consider fixing them in the future, but we would not be able to do so for tomorrow release. All these are caused by the editor itself, not by our integration.

[wdprice]

@maxceem - I don't suppose there are any params we adjust use to hide indent/outdent in the editor?

I am OK with the odd behavior of numbered list and bulleted list for now.

The one thing I would love to see fixed if possible is the hyperlink - is that really part of the editor or just how we handle links in taas app itself?

[maxceem]

@wdprice thank you for looking into this.

don't suppose there are any params we adjust use to hide indent/outdent in the editor?

we for sure can hide/show any of these buttons and it's configurable. Let me know if you would like to hide any buttons.

The one thing I would love to see fixed if possible is the hyperlink - is that really part of the editor or just how we handle links in taas app itself?

I totally agree with you that this is a bad issue. Unfortunately, it's handled inside the editor, not by TaaS, you can reproduce the same issue here https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic. We would try to find a way to fix it asap.

[codejamtc]

Fixed: 🆗 in Production via milestone v1.5

All the issues mentioned here are still there #100 (comment) but as per the @wdprice's comment #100 (comment) these are ok except the hyperlink issue.

The current situation is explained here #100 (comment) so hope we can track this using a seperate ticket #122