TaaS app : New req changes for description fields

nkumar-topcoder commented 3 years ago

For TaaS Intake form : convert (job) Description free format field to marksdown editor. the editor should be similar to workmanager public specification

cc : @RishiRajSahu @maxceem @wdprice @acshields

maxceem commented 3 years ago

On the one hand we already have a RichTextEditor which we use inside Connect App to edit messages:

Though this editor has one big drawback - it doesn't work on mobile devices. So on mobile devices, we are falling back to a plain textarea field and I think this is not acceptable for the project intake form which is a crucial thing to retrieve requirements from the customers and should work flawlessly.

So I guess for the Intake Forma we have to use another editor, for example, the one we use in Work Manager, we have to make sure it works well on mobile devices too.

We could also consider using Markdown editor which we use on the new Topcoder Forums it also looks good (maybe it's the same as in WM):

maxceem commented 3 years ago

Sum up:

TaaS Intake form available by link:

Should use Markdown editor to edit the Description field:

Update component JobPickerRow so it shows Markdown editor for the Duration field.
Create a reusable component for the Markdown text and use this component inside JobPickerRow instead of textarea.
Description filed should have a bigger height like here https://challenges.topcoder-dev.com/projects/16839/challenges/9b129be0-6d68-4bd8-8211-65e5f994e108/edit
For markdown editor use https://www.npmjs.com/package/easymde or suggest a better alternative.

maxceem commented 3 years ago

@yoution would you like to handle it?

yoution commented 3 years ago

@maxceem please assign to me

maxceem commented 3 years ago

Challenge https://www.topcoder.com/challenges/eb3e3d5a-7981-4fcb-a5bf-6032fa3bd484 has been created for this ticket.

This is an automated message for maxceem via Topcoder X

maxceem commented 3 years ago

Challenge https://www.topcoder.com/challenges/eb3e3d5a-7981-4fcb-a5bf-6032fa3bd484 has been assigned to yoution.

This is an automated message for maxceem via Topcoder X

maxceem commented 3 years ago

@yoution assigned. Could you please have a look at the reviews of the tasks in TaaS App first? This task could be done after them. Tomorrow is also fine for this.

maxceem commented 3 years ago

@drasticdpk This is ready for QA on DEV

Link for testing:

Example text for testing:

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~

## Blockquotes

> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

## Lists

Unordered

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar

## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

maxceem commented 3 years ago

@drasticdpk requirements are changed. Please, don't do the QA yet. We would revert it.

maxceem commented 3 years ago

@drasticdpk this is ready for QA now https://connect.topcoder-dev.com/new-project/taas-jobs

The editor now is WYSIWYG, so the customer doesn't see Markdown markup and edit text only visually:

drasticdpk commented 3 years ago

Verified on Dev Mode Reference

@maxceem However as end user perspective, I have some suggestion. If you are ok I can create separate issue, please suggest.

maxceem commented 3 years ago

@drasticdpk Suggestions look good to me, at lest the "tab index order", but let's create a separate issue and get feedback from Ariel regarding increasing the width.

acshields commented 3 years ago

@maxceem @drasticdpk - I am completely fine expanding the width. In fact, I am fine expanding the width on all the intake forms (I will log this as a separate issue).

vikasrohit commented 3 years ago

@maxceem can we close this?

maxceem commented 3 years ago

@vikasrohit yes, I've closed it.

appirio-tech / connect-app

TaaS app : New req changes for description fields #4298