Merge branch '323767-content-editor-basic-scaffold' into 'master'

Group content editor dependencies in a single chunk

See merge request gitlab-org/gitlab!57164

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

+<script>
+import { EditorContent } from 'tiptap';
+import createEditor from '../services/create_editor';
+
+export default {
+  components: {
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: createEditor(),
+    };
+  },
+};
+</script>
+<template>
+  <editor-content :editor="editor" />
+</template>

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

-const createEditor = async ({ content }) => {
-  const { Editor } = await import(/* webpackChunkName: 'tiptap' */ 'tiptap');
-  const { Bold, Code } = await import(/* webpackChunkName: 'tiptap' */ 'tiptap-extensions');
+import { Editor } from 'tiptap';
+import { Bold, Code } from 'tiptap-extensions';
 
+const createEditor = ({ content } = {}) => {
   return new Editor({
     extensions: [new Bold(), new Code()],
     content,

config/webpack.config.js

@@ -307,6 +307,14 @@ module.exports = {
           chunks: 'initial',
           minChunks: autoEntriesCount * 0.9,
         }),
+        tiptap: {
+          priority: 17,
+          name: 'tiptap',
+          chunks: 'all',
+          test: /[\\/]node_modules[\\/](tiptap|prosemirror)-?\w*[\\/]/,
+          minChunks: 2,
+          reuseExistingChunk: true,
+        },
         graphql: {
           priority: 16,
           name: 'graphql',

spec/frontend/content_editor/components/content_editor_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { EditorContent } from 'tiptap';
+import ContentEditor from '~/content_editor/components/content_editor.vue';
+import createEditor from '~/content_editor/services/create_editor';
+
+jest.mock('~/content_editor/services/create_editor');
+
+describe('ContentEditor', () => {
+  let wrapper;
+
+  const buildWrapper = () => {
+    wrapper = shallowMount(ContentEditor);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders editor content component and attaches editor instance', () => {
+    const editor = {};
+
+    createEditor.mockReturnValueOnce(editor);
+    buildWrapper();
+    expect(wrapper.findComponent(EditorContent).props().editor).toBe(editor);
+  });
+});