Add latest changes from gitlab-org/gitlab@16-0-stable-eev16.0.0-rc42

1 files changed, 511 insertions, 45 deletions

diff --git a/spec/frontend/content_editor/extensions/attachment_spec.js b/spec/frontend/content_editor/extensions/attachment_spec.js
index 6b804b3b4c6..f037ac520fe 100644
--- a/spec/frontend/content_editor/extensions/attachment_spec.js
+++ b/spec/frontend/content_editor/extensions/attachment_spec.js
@@ -1,21 +1,22 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import waitForPromises from 'helpers/wait_for_promises';
 import Attachment from '~/content_editor/extensions/attachment';
+import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
 import Image from '~/content_editor/extensions/image';
 import Audio from '~/content_editor/extensions/audio';
 import Video from '~/content_editor/extensions/video';
 import Link from '~/content_editor/extensions/link';
-import Loading from '~/content_editor/extensions/loading';
-import { VARIANT_DANGER } from '~/flash';
+import { VARIANT_DANGER } from '~/alert';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import eventHubFactory from '~/helpers/event_hub_factory';
-import { createTestEditor, createDocBuilder } from '../test_utils';
+import { createTestEditor, createDocBuilder, expectDocumentAfterTransaction } from '../test_utils';
 import {
   PROJECT_WIKI_ATTACHMENT_IMAGE_HTML,
+  PROJECT_WIKI_ATTACHMENT_IMAGE_SVG_HTML,
   PROJECT_WIKI_ATTACHMENT_AUDIO_HTML,
   PROJECT_WIKI_ATTACHMENT_VIDEO_HTML,
   PROJECT_WIKI_ATTACHMENT_LINK_HTML,
+  PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML,
 } from '../test_constants';
 
 describe('content_editor/extensions/attachment', () => {
@@ -24,8 +25,8 @@ describe('content_editor/extensions/attachment', () => {
   let p;
   let image;
   let audio;
+  let drawioDiagram;
   let video;
-  let loading;
   let link;
   let renderMarkdown;
   let mock;
@@ -33,54 +34,57 @@ describe('content_editor/extensions/attachment', () => {
 
   const uploadsPath = '/uploads/';
   const imageFile = new File(['foo'], 'test-file.png', { type: 'image/png' });
+  const imageFileSvg = new File(['foo'], 'test-file.svg', { type: 'image/svg+xml' });
   const audioFile = new File(['foo'], 'test-file.mp3', { type: 'audio/mpeg' });
   const videoFile = new File(['foo'], 'test-file.mp4', { type: 'video/mp4' });
+  const videoFile1 = new File(['foo'], 'test-file1.mp4', { type: 'video/mp4' });
+  const drawioDiagramFile = new File(['foo'], 'test-file.drawio.svg', { type: 'image/svg+xml' });
   const attachmentFile = new File(['foo'], 'test-file.zip', { type: 'application/zip' });
-
-  const expectDocumentAfterTransaction = ({ number, expectedDoc, action }) => {
-    return new Promise((resolve) => {
-      let counter = 1;
-      const handleTransaction = async () => {
-        if (counter === number) {
-          expect(tiptapEditor.state.doc.toJSON()).toEqual(expectedDoc.toJSON());
-          tiptapEditor.off('update', handleTransaction);
-          await waitForPromises();
-          resolve();
-        }
-
-        counter += 1;
-      };
-
-      tiptapEditor.on('update', handleTransaction);
-      action();
-    });
+  const attachmentFile1 = new File(['foo'], 'test-file1.zip', { type: 'application/zip' });
+  const attachmentFile2 = new File(['foo'], 'test-file2.zip', { type: 'application/zip' });
+
+  const markdownApiResult = {
+    'test-file.png': PROJECT_WIKI_ATTACHMENT_IMAGE_HTML,
+    'test-file.svg': PROJECT_WIKI_ATTACHMENT_IMAGE_SVG_HTML,
+    'test-file.mp3': PROJECT_WIKI_ATTACHMENT_AUDIO_HTML,
+    'test-file.mp4': PROJECT_WIKI_ATTACHMENT_VIDEO_HTML,
+    'test-file1.mp4': PROJECT_WIKI_ATTACHMENT_VIDEO_HTML.replace(/test-file/g, 'test-file1'),
+    'test-file.zip': PROJECT_WIKI_ATTACHMENT_LINK_HTML,
+    'test-file1.zip': PROJECT_WIKI_ATTACHMENT_LINK_HTML.replace(/test-file/g, 'test-file1'),
+    'test-file2.zip': PROJECT_WIKI_ATTACHMENT_LINK_HTML.replace(/test-file/g, 'test-file2'),
+    'test-file.drawio.svg': PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML,
   };
 
+  const [, group, project] = markdownApiResult[attachmentFile.name].match(
+    /\/(group[0-9]+)\/(project[0-9]+)\//,
+  );
+  const blobUrl = 'blob:https://gitlab.com/048c7ac1-98de-4a37-ab1b-0206d0ea7e1b';
+
   beforeEach(() => {
     renderMarkdown = jest.fn();
     eventHub = eventHubFactory();
 
     tiptapEditor = createTestEditor({
       extensions: [
-        Loading,
         Link,
         Image,
         Audio,
         Video,
+        DrawioDiagram,
         Attachment.configure({ renderMarkdown, uploadsPath, eventHub }),
       ],
     });
 
     ({
-      builders: { doc, p, image, audio, video, loading, link },
+      builders: { doc, p, image, audio, video, link, drawioDiagram },
     } = createDocBuilder({
       tiptapEditor,
       names: {
-        loading: { markType: Loading.name },
         image: { nodeType: Image.name },
         link: { nodeType: Link.name },
         audio: { nodeType: Audio.name },
         video: { nodeType: Video.name },
+        drawioDiagram: { nodeType: DrawioDiagram.name },
       },
     }));
 
@@ -97,6 +101,14 @@ describe('content_editor/extensions/attachment', () => {
     ${'paste'} | ${'handlePaste'} | ${{ clipboardData: { getData: jest.fn(), files: [] } }}               | ${undefined}
     ${'drop'}  | ${'handleDrop'}  | ${{ dataTransfer: { getData: jest.fn(), files: [attachmentFile] } }}  | ${true}
   `('handles $eventType properly', ({ eventType, propName, eventData, output }) => {
+    mock.onPost().reply(HTTP_STATUS_OK, {
+      link: {
+        markdown: `![test-file](test-file.png)`,
+      },
+    });
+
+    renderMarkdown.mockResolvedValue(PROJECT_WIKI_ATTACHMENT_IMAGE_HTML);
+
     const event = Object.assign(new Event(eventType), eventData);
     const handled = tiptapEditor.view.someProp(propName, (eventHandler) => {
       return eventHandler(tiptapEditor.view, event);
@@ -113,13 +125,13 @@ describe('content_editor/extensions/attachment', () => {
     });
 
     describe.each`
-      nodeType   | mimeType        | html                                  | file         | mediaType
-      ${'image'} | ${'image/png'}  | ${PROJECT_WIKI_ATTACHMENT_IMAGE_HTML} | ${imageFile} | ${(attrs) => image(attrs)}
-      ${'audio'} | ${'audio/mpeg'} | ${PROJECT_WIKI_ATTACHMENT_AUDIO_HTML} | ${audioFile} | ${(attrs) => audio(attrs)}
-      ${'video'} | ${'video/mp4'}  | ${PROJECT_WIKI_ATTACHMENT_VIDEO_HTML} | ${videoFile} | ${(attrs) => video(attrs)}
-    `('when the file has $nodeType mime type', ({ mimeType, html, file, mediaType }) => {
-      const base64EncodedFile = `data:${mimeType};base64,Zm9v`;
-
+      nodeType           | html                                           | file                 | mediaType
+      ${'image (png)'}   | ${PROJECT_WIKI_ATTACHMENT_IMAGE_HTML}          | ${imageFile}         | ${(attrs) => image(attrs)}
+      ${'image (svg)'}   | ${PROJECT_WIKI_ATTACHMENT_IMAGE_SVG_HTML}      | ${imageFileSvg}      | ${(attrs) => image(attrs)}
+      ${'audio'}         | ${PROJECT_WIKI_ATTACHMENT_AUDIO_HTML}          | ${audioFile}         | ${(attrs) => audio(attrs)}
+      ${'video'}         | ${PROJECT_WIKI_ATTACHMENT_VIDEO_HTML}          | ${videoFile}         | ${(attrs) => video(attrs)}
+      ${'drawioDiagram'} | ${PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML} | ${drawioDiagramFile} | ${(attrs) => drawioDiagram(attrs)}
+    `('when the file is $nodeType', ({ html, file, mediaType }) => {
       beforeEach(() => {
         renderMarkdown.mockResolvedValue(html);
       });
@@ -135,10 +147,13 @@ describe('content_editor/extensions/attachment', () => {
           mock.onPost().reply(HTTP_STATUS_OK, successResponse);
         });
 
-        it('inserts a media content with src set to the encoded content and uploading true', async () => {
-          const expectedDoc = doc(p(mediaType({ uploading: true, src: base64EncodedFile })));
+        it('inserts a media content with src set to the encoded content and uploading=file_name', async () => {
+          const expectedDoc = doc(
+            p(mediaType({ uploading: file.name, src: blobUrl, alt: file.name })),
+          );
 
           await expectDocumentAfterTransaction({
+            tiptapEditor,
             number: 1,
             expectedDoc,
             action: () => tiptapEditor.commands.uploadAttachment({ file }),
@@ -150,14 +165,15 @@ describe('content_editor/extensions/attachment', () => {
             p(
               mediaType({
                 canonicalSrc: file.name,
-                src: base64EncodedFile,
-                alt: 'test-file',
+                src: blobUrl,
+                alt: expect.stringContaining('test-file'),
                 uploading: false,
               }),
             ),
           );
 
           await expectDocumentAfterTransaction({
+            tiptapEditor,
             number: 2,
             expectedDoc,
             action: () => tiptapEditor.commands.uploadAttachment({ file }),
@@ -165,6 +181,25 @@ describe('content_editor/extensions/attachment', () => {
         });
       });
 
+      describe('when uploading a large file', () => {
+        beforeEach(() => {
+          // Set max file size to 1 byte, our file is 3 bytes
+          gon.max_file_size = 1 / 1024 / 1024;
+        });
+
+        it('emits an alert event that includes an error message', () => {
+          tiptapEditor.commands.uploadAttachment({ file });
+
+          return new Promise((resolve) => {
+            eventHub.$on('alert', ({ message, variant }) => {
+              expect(variant).toBe(VARIANT_DANGER);
+              expect(message).toContain('File is too big');
+              resolve();
+            });
+          });
+        });
+      });
+
       describe('when uploading request fails', () => {
         beforeEach(() => {
           mock.onPost().reply(HTTP_STATUS_INTERNAL_SERVER_ERROR);
@@ -174,6 +209,7 @@ describe('content_editor/extensions/attachment', () => {
           const expectedDoc = doc(p(''));
 
           await expectDocumentAfterTransaction({
+            tiptapEditor,
             number: 2,
             expectedDoc,
             action: () => tiptapEditor.commands.uploadAttachment({ file }),
@@ -195,10 +231,8 @@ describe('content_editor/extensions/attachment', () => {
     });
 
     describe('when the file has a zip (or any other attachment) mime type', () => {
-      const markdownApiResult = PROJECT_WIKI_ATTACHMENT_LINK_HTML;
-
       beforeEach(() => {
-        renderMarkdown.mockResolvedValue(markdownApiResult);
+        renderMarkdown.mockResolvedValue(markdownApiResult[attachmentFile.name]);
       });
 
       describe('when uploading succeeds', () => {
@@ -212,18 +246,20 @@ describe('content_editor/extensions/attachment', () => {
           mock.onPost().reply(HTTP_STATUS_OK, successResponse);
         });
 
-        it('inserts a loading mark', async () => {
-          const expectedDoc = doc(p(loading({ label: 'test-file' })));
+        it('inserts a link with a blob url', async () => {
+          const expectedDoc = doc(
+            p(link({ uploading: attachmentFile.name, href: blobUrl }, 'test-file.zip')),
+          );
 
           await expectDocumentAfterTransaction({
+            tiptapEditor,
             number: 1,
             expectedDoc,
             action: () => tiptapEditor.commands.uploadAttachment({ file: attachmentFile }),
           });
         });
 
-        it('updates the loading mark with a link with canonicalSrc and href attrs', async () => {
-          const [, group, project] = markdownApiResult.match(/\/(group[0-9]+)\/(project[0-9]+)\//);
+        it('updates the blob url link with an actual link with canonicalSrc and href attrs', async () => {
           const expectedDoc = doc(
             p(
               link(
@@ -231,12 +267,13 @@ describe('content_editor/extensions/attachment', () => {
                   canonicalSrc: 'test-file.zip',
                   href: `/${group}/${project}/-/wikis/test-file.zip`,
                 },
-                'test-file',
+                'test-file.zip',
               ),
             ),
           );
 
           await expectDocumentAfterTransaction({
+            tiptapEditor,
             number: 2,
             expectedDoc,
             action: () => tiptapEditor.commands.uploadAttachment({ file: attachmentFile }),
@@ -253,6 +290,7 @@ describe('content_editor/extensions/attachment', () => {
           const expectedDoc = doc(p(''));
 
           await expectDocumentAfterTransaction({
+            tiptapEditor,
             number: 2,
             expectedDoc,
             action: () => tiptapEditor.commands.uploadAttachment({ file: attachmentFile }),
@@ -269,5 +307,433 @@ describe('content_editor/extensions/attachment', () => {
         });
       });
     });
+
+    describe('uploading multiple files', () => {
+      const uploadMultipleFiles = () => {
+        const files = [
+          attachmentFile,
+          imageFile,
+          videoFile,
+          attachmentFile1,
+          attachmentFile2,
+          videoFile1,
+          audioFile,
+        ];
+
+        for (const file of files) {
+          renderMarkdown.mockImplementation((markdown) =>
+            Promise.resolve(markdownApiResult[markdown.match(/\((.+?)\)$/)[1]]),
+          );
+
+          mock
+            .onPost()
+            .replyOnce(HTTP_STATUS_OK, { link: { markdown: `![test-file](${file.name})` } });
+
+          tiptapEditor.commands.uploadAttachment({ file });
+        }
+      };
+
+      it.each([
+        [1, () => doc(p(link({ href: blobUrl, uploading: 'test-file.zip' }, 'test-file.zip')))],
+        [
+          2,
+          () =>
+            doc(
+              p(link({ href: blobUrl, uploading: 'test-file.zip' }, 'test-file.zip')),
+              p(image({ alt: 'test-file.png', src: blobUrl, uploading: 'test-file.png' })),
+            ),
+        ],
+        [
+          3,
+          () =>
+            doc(
+              p(link({ href: blobUrl, uploading: 'test-file.zip' }, 'test-file.zip')),
+              p(image({ alt: 'test-file.png', src: blobUrl, uploading: 'test-file.png' })),
+              p(video({ alt: 'test-file.mp4', src: blobUrl, uploading: 'test-file.mp4' })),
+            ),
+        ],
+        [
+          4,
+          () =>
+            doc(
+              p(link({ href: blobUrl, uploading: 'test-file.zip' }, 'test-file.zip')),
+              p(image({ alt: 'test-file.png', src: blobUrl, uploading: 'test-file.png' })),
+              p(video({ alt: 'test-file.mp4', src: blobUrl, uploading: 'test-file.mp4' })),
+              p(link({ href: blobUrl, uploading: 'test-file1.zip' }, 'test-file1.zip')),
+            ),
+        ],
+        [
+          5,
+          () =>
+            doc(
+              p(link({ href: blobUrl, uploading: 'test-file.zip' }, 'test-file.zip')),
+              p(image({ alt: 'test-file.png', src: blobUrl, uploading: 'test-file.png' })),
+              p(video({ alt: 'test-file.mp4', src: blobUrl, uploading: 'test-file.mp4' })),
+              p(link({ href: blobUrl, uploading: 'test-file1.zip' }, 'test-file1.zip')),
+              p(link({ href: blobUrl, uploading: 'test-file2.zip' }, 'test-file2.zip')),
+            ),
+        ],
+        [
+          6,
+          () =>
+            doc(
+              p(link({ href: blobUrl, uploading: 'test-file.zip' }, 'test-file.zip')),
+              p(image({ alt: 'test-file.png', src: blobUrl, uploading: 'test-file.png' })),
+              p(video({ alt: 'test-file.mp4', src: blobUrl, uploading: 'test-file.mp4' })),
+              p(link({ href: blobUrl, uploading: 'test-file1.zip' }, 'test-file1.zip')),
+              p(link({ href: blobUrl, uploading: 'test-file2.zip' }, 'test-file2.zip')),
+              p(video({ alt: 'test-file1.mp4', src: blobUrl, uploading: 'test-file1.mp4' })),
+            ),
+        ],
+        [
+          7,
+          () =>
+            doc(
+              p(link({ href: blobUrl, uploading: 'test-file.zip' }, 'test-file.zip')),
+              p(image({ alt: 'test-file.png', src: blobUrl, uploading: 'test-file.png' })),
+              p(video({ alt: 'test-file.mp4', src: blobUrl, uploading: 'test-file.mp4' })),
+              p(link({ href: blobUrl, uploading: 'test-file1.zip' }, 'test-file1.zip')),
+              p(link({ href: blobUrl, uploading: 'test-file2.zip' }, 'test-file2.zip')),
+              p(video({ alt: 'test-file1.mp4', src: blobUrl, uploading: 'test-file1.mp4' })),
+              p(audio({ alt: 'test-file.mp3', src: blobUrl, uploading: 'test-file.mp3' })),
+            ),
+        ],
+        [
+          8,
+          () =>
+            doc(
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file.zip`,
+                    canonicalSrc: 'test-file.zip',
+                    uploading: false,
+                  },
+                  'test-file.zip',
+                ),
+              ),
+              p(image({ alt: 'test-file.png', src: blobUrl, uploading: 'test-file.png' })),
+              p(video({ alt: 'test-file.mp4', src: blobUrl, uploading: 'test-file.mp4' })),
+              p(link({ href: blobUrl, uploading: 'test-file1.zip' }, 'test-file1.zip')),
+              p(link({ href: blobUrl, uploading: 'test-file2.zip' }, 'test-file2.zip')),
+              p(video({ alt: 'test-file1.mp4', src: blobUrl, uploading: 'test-file1.mp4' })),
+              p(audio({ alt: 'test-file.mp3', src: blobUrl, uploading: 'test-file.mp3' })),
+            ),
+        ],
+        [
+          9,
+          () =>
+            doc(
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file.zip`,
+                    canonicalSrc: 'test-file.zip',
+                    uploading: false,
+                  },
+                  'test-file.zip',
+                ),
+              ),
+              p(
+                image({
+                  alt: 'test-file.png',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.png',
+                  uploading: false,
+                }),
+              ),
+              p(video({ alt: 'test-file.mp4', src: blobUrl, uploading: 'test-file.mp4' })),
+              p(link({ href: blobUrl, uploading: 'test-file1.zip' }, 'test-file1.zip')),
+              p(link({ href: blobUrl, uploading: 'test-file2.zip' }, 'test-file2.zip')),
+              p(video({ alt: 'test-file1.mp4', src: blobUrl, uploading: 'test-file1.mp4' })),
+              p(audio({ alt: 'test-file.mp3', src: blobUrl, uploading: 'test-file.mp3' })),
+            ),
+        ],
+        [
+          10,
+          () =>
+            doc(
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file.zip`,
+                    canonicalSrc: 'test-file.zip',
+                    uploading: false,
+                  },
+                  'test-file.zip',
+                ),
+              ),
+              p(
+                image({
+                  alt: 'test-file.png',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.png',
+                  uploading: false,
+                }),
+              ),
+              p(
+                video({
+                  alt: 'test-file.mp4',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.mp4',
+                  uploading: false,
+                }),
+              ),
+              p(link({ href: blobUrl, uploading: 'test-file1.zip' }, 'test-file1.zip')),
+              p(link({ href: blobUrl, uploading: 'test-file2.zip' }, 'test-file2.zip')),
+              p(video({ alt: 'test-file1.mp4', src: blobUrl, uploading: 'test-file1.mp4' })),
+              p(audio({ alt: 'test-file.mp3', src: blobUrl, uploading: 'test-file.mp3' })),
+            ),
+        ],
+        [
+          11,
+          () =>
+            doc(
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file.zip`,
+                    canonicalSrc: 'test-file.zip',
+                    uploading: false,
+                  },
+                  'test-file.zip',
+                ),
+              ),
+              p(
+                image({
+                  alt: 'test-file.png',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.png',
+                  uploading: false,
+                }),
+              ),
+              p(
+                video({
+                  alt: 'test-file.mp4',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.mp4',
+                  uploading: false,
+                }),
+              ),
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file1.zip`,
+                    canonicalSrc: 'test-file1.zip',
+                    uploading: false,
+                  },
+                  'test-file1.zip',
+                ),
+              ),
+              p(link({ href: blobUrl, uploading: 'test-file2.zip' }, 'test-file2.zip')),
+              p(video({ alt: 'test-file1.mp4', src: blobUrl, uploading: 'test-file1.mp4' })),
+              p(audio({ alt: 'test-file.mp3', src: blobUrl, uploading: 'test-file.mp3' })),
+            ),
+        ],
+        [
+          12,
+          () =>
+            doc(
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file.zip`,
+                    canonicalSrc: 'test-file.zip',
+                    uploading: false,
+                  },
+                  'test-file.zip',
+                ),
+              ),
+              p(
+                image({
+                  alt: 'test-file.png',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.png',
+                  uploading: false,
+                }),
+              ),
+              p(
+                video({
+                  alt: 'test-file.mp4',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.mp4',
+                  uploading: false,
+                }),
+              ),
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file1.zip`,
+                    canonicalSrc: 'test-file1.zip',
+                    uploading: false,
+                  },
+                  'test-file1.zip',
+                ),
+              ),
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file2.zip`,
+                    canonicalSrc: 'test-file2.zip',
+                    uploading: false,
+                  },
+                  'test-file2.zip',
+                ),
+              ),
+              p(video({ alt: 'test-file1.mp4', src: blobUrl, uploading: 'test-file1.mp4' })),
+              p(audio({ alt: 'test-file.mp3', src: blobUrl, uploading: 'test-file.mp3' })),
+            ),
+        ],
+        [
+          13,
+          () =>
+            doc(
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file.zip`,
+                    canonicalSrc: 'test-file.zip',
+                    uploading: false,
+                  },
+                  'test-file.zip',
+                ),
+              ),
+              p(
+                image({
+                  alt: 'test-file.png',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.png',
+                  uploading: false,
+                }),
+              ),
+              p(
+                video({
+                  alt: 'test-file.mp4',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.mp4',
+                  uploading: false,
+                }),
+              ),
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file1.zip`,
+                    canonicalSrc: 'test-file1.zip',
+                    uploading: false,
+                  },
+                  'test-file1.zip',
+                ),
+              ),
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file2.zip`,
+                    canonicalSrc: 'test-file2.zip',
+                    uploading: false,
+                  },
+                  'test-file2.zip',
+                ),
+              ),
+              p(
+                video({
+                  alt: 'test-file1.mp4',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file1.mp4',
+                  uploading: false,
+                }),
+              ),
+              p(audio({ alt: 'test-file.mp3', src: blobUrl, uploading: 'test-file.mp3' })),
+            ),
+        ],
+        [
+          14,
+          () =>
+            doc(
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file.zip`,
+                    canonicalSrc: 'test-file.zip',
+                    uploading: false,
+                  },
+                  'test-file.zip',
+                ),
+              ),
+              p(
+                image({
+                  alt: 'test-file.png',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.png',
+                  uploading: false,
+                }),
+              ),
+              p(
+                video({
+                  alt: 'test-file.mp4',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.mp4',
+                  uploading: false,
+                }),
+              ),
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file1.zip`,
+                    canonicalSrc: 'test-file1.zip',
+                    uploading: false,
+                  },
+                  'test-file1.zip',
+                ),
+              ),
+              p(
+                link(
+                  {
+                    href: `/${group}/${project}/-/wikis/test-file2.zip`,
+                    canonicalSrc: 'test-file2.zip',
+                    uploading: false,
+                  },
+                  'test-file2.zip',
+                ),
+              ),
+              p(
+                video({
+                  alt: 'test-file1.mp4',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file1.mp4',
+                  uploading: false,
+                }),
+              ),
+              p(
+                audio({
+                  alt: 'test-file.mp3',
+                  src: blobUrl,
+                  canonicalSrc: 'test-file.mp3',
+                  uploading: false,
+                }),
+              ),
+            ),
+        ],
+      ])('uploads all files of mixed types successfully (tx %i)', async (n, document) => {
+        await expectDocumentAfterTransaction({
+          tiptapEditor,
+          number: n,
+          expectedDoc: document(),
+          action: uploadMultipleFiles,
+        });
+      });
+
+      it('cleans up the state if all uploads fail', async () => {
+        await expectDocumentAfterTransaction({
+          tiptapEditor,
+          number: 14,
+          expectedDoc: doc(p(), p(), p(), p(), p(), p(), p()),
+          action: () => {
+            // Set max file size to 1 byte, our file is 3 bytes
+            gon.max_file_size = 1 / 1024 / 1024;
+            uploadMultipleFiles();
+          },
+        });
+      });
+    });
   });
 });