Merge branch 'fix-copying-and-pasting-images-content-editor' into 'master'

Fix copying/pasting images inside the Content Editor

See merge request gitlab-org/gitlab!78295

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;
+
+  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")',