Add "id" to headings (#709)

* Parses heading links

* Move code to a different file

dashboard/src/components/ChartView/ChartReadme.test.tsx

@@ -1,4 +1,4 @@
-import { shallow } from "enzyme";
+import { mount, shallow } from "enzyme";
 import context from "jest-plugin-context";
 import * as React from "react";
 import * as ReactMarkdown from "react-markdown";
@@ -57,3 +57,16 @@ it("renders an error when hasError is set", () => {
   );
   expect(wrapper.text()).toContain("No README found");
 });
+
+it("renders the ReactMarkdown content adding IDs for the titles", () => {
+  const wrapper = mount(
+    <ChartReadme
+      getChartReadme={jest.fn()}
+      hasError={false}
+      version="1.2.3"
+      readme="# _Markdown_ 'Readme_or_not'!"
+    />,
+  );
+  const component = wrapper.find("#markdown-readme_or_not");
+  expect(component).toExist();
+});

dashboard/src/components/ChartView/ChartReadme.tsx

@@ -3,6 +3,7 @@ import { FileText } from "react-feather";
 import * as ReactMarkdown from "react-markdown";
 
 import LoadingWrapper from "../LoadingWrapper";
+import HeadingRenderer from "./HeadingRenderer";
 
 import "./ChartReadme.css";
 
@@ -35,7 +36,7 @@ class ChartReadme extends React.Component<IChartReadmeProps> {
       <LoadingWrapper loaded={!!readme}>
         {readme && (
           <div className="ChartReadme">
-            <ReactMarkdown source={readme} />
+            <ReactMarkdown source={readme} renderers={{ heading: HeadingRenderer }} />
           </div>
         )}
       </LoadingWrapper>

dashboard/src/components/ChartView/HeadingRenderer.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+// Code from https://github.com/rexxars/react-markdown/issues/69
+function flatten(text: string, child: any): any {
+  return typeof child === "string"
+    ? text + child
+    : React.Children.toArray(child.props.children).reduce(flatten, text);
+}
+
+const HeadingRenderer: React.SFC<{}> = (props: any) => {
+  const children = React.Children.toArray(props.children);
+  const text = children.reduce(flatten, "");
+  const slug = text
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9_\s]/g, "") // remove punctuation
+    .replace(/\s/g, "-"); // replace spaces with dash
+  return React.createElement("h" + props.level, { id: slug }, props.children);
+};
+
+export default HeadingRenderer;