Commit 9d9b78d4 authored by Phil Hughes's avatar Phil Hughes

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
parents 8487fa04 0cbc98ec
......@@ -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);
},
......
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) {
......
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>',
);
});
});
......@@ -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")',
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment