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

100% Statements 20/20
100% Branches 4/4
100% Functions 14/14
100% Lines 20/20

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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106          62x 140x       396x           2560x                           28x   28x         28x 207x         28x   28x           28x   28x           28x   28x           28x   28x         207x         163x                     121x                       86x      
import { Image } from '@tiptap/extension-image';
import { VueNodeViewRenderer } from '@tiptap/vue-2';
import { PARSE_HTML_PRIORITY_HIGH } from '../constants';
import ImageWrapper from '../components/wrappers/image.vue';
 
const resolveImageEl = (element) =>
  element.nodeName === 'IMG' ? element : element.querySelector('img');
 
export default Image.extend({
  addOptions() {
    return {
      ...this.parent?.(),
      inline: true,
    };
  },
  addAttributes() {
    return {
      ...this.parent?.(),
      uploading: {
        default: false,
      },
      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) => {
          const img = resolveImageEl(element);
 
          return img.dataset.src || img.getAttribute('src');
        },
      },
      canonicalSrc: {
        default: null,
        parseHTML: (element) => element.dataset.canonicalSrc,
        renderHTML: () => '',
      },
      alt: {
        default: null,
        parseHTML: (element) => {
          const img = resolveImageEl(element);
 
          return img.getAttribute('alt');
        },
      },
      title: {
        default: null,
        parseHTML: (element) => {
          const img = resolveImageEl(element);
 
          return img.getAttribute('title');
        },
      },
      width: {
        default: null,
        parseHTML: (element) => {
          const img = resolveImageEl(element);
 
          return img.getAttribute('width');
        },
      },
      height: {
        default: null,
        parseHTML: (element) => {
          const img = resolveImageEl(element);
 
          return img.getAttribute('height');
        },
      },
      isReference: {
        default: false,
        renderHTML: () => '',
      },
    };
  },
  parseHTML() {
    return [
      {
        priority: PARSE_HTML_PRIORITY_HIGH,
        tag: 'a.no-attachment-icon',
      },
      {
        tag: 'img[src]',
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return [
      'img',
      {
        src: HTMLAttributes.src,
        alt: HTMLAttributes.alt,
        title: HTMLAttributes.title,
        width: HTMLAttributes.width,
        height: HTMLAttributes.height,
      },
    ];
  },
  addNodeView() {
    return VueNodeViewRenderer(ImageWrapper);
  },
});