Merge branch '328641-insert-images/pass-render-markdown-to-image-extension' into 'master'

Pass uploadsPath and renderMarkdown function to Image extension

See merge request gitlab-org/gitlab!65680

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

@@ -44,7 +44,13 @@ const ExtendedImage = Image.extend({
       },
     ];
   },
-}).configure({ inline: true });
+});
 
-export const tiptapExtension = ExtendedImage;
-export const serializer = defaultMarkdownSerializer.nodes.image;
+const serializer = defaultMarkdownSerializer.nodes.image;
+
+export const configure = ({ renderMarkdown, uploadsPath }) => {
+  return {
+    tiptapExtension: ExtendedImage.configure({ inline: true, renderMarkdown, uploadsPath }),
+    serializer,
+  };
+};

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

@@ -26,29 +26,6 @@ import { ContentEditor } from './content_editor';
 import createMarkdownSerializer from './markdown_serializer';
 import trackInputRulesAndShortcuts from './track_input_rules_and_shortcuts';
 
-const builtInContentEditorExtensions = [
-  Blockquote,
-  Bold,
-  BulletList,
-  Code,
-  CodeBlockHighlight,
-  Document,
-  Dropcursor,
-  Gapcursor,
-  HardBreak,
-  Heading,
-  History,
-  HorizontalRule,
-  Image,
-  Italic,
-  Link,
-  ListItem,
-  OrderedList,
-  Paragraph,
-  Strike,
-  Text,
-];
-
 const collectTiptapExtensions = (extensions = []) =>
   extensions.map(({ tiptapExtension }) => tiptapExtension);
 
@@ -63,11 +40,39 @@ const createTiptapEditor = ({ extensions = [], ...options } = {}) =>
     ...options,
   });
 
-export const createContentEditor = ({ renderMarkdown, extensions = [], tiptapOptions } = {}) => {
+export const createContentEditor = ({
+  renderMarkdown,
+  uploadsPath,
+  extensions = [],
+  tiptapOptions,
+} = {}) => {
   if (!isFunction(renderMarkdown)) {
     throw new Error(PROVIDE_SERIALIZER_OR_RENDERER_ERROR);
   }
 
+  const builtInContentEditorExtensions = [
+    Blockquote,
+    Bold,
+    BulletList,
+    Code,
+    CodeBlockHighlight,
+    Document,
+    Dropcursor,
+    Gapcursor,
+    HardBreak,
+    Heading,
+    History,
+    HorizontalRule,
+    Image.configure({ uploadsPath, renderMarkdown }),
+    Italic,
+    Link,
+    ListItem,
+    OrderedList,
+    Paragraph,
+    Strike,
+    Text,
+  ];
+
   const allExtensions = [...builtInContentEditorExtensions, ...extensions];
   const tiptapExtensions = collectTiptapExtensions(allExtensions).map(trackInputRulesAndShortcuts);
   const tiptapEditor = createTiptapEditor({ extensions: tiptapExtensions, ...tiptapOptions });

app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue

@@ -264,6 +264,7 @@ export default {
         this.contentEditor ||
         createContentEditor({
           renderMarkdown: (markdown) => this.getContentHTML(markdown),
+          uploadsPath: this.pageInfo.uploadsPath,
           tiptapOptions: {
             onUpdate: () => this.handleContentChange(),
           },

spec/frontend/content_editor/services/create_content_editor_spec.js

@@ -5,10 +5,11 @@ import { createTestContentEditorExtension } from '../test_utils';
 describe('content_editor/services/create_editor', () => {
   let renderMarkdown;
   let editor;
+  const uploadsPath = '/uploads';
 
   beforeEach(() => {
     renderMarkdown = jest.fn();
-    editor = createContentEditor({ renderMarkdown });
+    editor = createContentEditor({ renderMarkdown, uploadsPath });
   });
 
   it('sets gl-outline-0! class selector to the tiptapEditor instance', () => {
@@ -48,4 +49,13 @@ describe('content_editor/services/create_editor', () => {
   it('throws an error when a renderMarkdown fn is not provided', () => {
     expect(() => createContentEditor()).toThrow(PROVIDE_SERIALIZER_OR_RENDERER_ERROR);
   });
+
+  it('provides uploadsPath and renderMarkdown function to Image extension', () => {
+    expect(
+      editor.tiptapEditor.extensionManager.extensions.find((e) => e.name === 'image').options,
+    ).toMatchObject({
+      uploadsPath,
+      renderMarkdown,
+    });
+  });
 });