Merge branch '335114-content-editor-attachments' into 'master'

Add support for adding attachments in Content Editor

See merge request gitlab-org/gitlab!67728

app/assets/javascripts/content_editor/components/toolbar_image_button.vue

@@ -8,8 +8,8 @@ import {
   GlDropdownItem,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
-import { acceptedMimes } from '../extensions/image';
-import { getImageAlt } from '../services/utils';
+import { acceptedMimes } from '../services/upload_helpers';
+import { extractFilename } from '../services/utils';
 
 export default {
   components: {
@@ -41,7 +41,7 @@ export default {
         .setImage({
           src: this.imgSrc,
           canonicalSrc: this.imgSrc,
-          alt: getImageAlt(this.imgSrc),
+          alt: extractFilename(this.imgSrc),
         })
         .run();
 
@@ -58,7 +58,7 @@ export default {
       this.tiptapEditor
         .chain()
         .focus()
-        .uploadImage({
+        .uploadAttachment({
           file: e.target.files[0],
         })
         .run();
@@ -67,7 +67,7 @@ export default {
       this.emitExecute('upload');
     },
   },
-  acceptedMimes,
+  acceptedMimes: acceptedMimes.image,
 };
 </script>
 <template>

app/assets/javascripts/content_editor/components/toolbar_link_button.vue

@@ -33,6 +33,13 @@ export default {
     };
   },
   methods: {
+    resetFields() {
+      this.imgSrc = '';
+      this.$refs.fileSelector.value = '';
+    },
+    openFileUpload() {
+      this.$refs.fileSelector.click();
+    },
     updateLinkState({ editor }) {
       const { canonicalSrc, href } = editor.getAttributes(Link.name);
 
@@ -65,6 +72,18 @@ export default {
 
       this.$emit('execute', { contentType: Link.name });
     },
+    onFileSelect(e) {
+      this.tiptapEditor
+        .chain()
+        .focus()
+        .uploadAttachment({
+          file: e.target.files[0],
+        })
+        .run();
+
+      this.resetFields();
+      this.$emit('execute', { contentType: Link.name });
+    },
   },
 };
 </script>
@@ -83,14 +102,25 @@ export default {
       <gl-dropdown-form class="gl-px-3!">
         <gl-form-input-group v-model="linkHref" :placeholder="__('Link URL')">
           <template #append>
-            <gl-button variant="confirm" @click="updateLink()">{{ __('Apply') }}</gl-button>
+            <gl-button variant="confirm" @click="updateLink">{{ __('Apply') }}</gl-button>
           </template>
         </gl-form-input-group>
       </gl-dropdown-form>
-      <gl-dropdown-divider v-if="isActive" />
-      <gl-dropdown-item v-if="isActive" @click="removeLink()">
+      <gl-dropdown-divider />
+      <gl-dropdown-item v-if="isActive" @click="removeLink">
         {{ __('Remove link') }}
       </gl-dropdown-item>
+      <gl-dropdown-item v-else @click="openFileUpload">
+        {{ __('Upload file') }}
+      </gl-dropdown-item>
+
+      <input
+        ref="fileSelector"
+        type="file"
+        name="content_editor_attachment"
+        class="gl-display-none"
+        @change="onFileSelect"
+      />
     </gl-dropdown>
   </editor-state-observer>
 </template>

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

+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { handleFileEvent } from '../services/upload_helpers';
+
+export default Extension.create({
+  name: 'attachment',
+
+  defaultOptions: {
+    uploadsPath: null,
+    renderMarkdown: null,
+  },
+
+  addCommands() {
+    return {
+      uploadAttachment: ({ file }) => () => {
+        const { uploadsPath, renderMarkdown } = this.options;
+
+        return handleFileEvent({ file, uploadsPath, renderMarkdown, editor: this.editor });
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    const { editor } = this;
+
+    return [
+      new Plugin({
+        key: new PluginKey('attachment'),
+        props: {
+          handlePaste: (_, event) => {
+            const { uploadsPath, renderMarkdown } = this.options;
+
+            return handleFileEvent({
+              editor,
+              file: event.clipboardData.files[0],
+              uploadsPath,
+              renderMarkdown,
+            });
+          },
+          handleDrop: (_, event) => {
+            const { uploadsPath, renderMarkdown } = this.options;
+
+            return handleFileEvent({
+              editor,
+              file: event.dataTransfer.files[0],
+              uploadsPath,
+              renderMarkdown,
+            });
+          },
+        },
+      }),
+    ];
+  },
+});

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

 import { Image } from '@tiptap/extension-image';
 import { VueNodeViewRenderer } from '@tiptap/vue-2';
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { __ } from '~/locale';
 import ImageWrapper from '../components/wrappers/image.vue';
-import { uploadFile } from '../services/upload_file';
-import { getImageAlt, readFileAsDataURL } from '../services/utils';
-
-export const acceptedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
 
 const resolveImageEl = (element) =>
   element.nodeName === 'IMG' ? element : element.querySelector('img');
 
-const startFileUpload = async ({ editor, file, uploadsPath, renderMarkdown }) => {
-  const encodedSrc = await readFileAsDataURL(file);
-  const { view } = editor;
-
-  editor.commands.setImage({ uploading: true, src: encodedSrc });
-
-  const { state } = view;
-  const position = state.selection.from - 1;
-  const { tr } = state;
-
-  try {
-    const { src, canonicalSrc } = await uploadFile({ file, uploadsPath, renderMarkdown });
-
-    view.dispatch(
-      tr.setNodeMarkup(position, undefined, {
-        uploading: false,
-        src: encodedSrc,
-        alt: getImageAlt(src),
-        canonicalSrc,
-      }),
-    );
-  } catch (e) {
-    editor.commands.deleteRange({ from: position, to: position + 1 });
-    editor.emit('error', __('An error occurred while uploading the image. Please try again.'));
-  }
-};
-
-const handleFileEvent = ({ editor, file, uploadsPath, renderMarkdown }) => {
-  if (acceptedMimes.includes(file?.type)) {
-    startFileUpload({ editor, file, uploadsPath, renderMarkdown });
-
-    return true;
-  }
-
-  return false;
-};
-
 export default Image.extend({
   defaultOptions: {
     ...Image.options,
-    uploadsPath: null,
-    renderMarkdown: null,
     inline: true,
   },
   addAttributes() {
@@ -108,47 +63,6 @@ export default Image.extend({
       },
     ];
   },
-  addCommands() {
-    return {
-      ...this.parent(),
-      uploadImage: ({ file }) => () => {
-        const { uploadsPath, renderMarkdown } = this.options;
-
-        handleFileEvent({ file, uploadsPath, renderMarkdown, editor: this.editor });
-      },
-    };
-  },
-  addProseMirrorPlugins() {
-    const { editor } = this;
-
-    return [
-      new Plugin({
-        key: new PluginKey('handleDropAndPasteImages'),
-        props: {
-          handlePaste: (_, event) => {
-            const { uploadsPath, renderMarkdown } = this.options;
-
-            return handleFileEvent({
-              editor,
-              file: event.clipboardData.files[0],
-              uploadsPath,
-              renderMarkdown,
-            });
-          },
-          handleDrop: (_, event) => {
-            const { uploadsPath, renderMarkdown } = this.options;
-
-            return handleFileEvent({
-              editor,
-              file: event.dataTransfer.files[0],
-              uploadsPath,
-              renderMarkdown,
-            });
-          },
-        },
-      }),
-    ];
-  },
   addNodeView() {
     return VueNodeViewRenderer(ImageWrapper);
   },

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

@@ -21,6 +21,10 @@ export const extractHrefFromMarkdownLink = (match) => {
 };
 
 export default Link.extend({
+  defaultOptions: {
+    ...Link.options,
+    openOnClick: false,
+  },
   addInputRules() {
     return [
       markInputRule(markdownLinkSyntaxInputRuleRegExp, this.type, extractHrefFromMarkdownLink),
@@ -48,6 +52,4 @@ export default Link.extend({
       },
     };
   },
-}).configure({
-  openOnClick: false,
 });

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

+import { Node } from '@tiptap/core';
+
+export default Node.create({
+  name: 'loading',
+  inline: true,
+  group: 'inline',
+
+  addAttributes() {
+    return {
+      label: {
+        default: null,
+      },
+    };
+  },
+
+  renderHTML({ node }) {
+    return [
+      'span',
+      { class: 'gl-display-inline-flex gl-align-items-center' },
+      ['span', { class: 'gl-spinner gl-mx-2' }],
+      ['span', { class: 'gl-link' }, node.attrs.label],
+    ];
+  },
+});

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

 import { Editor } from '@tiptap/vue-2';
 import { isFunction } from 'lodash';
 import { PROVIDE_SERIALIZER_OR_RENDERER_ERROR } from '../constants';
+import Attachment from '../extensions/attachment';
 import Blockquote from '../extensions/blockquote';
 import Bold from '../extensions/bold';
 import BulletList from '../extensions/bullet_list';
@@ -17,6 +18,7 @@ import Image from '../extensions/image';
 import Italic from '../extensions/italic';
 import Link from '../extensions/link';
 import ListItem from '../extensions/list_item';
+import Loading from '../extensions/loading';
 import OrderedList from '../extensions/ordered_list';
 import Paragraph from '../extensions/paragraph';
 import Strike from '../extensions/strike';
@@ -52,6 +54,7 @@ export const createContentEditor = ({
   }
 
   const builtInContentEditorExtensions = [
+    Attachment.configure({ uploadsPath, renderMarkdown }),
     Blockquote,
     Bold,
     BulletList,
@@ -64,10 +67,11 @@ export const createContentEditor = ({
     Heading,
     History,
     HorizontalRule,
-    Image.configure({ uploadsPath, renderMarkdown }),
+    Image,
     Italic,
     Link,
     ListItem,
+    Loading,
     OrderedList,
     Paragraph,
     Strike,

app/assets/javascripts/content_editor/services/upload_file.js → app/assets/javascripts/content_editor/services/upload_helpers.js

 import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import { extractFilename, readFileAsDataURL } from './utils';
+
+export const acceptedMimes = {
+  image: ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'],
+};
 
 const extractAttachmentLinkUrl = (html) => {
   const parser = new DOMParser();
@@ -42,3 +48,72 @@ export const uploadFile = async ({ uploadsPath, renderMarkdown, file }) => {
 
   return extractAttachmentLinkUrl(rendered);
 };
+
+const uploadImage = async ({ editor, file, uploadsPath, renderMarkdown }) => {
+  const encodedSrc = await readFileAsDataURL(file);
+  const { view } = editor;
+
+  editor.commands.setImage({ uploading: true, src: encodedSrc });
+
+  const { state } = view;
+  const position = state.selection.from - 1;
+  const { tr } = state;
+
+  try {
+    const { src, canonicalSrc } = await uploadFile({ file, uploadsPath, renderMarkdown });
+
+    view.dispatch(
+      tr.setNodeMarkup(position, undefined, {
+        uploading: false,
+        src: encodedSrc,
+        alt: extractFilename(src),
+        canonicalSrc,
+      }),
+    );
+  } catch (e) {
+    editor.commands.deleteRange({ from: position, to: position + 1 });
+    editor.emit('error', __('An error occurred while uploading the image. Please try again.'));
+  }
+};
+
+const uploadAttachment = async ({ editor, file, uploadsPath, renderMarkdown }) => {
+  await Promise.resolve();
+
+  const { view } = editor;
+
+  const text = extractFilename(file.name);
+
+  const { state } = view;
+  const { from } = state.selection;
+
+  editor.commands.insertContent({
+    type: 'loading',
+    attrs: { label: text },
+  });
+
+  try {
+    const { src, canonicalSrc } = await uploadFile({ file, uploadsPath, renderMarkdown });
+
+    editor.commands.insertContentAt(
+      { from, to: from + 1 },
+      { type: 'text', text, marks: [{ type: 'link', attrs: { href: src, canonicalSrc } }] },
+    );
+  } catch (e) {
+    editor.commands.deleteRange({ from, to: from + 1 });
+    editor.emit('error', __('An error occurred while uploading the file. Please try again.'));
+  }
+};
+
+export const handleFileEvent = ({ editor, file, uploadsPath, renderMarkdown }) => {
+  if (!file) return false;
+
+  if (acceptedMimes.image.includes(file?.type)) {
+    uploadImage({ editor, file, uploadsPath, renderMarkdown });
+
+    return true;
+  }
+
+  uploadAttachment({ editor, file, uploadsPath, renderMarkdown });
+
+  return true;
+};

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

@@ -4,8 +4,18 @@ export const hasSelection = (tiptapEditor) => {
   return from < to;
 };
 
-export const getImageAlt = (src) => {
-  return src.replace(/^.*\/|\..*$/g, '').replace(/\W+/g, ' ');
+/**
+ * Extracts filename from a URL
+ *
+ * @example
+ *   > extractFilename('https://gitlab.com/images/logo-full.png')
+ *   < 'logo-full'
+ *
+ * @param {string} src The URL to extract filename from
+ * @returns {string}
+ */
+export const extractFilename = (src) => {
+  return src.replace(/^.*\/|\..+?$/g, '');
 };
 
 export const readFileAsDataURL = (file) => {

locale/gitlab.pot

@@ -3810,6 +3810,9 @@ msgstr ""
 msgid "An error occurred while updating the notification settings. Please try again."
 msgstr ""
 
+msgid "An error occurred while uploading the file. Please try again."
+msgstr ""
+
 msgid "An error occurred while uploading the image. Please try again."
 msgstr ""
 

spec/frontend/content_editor/components/__snapshots__/toolbar_link_button_spec.js.snap

@@ -26,8 +26,21 @@ exports[`content_editor/components/toolbar_link_button renders dropdown componen
             </div>
           </form>
         </li>
-        <!---->
-        <!---->
+        <li role=\\"presentation\\" class=\\"gl-new-dropdown-divider\\">
+          <hr role=\\"separator\\" aria-orientation=\\"horizontal\\" class=\\"dropdown-divider\\">
+        </li>
+        <li role=\\"presentation\\" class=\\"gl-new-dropdown-item\\"><button role=\\"menuitem\\" type=\\"button\\" class=\\"dropdown-item\\">
+            <!---->
+            <!---->
+            <!---->
+            <div class=\\"gl-new-dropdown-item-text-wrapper\\">
+              <p class=\\"gl-new-dropdown-item-text-primary\\">
+                Upload file
+              </p>
+              <!---->
+            </div>
+            <!---->
+          </button></li> <input type=\\"file\\" name=\\"content_editor_attachment\\" class=\\"gl-display-none\\">
       </div>
       <!---->
     </div>

spec/frontend/content_editor/components/toolbar_image_button_spec.js

 import { GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ToolbarImageButton from '~/content_editor/components/toolbar_image_button.vue';
+import Attachment from '~/content_editor/extensions/attachment';
 import Image from '~/content_editor/extensions/image';
 import { createTestEditor, mockChainedCommands } from '../test_utils';
 
@@ -31,7 +32,8 @@ describe('content_editor/components/toolbar_image_button', () => {
   beforeEach(() => {
     editor = createTestEditor({
       extensions: [
-        Image.configure({
+        Image,
+        Attachment.configure({
           renderMarkdown: jest.fn(),
           uploadsPath: '/uploads/',
         }),
@@ -64,13 +66,13 @@ describe('content_editor/components/toolbar_image_button', () => {
   });
 
   it('uploads the selected image when file input changes', async () => {
-    const commands = mockChainedCommands(editor, ['focus', 'uploadImage', 'run']);
+    const commands = mockChainedCommands(editor, ['focus', 'uploadAttachment', 'run']);
     const file = new File(['foo'], 'foo.png', { type: 'image/png' });
 
     await selectFile(file);
 
     expect(commands.focus).toHaveBeenCalled();
-    expect(commands.uploadImage).toHaveBeenCalledWith({ file });
+    expect(commands.uploadAttachment).toHaveBeenCalledWith({ file });
     expect(commands.run).toHaveBeenCalled();
 
     expect(wrapper.emitted().execute[0]).toEqual([{ contentType: 'image', value: 'upload' }]);

spec/frontend/content_editor/components/toolbar_link_button_spec.js

-import { GlDropdown, GlDropdownDivider, GlButton, GlFormInputGroup } from '@gitlab/ui';
+import { GlDropdown, GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ToolbarLinkButton from '~/content_editor/components/toolbar_link_button.vue';
 import Link from '~/content_editor/extensions/link';
@@ -19,11 +19,18 @@ describe('content_editor/components/toolbar_link_button', () => {
     });
   };
   const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findDropdownDivider = () => wrapper.findComponent(GlDropdownDivider);
   const findLinkURLInput = () => wrapper.findComponent(GlFormInputGroup).find('input[type="text"]');
   const findApplyLinkButton = () => wrapper.findComponent(GlButton);
   const findRemoveLinkButton = () => wrapper.findByText('Remove link');
 
+  const selectFile = async (file) => {
+    const input = wrapper.find({ ref: 'fileSelector' });
+
+    // override the property definition because `input.files` isn't directly modifyable
+    Object.defineProperty(input.element, 'files', { value: [file], writable: true });
+    await input.trigger('change');
+  };
+
   beforeEach(() => {
     editor = createTestEditor();
   });
@@ -51,8 +58,11 @@ describe('content_editor/components/toolbar_link_button', () => {
       expect(findDropdown().props('toggleClass')).toEqual({ active: true });
     });
 
+    it('does not display the upload file option', () => {
+      expect(wrapper.findByText('Upload file').exists()).toBe(false);
+    });
+
     it('displays a remove link dropdown option', () => {
-      expect(findDropdownDivider().exists()).toBe(true);
       expect(wrapper.findByText('Remove link').exists()).toBe(true);
     });
 
@@ -107,7 +117,7 @@ describe('content_editor/components/toolbar_link_button', () => {
     });
   });
 
-  describe('when there is not an active link', () => {
+  describe('when there is no active link', () => {
     beforeEach(() => {
       jest.spyOn(editor, 'isActive');
       editor.isActive.mockReturnValueOnce(false);
@@ -118,8 +128,11 @@ describe('content_editor/components/toolbar_link_button', () => {
       expect(findDropdown().props('toggleClass')).toEqual({ active: false });
     });
 
+    it('displays the upload file option', () => {
+      expect(wrapper.findByText('Upload file').exists()).toBe(true);
+    });
+
     it('does not display a remove link dropdown option', () => {
-      expect(findDropdownDivider().exists()).toBe(false);
       expect(wrapper.findByText('Remove link').exists()).toBe(false);
     });
 
@@ -138,6 +151,19 @@ describe('content_editor/components/toolbar_link_button', () => {
 
       expect(wrapper.emitted().execute[0]).toEqual([{ contentType: 'link' }]);
     });
+
+    it('uploads the selected image when file input changes', async () => {
+      const commands = mockChainedCommands(editor, ['focus', 'uploadAttachment', 'run']);
+      const file = new File(['foo'], 'foo.png', { type: 'image/png' });
+
+      await selectFile(file);
+
+      expect(commands.focus).toHaveBeenCalled();
+      expect(commands.uploadAttachment).toHaveBeenCalledWith({ file });
+      expect(commands.run).toHaveBeenCalled();
+
+      expect(wrapper.emitted().execute[0]).toEqual([{ contentType: 'link' }]);
+    });
   });
 
   describe('when the user displays the dropdown', () => {

spec/frontend/content_editor/services/create_content_editor_spec.js

@@ -52,9 +52,9 @@ describe('content_editor/services/create_editor', () => {
     expect(() => createContentEditor()).toThrow(PROVIDE_SERIALIZER_OR_RENDERER_ERROR);
   });
 
-  it('provides uploadsPath and renderMarkdown function to Image extension', () => {
+  it('provides uploadsPath and renderMarkdown function to Attachment extension', () => {
     expect(
-      editor.tiptapEditor.extensionManager.extensions.find((e) => e.name === 'image').options,
+      editor.tiptapEditor.extensionManager.extensions.find((e) => e.name === 'attachment').options,
     ).toMatchObject({
       uploadsPath,
       renderMarkdown,

spec/frontend/content_editor/services/upload_file_spec.js → spec/frontend/content_editor/services/upload_helpers_spec.js

 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { uploadFile } from '~/content_editor/services/upload_file';
+import { uploadFile } from '~/content_editor/services/upload_helpers';
 import httpStatus from '~/lib/utils/http_status';
 
-describe('content_editor/services/upload_file', () => {
+describe('content_editor/services/upload_helpers', () => {
   const uploadsPath = '/uploads';
   const file = new File(['content'], 'file.txt');
   // TODO: Replace with automated fixture