Fix copying/pasting images in the Content Editor

Cutting/copying an image within the Content Editor
results in an image with an invalid source attribute.

This MR fixes this problem by ensuring that an image
copied from the Content Editor always have the correct
source attribute

Changelog: fixed

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

@@ -66,6 +66,17 @@ export default Image.extend({
       },
     ];
   },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'img',
+      {
+        src: HTMLAttributes.src,
+        alt: HTMLAttributes.alt,
+        title: HTMLAttributes.title,
+        'data-canonical-src': HTMLAttributes.canonicalSrc,
+      },
+    ];
+  },
   addNodeView() {
     return VueNodeViewRenderer(ImageWrapper);
   },

app/assets/javascripts/content_editor/services/serialization_helpers.js

-import { uniq } from 'lodash';
+import { uniq, isString } from 'lodash';
 
 const defaultAttrs = {
   td: { colspan: 1, rowspan: 1, colwidth: null },
@@ -325,9 +325,12 @@ export function renderHardBreak(state, node, parent, index) {
 
 export function renderImage(state, node) {
   const { alt, canonicalSrc, src, title } = node.attrs;
-  const quotedTitle = title ? ` ${state.quote(title)}` : '';
 
-  state.write(`![${state.esc(alt || '')}](${state.esc(canonicalSrc || src)}${quotedTitle})`);
+  if (isString(src) || isString(canonicalSrc)) {
+    const quotedTitle = title ? ` ${state.quote(title)}` : '';
+
+    state.write(`![${state.esc(alt || '')}](${state.esc(canonicalSrc || src)}${quotedTitle})`);
+  }
 }
 
 export function renderPlayable(state, node) {

spec/frontend/content_editor/extensions/image_spec.js

+import Image from '~/content_editor/extensions/image';
+import { createTestEditor, createDocBuilder } from '../test_utils';
+
+describe('content_editor/extensions/image', () => {
+  let tiptapEditor;
+  let doc;
+  let p;
+  let image;
+
+  beforeEach(() => {
+    tiptapEditor = createTestEditor({ extensions: [Image] });
+
+    ({
+      builders: { doc, p, image },
+    } = createDocBuilder({
+      tiptapEditor,
+      names: {
+        image: { nodeType: Image.name },
+      },
+    }));
+  });
+
+  it('adds data-canonical-src attribute when rendering to HTML', () => {
+    const initialDoc = doc(
+      p(
+        image({
+          canonicalSrc: 'uploads/image.jpg',
+          src: '/-/wikis/uploads/image.jpg',
+          alt: 'image',
+          title: 'this is an image',
+        }),
+      ),
+    );
+
+    tiptapEditor.commands.setContent(initialDoc.toJSON());
+
+    expect(tiptapEditor.getHTML()).toEqual(
+      '<p><img src="/-/wikis/uploads/image.jpg" alt="image" title="this is an image" data-canonical-src="uploads/image.jpg"></p>',
+    );
+  });
+});

spec/frontend/content_editor/services/markdown_serializer_spec.js

@@ -352,6 +352,10 @@ this is not really json but just trying out whether this case works or not
     );
   });
 
+  it('does not serialize an image when src and canonicalSrc are empty', () => {
+    expect(serialize(paragraph(image({})))).toBe('');
+  });
+
   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")',