Task 1: Adding HTML export to editor (old)

[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 to write and format text using simple styles such as bold, lists, and hyperlinks.

Alexander: Here is the website: https://trix-editor.org/

Setup

Alexander: Depending on if I use a VM or not, the following steps might be skipped

1. Open Visual Studio Code and clone the following repository: URL
2. Install the project's dependencies using the command yarn install
3. Start the editor using the command yarn dev
4. Navigate to the webpage http://localhost:8000

Feature Request

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

Task Description

To implement this feature, two changes are necessary:

Change 1: Add an export button to the UI

• ToDo: Define the button in the file src/trix/config/toolbar.js similar to the other buttons
  • Note: Please use the already defined CSS class trix-button--icon-export for styling
• Test: Check if the new button appears as shown in the picture below, and if its code is executed using console.log:

Change 2: Implement the file download functionality

• ToDo: Implement the export functionality in src/trix/models/editor.js
  • Note: Please use the function getHtml defined in ../core/helpers/renderer to obtain the content of the editor. It takes the editor document as argument.
  • Note: Please use the already imported library file-saver for downloading the file

    Alexander: This library and how to use it is the information retrieval part for having a website in the context

• Test: Type something into the editor, click the export button, and check if a file with the editor content as HTML gets downloaded

  • The following example shows how the downloaded HTML should look like for the given editor content:

  • Input:

  • Output: A file with the following content: <h1>This is a heading</h1><ul><li>Bullet</li><li>List</li></ul><br><pre>Code Snippet</pre>

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).

[AlexanderLill]

Expected diff: https://github.com/HASEL-UZH/trix-solution/pull/2