diff options
Diffstat (limited to 'app/assets/javascripts/content_editor/components/wrappers/table_of_contents.vue')
-rw-r--r-- | app/assets/javascripts/content_editor/components/wrappers/table_of_contents.vue | 55 |
1 files changed, 55 insertions, 0 deletions
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> |