1 files changed, 8 insertions, 3 deletions

diff --git a/app/assets/javascripts/lib/gfm/index.js b/app/assets/javascripts/lib/gfm/index.js
index eaf653e9924..fad73f93c1a 100644
--- a/app/assets/javascripts/lib/gfm/index.js
+++ b/app/assets/javascripts/lib/gfm/index.js
@@ -6,6 +6,8 @@ import remarkFrontmatter from 'remark-frontmatter';
 import remarkGfm from 'remark-gfm';
 import remarkRehype, { all } from 'remark-rehype';
 import rehypeRaw from 'rehype-raw';
+import glfmTableOfContents from './glfm_extensions/table_of_contents';
+import * as glfmMdastToHastHandlers from './mdast_to_hast_handlers/glfm_mdast_to_hast_handlers';
 
 const skipFrontmatterHandler = (language) => (h, node) =>
   h(node.position, 'frontmatter', { language }, [{ type: 'text', value: node.value }]);
@@ -65,19 +67,22 @@ const skipRenderingHandlers = {
       all(h, node),
     );
   },
+  tableOfContents: (h, node) => h(node.position, 'tableOfContents'),
   toml: skipFrontmatterHandler('toml'),
   yaml: skipFrontmatterHandler('yaml'),
   json: skipFrontmatterHandler('json'),
 };
 
-const createParser = ({ skipRendering = [] }) => {
+const createParser = ({ skipRendering }) => {
   return unified()
     .use(remarkParse)
     .use(remarkGfm)
     .use(remarkFrontmatter, ['yaml', 'toml', { type: 'json', marker: ';' }])
+    .use(glfmTableOfContents)
     .use(remarkRehype, {
       allowDangerousHtml: true,
       handlers: {
+        ...glfmMdastToHastHandlers,
         ...pick(skipRenderingHandlers, skipRendering),
       },
     })
@@ -99,13 +104,13 @@ const compilerFactory = (renderer) =>
  * tree in any desired representation
  *
  * @param {String} params.markdown Markdown to parse
- * @param {(tree: MDast -> any)} params.renderer A function that accepts mdast
+ * @param {Function} params.renderer A function that accepts mdast
  * AST tree and returns an object of any type that represents the result of
  * rendering the tree. See the references below to for more information
  * about MDast.
  *
  * MDastTree documentation https://github.com/syntax-tree/mdast
- * @returns {Promise<any>} Returns a promise with the result of rendering
+ * @returns {Promise} Returns a promise with the result of rendering
  * the MDast tree
  */
 export const render = async ({ markdown, renderer, skipRendering = [] }) => {