HTML Editor Task

[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 current download button (see red highlight) should be changed to convert the content to markdown before downloading. 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: Change the label of the "Download (HTML)" button to "Download (Markdown)" and adjust the functionality accordingly to convert the HTML to markdown before download (see src/trix/config/toolbar.js)
  • Note: Please use the already imported library turndown 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:

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

Change 2: Modify the format of the downloaded markdown

• ToDo: The downloaded markdown file should look more similar to the commonly used GitHub markdown flavour. For this, please modify the turndown configuration to accomplish the following format:
  • 1. Change the headline style from using equal signs (======) to put a single hashtag in front of the h1 headline (atx-style) , e.g., # H1 Heading.
  • 2. Change the style for code blocks from using indentation (e.g. by 4 spaces) to a fenced style (having ``` above and below a code block).
• Test: You are done when the export of the given example looks like in the example below:
  Here is an example:

Example	Expected Output
	# This is a heading Some normal text ``` if (true) { console.log("It's true!") } else { console.log("It's false!") } ```