You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The types of the nodes you want to use for your Table of Content. By default this is `["heading"]` but in case you create your own custom Heading extension OR extend the existing one and use a different name, you can pass that name here.
39
42
40
43
Default: `["heading"]`
@@ -46,14 +49,15 @@ TableOfContents.configure({
46
49
```
47
50
48
51
### getIndex
52
+
49
53
This option can be used to customize how the item indexes are calculated. By default this is using an internal function but it can be overwritten to do some custom logic.
50
54
51
55
```js
52
56
TableOfContents.configure({
53
57
getIndex: (anchor, previousAnchors, level) => {
54
58
// do some custom logic, but for this example we will just return 1
55
59
return1
56
-
}
60
+
},
57
61
})
58
62
```
59
63
@@ -74,18 +78,20 @@ TableOfContents.configure({
74
78
```
75
79
76
80
### getLevel
81
+
77
82
This option can be used to customize how item levels are generated. By default the normal level generation is used that checks for heading element level attributes. If you want to customize this because for example you want to include custom anchors in your heading generation, you can use this to do so.
78
83
79
84
```js
80
85
TableOfContents.configure({
81
86
getLevel: (anchor, previousAnchors) => {
82
87
// do some custom logic, but for this example we will just return 1
83
88
return1
84
-
}
89
+
},
85
90
})
86
91
```
87
92
88
93
### getId
94
+
89
95
A builder function that returns a unique ID for each heading. Inside the argument you get access to the headings text content (for example you want to generate IDs based on the text content of the heading).
90
96
91
97
By default this is a function that uses the [uuid](https://www.npmjs.com/package/uuid) package to generate a unique ID.
@@ -96,23 +102,25 @@ Default: `() => uuid()`
96
102
// here we use an imaginary "slugify" function
97
103
// you should probably also add a unique identifier to the slug
98
104
TableOfContents.configure({
99
-
getId: (content) =>slugify(content)
105
+
getId: (content) =>slugify(content),
100
106
})
101
107
```
102
108
103
109
### scrollParent
104
-
The scroll parent you want to attach to. This is used to determine which heading currently is active or was already scrolled over. By default this is the window but you can pass any HTML element here.
105
110
106
-
Default: `window`
111
+
The scroll parent you want to attach to. This is used to determine which heading currently is active or was already scrolled over. By default this is a callback function that returns the window but you can pass a callback that returns any HTML element here.
112
+
113
+
Default: `() => window`
107
114
108
115
```js
109
116
// For example the editors DOM element itself is the scrolling element
110
117
TableOfContents.configure({
111
-
scrollParent:editor.view.dom
118
+
scrollParent:() =>editor.view.dom,
112
119
})
113
120
```
114
121
115
122
### onUpdate
123
+
116
124
The most important option that you must set to use this extension. This is a callback function that gets called whenever the Table of Content updates. You get access to an array of heading data (see below) which you can use to render your own Table of Content.
117
125
118
126
To render the table of content you can render it by any means you want. You can use a framework like Vue, React or Svelte or you can use a simple templating engine like Handlebars or Pug. You can also use a simple `document.createElement` to render the table of content.
0 commit comments