Move the markdown editor to a third-party component, or refactor to roll our own
Problem to solve
We have a rich markdown editor in at least 6 places: MR editor, MR notes, issue editor, issue notes, wiki editor, and milestone editor. The first 4 are somewhat Vue-enabled, while the last two are pure jQuery. There is some code being duplicated in all 6 places.
Further, we implement rich editing logic for this editor from scratch. Formatting buttons are custom, zen mode is custom, and we will soon have custom indentation, shortcut keys, and undo behaviour in it as well.
The markdown editor is a
<textarea> that is becoming increasingly bloated with more and more features nailed onto it.
We use the Monaco editor elsewhere, but Monaco is not compatible with mobile platforms.
Failing that, we should make a re-usable component out of GLForm with an easy-to-use editing API, so that we can extend it easily. Unless we can find an editor that is sufficiently lightweight and provides what we already have out-of-the-box, this may be the better solution.
My worry is that if we continue to add more and more features to the markdown editor, it will devolve into a bloated, unmaintainable mess that will be hard to change down the road.
Developers, testers, QA, documentation/technical writers, product managers, end users.
Permissions and Security
A rich text editing component would deserve its own doc page that outlines all the features we support (indentation, markdown editing, autocomplete, commands, etc.)
Will require cross-browser testing, as well as refactoring of all tests that touch the markdown editor.
What does success look like, and how can we measure that?
- Better code quality
- Higher velocity for this particular component
- Fewer abandoned issues/MRs