HTML Editor: Adding markdown download

[AlexanderLill]

Project

For this task, you will be working on a markdown editor called "Trix". "Trix" is a web application written in JavaScript and allows one to write and format text using simple styles such as bold, lists, and hyperlinks.

Setup

1. Start the app in the terminal using the command npm run dev
2. Navigate to the webpage http://localhost:8000 and reload once
3. To stop the app, use CTRL+C within the terminal

Feature Request

Users have requested the functionality to download the content of the editor as a markdown file. The user interface should include an additional button to trigger the markdown download, as indicated in red in the picture. Please read the following text carefully to implement this task.

While coding

👉 While working, search online for needed information. It is quicker than navigating through the entire codebase. 👉 Save the file to see the effects of your changes (no need to refresh the page in the browser).

Task Description

To implement this feature, two changes are necessary:

Change 1: Implement markdown conversion

• ToDo: Duplicate the functionality of the "Download HTML" button and add a conversion to markdown in src/trix/models/toolbar.js
  • Note: Please use the already imported turndown library for converting the HTML document content to a markdown format
• Test: You are done when clicking the "Download Markdown" button downloads a markdown file with markdown content. Here is an example:

  Input	Output
  	This is a heading ====== Some normal text Bullet point 1 Bullet point 2

Change 2: Change the icon of the button

• ToDo: To avoid having two buttons that look the same, change the icon of the "Download Markdown" button in the file src/trix/config/toolbar.js.
  • Note: You can use the class trix-button--icon-download-markdown to show an icon with "MD"
• Test: You are done when both buttons look like shown in the screenshot below, and each of them triggers the respective HTML or markdown download: