Render video in content editor

Changelog: added

app/assets/javascripts/behaviors/markdown/nodes/playable.js

 /* eslint-disable class-methods-use-this */
+/* eslint-disable @gitlab/require-i18n-strings */
 
 import { defaultMarkdownSerializer } from 'prosemirror-markdown';
 import { Node } from 'tiptap';
@@ -30,19 +31,19 @@ export default class Playable extends Node {
 
     const parseDOM = [
       {
-        tag: `.media-container`,
+        tag: `.${this.mediaType}-container`,
         getAttrs: (el) => ({
-          src: el.querySelector('audio,video').src,
-          alt: el.querySelector('audio,video').dataset.title,
+          src: el.querySelector(this.mediaType).src,
+          alt: el.querySelector(this.mediaType).dataset.title,
         }),
       },
     ];
 
     const toDOM = (node) => [
       'span',
-      { class: 'media-container' },
+      { class: `media-container ${this.mediaType}-container` },
       [
-        this.options.mediaType,
+        this.mediaType,
         {
           src: node.attrs.src,
           controls: true,

app/assets/javascripts/content_editor/extensions/audio.js

 import Playable from './playable';
 
 export default Playable.extend({
+  name: 'audio',
   defaultOptions: {
     ...Playable.options,
     mediaType: 'audio',

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

+/* eslint-disable @gitlab/require-i18n-strings */
+
 import { Node } from '@tiptap/core';
 
 const queryPlayableElement = (element, mediaType) => element.querySelector(mediaType);
 
 export default Node.create({
-  name: 'playable',
   group: 'inline',
   inline: true,
   draggable: true,
@@ -46,7 +47,7 @@ export default Node.create({
   parseHTML() {
     return [
       {
-        tag: '.media-container',
+        tag: `.${this.options.mediaType}-container`,
       },
     ];
   },
@@ -54,7 +55,7 @@ export default Node.create({
   renderHTML({ node }) {
     return [
       'span',
-      { class: 'media-container' },
+      { class: `media-container ${this.options.mediaType}-container` },
       [
         this.options.mediaType,
         {

app/assets/javascripts/content_editor/extensions/video.js

+import Playable from './playable';
+
+export default Playable.extend({
+  name: 'video',
+  defaultOptions: {
+    ...Playable.options,
+    mediaType: 'video',
+    extraElementAttrs: { width: '400' },
+  },
+});

app/assets/javascripts/content_editor/services/create_content_editor.js

@@ -36,6 +36,7 @@ import TableRow from '../extensions/table_row';
 import TaskItem from '../extensions/task_item';
 import TaskList from '../extensions/task_list';
 import Text from '../extensions/text';
+import Video from '../extensions/video';
 import { ContentEditor } from './content_editor';
 import createMarkdownSerializer from './markdown_serializer';
 import trackInputRulesAndShortcuts from './track_input_rules_and_shortcuts';
@@ -98,6 +99,7 @@ export const createContentEditor = ({
     TaskItem,
     TaskList,
     Text,
+    Video,
   ];
 
   const allExtensions = [...builtInContentEditorExtensions, ...extensions];

app/assets/javascripts/content_editor/services/markdown_serializer.js

@@ -32,6 +32,7 @@ import TableRow from '../extensions/table_row';
 import TaskItem from '../extensions/task_item';
 import TaskList from '../extensions/task_list';
 import Text from '../extensions/text';
+import Video from '../extensions/video';
 import {
   isPlainURL,
   renderHardBreak,
@@ -144,6 +145,7 @@ const defaultSerializerConfig = {
       else defaultMarkdownSerializer.nodes.bullet_list(state, node);
     },
     [Text.name]: defaultMarkdownSerializer.nodes.text,
+    [Video.name]: renderPlayable,
   },
 };
 

spec/frontend/fixtures/api_markdown.yml

@@ -147,13 +147,16 @@
     Hi @gitlab - thank you for reporting this ~bug (#1) we hope to fix it in %1.1 as part of !1
 - name: audio
   markdown: '![Sample Audio](https://gitlab.com/gitlab.mp3)'
-- name: audio_in_lists
+- name: video
+  markdown: '![Sample Video](https://gitlab.com/gitlab.mp4)'
+- name: audio_and_video_in_lists
   markdown: |-
     * ![Sample Audio](https://gitlab.com/1.mp3)
-    * ![Sample Audio](https://gitlab.com/2.mp3)
+    * ![Sample Video](https://gitlab.com/2.mp4)
 
-    1. ![Sample Audio](https://gitlab.com/1.mp3)
+    1. ![Sample Video](https://gitlab.com/1.mp4)
     2. ![Sample Audio](https://gitlab.com/2.mp3)
 
     * [x] ![Sample Audio](https://gitlab.com/1.mp3)
     * [x] ![Sample Audio](https://gitlab.com/2.mp3)
+    * [x] ![Sample Video](https://gitlab.com/3.mp4)