summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/content_editor/extensions/table_of_contents.js
blob: a8882f9ede455463f19c75bd6952f9a58392f125 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { Node, InputRule } from '@tiptap/core';
import { s__ } from '~/locale';
import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';

export default Node.create({
  name: 'tableOfContents',

  inline: false,

  group: 'block',

  parseHTML() {
    return [
      {
        tag: 'ul.section-nav',
        priority: PARSE_HTML_PRIORITY_HIGHEST,
      },
    ];
  },

  renderHTML() {
    return [
      'div',
      {
        class:
          'table-of-contents gl-border-1 gl-border-solid gl-text-center gl-border-gray-100 gl-mb-5',
      },
      s__('ContentEditor|Table of Contents'),
    ];
  },

  addInputRules() {
    const { type } = this;
    const inputRuleRegExps = [/^\[\[_TOC_\]\]$/, /^\[TOC\]$/];

    return inputRuleRegExps.map(
      (regex) =>
        new InputRule({
          find: regex,
          handler: ({ state, range: { from, to }, match }) => {
            const { tr } = state;

            if (match) {
              tr.replaceWith(from - 1, to, type.create());
            }

            return tr;
          },
        }),
    );
  },
});