Fix RDMD backwards compatible anchors.

packages/markdown/components/Heading/index.jsx

@@ -1,6 +1,13 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 
+function generateHeadingIdDeprecated(e) {
+  if (typeof e === 'object') {
+    return generateHeadingIdDeprecated(e.props.children[0]);
+  }
+  return e.toLowerCase().replace(/[^\w]+/g, '-');
+}
+
 function Heading({ tag, ...props }) {
   if (!props.children) return '';
 
@@ -9,6 +16,11 @@ function Heading({ tag, ...props }) {
     align: props.align,
   };
   return React.createElement(tag, attrs, [
+    <div
+      key={`heading-anchor-${props.id}-deprecated`}
+      className="heading-anchor-deprecated"
+      id={`section-${generateHeadingIdDeprecated(props.id)}`}
+    />,
     <div key={`heading-anchor-${props.id}`} className="heading-anchor anchor waypoint" id={props.id} />,
     <div key={`heading-text-${props.id}`} className="heading-text">
       {props.children}

packages/markdown/components/Heading/style.scss

@@ -6,10 +6,15 @@
   .heading-text {
     flex: 1 100%;
   }
+  .heading-anchor-deprecated {
+    position: absolute;
+    top: 0;
+  }
   .heading-anchor {
     top: -1rem !important;
   }
-  .heading-anchor, .heading-anchor-icon {
+  .heading-anchor,
+  .heading-anchor-icon {
     position: absolute !important;
     display: inline !important;
     order: -1;

packages/markdown/index.js

@@ -64,7 +64,7 @@ const {
 
 /* Custom Unified Plugins
  */
-const sectionAnchorId = require('./processor/plugin/section-anchor-id');
+// const sectionAnchorId = require('./processor/plugin/section-anchor-id');
 
 // Processor Option Defaults
 const options = require('./options.json');
@@ -148,7 +148,6 @@ export function processor(opts = {}) {
     .use(!opts.correctnewlines ? remarkBreaks : () => {})
     .use(gemojiParser.sanitize(sanitize))
     .use(remarkSlug)
-    .use(sectionAnchorId)
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeRaw)
     .use(rehypeSanitize, sanitize);