Addressing the review

- prevent x-site scripting when pasting preview html
- fixed the width of the preview panel
- improved the url generation for fetching the preview

app/assets/javascripts/blob_edit/edit_blob.js

 import $ from 'jquery';
 import { FileTemplateExtension } from '~/editor/extensions/source_editor_file_template_ext';
 import SourceEditor from '~/editor/source_editor';
+import { getBlobLanguage } from '~/editor/utils';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
@@ -16,16 +17,7 @@ export default class EditBlob {
     this.configureMonacoEditor();
 
     if (this.options.isMarkdown) {
-      import('~/editor/extensions/source_editor_markdown_ext')
-        .then(({ EditorMarkdownExtension: MarkdownExtension } = {}) => {
-          this.editor.use(new MarkdownExtension({ instance: this.editor }));
-          addEditorMarkdownListeners(this.editor);
-        })
-        .catch((e) =>
-          createFlash({
-            message: `${BLOB_EDITOR_ERROR}: ${e}`,
-          }),
-        );
+      this.fetchMarkdownExtension();
     }
 
     this.initModePanesAndLinks();
@@ -34,12 +26,30 @@ export default class EditBlob {
     this.editor.focus();
   }
 
+  fetchMarkdownExtension() {
+    import('~/editor/extensions/source_editor_markdown_ext')
+      .then(({ EditorMarkdownExtension: MarkdownExtension } = {}) => {
+        this.editor.use(
+          new MarkdownExtension({ instance: this.editor, projectPath: this.options.projectPath }),
+        );
+        this.hasMarkdownExtension = true;
+        addEditorMarkdownListeners(this.editor);
+      })
+      .catch((e) =>
+        createFlash({
+          message: `${BLOB_EDITOR_ERROR}: ${e}`,
+        }),
+      );
+  }
+
   configureMonacoEditor() {
     const editorEl = document.getElementById('editor');
     const fileNameEl = document.getElementById('file_path') || document.getElementById('file_name');
     const fileContentEl = document.getElementById('file-content');
     const form = document.querySelector('.js-edit-blob-form');
 
+    this.hasMarkdownExtension = false;
+
     const rootEditor = new SourceEditor();
 
     this.editor = rootEditor.createInstance({
@@ -51,6 +61,12 @@ export default class EditBlob {
 
     fileNameEl.addEventListener('change', () => {
       this.editor.updateModelLanguage(fileNameEl.value);
+      const newLang = getBlobLanguage(fileNameEl.value);
+      if (newLang === 'markdown') {
+        if (!this.hasMarkdownExtension) {
+          this.fetchMarkdownExtension();
+        }
+      }
     });
 
     form.addEventListener('submit', () => {

app/assets/javascripts/editor/constants.js

@@ -29,6 +29,6 @@ export const EDITOR_DIFF_INSTANCE_FN = 'createDiffInstance';
 // https://gitlab.com/gitlab-org/gitlab/-/issues/293641
 export const EXTENSION_CI_SCHEMA_FILE_NAME_MATCH = '.gitlab-ci.yml';
 
-export const EXTENSION_MARKDOWN_PREVIEW_PANEL_CLASS = 'preview-panel';
+export const EXTENSION_MARKDOWN_PREVIEW_PANEL_CLASS = 'md';
 export const EXTENSION_MARKDOWN_PREVIEW_ACTION_ID = 'markdown-preview';
 export const EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH = 0.5; // 50% of the width

app/assets/javascripts/editor/extensions/source_editor_markdown_ext.js

 import { debounce } from 'lodash';
 import { BLOB_PREVIEW_ERROR } from '~/blob_edit/constants';
 import createFlash from '~/flash';
+import { sanitize } from '~/lib/dompurify';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import syntaxHighlight from '~/syntax_highlight';
@@ -11,14 +12,21 @@ import {
 } from '../constants';
 import { SourceEditorExtension } from './source_editor_extension_base';
 
-const getPreview = (content) => {
-  const url = window.location.href.replace('edit', 'preview');
+const getPreview = (text, projectPath = '') => {
+  let url;
+
+  if (projectPath) {
+    url = `/${projectPath}/preview_markdown`;
+  } else {
+    const { group, project } = document.body.dataset;
+    url = `/${group}/${project}/preview_markdown`;
+  }
   return axios
     .post(url, {
-      content,
+      text,
     })
     .then(({ data }) => {
-      return data;
+      return data.body;
     });
 };
 
@@ -54,9 +62,9 @@ export class EditorMarkdownExtension extends SourceEditorExtension {
     if (previewEl.style.display === 'none') {
       // Show the preview panel
       const fetchPreview = () => {
-        getPreview(editor.getValue())
+        getPreview(editor.getValue(), editor.projectPath)
           .then((data) => {
-            previewEl.innerHTML = data;
+            previewEl.innerHTML = sanitize(data);
             syntaxHighlight(previewEl.querySelectorAll('.js-syntax-highlight'));
             previewEl.style.display = 'block';
           })

app/assets/stylesheets/framework/source_editor.scss

@@ -28,8 +28,11 @@
 .source-editor-preview {
   @include gl-display-flex;
 
-  .preview-panel {
+  .md {
     @include gl-overflow-scroll;
+    @include gl-px-6;
+    @include gl-py-4;
+    @include gl-w-full;
   }
 }