Add Markdown Editor to Post Project Page

[ankitbisen28]

Description

Currently, the "Post Project" page allows users to enter plain text for project descriptions. To enhance the user experience and allow for richer content, we need to integrate a Markdown editor. The Markdown content should be automatically converted to HTML when the project is viewed.

Acceptance Criteria

1. Markdown Editor Integration

   • Add a Markdown editor to the "Post Project" page.
   • The editor should support basic Markdown syntax (headers, lists, links, images, etc.).

2. Preview Functionality

   • Include a preview pane that displays the HTML output of the Markdown content in real-time.

3. Data Handling

   • Ensure that the Markdown content is saved in the database when a project is created or updated.
   • On the project details page, convert the stored Markdown content to HTML and display it.

4. Validation and Testing

   • Ensure that the editor integrates well with the existing form validation.
   • Test the feature across different browsers and screen sizes to ensure compatibility and responsiveness.

Notes

• Consider using a popular Markdown editor library like react-markdown-editor-lite or SimpleMDE for the integration.
• Ensure that the Markdown editor does not introduce any security vulnerabilities, particularly regarding XSS attacks.
• Update the project creation and editing forms to handle Markdown input seamlessly.

Dependencies

• This feature depends on the existing project creation form and backend logic for storing project details.
• Ensure that the selected Markdown editor library is compatible with the current tech stack.

Tasks

1. Research and choose a suitable Markdown editor library.
2. Integrate the Markdown editor into the "Post Project" form.
3. Add a preview pane for real-time HTML conversion.
4. Update the backend to save Markdown content and convert it to HTML on the project details page.
5. Test the feature thoroughly.