feat(common-ui): Add Markdown component.

plugins-structure/packages/common-ui/babel.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    test: {
+      plugins: [
+        "@babel/plugin-transform-runtime",
+        [
+          "module-resolver",
+          {
+            alias: {
+              "@politeiagui/core": "../core/src",
+              "@politeiagui/core/client": "../core/src/client",
+            },
+          },
+        ],
+      ],
+      presets: ["@babel/preset-react", "@babel/preset-env"],
+    },
+  },
+};

plugins-structure/packages/common-ui/jest.config.js

@@ -1,4 +1,11 @@
 module.exports = {
   testEnvironment: "jsdom",
   setupFilesAfterEnv: ["jest-extended/all"],
+  transform: {
+    "\\.js$": ["babel-jest", { cwd: __dirname }],
+  },
+  testpathIgnorePatterns: ["/node_modules/(?!react-markdown)(.*)"],
+  moduleNameMapper: {
+    "\\.(css|less|svg)$": "<rootDir>/src/__mocks__/styleMock.js",
+  },
 };

plugins-structure/packages/common-ui/package.json

@@ -13,15 +13,23 @@
     "test:format": "yarn prettier --check",
     "test:eslint": "eslint --ext .js ./src",
     "fix:eslint": "eslint --ext .js ./src --fix",
-    "test:ci": "npm run test:format && npm run test:eslint && cross-env jest --no-cache --passWithNoTests",
-    "test:dev": "npm run test:format && npm run test:eslint && cross-env jest --watchAll --no-cache",
+    "test:ci": "npm run test:format && npm run test:eslint && cross-env NODE_OPTIONS=--experimental-vm-modules jest --no-cache",
+    "test:dev": "npm run test:format && npm run test:eslint && cross-env NODE_OPTIONS=--experimental-vm-modules jest --watchAll --no-cache",
     "test": "is-ci \"test:ci\" \"test:dev\"",
     "test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
     "build": "webpack --config webpack.prod.js",
     "start": "webpack serve --config webpack.dev.js --open"
   },
   "dependencies": {
-    "@politeiagui/core": "1.0.0"
+    "@politeiagui/core": "1.0.0",
+    "diff": "^5.0.0",
+    "html-react-parser": "^1.4.8",
+    "node-html-parser": "^5.3.3",
+    "react-markdown": "^6.0.3",
+    "remark-gfm": "1.0.0",
+    "xss-filters": "^1.2.7"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@svgr/webpack": "^6.2.1"
+  }
 }

plugins-structure/packages/common-ui/src/__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+const styles = {};
+export default styles;

plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js

@@ -0,0 +1,65 @@
+import React from "react";
+import parse from "html-react-parser";
+import { diffArrays } from "diff";
+import { renderToStaticMarkup } from "react-dom/server";
+import { parse as parseNode } from "node-html-parser";
+import { MarkdownRenderer } from ".";
+
+function splitRawMdLines(mdText = "") {
+  const splitted = mdText
+    .replace(/\\n/g, " ")
+    .replace(/<p>(.*?)<\/p>/g, "&#10;<p>$1</p>&#10;")
+    .replace(/<h1>(.*?)<\/h1>/g, "&#10;<h1>$1</h1>&#10;")
+    .replace(/<h2>(.*?)<\/h2>/g, "&#10;<h2>$1</h2>&#10;")
+    .replace(/<h3>(.*?)<\/h3>/g, "&#10;<h3>$1</h3>&#10;")
+    .replace(/<h4>(.*?)<\/h4>/g, "&#10;<h4>$1</h4>&#10;")
+    .replace(/<h5>(.*?)<\/h5>/g, "&#10;<h5>$1</h5>&#10;")
+    .replace(/<h6>(.*?)<\/h6>/g, "&#10;<h6>$1</h6>&#10;")
+    .replace(
+      /<blockquote>(.*?)<\/blockquote>/g,
+      "&#10;<blockquote>$1</blockquote>&#10;"
+    )
+    .split("&#10;");
+  return splitted;
+}
+
+function joinDiffArrays(diff = []) {
+  const joined = diff.reduce((acc, el) => {
+    const value = el.value.join("").replace(/&#32;/g, "\n");
+    if (el.removed) {
+      return `${acc}<div class="removed" data-testid="md-line-removed">${value}</div>`;
+    }
+    if (el.added) {
+      return `${acc}<div class="added" data-testid="md-line-added">${value}</div>`;
+    }
+    return `${acc}${value}`;
+  }, "");
+  return joined;
+}
+
+export function getDiffHTML(oldText = "", newText = "") {
+  const oldMarkdown = renderToStaticMarkup(
+    <MarkdownRenderer body={oldText} isDiff={true} />
+  );
+  const newMarkdown = renderToStaticMarkup(
+    <MarkdownRenderer body={newText} isDiff={true} />
+  );
+
+  const oldNode = parseNode(oldMarkdown).firstChild.firstChild.innerHTML;
+  const newNode = parseNode(newMarkdown).firstChild.firstChild.innerHTML;
+
+  const oldSplitted = splitRawMdLines(oldNode);
+  const newSplitted = splitRawMdLines(newNode);
+
+  const diff = diffArrays(oldSplitted, newSplitted);
+  return joinDiffArrays(diff);
+}
+
+export function MarkdownDiffHTML({ oldText, newText }) {
+  const html = getDiffHTML(oldText, newText);
+  return (
+    <div>
+      <div className="markdown-body markdown-diff">{parse(html)}</div>
+    </div>
+  );
+}