3 files changed, 81 insertions, 1 deletions
diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue b/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue
index c0d6e32a739..6456540a0dd 100644
--- a/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue
+++ b/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2';
-import { selectedRect as getSelectedRect } from 'prosemirror-tables';
+import { selectedRect as getSelectedRect } from '@_ueberdosis/prosemirror-tables';
 import { __ } from '~/locale';
 
 const TABLE_CELL_HEADER = 'th';
diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_of_contents.vue b/app/assets/javascripts/content_editor/components/wrappers/table_of_contents.vue
new file mode 100644
index 00000000000..a4e1be9d95d
--- /dev/null
+++ b/app/assets/javascripts/content_editor/components/wrappers/table_of_contents.vue
@@ -0,0 +1,55 @@
+<script>
+import { debounce } from 'lodash';
+import { NodeViewWrapper } from '@tiptap/vue-2';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import { getHeadings } from '../../services/table_of_contents_utils';
+import TableOfContentsHeading from './table_of_contents_heading.vue';
+
+export default {
+  name: 'TableOfContentsWrapper',
+  components: {
+    NodeViewWrapper,
+    TableOfContentsHeading,
+  },
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      headings: [],
+    };
+  },
+  mounted() {
+    this.handleUpdate = debounce(this.handleUpdate, DEFAULT_DEBOUNCE_AND_THROTTLE_MS * 2);
+
+    this.editor.on('update', this.handleUpdate);
+    this.$nextTick(this.handleUpdate);
+  },
+  methods: {
+    handleUpdate() {
+      this.headings = getHeadings(this.editor);
+    },
+  },
+};
+</script>
+<template>
+  <node-view-wrapper
+    as="ul"
+    class="table-of-contents gl-border-1 gl-border-solid gl-border-gray-100 gl-mb-5 gl-p-4!"
+    data-testid="table-of-contents"
+  >
+    {{ __('Table of contents') }}
+    <table-of-contents-heading
+      v-for="(heading, index) in headings"
+      :key="index"
+      :heading="heading"
+    />
+  </node-view-wrapper>
+</template>
diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_of_contents_heading.vue b/app/assets/javascripts/content_editor/components/wrappers/table_of_contents_heading.vue
new file mode 100644
index 00000000000..edd75d232e8
--- /dev/null
+++ b/app/assets/javascripts/content_editor/components/wrappers/table_of_contents_heading.vue
@@ -0,0 +1,25 @@
+<script>
+export default {
+  name: 'TableOfContentsHeading',
+  props: {
+    heading: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <li>
+    <a v-if="heading.text" href="#" @click.prevent>
+      {{ heading.text }}
+    </a>
+    <ul v-if="heading.subHeadings.length">
+      <table-of-contents-heading
+        v-for="(child, index) in heading.subHeadings"
+        :key="index"
+        :heading="child"
+      />
+    </ul>
+  </li>
+</template>