Fix RDMD backwards compatible anchors. (#669)

Author: rafegoldberg

packages/markdown/__tests__/__snapshots__/index.test.js.snap

@@ -37,17 +37,13 @@ exports[`emojis 1`] = `
 
 exports[`export multiple Markdown renderers allows complex compact headings 1`] = `
 "<h1 id=\\"basic-text\\">Basic Text</h1>
-<div id=\\"section-basic-text\\"></div>
 <h2 id=\\"-oh-noes\\">🙀 oh noes!</h2>
-<div id=\\"section--oh-noes\\"></div>
 <h3 id=\\"6-oh-no\\"><strong>6</strong>. Oh No</h3>
-<div id=\\"section-6-oh-no\\"></div>
 <p>Lorem ipsum dolor!</p>"
 `;
 
 exports[`export multiple Markdown renderers renders HTML 1`] = `
 "<h1 id=\\"hello-world\\">Hello World</h1>
-<div id=\\"section-hello-world\\"></div>
 
 
 
@@ -96,11 +92,6 @@ exports[`export multiple Markdown renderers renders custom React components 1`]
   </Unknown>
   
 
-  <div
-    id="section-hello-world"
-  />
-  
-
 
 
 
@@ -297,19 +288,6 @@ Object {
     Object {
       "type": "text",
       "value": "
-",
-    },
-    Object {
-      "children": Array [],
-      "properties": Object {
-        "id": "section-hello-world",
-      },
-      "tagName": "div",
-      "type": "element",
-    },
-    Object {
-      "type": "text",
-      "value": "
 
 
 
@@ -837,11 +815,6 @@ exports[`export multiple Markdown renderers renders plain markdown as React 1`]
   </h1>
   
 
-  <div
-    id="section-hello-world"
-  />
-  
-
 
 
 
@@ -1029,9 +1002,6 @@ exports[`list items 1`] = `
 
 exports[`magic image 1`] = `"<figure><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"man-eating-pizza-and-making-an-ok-gesture.jpg\\" class=\\"\\" width=\\"100%\\" align=\\"\\" alt=\\"\\" caption=\\"\\" height=\\"auto\\" loading=\\"lazy\\"><span class=\\"lightbox\\" role=\\"dialog\\"><span class=\\"lightbox-inner\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"Click to close...\\" class=\\"\\" width=\\"100%\\" align=\\"\\" alt=\\"\\" caption=\\"\\" height=\\"auto\\" loading=\\"lazy\\"></span></span><figcaption><p>A guy. Eating pizza. And making an OK gesture.</p></figcaption></figure>"`;
 
-exports[`prefix anchors with section- should add a section- prefix to heading anchors 1`] = `
-"<h1 id=\\"heading\\">heading</h1>
-<div id=\\"section-heading\\"></div>"
-`;
+exports[`prefix anchors with section- should add a section- prefix to heading anchors 1`] = `"<h1 id=\\"heading\\">heading</h1>"`;
 
 exports[`tables 1`] = `"<div class=\\"rdmd-table\\"><div class=\\"rdmd-table-inner\\"><table><thead><tr><th>Tables</th><th style=\\"text-align: center;\\">Are</th><th style=\\"text-align: right;\\">Cool</th></tr></thead><tbody><tr><td>col 3 is</td><td style=\\"text-align: center;\\">right-aligned</td><td style=\\"text-align: right;\\">$1600</td></tr><tr><td>col 2 is</td><td style=\\"text-align: center;\\">centered</td><td style=\\"text-align: right;\\">$12</td></tr><tr><td>zebra stripes</td><td style=\\"text-align: center;\\">are neat</td><td style=\\"text-align: right;\\">$1</td></tr></tbody></table></div></div>"`;

packages/markdown/components/Heading/index.jsx

@@ -1,5 +1,14 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const kebab = require('lodash/kebabCase');
+
+/* istanbul ignore next */
+function deprecatedGenerateHeadingId(e) {
+  if (typeof e === 'object') {
+    return deprecatedGenerateHeadingId(e.props.children[0]);
+  }
+  return kebab(e);
+}
 
 function Heading({ tag, ...props }) {
   if (!props.children) return '';
@@ -9,6 +18,11 @@ function Heading({ tag, ...props }) {
     align: props.align,
   };
   return React.createElement(tag, attrs, [
+    <div
+      key={`heading-anchor-${props.id}-deprecated1`}
+      className="heading-anchor-deprecated"
+      id={`section-${deprecatedGenerateHeadingId(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

@@ -62,10 +62,6 @@ const {
   rdmePinCompiler,
 } = require('./processor/compile');
 
-/* Custom Unified Plugins
- */
-const sectionAnchorId = require('./processor/plugin/section-anchor-id');
-
 // Processor Option Defaults
 const options = require('./options.json');
 
@@ -148,7 +144,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);

packages/markdown/package-lock.json

@@ -14,6 +14,7 @@
     "@readme/variable": "^6.4.0",
     "copy-to-clipboard": "^3.3.1",
     "hast-util-sanitize": "^1.2.0",
+    "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react": "^16.4.2",
     "rehype-raw": "^4.0.1",
@@ -27,7 +28,6 @@
     "remark-slug": "^6.0.0",
     "remark-stringify": "^8.0.0",
     "unified": "^8.4.0",
-    "unist-util-flatmap": "^1.0.0",
     "unist-util-map": "^2.0.0",
     "unist-util-visit": "^2.0.1"
   },