Part of #33603, Tech Debt - Combine Code in audio.js and video.js

app/assets/javascripts/behaviors/markdown/constants.js

+// https://prosemirror.net/docs/ref/#model.ParseRule.priority
+export const DEFAULT_PARSE_RULE_PRIORITY = 50;
+export const HIGHER_PARSE_RULE_PRIORITY = 1 + DEFAULT_PARSE_RULE_PRIORITY;

app/assets/javascripts/behaviors/markdown/marks/math.js

@@ -2,6 +2,7 @@
 
 import { Mark } from 'tiptap';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown';
+import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
 
 // Transforms generated HTML back to GFM for Banzai::Filter::MathFilter
 export default class MathMark extends Mark {
@@ -15,7 +16,7 @@ export default class MathMark extends Mark {
         // Matches HTML generated by Banzai::Filter::MathFilter
         {
           tag: 'code.code.math[data-math-style=inline]',
-          priority: 51,
+          priority: HIGHER_PARSE_RULE_PRIORITY,
         },
         // Matches HTML after being transformed by app/assets/javascripts/behaviors/markdown/render_math.js
         {

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

-/* eslint-disable class-methods-use-this */
-
-import { Node } from 'tiptap';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown';
+import Playable from './playable';
 
 // Transforms generated HTML back to GFM for Banzai::Filter::AudioLinkFilter
-export default class Audio extends Node {
-  get name() {
-    return 'audio';
-  }
-
-  get schema() {
-    return {
-      attrs: {
-        src: {},
-        alt: {
-          default: null,
-        },
-      },
-      group: 'block',
-      draggable: true,
-      parseDOM: [
-        {
-          tag: '.audio-container',
-          skip: true,
-        },
-        {
-          tag: '.audio-container p',
-          priority: 51,
-          ignore: true,
-        },
-        {
-          tag: 'audio[src]',
-          getAttrs: el => ({ src: el.getAttribute('src'), alt: el.dataset.title }),
-        },
-      ],
-      toDOM: node => [
-        'audio',
-        {
-          src: node.attrs.src,
-          controls: true,
-          'data-setup': '{}',
-          'data-title': node.attrs.alt,
-        },
-      ],
-    };
-  }
-
-  toMarkdown(state, node) {
-    defaultMarkdownSerializer.nodes.image(state, node);
-    state.closeBlock(node);
+export default class Audio extends Playable {
+  constructor() {
+    super();
+    this.mediaType = 'audio';
   }
 }

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

@@ -3,6 +3,7 @@
 import { Image as BaseImage } from 'tiptap-extensions';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown';
 import { placeholderImage } from '~/lazy_loader';
+import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
 
 export default class Image extends BaseImage {
   get schema() {
@@ -23,7 +24,7 @@ export default class Image extends BaseImage {
         // Matches HTML generated by Banzai::Filter::ImageLinkFilter
         {
           tag: 'a.no-attachment-icon',
-          priority: 51,
+          priority: HIGHER_PARSE_RULE_PRIORITY,
           skip: true,
         },
         // Matches HTML generated by Banzai::Filter::ImageLazyLoadFilter

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

 /* eslint-disable class-methods-use-this */
 
 import { Node } from 'tiptap';
+import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
 
 // Transforms generated HTML back to GFM for Banzai::Filter::TaskListFilter
 export default class OrderedTaskList extends Node {
@@ -14,7 +15,7 @@ export default class OrderedTaskList extends Node {
       content: '(task_list_item|list_item)+',
       parseDOM: [
         {
-          priority: 51,
+          priority: HIGHER_PARSE_RULE_PRIORITY,
           tag: 'ol.task-list',
         },
       ],

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

+/* eslint-disable class-methods-use-this */
+/* eslint-disable @gitlab/i18n/no-non-i18n-strings */
+
+import { Node } from 'tiptap';
+import { defaultMarkdownSerializer } from 'prosemirror-markdown';
+import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
+
+/**
+ * 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`,
+        skip: true,
+      },
+      {
+        tag: `.${this.mediaType}-container p`,
+        priority: HIGHER_PARSE_RULE_PRIORITY,
+        ignore: true,
+      },
+      {
+        tag: `${this.mediaType}[src]`,
+        getAttrs: el => ({ src: el.getAttribute('src'), alt: el.dataset.title }),
+      },
+    ];
+
+    const toDOM = node => [
+      this.mediaType,
+      {
+        src: node.attrs.src,
+        controls: true,
+        'data-setup': '{}',
+        'data-title': node.attrs.alt,
+        ...this.extraElementAttrs,
+      },
+    ];
+
+    return {
+      attrs,
+      group: 'block',
+      draggable: true,
+      parseDOM,
+      toDOM,
+    };
+  }
+
+  toMarkdown(state, node) {
+    defaultMarkdownSerializer.nodes.image(state, node);
+    state.closeBlock(node);
+  }
+}

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

 /* eslint-disable class-methods-use-this */
 
 import { Node } from 'tiptap';
+import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
 
 // Transforms generated HTML back to GFM for Banzai::Filter::ReferenceFilter and subclasses
 export default class Reference extends Node {
@@ -23,7 +24,7 @@ export default class Reference extends Node {
       parseDOM: [
         {
           tag: 'a.gfm:not([data-link=true])',
-          priority: 51,
+          priority: HIGHER_PARSE_RULE_PRIORITY,
           getAttrs: el => ({
             className: el.className,
             referenceType: el.dataset.referenceType,

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

 /* eslint-disable class-methods-use-this */
 
 import TableRow from './table_row';
+import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
 
 const CENTER_ALIGN = 'center';
 
@@ -16,7 +17,7 @@ export default class TableHeaderRow extends TableRow {
       parseDOM: [
         {
           tag: 'thead tr',
-          priority: 51,
+          priority: HIGHER_PARSE_RULE_PRIORITY,
         },
       ],
       toDOM: () => ['tr', 0],

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

@@ -2,6 +2,7 @@
 
 import { Node } from 'tiptap';
 import { __ } from '~/locale';
+import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
 
 // Transforms generated HTML back to GFM for Banzai::Filter::TableOfContentsFilter
 export default class TableOfContents extends Node {
@@ -16,11 +17,11 @@ export default class TableOfContents extends Node {
       parseDOM: [
         {
           tag: 'ul.section-nav',
-          priority: 51,
+          priority: HIGHER_PARSE_RULE_PRIORITY,
         },
         {
           tag: 'p.table-of-contents',
-          priority: 51,
+          priority: HIGHER_PARSE_RULE_PRIORITY,
         },
       ],
       toDOM: () => ['p', { class: 'table-of-contents' }, __('Table of Contents')],

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

 /* eslint-disable class-methods-use-this */
 
 import { Node } from 'tiptap';
+import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
 
 // Transforms generated HTML back to GFM for Banzai::Filter::TaskListFilter
 export default class TaskList extends Node {
@@ -14,7 +15,7 @@ export default class TaskList extends Node {
       content: '(task_list_item|list_item)+',
       parseDOM: [
         {
-          priority: 51,
+          priority: HIGHER_PARSE_RULE_PRIORITY,
           tag: 'ul.task-list',
         },
       ],

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

 /* eslint-disable class-methods-use-this */
 
 import { Node } from 'tiptap';
+import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
 
 // Transforms generated HTML back to GFM for Banzai::Filter::TaskListFilter
 export default class TaskListItem extends Node {
@@ -20,7 +21,7 @@ export default class TaskListItem extends Node {
       content: 'paragraph block*',
       parseDOM: [
         {
-          priority: 51,
+          priority: HIGHER_PARSE_RULE_PRIORITY,
           tag: 'li.task-list-item',
           getAttrs: el => {
             const checkbox = el.querySelector('input[type=checkbox].task-list-item-checkbox');

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

-/* eslint-disable class-methods-use-this */
-
-import { Node } from 'tiptap';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown';
+import Playable from './playable';
 
 // Transforms generated HTML back to GFM for Banzai::Filter::VideoLinkFilter
-export default class Video extends Node {
-  get name() {
-    return 'video';
-  }
-
-  get schema() {
-    return {
-      attrs: {
-        src: {},
-        alt: {
-          default: null,
-        },
-      },
-      group: 'block',
-      draggable: true,
-      parseDOM: [
-        {
-          tag: '.video-container',
-          skip: true,
-        },
-        {
-          tag: '.video-container p',
-          priority: 51,
-          ignore: true,
-        },
-        {
-          tag: 'video[src]',
-          getAttrs: el => ({ src: el.getAttribute('src'), alt: el.dataset.title }),
-        },
-      ],
-      toDOM: node => [
-        'video',
-        {
-          src: node.attrs.src,
-          width: '400',
-          controls: true,
-          'data-setup': '{}',
-          'data-title': node.attrs.alt,
-        },
-      ],
-    };
-  }
-
-  toMarkdown(state, node) {
-    defaultMarkdownSerializer.nodes.image(state, node);
-    state.closeBlock(node);
+export default class Video extends Playable {
+  constructor() {
+    super();
+    this.mediaType = 'video';
+    this.extraElementAttrs = { width: '400' };
   }
 }