WIP: Add Rich WYSIWYG editor to Markdown fields
What does this MR do?
Uses TipTap to implement an editor that allows you to switch between the Markdown and Rich (WYSIWYG) modes whenever you change your mind about how you want to write and format your text, without missing a single change or formatting detail along the way.
The ultimate output is always Markdown, which means we get a WYSIWYG editor without requiring special backend support for HTML comments or issues or wiki pages.
It’s not much more than a proof of concept right now, and I can’t say when it will be finished. I plan to keep working on it as my time allows, and I wouldn’t be opposed to handing it over to a GitLab frontend team member or a community contributor with more time (and Vue experience) than I have :)
What are the relevant issue numbers?
Resolves https://gitlab.com/gitlab-org/gitlab-ce/issues/33667 and https://gitlab.com/gitlab-org/gitlab-ce/issues/15018
To do, in no particular order
Rich editor features:
Nodes:
-
a[name] -
Footnotes
Later:
-
Reference suggestions -
Auto collapsing reference links -
Autolinking -
Slash commands -
Droppable images and other files -
Tab to indent in code block
Editors:
-
Link editor -
Code block editor -
Image editor -
Video editor -
Math editor -
Mermaid editor -
Inline math editor
Editor bugs:
Styling bugs:
-
Vertical scrolling in code block with type
UX bugs:
-
Links are clickable -
Image URLs get segments repeated -
Task list item checkbox doesn't work -
Label reference lacks badge styling -
Can't use sup along with abbr, for example
Markdown serialization:
-
Don't insert blank newline after simple string list item (tight lists?)
Awkward editing:
-
Copy/Pasting description term/details skips list tag -
Table editing is terrible: https://github.com/ProseMirror/prosemirror-tables -
Editing details/summary/dl is awkward
Input rules:
-
Code block input rule doesn't allow language to be provided -
Task list input rule is ignored because of list input rule
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary -
Documentation created/updated -
Tests added for this feature/bug -
Conforms to the code review guidelines -
Conforms to the merge request performance guidelines -
Conforms to the style guides -
Conforms to the database guides