debian-mirror-gitlab/app/assets/javascripts/content_editor/extensions/image.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

84 lines
2 KiB
JavaScript
Raw Normal View History

2021-06-08 01:23:25 +05:30
import { Image } from '@tiptap/extension-image';
2021-09-30 23:02:18 +05:30
import { VueNodeViewRenderer } from '@tiptap/vue-2';
2022-06-21 17:19:12 +05:30
import MediaWrapper from '../components/wrappers/media.vue';
2021-11-11 11:23:49 +05:30
import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
2021-09-30 23:02:18 +05:30
const resolveImageEl = (element) =>
element.nodeName === 'IMG' ? element : element.querySelector('img');
2021-10-27 15:23:28 +05:30
export default Image.extend({
2022-01-26 12:08:38 +05:30
addOptions() {
return {
...this.parent?.(),
inline: true,
};
2021-09-30 23:02:18 +05:30
},
2021-09-04 01:27:46 +05:30
addAttributes() {
return {
...this.parent?.(),
2021-09-30 23:02:18 +05:30
uploading: {
default: false,
},
2021-09-04 01:27:46 +05:30
src: {
default: null,
/*
* GitLab Flavored Markdown provides lazy loading for rendering images. As
* as result, the src attribute of the image may contain an embedded resource
* instead of the actual image URL. The image URL is moved to the data-src
* attribute.
*/
parseHTML: (element) => {
2021-09-30 23:02:18 +05:30
const img = resolveImageEl(element);
2021-09-04 01:27:46 +05:30
2021-11-11 11:23:49 +05:30
return img.dataset.src || img.getAttribute('src');
2021-09-04 01:27:46 +05:30
},
},
2021-09-30 23:02:18 +05:30
canonicalSrc: {
2021-11-11 11:23:49 +05:30
default: null,
parseHTML: (element) => element.dataset.canonicalSrc,
},
alt: {
2021-09-30 23:02:18 +05:30
default: null,
parseHTML: (element) => {
2021-11-11 11:23:49 +05:30
const img = resolveImageEl(element);
return img.getAttribute('alt');
2021-09-30 23:02:18 +05:30
},
},
2021-11-11 11:23:49 +05:30
title: {
2021-09-04 01:27:46 +05:30
default: null,
parseHTML: (element) => {
2021-09-30 23:02:18 +05:30
const img = resolveImageEl(element);
2021-09-04 01:27:46 +05:30
2021-11-11 11:23:49 +05:30
return img.getAttribute('title');
2021-09-04 01:27:46 +05:30
},
},
};
},
parseHTML() {
return [
{
2021-11-11 11:23:49 +05:30
priority: PARSE_HTML_PRIORITY_HIGHEST,
2021-09-04 01:27:46 +05:30
tag: 'a.no-attachment-icon',
},
{
tag: 'img[src]',
},
];
},
2022-03-02 08:16:31 +05:30
renderHTML({ HTMLAttributes }) {
return [
'img',
{
src: HTMLAttributes.src,
alt: HTMLAttributes.alt,
title: HTMLAttributes.title,
'data-canonical-src': HTMLAttributes.canonicalSrc,
},
];
},
2021-09-30 23:02:18 +05:30
addNodeView() {
2022-06-21 17:19:12 +05:30
return VueNodeViewRenderer(MediaWrapper);
2021-09-30 23:02:18 +05:30
},
});