editormarkdowngitlab

Which editor does GitLab use for issues?


I am looking for the source of the embedded markdown editor that GitLab uses in their issue tracker. It looks like this:

Picture of the GitLab editor

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.


Solution

  • 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:

    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:

    GitLab uses libraries like bootstrap-vue for foundational UI components (form-text.js) and gitlab-ui for customizations (markdown.vue).