Rebuild Support for custom Markdown on Configuration page (#2564)

Author: montogeek

.editorconfig

@@ -11,6 +11,7 @@ insert_final_newline = true
 charset = utf-8
 indent_style = space
 indent_size = 2
+quote_type = single
 
 # Format Configs
 [.eslintignore,*rc]

package.json

@@ -62,6 +62,8 @@
     ]
   },
   "devDependencies": {
+    "@mdx-js/loader": "0.15.7",
+    "@mdx-js/mdx": "0.15.7",
     "@octokit/rest": "^15.9.4",
     "alex": "^5.1.0",
     "autoprefixer": "^7.2.3",
@@ -76,8 +78,8 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "5.2.0",
     "css-loader": "^0.28.5",
-    "directory-tree": "2.1.0",
-    "directory-tree-webpack-plugin": "^0.3.1",
+    "directory-tree": "2.2.0",
+    "directory-tree-webpack-plugin": "0.3",
     "duplexer": "^0.1.1",
     "eslint": "4.19.1",
     "eslint-loader": "^2.0.0",
@@ -92,14 +94,14 @@
     "http-server": "^0.10.0",
     "husky": "^1.0.0-rc.8",
     "hyperlink": "^4.0.0",
-    "lint-staged": "^7.2.0",
+    "lint-staged": "^8.1.0",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
-    "markdown-loader": "^2.0.1",
+    "markdown-loader": "^4.0.0",
     "markdownlint": "^0.11.0",
     "markdownlint-cli": "^0.13.0",
     "markdownlint-rule-emphasis-style": "^1.0.0",
-    "marked": "^0.3.7",
+    "marked": "^0.5.2",
     "mermaid.cli": "^0.3.6",
     "minimist": "1.2.0",
     "mkdirp": "^0.5.1",
@@ -108,13 +110,13 @@
     "npm-run-all": "^4.1.1",
     "postcss-loader": "^2.0.6",
     "redirect-webpack-plugin": "^0.1.1",
-    "remark": "^9.0.0",
+    "remark": "^10.0.1",
     "remark-autolink-headings": "^5.0.0",
     "remark-custom-blockquotes": "1.0.0",
     "remark-extract-anchors": "1.0.0",
     "remark-loader": "^0.3.0",
     "remark-mermaid": "^0.2.0",
-    "remark-refractor": "1.0.0",
+    "remark-refractor": "1.1.0",
     "remark-responsive-tables": "1.0.0",
     "remark-slug": "^5.0.0",
     "request": "^2.81.0",
@@ -146,7 +148,9 @@
     "react-dom": "^16.2.0",
     "react-g-analytics": "0.4.2",
     "react-hot-loader": "^4.0.0-beta.12",
+    "react-markdown": "4.0.4",
     "react-router-dom": "^4.2.2",
+    "react-tiny-popover": "3.4.2",
     "webpack.vote": "^0.1.2",
     "whatwg-fetch": "^2.0.3"
   }

src/components/Configuration/Configuration.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import { Details } from "./components";
+
+const detailComponentsList = ['link', 'mode', 'entry', 'filename', 'publicPath', 'advancedOutput', 'expert', 'advancedModule', 'alias', 'advancedResolve', 'hints', 'devtool', 'target', 'externals', 'stats', 'advanced', 'libraryTarget'];
+
+const Pre = props => {
+  const newChildren = React.Children.map(props.children.props.children, child => {
+    if (React.isValidElement(child)) {
+      if (child.props.props.className.includes("keyword")) {
+        if (!detailComponentsList.includes(child.props.props.componentname)) return child;
+
+        return <Details children={child.props.children.slice(4, React.Children.count(child.props.children) - 4)} url={child.props.props.url} />;
+      }
+
+      if (child.props.props.className.includes("comment")) {
+        return <ReactMarkdown source={child.props.children} disallowedTypes={["paragraph"]} unwrapDisallowed />;
+      }
+    }
+
+    return child;
+  });
+
+  const newProps = {
+    children: newChildren
+  };
+
+  return (
+    <pre>
+      <code {...newProps} />
+    </pre>
+  );
+};
+
+export default {
+  components: {
+    pre: Pre
+  }
+};

src/components/Configuration/Configuration.scss

@@ -0,0 +1,10 @@
+.shadow {
+  overflow: visible;
+  border-radius: 4px;
+  box-shadow: -1px 1px 10px 0 rgba(255, 255, 255, 0.44);
+}
+
+.inline {
+  padding-right: 15px !important;
+  margin: 0 !important;
+}

src/components/Configuration/components.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import Popover from 'react-tiny-popover';
+import './Configuration.scss';
+import { timeout } from 'q';
+
+const DEFAULT_CHILDREN_SIZE = 4;
+
+const isFirstChild = child => typeof child === 'string' && child !== ' ';
+
+const removeSpaces = child => (isFirstChild(child) ? child.trim() : child);
+
+const addLink = (child, i, url) => {
+  return isFirstChild(child) ? (
+    <a href={url} key={i}>
+      {child}
+    </a>
+  ) : (
+    child
+  );
+};
+
+const Card = ({ body }) => {
+  return (
+    <div className="markdown">
+      <pre className="inline">
+        <code>{body}</code>
+      </pre>
+    </div>
+  );
+};
+
+export class Details extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      summary: null,
+      content: null
+    };
+  }
+
+  componentDidMount() {
+    const { children, url } = this.props;
+
+    // Find the index of </default>
+    const closeDefaultTagIndex = children.findIndex(child => {
+      if (React.isValidElement(child)) {
+        return (
+          child.props.props.className.includes('tag') &&
+          child.props.children.length === DEFAULT_CHILDREN_SIZE
+        );
+      }
+    });
+
+    // Summary is the part of the snippet that would be shown in the code snippet,
+    // to get it we need to cut the <default></default> enclosing tags
+    const summary = children
+      .splice(2, closeDefaultTagIndex - 3)
+      .map(removeSpaces)
+      .map((child, i) => addLink(child, i, url));
+
+    children.splice(0, DEFAULT_CHILDREN_SIZE); // Remove <default></default> information
+
+    this.setState({
+      summary,
+      content: children
+    });
+  }
+
+  clickOutsideHandler = () => {
+    this.setState({ open: false });
+  };
+
+  toggleVisibility = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { open, summary, content } = this.state;
+    return (
+      <Popover
+        isOpen={open}
+        position={['right', 'top']}
+        padding={0}
+        onClickOutside={this.clickOutsideHandler}
+        containerClassName={'shadow'}
+        content={<Card body={content} />}
+      >
+        <span
+          className='code-details-summary-span'
+          onClick={this.toggleVisibility}
+        >
+          {summary}
+        </span>
+      </Popover>
+    );
+  }
+}