Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 66x 3814x 22x 22x 22x 22x 22x 22x 318x 144x 129x | import { Node } from '@tiptap/core';
import { VueNodeViewRenderer } from '@tiptap/vue-2';
import PlayableWrapper from '../components/wrappers/playable.vue';
const queryPlayableElement = (element, mediaType) => element.querySelector(mediaType);
export default Node.create({
group: 'inline',
inline: true,
draggable: true,
addAttributes() {
return {
uploading: {
default: false,
},
src: {
default: null,
parseHTML: (element) => {
const playable = queryPlayableElement(element, this.options.mediaType);
return playable.src;
},
},
canonicalSrc: {
default: null,
parseHTML: (element) => {
const playable = queryPlayableElement(element, this.options.mediaType);
return playable.dataset.canonicalSrc;
},
},
alt: {
default: null,
parseHTML: (element) => {
const playable = queryPlayableElement(element, this.options.mediaType);
return playable.dataset.title;
},
},
};
},
parseHTML() {
return [
{
tag: `.${this.options.mediaType}-container`, // eslint-disable-line @gitlab/require-i18n-strings
},
];
},
renderHTML({ node }) {
return [
'span',
{ class: `media-container ${this.options.mediaType}-container` },
[
this.options.mediaType,
{
src: node.attrs.src,
controls: true,
'data-setup': '{}',
'data-title': node.attrs.alt,
},
],
[
'a',
{ href: node.attrs.src, class: 'with-attachment-icon' },
node.attrs.title || node.attrs.alt || '',
],
];
},
addNodeView() {
return VueNodeViewRenderer(PlayableWrapper);
},
});
|