Merge branch 'use-gfm-fixtures-content-editor' into 'master'

Use GFM Markdown fixtures in Content Editor

See merge request gitlab-org/gitlab!63042

app/assets/javascripts/content_editor/extensions/code_block_highlight.js

 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
-const extractLanguage = (element) => element.firstElementChild?.getAttribute('lang');
+const extractLanguage = (element) => element.getAttribute('lang');
 
 const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
   addAttributes() {

app/assets/javascripts/content_editor/extensions/image.js

@@ -2,8 +2,49 @@ import { Image } from '@tiptap/extension-image';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
 const ExtendedImage = Image.extend({
-  defaultOptions: { inline: true },
-});
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      src: {
+        default: null,
+        /*
+         * GitLab Flavored Markdown provides lazy loading for rendering images. As
+         * as result, the src attribute of the image may contain an embedded resource
+         * instead of the actual image URL. The image URL is moved to the data-src
+         * attribute.
+         */
+        parseHTML: (element) => {
+          const img = element.querySelector('img');
+
+          return {
+            src: img.dataset.src || img.getAttribute('src'),
+          };
+        },
+      },
+      alt: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.querySelector('img');
+
+          return {
+            alt: img.getAttribute('alt'),
+          };
+        },
+      },
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        priority: 100,
+        tag: 'a.no-attachment-icon',
+      },
+      {
+        tag: 'img[src]',
+      },
+    ];
+  },
+}).configure({ inline: true });
 
 export const tiptapExtension = ExtendedImage;
 export const serializer = defaultMarkdownSerializer.nodes.image;

spec/frontend/fixtures/api_markdown.rb

@@ -25,7 +25,7 @@ RSpec.describe API::MergeRequests, '(JavaScript fixtures)', type: :request do
       let(:markdown) { markdown_example.fetch(:markdown) }
 
       it "#{fixture_subdir}/#{name}.json" do
-        post api("/markdown"), params: { text: markdown }
+        post api("/markdown"), params: { text: markdown, gfm: true }
 
         expect(response).to be_successful
       end