Make link toolbar button consistent with image button

app/assets/javascripts/content_editor/components/toolbar_link_button.vue

@@ -43,7 +43,7 @@ export default {
   },
   mounted() {
     this.tiptapEditor.on('selectionUpdate', ({ editor }) => {
-      const { 'data-canonical-src': canonicalSrc, href } = editor.getAttributes(linkContentType);
+      const { canonicalSrc, href } = editor.getAttributes(linkContentType);
 
       this.linkHref = canonicalSrc || href;
     });
@@ -56,7 +56,7 @@ export default {
         .unsetLink()
         .setLink({
           href: this.linkHref,
-          'data-canonical-src': this.linkHref,
+          canonicalSrc: this.linkHref,
         })
         .run();
 

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

@@ -38,11 +38,11 @@ export const tiptapExtension = Link.extend({
           };
         },
       },
-      'data-canonical-src': {
+      canonicalSrc: {
         default: null,
         parseHTML: (element) => {
           return {
-            href: element.dataset.canonicalSrc,
+            canonicalSrc: element.dataset.canonicalSrc,
           };
         },
       },
@@ -57,7 +57,7 @@ export const serializer = {
     return '[';
   },
   close(state, mark) {
-    const href = mark.attrs['data-canonical-src'] || mark.attrs.href;
+    const href = mark.attrs.canonicalSrc || mark.attrs.href;
     return `](${state.esc(href)}${mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''})`;
   },
 };

spec/frontend/content_editor/components/toolbar_link_button_spec.js

@@ -76,15 +76,17 @@ describe('content_editor/components/toolbar_link_button', () => {
       expect(commands.unsetLink).toHaveBeenCalled();
       expect(commands.setLink).toHaveBeenCalledWith({
         href: 'https://example',
-        'data-canonical-src': 'https://example',
+        canonicalSrc: 'https://example',
       });
       expect(commands.run).toHaveBeenCalled();
+
+      expect(wrapper.emitted().execute[0]).toEqual([{ contentType: 'link' }]);
     });
 
     describe('on selection update', () => {
       it('updates link input box with canonical-src if present', async () => {
         jest.spyOn(editor, 'getAttributes').mockReturnValueOnce({
-          'data-canonical-src': 'uploads/my-file.zip',
+          canonicalSrc: 'uploads/my-file.zip',
           href: '/username/my-project/uploads/abcdefgh133535/my-file.zip',
         });
 
@@ -130,9 +132,11 @@ describe('content_editor/components/toolbar_link_button', () => {
       expect(commands.focus).toHaveBeenCalled();
       expect(commands.setLink).toHaveBeenCalledWith({
         href: 'https://example',
-        'data-canonical-src': 'https://example',
+        canonicalSrc: 'https://example',
       });
       expect(commands.run).toHaveBeenCalled();
+
+      expect(wrapper.emitted().execute[0]).toEqual([{ contentType: 'link' }]);
     });
   });