Import Editor extensions using simpler statement

Refactor Content Editor spec files to use
simpler import statements to include extensions

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

@@ -9,10 +9,9 @@ import {
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
 import { Editor as TiptapEditor } from '@tiptap/vue-2';
+import Link from '../extensions/link';
 import { hasSelection } from '../services/utils';
 
-export const linkContentType = 'link';
-
 export default {
   components: {
     GlDropdown,
@@ -38,12 +37,12 @@ export default {
   },
   computed: {
     isActive() {
-      return this.tiptapEditor.isActive(linkContentType);
+      return this.tiptapEditor.isActive(Link.name);
     },
   },
   mounted() {
     this.tiptapEditor.on('selectionUpdate', ({ editor }) => {
-      const { canonicalSrc, href } = editor.getAttributes(linkContentType);
+      const { canonicalSrc, href } = editor.getAttributes(Link.name);
 
       this.linkHref = canonicalSrc || href;
     });
@@ -60,20 +59,20 @@ export default {
         })
         .run();
 
-      this.$emit('execute', { contentType: linkContentType });
+      this.$emit('execute', { contentType: Link.name });
     },
     selectLink() {
       const { tiptapEditor } = this;
 
       // a selection has already been made by the user, so do nothing
       if (!hasSelection(tiptapEditor)) {
-        tiptapEditor.chain().focus().extendMarkRange(linkContentType).run();
+        tiptapEditor.chain().focus().extendMarkRange(Link.name).run();
       }
     },
     removeLink() {
       this.tiptapEditor.chain().focus().unsetLink().run();
 
-      this.$emit('execute', { contentType: linkContentType });
+      this.$emit('execute', { contentType: Link.name });
     },
   },
 };

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 * as Blockquote from '../extensions/blockquote';
-import * as Bold from '../extensions/bold';
-import * as BulletList from '../extensions/bullet_list';
-import * as Code from '../extensions/code';
-import * as CodeBlockHighlight from '../extensions/code_block_highlight';
-import * as Document from '../extensions/document';
-import * as Dropcursor from '../extensions/dropcursor';
-import * as Gapcursor from '../extensions/gapcursor';
-import * as HardBreak from '../extensions/hard_break';
-import * as Heading from '../extensions/heading';
-import * as History from '../extensions/history';
-import * as HorizontalRule from '../extensions/horizontal_rule';
-import * as Image from '../extensions/image';
-import * as Italic from '../extensions/italic';
-import * as Link from '../extensions/link';
-import * as ListItem from '../extensions/list_item';
-import * as OrderedList from '../extensions/ordered_list';
-import * as Paragraph from '../extensions/paragraph';
-import * as Strike from '../extensions/strike';
-import * as Table from '../extensions/table';
-import * as TableCell from '../extensions/table_cell';
-import * as TableHeader from '../extensions/table_header';
-import * as TableRow from '../extensions/table_row';
-import * as Text from '../extensions/text';
-import buildSerializerConfig from './build_serializer_config';
+import Blockquote from '../extensions/blockquote';
+import Bold from '../extensions/bold';
+import BulletList from '../extensions/bullet_list';
+import Code from '../extensions/code';
+import CodeBlockHighlight from '../extensions/code_block_highlight';
+import Document from '../extensions/document';
+import Dropcursor from '../extensions/dropcursor';
+import Gapcursor from '../extensions/gapcursor';
+import HardBreak from '../extensions/hard_break';
+import Heading from '../extensions/heading';
+import History from '../extensions/history';
+import HorizontalRule from '../extensions/horizontal_rule';
+import Image from '../extensions/image';
+import Italic from '../extensions/italic';
+import Link from '../extensions/link';
+import ListItem from '../extensions/list_item';
+import OrderedList from '../extensions/ordered_list';
+import Paragraph from '../extensions/paragraph';
+import Strike from '../extensions/strike';
+import Table from '../extensions/table';
+import TableCell from '../extensions/table_cell';
+import TableHeader from '../extensions/table_header';
+import TableRow from '../extensions/table_row';
+import Text from '../extensions/text';
 import { ContentEditor } from './content_editor';
 import createMarkdownSerializer from './markdown_serializer';
 import trackInputRulesAndShortcuts from './track_input_rules_and_shortcuts';
 
