I am looking for the source of the embedded markdown editor that GitLab uses in their issue tracker. It looks like this:
Note that this is not the same as the code editor they use e.g. to display the source of files within the repository. I am hoping that the above editor is (some extension of) an open-source project, but I could not find it.
Note that you have two different editors, as illustrated with this new feature from GitLab 17.7 (December 2024)
Set your preferred text editor as default
In this version, we’re introducing the ability to set a default text editor for a more personalized editing experience. With this change, you can now choose between the rich text editor, the plain text editor, or opt for no default, allowing flexibility in how you create and edit content.
This update ensures smoother workflows by aligning the editor interface with individual preferences or team standards. With this enhancement, GitLab continues to prioritize customization and usability for all users.
See Documentation and Issue.
The issue lists those editors are being used for:
The issue points to sources in app/assets/javascripts/profile/preferences/profile_preferences_bundle.js
, with sources for the rich text editor dispatched between:
app/controllers/concerns/preview_markdown.rb
app/services/preview_markdown_service.rb
app/views/projects/blob/preview.html.haml
app/assets/javascripts/behaviors/preview_markdown.js
app/services/ee/preview_markdown_service.rb
The actual sources are in gitlab-ui, with source files like:
Or, for normal text editor, src/vendor/bootstrap-vue/src/components/form/form-text.js
That looks like MVC (Model-View-Controller), with:
PreviewMarkdownService
).
The backend (Ruby services) generates and processes the preview or final rendered markdown.preview.html.haml
).PreviewMarkdown
concern).GitLab uses libraries like bootstrap-vue
for foundational UI components (form-text.js
) and gitlab-ui
for customizations (markdown.vue
).