Turn URLs in blob editor into clickable links

app/assets/javascripts/blob_edit/edit_blob.js

@@ -4,7 +4,8 @@ import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import TemplateSelectorMediator from '../blob/file_template_mediator';
+import { blobLinkRegex } from '~/blob/blob_utils';
+import TemplateSelectorMediator from '~/blob/file_template_mediator';
 import getModeByFileExtension from '~/lib/utils/ace_utils';
 import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
 
@@ -17,6 +18,7 @@ export default class EditBlob {
     this.initModePanesAndLinks();
     this.initSoftWrap();
     this.initFileSelectors();
+    this.initBlobContentLinkClickability();
   }
 
   configureAceEditor() {
@@ -89,6 +91,21 @@ export default class EditBlob {
     return this.editor.focus();
   }
 
+  initBlobContentLinkClickability() {
+    this.editor.renderer.on('afterRender', () => {
+      document.querySelectorAll('.ace_text-layer .ace_line > *').forEach(token => {
+        if (token.getAttribute('data-linkified') || !token.textContent.includes('http')) return;
+
+        // eslint-disable-next-line no-param-reassign
+        token.innerHTML = token.innerHTML.replace(
+          blobLinkRegex,
+          '<a target="_blank" href="$&">$&</a>',
+        );
+        token.setAttribute('data-linkified', 'true');
+      });
+    });
+  }
+
   initSoftWrap() {
     this.isSoftWrapped = false;
     this.$toggleButton = $('.soft-wrap-toggle');

app/assets/stylesheets/framework/files.scss

@@ -258,6 +258,13 @@
       }
     }
   }
+
+  .file-editor {
+    .ace_line a {
+      pointer-events: auto;
+      color: inherit;
+    }
+  }
 }
 
 span.idiff {

spec/features/projects/blobs/edit_spec.rb

@@ -60,6 +60,13 @@ describe 'Editing file blob', :js do
       expect(page).to have_content 'NextFeature'
     end
 
+    it 'renders a URL in the content of file as a link' do
+      project.repository.create_file(user, 'file.yml', '# go to https://gitlab.com', message: 'testing', branch_name: branch)
+      visit project_edit_blob_path(project, tree_join(branch, 'file.yml'))
+
+      expect(page).to have_selector('.ace_content .ace_line a')
+    end
+
     context 'from blob file path' do
       before do
         visit project_blob_path(project, tree_join(branch, file_path))