Add preview for new markup files
Description
Currently, when creating a new file, there is no way to preview markup files (e.g. markdown) before committing them. As a current workaround, there are users who open up a separate tab such as to create a new issue and copy/paste their markdown there so that they can make edits and preview them. Also, there are users who commit edits over and over so they can see what they look like, which causes issues with lots of unnecessary commits if/when those changes are merged into master branch.
There should some logic to detect that file being created has one of these extensions and enable previewing capabilities.
Previewing new markup files before commiting them would be useful to users who predominantly utilize the GitLab user interface for editing.
Proposal
In the “New file” screen:
- There will be two tabs 1. Write 2. Preview
- When User is creating any Markup files from these extension and by clicking renders the content will be rendered as
HTML
- When user is creating any non-markup files, he can see syntax highlighted content of that file by clicking the preview button.
In the “Edit file” screen:
- Add the “Edit file” page title
- Rename the “Edit file” tab to “Write”
- Restyle the tabs according to the designs
Designs
New file (empty) | New file (markdown) | Edit file (empty) |
---|---|---|
Stretch goals
For stretch goals that are not completed with this issue, please open new issues for them.
-
Add the missing sub-navigation (Files, Commits, etc.) to the “New file” screen -
If the file extension matches the ones used for Markdown, show the “Styling with Markdown is supported” message on the bottom of the file editor for both the “New file” and “Edit file”. -
Dynamically set the editor's syntax highlighting mode depending on the current file extension. Today the syntax highlighting is only applied after saving a file.
MR review
Mention or assign @pedroms to the MR for gitlab-ce~2024184 review before ~Frontend review begins.