All files / app/assets/javascripts/content_editor/extensions playable.js

100% Statements 11/11
100% Branches 0/0
100% Functions 7/7
100% Lines 10/10

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        27x               1246x       9x   9x           9x   9x           9x   9x             178x               9x                                  
/* eslint-disable @gitlab/require-i18n-strings */
 
import { Node } from '@tiptap/core';
 
const queryPlayableElement = (element, mediaType) => element.querySelector(mediaType);
 
export default Node.create({
  group: 'inline',
  inline: true,
  draggable: true,
 
  addAttributes() {
    return {
      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,
        },
      ],
      ['a', { href: node.attrs.src }, node.attrs.alt],
    ];
  },
});