Add markdown buttons to file editor27861-add-markdown-editing-buttons-to-the-file-editor

Currently, we have markdown files in many places (e.g. comments, new
issues, etc.). This Merge Request detects if the file being edited is a
markdown file and adds markdown buttons and their functionality to the
single file editor (Not the web IDE)

2 files changed, 23 insertions, 6 deletions

diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index b07f951346e..5f64175362d 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -16,6 +16,7 @@ export default () => {
     const filePath = editBlobForm.data('blobFilename');
     const currentAction = $('.js-file-title').data('currentAction');
     const projectId = editBlobForm.data('project-id');
+    const isMarkdown = editBlobForm.data('is-markdown');
     const commitButton = $('.js-commit-button');
     const cancelLink = $('.btn.btn-cancel');
 
@@ -27,7 +28,13 @@ export default () => {
       window.onbeforeunload = null;
     });
 
-    new EditBlob(`${urlRoot}${assetsPath}`, filePath, currentAction, projectId);
+    new EditBlob({
+      assetsPath: `${urlRoot}${assetsPath}`,
+      filePath,
+      currentAction,
+      projectId,
+      isMarkdown,
+    });
     new NewCommitForm(editBlobForm);
 
     // returning here blocks page navigation
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index 6e19548eed2..011898a5e7a 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -6,22 +6,31 @@ import createFlash from '~/flash';
 import { __ } from '~/locale';
 import TemplateSelectorMediator from '../blob/file_template_mediator';
 import getModeByFileExtension from '~/lib/utils/ace_utils';
+import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
 
 export default class EditBlob {
-  constructor(assetsPath, aceMode, currentAction, projectId) {
-    this.configureAceEditor(aceMode, assetsPath);
+  // The options object has:
+  // assetsPath, filePath, currentAction, projectId, isMarkdown
+  constructor(options) {
+    this.options = options;
+    this.configureAceEditor();
     this.initModePanesAndLinks();
     this.initSoftWrap();
-    this.initFileSelectors(currentAction, projectId);
+    this.initFileSelectors();
   }
 
-  configureAceEditor(filePath, assetsPath) {
+  configureAceEditor() {
+    const { filePath, assetsPath, isMarkdown } = this.options;
     ace.config.set('modePath', `${assetsPath}/ace`);
     ace.config.loadModule('ace/ext/searchbox');
     ace.config.loadModule('ace/ext/modelist');
 
     this.editor = ace.edit('editor');
 
+    if (isMarkdown) {
+      addEditorMarkdownListeners(this.editor);
+    }
+
     // This prevents warnings re: automatic scrolling being logged
     this.editor.$blockScrolling = Infinity;
 
@@ -32,7 +41,8 @@ export default class EditBlob {
     }
   }
 
-  initFileSelectors(currentAction, projectId) {
+  initFileSelectors() {
+    const { currentAction, projectId } = this.options;
     this.fileTemplateMediator = new TemplateSelectorMediator({
       currentAction,
       editor: this.editor,