Merge branch '339984-copy-text-as-image' into 'master'

Fix: copy text from oneNote and PowerPoint

See merge request gitlab-org/gitlab!72637

app/assets/javascripts/dropzone_input.js

@@ -44,6 +44,7 @@ export default function dropzoneInput(form, config = { parallelUploads: 2 }) {
   let addFileToForm;
   let updateAttachingMessage;
   let uploadFile;
+  let hasPlainText;
 
   formTextarea.wrap('<div class="div-dropzone"></div>');
   formTextarea.on('paste', (event) => handlePaste(event));
@@ -184,7 +185,7 @@ export default function dropzoneInput(form, config = { parallelUploads: 2 }) {
         event.preventDefault();
         const text = converter.convertToTableMarkdown();
         pasteText(text);
-      } else {
+      } else if (!hasPlainText(pasteEvent)) {
         const fileList = [...clipboardData.files];
         fileList.forEach((file) => {
           if (file.type.indexOf('image') !== -1) {
@@ -203,6 +204,11 @@ export default function dropzoneInput(form, config = { parallelUploads: 2 }) {
     }
   };
 
+  hasPlainText = (data) => {
+    const clipboardDataList = [...data.clipboardData.items];
+    return clipboardDataList.some((item) => item.type === 'text/plain');
+  };
+
   pasteText = (text, shouldPad) => {
     let formattedText = text;
     if (shouldPad) {

spec/frontend/dropzone_input_spec.js

@@ -32,6 +32,8 @@ describe('dropzone_input', () => {
   });
 
   describe('handlePaste', () => {
+    let form;
+
     const triggerPasteEvent = (clipboardData = {}) => {
       const event = $.Event('paste');
       const origEvent = new Event('paste');
@@ -45,11 +47,15 @@ describe('dropzone_input', () => {
     beforeEach(() => {
       loadFixtures('issues/new-issue.html');
 
-      const form = $('#new_issue');
+      form = $('#new_issue');
       form.data('uploads-path', TEST_UPLOAD_PATH);
       dropzoneInput(form);
     });
 
+    afterEach(() => {
+      form = null;
+    });
+
     it('pastes Markdown tables', () => {
       jest.spyOn(PasteMarkdownTable.prototype, 'isTable');
       jest.spyOn(PasteMarkdownTable.prototype, 'convertToTableMarkdown');
@@ -86,6 +92,27 @@ describe('dropzone_input', () => {
       expect(axiosMock.history.post[0].data.get('file').name).toHaveLength(246);
     });
 
+    it('disables generated image file when clipboardData have both image and text', () => {
+      const TEST_PLAIN_TEXT = 'This wording is a plain text.';
+      triggerPasteEvent({
+        types: ['text/plain', 'Files'],
+        getData: () => TEST_PLAIN_TEXT,
+        items: [
+          {
+            kind: 'text',
+            type: 'text/plain',
+          },
+          {
+            kind: 'file',
+            type: 'image/png',
+            getAsFile: () => new Blob(),
+          },
+        ],
+      });
+
+      expect(form.find('.js-gfm-input')[0].value).toBe('');
+    });
+
     it('display original file name in comment box', async () => {
       const axiosMock = new MockAdapter(axios);
       triggerPasteEvent({