2021-05-07 08:10:27 -04:00
|
|
|
import { Image } from '@tiptap/extension-image';
|
2021-07-13 11:08:38 -04:00
|
|
|
import { VueNodeViewRenderer } from '@tiptap/vue-2';
|
|
|
|
import ImageWrapper from '../components/wrappers/image.vue';
|
2021-08-25 14:11:33 -04:00
|
|
|
import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
|
2021-07-13 11:08:38 -04:00
|
|
|
|
|
|
|
const resolveImageEl = (element) =>
|
|
|
|
element.nodeName === 'IMG' ? element : element.querySelector('img');
|
|
|
|
|
2021-07-27 17:09:42 -04:00
|
|
|
export default Image.extend({
|
2021-07-13 11:08:38 -04:00
|
|
|
defaultOptions: {
|
|
|
|
...Image.options,
|
2021-07-27 17:09:42 -04:00
|
|
|
inline: true,
|
2021-07-13 11:08:38 -04:00
|
|
|
},
|
2021-06-02 23:09:45 -04:00
|
|
|
addAttributes() {
|
|
|
|
return {
|
|
|
|
...this.parent?.(),
|
2021-07-13 11:08:38 -04:00
|
|
|
uploading: {
|
|
|
|
default: false,
|
|
|
|
},
|
2021-06-02 23:09:45 -04:00
|
|
|
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-07-13 11:08:38 -04:00
|
|
|
const img = resolveImageEl(element);
|
2021-06-02 23:09:45 -04:00
|
|
|
|
2021-09-16 11:12:47 -04:00
|
|
|
return img.dataset.src || img.getAttribute('src');
|
2021-06-02 23:09:45 -04:00
|
|
|
},
|
|
|
|
},
|
2021-07-13 11:08:38 -04:00
|
|
|
canonicalSrc: {
|
|
|
|
default: null,
|
2021-09-16 11:12:47 -04:00
|
|
|
parseHTML: (element) => element.dataset.canonicalSrc,
|
2021-07-13 11:08:38 -04:00
|
|
|
},
|
2021-06-02 23:09:45 -04:00
|
|
|
alt: {
|
|
|
|
default: null,
|
|
|
|
parseHTML: (element) => {
|
2021-07-13 11:08:38 -04:00
|
|
|
const img = resolveImageEl(element);
|
2021-06-02 23:09:45 -04:00
|
|
|
|
2021-09-16 11:12:47 -04:00
|
|
|
return img.getAttribute('alt');
|
2021-06-02 23:09:45 -04:00
|
|
|
},
|
|
|
|
},
|
2021-08-23 14:11:07 -04:00
|
|
|
title: {
|
|
|
|
default: null,
|
|
|
|
parseHTML: (element) => {
|
|
|
|
const img = resolveImageEl(element);
|
|
|
|
|
2021-09-16 11:12:47 -04:00
|
|
|
return img.getAttribute('title');
|
2021-08-23 14:11:07 -04:00
|
|
|
},
|
|
|
|
},
|
2021-06-02 23:09:45 -04:00
|
|
|
};
|
|
|
|
},
|
|
|
|
parseHTML() {
|
|
|
|
return [
|
|
|
|
{
|
2021-08-25 14:11:33 -04:00
|
|
|
priority: PARSE_HTML_PRIORITY_HIGHEST,
|
2021-06-02 23:09:45 -04:00
|
|
|
tag: 'a.no-attachment-icon',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
tag: 'img[src]',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
},
|
2021-07-13 11:08:38 -04:00
|
|
|
addNodeView() {
|
|
|
|
return VueNodeViewRenderer(ImageWrapper);
|
|
|
|
},
|
2021-07-09 05:09:53 -04:00
|
|
|
});
|