1 files changed, 43 insertions, 2 deletions
diff --git a/app/assets/javascripts/content_editor/extensions/image.js b/app/assets/javascripts/content_editor/extensions/image.js
index 4f0109fd751..287216e68d5 100644
--- a/app/assets/javascripts/content_editor/extensions/image.js
+++ b/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;