Add top toolbar to content editor

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

 <script>
 import { EditorContent } from 'tiptap';
-import createEditor from '../services/create_editor';
+import TopToolbar from './top_toolbar.vue';
 
 export default {
   components: {
     EditorContent,
+    TopToolbar,
+  },
+  props: {
+    editor: {
+      type: Object,
+      required: true,
     },
-  data() {
-    return {
-      editor: createEditor(),
-    };
   },
 };
 </script>
 <template>
-  <editor-content :editor="editor" />
+  <div
+    class="gl-display-flex gl-flex-direction-column gl-p-3 gl-border-solid gl-border-1 gl-border-gray-200 gl-rounded-base"
+  >
+    <top-toolbar class="gl-mb-3" :editor="editor" />
+    <editor-content class="md" :editor="editor" />
+  </div>
 </template>

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 TopToolbar from '~/content_editor/components/top_toolbar.vue';
 import createEditor from '~/content_editor/services/create_editor';
-
-jest.mock('~/content_editor/services/create_editor');
+import createMarkdownSerializer from '~/content_editor/services/markdown_serializer';
 
 describe('ContentEditor', () => {
   let wrapper;
+  let editor;
 
-  const buildWrapper = () => {
-    wrapper = shallowMount(ContentEditor);
+  const buildWrapper = async () => {
+    editor = await createEditor({ serializer: createMarkdownSerializer({ toHTML: () => '' }) });
+    wrapper = shallowMount(ContentEditor, {
+      propsData: {
+        editor,
+      },
+    });
   };
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('renders editor content component and attaches editor instance', () => {
-    const editor = {};
+  it('renders editor content component and attaches editor instance', async () => {
+    await buildWrapper();
 
-    createEditor.mockReturnValueOnce(editor);
-    buildWrapper();
     expect(wrapper.findComponent(EditorContent).props().editor).toBe(editor);
   });
+
+  it('renders top toolbar component and attaches editor instance', async () => {
+    await buildWrapper();
+
+    expect(wrapper.findComponent(TopToolbar).props().editor).toBe(editor);
+  });
 });

spec/frontend/content_editor/components/top_toolbar_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import ToolbarButton from '~/content_editor/components/toolbar_button.vue';
 import TopToolbar from '~/content_editor/components/top_toolbar.vue';
 
 describe('content_editor/components/top_toolbar', () => {