-const collectTiptapExtensions = (extensions = []) =>
-  extensions.map(({ tiptapExtension }) => tiptapExtension);
-
 const createTiptapEditor = ({ extensions = [], ...options } = {}) =>
   new Editor({
     extensions: [...extensions],
@@ -48,6 +44,7 @@ export const createContentEditor = ({
   renderMarkdown,
   uploadsPath,
   extensions = [],
+  serializerConfig = { marks: {}, nodes: {} },
   tiptapOptions,
 } = {}) => {
   if (!isFunction(renderMarkdown)) {
@@ -82,9 +79,8 @@ export const createContentEditor = ({
   ];
 
   const allExtensions = [...builtInContentEditorExtensions, ...extensions];
-  const tiptapExtensions = collectTiptapExtensions(allExtensions).map(trackInputRulesAndShortcuts);
-  const tiptapEditor = createTiptapEditor({ extensions: tiptapExtensions, ...tiptapOptions });
-  const serializerConfig = buildSerializerConfig(allExtensions);
+  const trackedExtensions = allExtensions.map(trackInputRulesAndShortcuts);
+  const tiptapEditor = createTiptapEditor({ extensions: trackedExtensions, ...tiptapOptions });
   const serializer = createMarkdownSerializer({ render: renderMarkdown, serializerConfig });
 
   return new ContentEditor({ tiptapEditor, serializer });

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 { configure as configureImageExtension } from '~/content_editor/extensions/image';
+import Image from '~/content_editor/extensions/image';
 import { createTestEditor, mockChainedCommands } from '../test_utils';
 
 describe('content_editor/components/toolbar_image_button', () => {
@@ -29,13 +29,13 @@ describe('content_editor/components/toolbar_image_button', () => {
   };
 
   beforeEach(() => {
-    const { tiptapExtension: Image } = configureImageExtension({
-      renderMarkdown: jest.fn(),
-      uploadsPath: '/uploads/',
-    });
-
     editor = createTestEditor({
-      extensions: [Image],
+      extensions: [
+        Image.configure({
+          renderMarkdown: jest.fn(),
+          uploadsPath: '/uploads/',
+        }),
+      ],
     });
 
     buildWrapper();

spec/frontend/content_editor/components/toolbar_link_button_spec.js

 import { GlDropdown, GlDropdownDivider, GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ToolbarLinkButton from '~/content_editor/components/toolbar_link_button.vue';
-import { tiptapExtension as Link } from '~/content_editor/extensions/link';
+import Link from '~/content_editor/extensions/link';
 import { hasSelection } from '~/content_editor/services/utils';
 import { createTestEditor, mockChainedCommands } from '../test_utils';
 
@@ -25,9 +25,7 @@ describe('content_editor/components/toolbar_link_button', () => {
   const findRemoveLinkButton = () => wrapper.findByText('Remove link');
 
   beforeEach(() => {
-    editor = createTestEditor({
-      extensions: [Link],
-    });
+    editor = createTestEditor();
   });
 
   afterEach(() => {

spec/frontend/content_editor/components/toolbar_table_button_spec.js

 import { GlDropdown, GlButton } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ToolbarTableButton from '~/content_editor/components/toolbar_table_button.vue';
-import { tiptapExtension as Table } from '~/content_editor/extensions/table';
-import { tiptapExtension as TableCell } from '~/content_editor/extensions/table_cell';
-import { tiptapExtension as TableHeader } from '~/content_editor/extensions/table_header';
-import { tiptapExtension as TableRow } from '~/content_editor/extensions/table_row';
 import { createTestEditor, mockChainedCommands } from '../test_utils';
 
 describe('content_editor/components/toolbar_table_button', () => {
@@ -23,9 +19,7 @@ describe('content_editor/components/toolbar_table_button', () => {
   const getNumButtons = () => findDropdown().findAllComponents(GlButton).length;
 
   beforeEach(() => {
-    editor = createTestEditor({
-      extensions: [Table, TableCell, TableRow, TableHeader],
-    });
+    editor = createTestEditor();
 
     buildWrapper();
   });

spec/frontend/content_editor/components/toolbar_text_style_dropdown_spec.js

@@ -2,7 +2,7 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ToolbarTextStyleDropdown from '~/content_editor/components/toolbar_text_style_dropdown.vue';
 import { TEXT_STYLE_DROPDOWN_ITEMS } from '~/content_editor/constants';
-import { tiptapExtension as Heading } from '~/content_editor/extensions/heading';
+import Heading from '~/content_editor/extensions/heading';
 import { createTestEditor, mockChainedCommands } from '../test_utils';
 
 describe('content_editor/components/toolbar_headings_dropdown', () => {

spec/frontend/content_editor/extensions/code_block_highlight_spec.js

-import { tiptapExtension as CodeBlockHighlight } from '~/content_editor/extensions/code_block_highlight';
+import CodeBlockHighlight from '~/content_editor/extensions/code_block_highlight';
 import { loadMarkdownApiResult } from '../markdown_processing_examples';
 import { createTestEditor } from '../test_utils';
 

spec/frontend/content_editor/extensions/hard_break_spec.js

-import { tiptapExtension as HardBreak } from '~/content_editor/extensions/hard_break';
+import HardBreak from '~/content_editor/extensions/hard_break';
 import { createTestEditor, createDocBuilder } from '../test_utils';
 
 describe('content_editor/extensions/hard_break', () => {

spec/frontend/content_editor/extensions/image_spec.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { once } from 'lodash';
 import waitForPromises from 'helpers/wait_for_promises';
-import * as Image from '~/content_editor/extensions/image';
+import Image from '~/content_editor/extensions/image';
 import httpStatus from '~/lib/utils/http_status';
 import { loadMarkdownApiResult } from '../markdown_processing_examples';
 import { createTestEditor, createDocBuilder } from '../test_utils';
@@ -24,16 +24,16 @@ describe('content_editor/extensions/image', () => {
       .fn()
       .mockResolvedValue(loadMarkdownApiResult('project_wiki_attachment_image').body);
 
-    const { tiptapExtension } = Image.configure({ renderMarkdown, uploadsPath });
-
-    tiptapEditor = createTestEditor({ extensions: [tiptapExtension] });
+    tiptapEditor = createTestEditor({
+      extensions: [Image.configure({ renderMarkdown, uploadsPath })],
+    });
 
     ({
       builders: { doc, p, image },
       eq,
     } = createDocBuilder({
       tiptapEditor,
-      names: { image: { nodeType: tiptapExtension.name } },
+      names: { image: { nodeType: Image.name } },
     }));
 
     mock = new MockAdapter(axios);

spec/frontend/content_editor/services/create_content_editor_spec.js

@@ -32,13 +32,15 @@ describe('content_editor/services/create_editor', () => {
 
   it('allows providing external content editor extensions', async () => {
     const labelReference = 'this is a ~group::editor';
+    const { tiptapExtension, serializer } = createTestContentEditorExtension();
 
     renderMarkdown.mockReturnValueOnce(
       '<p>this is a <span data-reference="label" data-label-name="group::editor">group::editor</span></p>',
     );
     editor = createContentEditor({
       renderMarkdown,
-      extensions: [createTestContentEditorExtension()],
+      extensions: [tiptapExtension],
+      serializerConfig: { nodes: { [tiptapExtension.name]: serializer } },
     });
 
     await editor.setSerializedContent(labelReference);

spec/frontend/content_editor/services/track_input_rules_and_shortcuts_spec.js

@@ -4,10 +4,10 @@ import {
   INPUT_RULE_TRACKING_ACTION,
   CONTENT_EDITOR_TRACKING_LABEL,
 } from '~/content_editor/constants';
-import { tiptapExtension as BulletList } from '~/content_editor/extensions/bullet_list';
-import { tiptapExtension as CodeBlockLowlight } from '~/content_editor/extensions/code_block_highlight';
-import { tiptapExtension as Heading } from '~/content_editor/extensions/heading';
-import { tiptapExtension as ListItem } from '~/content_editor/extensions/list_item';
+import BulletList from '~/content_editor/extensions/bullet_list';
+import CodeBlockLowlight from '~/content_editor/extensions/code_block_highlight';
+import Heading from '~/content_editor/extensions/heading';
+import ListItem from '~/content_editor/extensions/list_item';
 import trackInputRulesAndShortcuts from '~/content_editor/services/track_input_rules_and_shortcuts';
 import { ENTER_KEY, BACKSPACE_KEY } from '~/lib/utils/keys';
 import { createTestEditor } from '../test_utils';