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

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

76 lines
1.7 KiB
JavaScript
Raw Normal View History

2021-11-11 11:23:49 +05:30
/* eslint-disable @gitlab/require-i18n-strings */
import { Node } from '@tiptap/core';
2022-06-21 17:19:12 +05:30
import { VueNodeViewRenderer } from '@tiptap/vue-2';
import MediaWrapper from '../components/wrappers/media.vue';
2021-11-11 11:23:49 +05:30
const queryPlayableElement = (element, mediaType) => element.querySelector(mediaType);
export default Node.create({
group: 'inline',
inline: true,
draggable: true,
addAttributes() {
return {
2022-06-21 17:19:12 +05:30
uploading: {
default: false,
},
2021-11-11 11:23:49 +05:30
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`,
},
];
},
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,
...this.extraElementAttrs,
},
],
2022-06-21 17:19:12 +05:30
['a', { href: node.attrs.src }, node.attrs.title || node.attrs.alt || ''],
2021-11-11 11:23:49 +05:30
];
},
2022-06-21 17:19:12 +05:30
addNodeView() {
return VueNodeViewRenderer(MediaWrapper);
},
2021-11-11 11:23:49 +05:30
});