1 files changed, 48 insertions, 0 deletions
diff --git a/app/assets/javascripts/editor/extensions/source_editor_markdown_ext.js b/app/assets/javascripts/editor/extensions/source_editor_markdown_ext.js
index a16fe93026e..6105a577996 100644
--- a/app/assets/javascripts/editor/extensions/source_editor_markdown_ext.js
+++ b/app/assets/javascripts/editor/extensions/source_editor_markdown_ext.js
@@ -1,8 +1,37 @@
+import { insertMarkdownText } from '~/lib/utils/text_markdown';
+import { EDITOR_TOOLBAR_RIGHT_GROUP, EXTENSION_MARKDOWN_BUTTONS } from '../constants';
+
 export class EditorMarkdownExtension {
   static get extensionName() {
     return 'EditorMarkdown';
   }
 
+  onSetup(instance) {
+    this.toolbarButtons = [];
+    if (instance.toolbar) {
+      this.setupToolbar(instance);
+    }
+  }
+  onBeforeUnuse(instance) {
+    const ids = this.toolbarButtons.map((item) => item.id);
+    if (instance.toolbar) {
+      instance.toolbar.removeItems(ids);
+    }
+  }
+
+  setupToolbar(instance) {
+    this.toolbarButtons = EXTENSION_MARKDOWN_BUTTONS.map((btn) => {
+      return {
+        ...btn,
+        icon: btn.id,
+        group: EDITOR_TOOLBAR_RIGHT_GROUP,
+        category: 'tertiary',
+        onClick: (e) => instance.insertMarkdown(e),
+      };
+    });
+    instance.toolbar.addItems(this.toolbarButtons);
+  }
+
   // eslint-disable-next-line class-methods-use-this
   provides() {
     return {
@@ -36,6 +65,25 @@ export class EditorMarkdownExtension {
         pos.lineNumber += dy;
         instance.setPosition(pos);
       },
+      insertMarkdown: (instance, e) => {
+        const {
+          mdTag: tag,
+          mdBlock: blockTag,
+          mdPrepend,
+          mdSelect: select,
+        } = e.currentTarget.dataset;
+
+        insertMarkdownText({
+          tag,
+          blockTag,
+          wrap: !mdPrepend,
+          select,
+          selected: instance.getSelectedText(),
+          text: instance.getValue(),
+          editor: instance,
+        });
+        instance.focus();
+      },
       /**
        * Adjust existing selection to select text within the original selection.
        * - If `selectedText` is not supplied, we fetch selected text with