Add id to markdown headings

64json · 64json · commit 144adbd393d1 · 2018-12-08T23:26:38.000-05:00
diff --git a/src/frontend/components/App/index.jsx b/src/frontend/components/App/index.jsx
@@ -20,7 +20,7 @@ import { AlgorithmApi, GitHubApi } from '/apis';
 import { actions } from '/reducers';
 import { extension, refineGist } from '/common/util';
 import { exts, languages } from '/common/config';
-import { SCRATCH_PAPER_MD } from '/files';
+import { CONTRIBUTING_MD } from '/files';
 import styles from './stylesheet.scss';
 
 @connect(({ current, env }) => ({ current, env }), actions)
@@ -130,7 +130,7 @@ class App extends BaseComponent {
           login: undefined,
           gistId,
           title: 'Untitled',
-          files: [SCRATCH_PAPER_MD, language.skeleton],
+          files: [CONTRIBUTING_MD, language.skeleton],
         });
         return Promise.resolve();
       } else if (gistId) {
diff --git a/src/frontend/core/renderers/MarkdownRenderer/index.jsx b/src/frontend/core/renderers/MarkdownRenderer/index.jsx
@@ -7,8 +7,39 @@ class MarkdownRenderer extends Renderer {
   renderData() {
     const { markdown } = this.props.data;
 
-    const link = ({ href, ...rest }) => {
+    const heading = ({ level, children, ...rest }) => {
+      const HeadingComponent = [
+        props => <h1 {...props} />,
+        props => <h2 {...props} />,
+        props => <h3 {...props} />,
+        props => <h4 {...props} />,
+        props => <h5 {...props} />,
+        props => <h6 {...props} />,
+      ][level - 1];
+
+      const idfy = text => text.toLowerCase().trim().replace(/[^\w \-]/g, '').replace(/ /g, '-');
+
+      const getText = children => {
+        return children ? children.filter(child => child).map(child => {
+          if (typeof child === 'string') return child;
+          if ('props' in child) return getText(child.props.children);
+          return '';
+        }).join('') : '';
+      };
+
+      const id = idfy(getText(children));
+
       return (
+        <HeadingComponent id={id} {...rest}>
+          {children}
+        </HeadingComponent>
+      );
+    };
+
+    const link = ({ href, ...rest }) => {
+      return /^#/.test(href) ? (
+        <a href={href} {...rest} />
+      ) : (
         <a href={href} rel="noopener" target="_blank" {...rest} />
       );
     };
@@ -26,7 +57,8 @@ class MarkdownRenderer extends Renderer {
     };
 
     return (
-      <ReactMarkdown className={styles.markdown} source={markdown} renderers={{ link, image }} escapeHtml={false} />
+      <ReactMarkdown className={styles.markdown} source={markdown} renderers={{ heading, link, image }}
+                     escapeHtml={false} />
     );
   }
 }
diff --git a/src/frontend/files/index.js b/src/frontend/files/index.js
@@ -17,4 +17,4 @@ export const CODE_CPP = createUserFile('skeletons/code.cpp');
 export const CODE_JAVA = createUserFile('skeletons/code.java');
 export const CODE_JS = createUserFile('skeletons/code.js');
 export const README_MD = createProjectFile('algorithm-visualizer/README.md');
-export const SCRATCH_PAPER_MD = createProjectFile('scratch-paper/README.md');
+export const CONTRIBUTING_MD = createProjectFile('scratch-paper/CONTRIBUTING.md');
diff --git a/src/frontend/files/scratch-paper/CONTRIBUTING.md b/src/frontend/files/scratch-paper/CONTRIBUTING.md
@@ -0,0 +1 @@
+../../../backend/public/algorithms/CONTRIBUTING.md
diff --git a/src/frontend/files/scratch-paper/README.md b/src/frontend/files/scratch-paper/README.md

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+../../../backend/public/algorithms/CONTRIBUTING.md`