Allow title attribute in elements in content editor

Images and links now support title attribute when serializing
to markdown.

Changelog: added

app/assets/javascripts/content_editor/components/wrappers/image.vue

@@ -22,6 +22,7 @@ export default {
       <img
         data-testid="image"
         class="gl-max-w-full gl-h-auto"
+        :title="node.attrs.title"
         :class="{ 'gl-opacity-5': node.attrs.uploading }"
         :src="node.attrs.src"
       />

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

@@ -50,6 +50,16 @@ export default Image.extend({
           };
         },
       },
+      title: {
+        default: null,
+        parseHTML: (element) => {
+          const img = resolveImageEl(element);
+
+          return {
+            title: img.getAttribute('title'),
+          };
+        },
+      },
     };
   },
   parseHTML() {

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

@@ -42,6 +42,14 @@ export default Link.extend({
           };
         },
       },
+      title: {
+        title: null,
+        parseHTML: (element) => {
+          return {
+            title: element.getAttribute('title'),
+          };
+        },
+      },
       canonicalSrc: {
         default: null,
         parseHTML: (element) => {

spec/frontend/content_editor/services/markdown_serializer_spec.js

@@ -115,6 +115,64 @@ describe('markdownSerializer', () => {
     expect(serialize(paragraph('hello', hardBreak(), 'world'))).toBe('hello\\\nworld');
   });
 
+  it('correctly serializes a link', () => {
+    expect(serialize(paragraph(link({ href: 'https://example.com' }, 'example url')))).toBe(
+      '[example url](https://example.com)',
+    );
+  });
+
+  it('correctly serializes a link with a title', () => {
+    expect(
+      serialize(
+        paragraph(link({ href: 'https://example.com', title: 'click this link' }, 'example url')),
+      ),
+    ).toBe('[example url](https://example.com "click this link")');
+  });
+
+  it('correctly serializes a link with a canonicalSrc', () => {
+    expect(
+      serialize(
+        paragraph(
+          link(
+            {
+              href: '/uploads/abcde/file.zip',
+              canonicalSrc: 'file.zip',
+              title: 'click here to download',
+            },
+            'download file',
+          ),
+        ),
+      ),
+    ).toBe('[download file](file.zip "click here to download")');
+  });
+
+  it('correctly serializes an image', () => {
+    expect(serialize(paragraph(image({ src: 'img.jpg', alt: 'foo bar' })))).toBe(
+      '![foo bar](img.jpg)',
+    );
+  });
+
+  it('correctly serializes an image with a title', () => {
+    expect(serialize(paragraph(image({ src: 'img.jpg', title: 'baz', alt: 'foo bar' })))).toBe(
+      '![foo bar](img.jpg "baz")',
+    );
+  });
+
+  it('correctly serializes an image with a canonicalSrc', () => {
+    expect(
+      serialize(
+        paragraph(
+          image({
+            src: '/uploads/abcde/file.png',
+            alt: 'this is an image',
+            canonicalSrc: 'file.png',
+            title: 'foo bar baz',
+          }),
+        ),
+      ),
+    ).toBe('![this is an image](file.png "foo bar baz")');
+  });
+
   it('correctly serializes a table with inline content', () => {
     expect(
       serialize(