debian-mirror-gitlab/app/assets/javascripts/behaviors/markdown/nodes/playable.js

72 lines
1.5 KiB
JavaScript
Raw Normal View History

2020-03-13 15:44:24 +05:30
/* eslint-disable class-methods-use-this */
2020-04-22 19:07:51 +05:30
/* eslint-disable @gitlab/require-i18n-strings */
2020-03-13 15:44:24 +05:30
2021-03-11 19:13:27 +05:30
import { Node } from 'tiptap';
2022-04-04 11:22:00 +05:30
import { defaultMarkdownSerializer } from '~/lib/prosemirror_markdown_serializer';
2020-03-13 15:44:24 +05:30
/**
* Abstract base class for playable media, like video and audio.
* Must not be instantiated directly. Subclasses must set
* the `mediaType` property in their constructors.
* @abstract
*/
export default class Playable extends Node {
constructor() {
super();
this.mediaType = '';
this.extraElementAttrs = {};
}
get name() {
return this.mediaType;
}
get schema() {
const attrs = {
src: {},
alt: {
default: null,
},
};
const parseDOM = [
{
tag: `.${this.mediaType}-container`,
2021-11-11 11:23:49 +05:30
getAttrs: (el) => ({
src: el.querySelector(this.mediaType).src,
alt: el.querySelector(this.mediaType).dataset.title,
}),
2020-03-13 15:44:24 +05:30
},
];
2021-03-08 18:12:59 +05:30
const toDOM = (node) => [
2021-11-11 11:23:49 +05:30
'span',
{ class: `media-container ${this.mediaType}-container` },
[
this.mediaType,
{
src: node.attrs.src,
controls: true,
'data-setup': '{}',
'data-title': node.attrs.alt,
...this.extraElementAttrs,
},
],
['a', { href: node.attrs.src }, node.attrs.alt],
2020-03-13 15:44:24 +05:30
];
return {
attrs,
2021-11-11 11:23:49 +05:30
group: 'inline',
inline: true,
2020-03-13 15:44:24 +05:30
draggable: true,
parseDOM,
toDOM,
};
}
toMarkdown(state, node) {
defaultMarkdownSerializer.nodes.image(state, node);
}
}