feat(v2): allow custom heading component (#1687)

* feat(v2): allow custom heading component

* changelog

CHANGELOG-2.x.md

@@ -4,6 +4,7 @@
 
 - Shorter chunk naming for pages. Instead of absolute path, we use relative path from site directory
 - Use contenthash instead of chunkhash for better long term caching
+- Allow user to customize generated heading from MDX. Swizzle `@theme/Heading`
 
 ## 2.0.0-alpha.23
 

packages/docusaurus-mdx-loader/src/index.js

@@ -11,11 +11,10 @@ const emoji = require('remark-emoji');
 const slug = require('remark-slug');
 const matter = require('gray-matter');
 const stringifyObject = require('stringify-object');
-const linkHeadings = require('./rehype/linkHeadings');
 const rightToc = require('./remark/rightToc');
 
 const DEFAULT_OPTIONS = {
-  rehypePlugins: [linkHeadings],
+  rehypePlugins: [],
   remarkPlugins: [emoji, slug, rightToc],
 };
 

packages/docusaurus-mdx-loader/src/rehype/linkHeadings.js

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const visit = require('unist-util-visit');
-
-const createAnchor = id => ({
-  type: 'element',
-  tagName: 'a',
-  properties: {
-    ariaHidden: true,
-    className: 'anchor',
-    id,
-  },
-});
-
-const createLink = id => ({
-  type: 'element',
-  tagName: 'a',
-  properties: {
-    ariaHidden: true,
-    className: 'hash-link',
-    href: `#${id}`,
-  },
-  children: [
-    {
-      type: 'text',
-      value: '#',
-    },
-  ],
-});
-
-const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
-const visitor = node => {
-  const {properties} = node;
-  if (!properties || !properties.id || !headings.includes(node.tagName)) {
-    return;
-  }
-
-  node.children.unshift(createLink(properties.id));
-  node.children.unshift(createAnchor(properties.id));
-
-  delete properties.id;
-};
-
-const transformer = node => {
-  visit(node, 'element', visitor);
-};
-
-const plugin = () => transformer;
-
-module.exports = plugin;

packages/docusaurus-theme-classic/src/theme/Heading/index.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+
+import './styles.css';
+
+const Heading = Tag => ({id, ...props}) => (
+  <Tag {...props}>
+    <a aria-hidden="true" className="anchor" id={id} />
+    <a aria-hidden="true" className="hash-link" href={`#${id}`}>
+      #
+    </a>
+    {props.children}
+  </Tag>
+);
+
+export default Heading;

packages/docusaurus-theme-classic/src/theme/Heading/styles.css

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.anchor {
+  display: block;
+  position: relative;
+  top: -5rem;
+}
+
+@media only screen and (max-width: 735px) {
+  .anchor {
+    top: -10rem;
+  }
+}
+
+.hash-link {
+  opacity: 0;
+  position: absolute;
+  margin-left: -1.25rem;
+  padding-right: 1.25rem;
+}
+
+*:hover > .hash-link {
+  opacity: 1;
+}

packages/docusaurus-theme-classic/src/theme/Layout/styles.css

@@ -10,26 +10,3 @@ body {
   padding-top: var(--ifm-navbar-height);
   transition: var(--ifm-transition-fast) ease color;
 }
-
-.anchor {
-  display: block;
-  position: relative;
-  top: -5rem;
-}
-
-@media only screen and (max-width: 735px) {
-  .anchor {
-    top: -10rem;
-  }
-}
-
-.hash-link {
-  opacity: 0;
-  position: absolute;
-  margin-left: -1.25rem;
-  padding-right: 1.25rem;
-}
-
-*:hover > .hash-link {
-  opacity: 1;
-}

packages/docusaurus-theme-classic/src/theme/MDXComponents/index.js

@@ -7,6 +7,7 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
+import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
 export default {
@@ -19,4 +20,10 @@ export default {
   },
   a: Link,
   pre: props => <pre className={styles.mdxCodeBlock} {...props} />,
+  h1: Heading('h1'),
+  h2: Heading('h2'),
+  h3: Heading('h3'),
+  h4: Heading('h4'),
+  h5: Heading('h5'),
+  h6: Heading('h6'),
 };