Details

Users should be able to download the content of the Editor panel in the app and save this content as a .md file.

To enhance the usability of the markdown editor, the app should implement a feature that allows users to download the current content in the Editor panel. This content should be saved as a .md file.

Acceptance criteria

[ ] The interface includes an accessible "Download" button
[ ] On clicking the "Download" button, an .md file is downloaded to the user's local device, with a default filename that can be renamed by the user
[ ] The downloaded file keeps all markdown formatting as displayed in the Editor panel

Notes

• The implementation should handle any edge cases, such as empty editor content.

Currently the edit and preview section have a fixed width. It will be a great improvement to offer users the ability to resize those sections, so they can fit their needs at any point of their writing process.

Details

The online markdown editor includes a section where users can write markdown. This section should display the line number at the start of each line that has content entered by the user. This way, it is clearer for users if there's any content in the input.

Acceptance criteria

[ ] A number is displayed at the beginning of each input line, corresponding with the line number

[ ] No numbers are displayed if the input has no value

Notes

Details

The application should alert users when they attempt to navigate away from the editor location if they have unsaved changes. A dialog or alert message should inform users that they are going to lose their changes if they leave the current location.

Acceptance criteria

[ ] A dialog or alert is shown when users navigate to another location and there are unsaved changes in the input field.

[ ] The navigation with data loss must be confirmed. If the dialog is closed without confirmation, the current location remains the same.

[ ] The message in the dialog is clear, informative, and guides users on how to avoid losing their changes.

Notes

The app should include three main sections to interact with:

• Navigation bar with an indicator of user's logged-in status
• Edit section
• Preview section

Details

The preview panel should include two options:

• Default preview area
• HTML mode

This way, users can see the styled resulting text or the resulting HTML for the content in the Edit panel.

Acceptance criteria

[ ] The interface in the preview panel includes a clickable element to switch to the HTML view mode
[ ] The interface in the preview panel includes a clickable element to switch back to the default preview
[ ] When users click on the switch to HTML element, the resulting HTML for the text in the Edit panel is shown
[ ] When users click on the default preview element, the resulting styled text for the for the text in the Edit panel is shown

Notes

Users should be able to register an account and log into the app, so they can save their writing progress. Also, logged-in users should be able to see a list of their previously saved progress.