The FutureLearn Markdown Editor

What is it?

This is a rich text editor powered by prosemirror. It provides markdown shortcuts as well as a toolbar for producing rich text and produces a string of markdown as it's output.

It currently supports:

• Bold
• Italic
• Links
• Inline Code
• Code blocks with syntax highlighting
• Blockquotes
• Images
• Headings
• Unordered lists
• Ordered lists

For more information see Rich Text Editor in the engineering docs.

Developing

Setup

The node version is listed in .node-version, .nvmrc and in .github/workflows/ci.yaml

Run npm install to install the dependencies.

cd into example and run npm install to install the dependencies of the example app which the test suite will be run against.

You also need to install parcel globally: npm install -g parcel

Running the tests

To run all tests:

npm run test

This starts up both the example app and cypress.

To view the editor you can visit http://localhost:1234/index.html.

Developing

To compile the assets in watch mode, run:

npm run start

Supporting new elements

The markdown renderer relies on markdown-it. Therefore, as it is currently configured, we can only render elements that markdown-it knows about. However, using it's plugin system it should be possible to add our own custom markdown elements. We instanciate the markdown parser here so any customisations to it should be applied at this level to ensure that they get provided to all the plugins as well as the editor as a whole.

Prosemirror relies on it's schema for the elements that it supports, so if we wanted to add new elements to it we'd need to customise the schema. You can find an example here of adding custom elements to the schema.

When adding a new element, you need to add an icon (if it's going to be present in the toolbar) and then define a class for the node or mark that looks something like this. If you then add it to the elements here then the editor and the toolbar will both know about it.

Releasing

In order to prepare a new release, the current process is (there is almost definitely a better way to handle this)

1. Create a new version using npm version patch
2. run npm run build to build the dist and push up to master
3. You can then update it within the main app by using yarn add https://github.com/futurelearn/markdown-editor.git