feat: Improved table of contents (#1223)

* feat: New table of contents

* fix: Hide TOC in edit mode

* feat: Highlight follows scroll position

* scroll tracking

* UI

* fix: Unrelated css fix with long doc titles

* Improve responsiveness

* feat: Add keyboard shortcut access to TOC

* fix: Headings should reflect content correctly when viewing old document revision

* flow

* fix: Persist TOC choice between sessions

shared/utils/getHeadingsForText.js

@@ -0,0 +1,27 @@
+// @flow
+import { filter } from 'lodash';
+import slugify from 'shared/utils/slugify';
+
+export default function getHeadingsForText(
+  text: string
+): { level: number, title: string, slug: string }[] {
+  const regex = /^(#{1,6})\s(.*)$/gm;
+
+  let match;
+  let output = [];
+  while ((match = regex.exec(text)) !== null) {
+    if (!match) continue;
+
+    const level = match[1].length;
+    const title = match[2];
+
+    let slug = slugify(title);
+    const existing = filter(output, { slug });
+    if (existing.length) {
+      slug = `${slug}-${existing.length}`;
+    }
+    output.push({ level, title, slug });
+  }
+
+  return output;
+}

shared/utils/slugify.js

@@ -0,0 +1,8 @@
+// @flow
+import slugify from 'slugify';
+
+// Slugify, escape, and remove periods from headings so that they are
+// compatible with url hashes AND dom selectors
+export default function safeSlugify(text: string) {
+  return `h-${escape(slugify(text, { lower: true }).replace('.', '-'))}`;
+}