move markdownToHtml to magda-typescript-common

magdabot · Mar 16, 2021 · 90ba78e · 90ba78e
1 parent 5b04c6f
commit 90ba78e
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 49 deletions.
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -244,6 +244,7 @@ buildtest:ui:
   script:
     - yarn install
     - yarn run eslint
+    - cd magda-typescript-common && yarn build cd ..
     - yarn run in-submodules -- -f categories.ui=true -- run build --include-filtered-dependencies
     - yarn run in-submodules -- -f categories.ui=true -- run test
   artifacts:

diff --git a/magda-typescript-common/package.json b/magda-typescript-common/package.json
@@ -62,6 +62,8 @@
     "tsmonad": "^0.7.2",
     "urijs": "^1.19.4",
     "uuid": "^8.2.0",
+    "markdown-it": "^10.0.0",
+    "dompurify": "^2.0.3",
     "yargs": "^12.0.5"
   },
   "config": {

diff --git a/magda-typescript-common/src/markdownToHtml.ts b/magda-typescript-common/src/markdownToHtml.ts
@@ -0,0 +1,36 @@
+import MarkdownIt from "markdown-it";
+const DOMPurify = require("dompurify/dist/purify");
+
+const md = new MarkdownIt({
+    html: true,
+    linkify: true,
+    breaks: true
+});
+
+const htmlRegex = /^\s*<[^>]+>/;
+
+export default function markdownToHtml(
+    markdownString: string,
+    allowUnsafeHtml: boolean = false,
+    options = {
+        FORBID_TAGS: ["svg", "math"]
+    }
+) {
+    if (!markdownString || typeof markdownString !== "string") {
+        return markdownString;
+    }
+    // If the text looks like html, don't try to interpret it as Markdown because
+    // we'll probably break it in the process.
+    var unsafeHtml;
+    if (htmlRegex.test(markdownString)) {
+        unsafeHtml = markdownString;
+    } else {
+        // Note this would wrap non-standard tags such as <collapsible>hi</collapsible> in a <p></p>, which is bad.
+        unsafeHtml = md.render(markdownString);
+    }
+    if (allowUnsafeHtml) {
+        return unsafeHtml;
+    } else {
+        return DOMPurify.sanitize(unsafeHtml, options);
+    }
+}
diff --git a/magda-web-client/package.json b/magda-web-client/package.json
@@ -46,6 +46,7 @@
     "@craco/craco": "^5.6.4",
     "@magda/registry-aspects": "^0.0.60-alpha.0",
     "@magda/scripts": "^0.0.60-alpha.0",
+    "@magda/typescript-common": "^0.0.60-alpha.0",
     "@types/debounce-promise": "^3.1.1",
     "@types/jsonpath": "^0.2.0",
     "@types/papaparse": "^5.2.2",
@@ -71,7 +72,6 @@
     "d3-collection": "^1.0.4",
     "debounce-promise": "^3.1.2",
     "deep-freeze": "0.0.1",
-    "dompurify": "^2.0.3",
     "echarts": "^4.1.0",
     "echarts-for-react": "^2.0.14",
     "email-validator": "^2.0.3",
@@ -99,7 +99,6 @@
     "leaflet-mapbox-vector-tile": "github:TerriaJS/Leaflet.MapboxVectorTile",
     "lodash": "^4.17.10",
     "mammoth": "^1.4.7",
-    "markdown-it": "^10.0.0",
     "markdown-with-front-matter-loader": "^0.1.0",
     "memoize-one": "^3.1.1",
     "nlcst-to-string": "^2.0.2",

diff --git a/magda-web-client/src/Components/Account/AccountLoginPage.tsx b/magda-web-client/src/Components/Account/AccountLoginPage.tsx
@@ -16,7 +16,7 @@ import {
 import { config, isBackendSameOrigin } from "config";
 import { useAsync } from "react-async-hook";
 import urijs from "urijs";
-import { markdownToHtml } from "Components/Common/MarkdownViewer";
+import markdownToHtml from "@magda/typescript-common/dist/markdownToHtml";
 import QrCodeLoginArea from "./QrCodeLoginArea";
 const { baseUrl, baseExternalUrl, authPluginRedirectUrl } = config;
 

diff --git a/magda-web-client/src/Components/Account/QrCodeLoginArea.tsx b/magda-web-client/src/Components/Account/QrCodeLoginArea.tsx
@@ -7,7 +7,7 @@ import {
     QrCodeImgDataResponse,
     QrCodePollResponse
 } from "api-clients/AuthApis";
-import { markdownToHtml } from "Components/Common/MarkdownViewer";
+import markdownToHtml from "@magda/typescript-common/dist/markdownToHtml";
 
 type PropsType = {
     authConfig: AuthPluginConfig;

diff --git a/magda-web-client/src/Components/Common/MarkdownViewer.js b/magda-web-client/src/Components/Common/MarkdownViewer.js
@@ -1,9 +1,7 @@
 import React from "react";
-import MarkdownIt from "markdown-it";
 import "./MarkdownViewer.scss";
-import defined from "helpers/defined";
 import truncate from "html-truncate";
-var DOMPurify = require("dompurify/dist/purify");
+import markdownToHtml from "@magda/typescript-common/dist/markdownToHtml";
 
 class MarkdownViewer extends React.Component {
     render() {
@@ -23,40 +21,6 @@ MarkdownViewer.defaultProps = { markdown: "" };
 
 export default MarkdownViewer;
 
-const md = new MarkdownIt({
-    html: true,
-    linkify: true,
-    breaks: true
-});
-
-const htmlRegex = /^\s*<[^>]+>/;
-
-export function markdownToHtml(
-    markdownString,
-    allowUnsafeHtml,
-    options = {
-        FORBID_TAGS: ["svg", "math"]
-    }
-) {
-    if (!defined(markdownString) || markdownString.length === 0) {
-        return markdownString;
-    }
-    // If the text looks like html, don't try to interpret it as Markdown because
-    // we'll probably break it in the process.
-    var unsafeHtml;
-    if (htmlRegex.test(markdownString)) {
-        unsafeHtml = markdownString;
-    } else {
-        // Note this would wrap non-standard tags such as <collapsible>hi</collapsible> in a <p></p>, which is bad.
-        unsafeHtml = md.render(markdownString);
-    }
-    if (allowUnsafeHtml) {
-        return unsafeHtml;
-    } else {
-        return DOMPurify.sanitize(unsafeHtml, options);
-    }
-}
-
 /**
  * Tell whether content provided will be truncated or not.
  * It's useful when you need to tell whether a toggel button should be shown or not

diff --git a/magda-web-client/src/Components/Editing/Editors/markdownEditor.tsx b/magda-web-client/src/Components/Editing/Editors/markdownEditor.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Editor from "./Editor";
 
-import { markdownToHtml } from "Components/Common/MarkdownViewer";
+import markdownToHtml from "@magda/typescript-common/dist/markdownToHtml";
 import starIcon from "assets/star.svg";
 
 // TODO:
@@ -13,15 +13,15 @@ import "easymde/dist/easymde.min.css";
 
 export const markdownEditor: Editor<string> = {
     edit: (value: any, onChange: Function) => {
-        const callback = text => {
+        const callback = (text) => {
             onChange(text);
         };
         return (
             <AsyncComponent
                 value={value}
                 onChange={callback}
                 importComponent={() =>
-                    import("react-simplemde-editor").then(x => x.default)
+                    import("react-simplemde-editor").then((x) => x.default)
                 }
             />
         );

diff --git a/magda-web-server/src/cralwerViews/commonView.ts b/magda-web-server/src/cralwerViews/commonView.ts
@@ -1,3 +1,5 @@
+import markdownToHtml from "magda-typescript-common/src/markdownToHtml";
+
 type ContentType = {
     title: string;
     __content: string;
@@ -16,7 +18,7 @@ const commonView = (
             <style></style>
         </head>
         <body>
-            ${__content}
+            ${markdownToHtml(__content)}
             ${
                 shouldShowFullVersionLink && fullVersionUrl
                     ? `<br />

diff --git a/magda-web-server/src/cralwerViews/dataset.ts b/magda-web-server/src/cralwerViews/dataset.ts
@@ -26,9 +26,9 @@ const dataset = (record: Record, baseUrl: string) => {
         : [];
 
     return `---
-title: ${title}
+title: Dataset: ${title}
 ---
-# ${title}
+# Dataset: ${title}
 ---
 ## General Information
 

diff --git a/magda-web-server/src/test/cralwerViews/sampleDatasetView.md b/magda-web-server/src/test/cralwerViews/sampleDatasetView.md
@@ -1,8 +1,8 @@
 ---
-title: ASIC – Credit Licensee Dataset
+title: Dataset: ASIC – Credit Licensee Dataset
 ---
 
-# ASIC – Credit Licensee Dataset
+# Dataset: ASIC – Credit Licensee Dataset
 
 ---