Add first implementation of the Editor
The frontend needed a way to edit content of pages, which may comes in different forms. The proposed solution is a custom build of CkEditor5, with additional plugins to support editing of math formulas and special environments. CkEditor is a modern framework to build rich text editors with a modular architecture; it was chosen as it is well-designed, well-supported, feature-rich and has a custom data model to handle content.
The editor currently supports features such as:
- formatted text
- images, in-line base64
- tables
- media embeds: youtube, etc.
- code blocks with automatic syntax highlighting thanks to highlight.js
- math formulas: supporting LaTex syntax and rendered with Katex
- special environments: definition, theorem, proof, etc.
A light utility function parseMediaWikiText() is added to aid proper parsing of content coming from MediaWiki. A more solid solution would be to parse the content directly when exporting data from MediaWiki instead of doing the conversion on-the-fly; however the work done is not heavy and this small utility might suffice for now.
Here are some sample pics of the editor in action.
A sample page with content, along with formulas and special environments:
The editor opens up and load the content blocks into its data model:
Math formulas can be edited in place with an instant preview available:
When adding a special environment, a convenient contextual dropdown is shown:
Here the title is being edited. The title is rendered with the Editable component, introduced by this merge request: a conveniente way to make an element (h1 in this case) editable while keeping its original aspect and style
More formatting can be seen below, such as page breaks, symbols, quotes, tables, images
The editor already supports also editing media embeddings and code blocks. Code blocks are automatically syntax-highlighted when rendered in the real page
