feat(markdown): support GFM and inline HTML

easyops-cn · Aug 16, 2024 · 2bf2bf4 · 2bf2bf4
1 parent 3a5eb8e
commit 2bf2bf4
Show file tree

Hide file tree

Showing 9 changed files with 204 additions and 41 deletions.
diff --git a/bricks/markdown/docs/eo-markdown-display.md b/bricks/markdown/docs/eo-markdown-display.md
@@ -45,18 +45,35 @@ properties:
 
     ![Image](https://upload.wikimedia.org/wikipedia/commons/5/5c/Icon-pictures.png "icon")
 
+    An image in a link:
+
+    [![Image](https://upload.wikimedia.org/wikipedia/commons/5/5c/Icon-pictures.png "icon")](http://example.com)
+
     > Markdown uses email-style
     characters for blockquoting.
     >
     > Multiple paragraphs need to be prepended individually.
 
-    Most inline <abbr title="Hypertext Markup Language">HTML</abbr> tags are supported.
-
     Here is a `javascript` code below:
 
     ```js
     function test() {
       alert("Hello");
     }
     ```
+
+    | Name | Gender | Age |
+    | - | - | -: |
+    | Jim | Male | 16 |
+    | Lucy | Female | 17 |
+
+    Most inline <abbr title="Hypertext Markup Language">HTML</abbr> tags are supported.
+
+    Note: inline HTML are sanitized, and attributes like `class` and `style` are removed, see [`defaultScheme`](https://github.com/syntax-tree/hast-util-sanitize?tab=readme-ov-file#defaultschema) of hast-util-sanitize.
+
+    <em class="em" title="em" style="color:blue">em</em>
+
+    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" alt="pictures">
+
+    <img src="/404" onerror="alert('oops')">
 ````
diff --git a/bricks/markdown/src/markdown-display/host-context.css b/bricks/markdown/src/markdown-display/host-context.css
diff --git a/bricks/markdown/src/markdown-display/index.tsx b/bricks/markdown/src/markdown-display/index.tsx
@@ -3,8 +3,8 @@ import { createDecorators } from "@next-core/element";
 import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
 import { MarkdownComponent, type LinkOptions } from "@next-shared/markdown";
+import "@next-shared/markdown/dist/esm/host-context.css";
 import styleText from "./styles.shadow.css";
-import "./host-context.css";
 
 const { defineElement, property } = createDecorators();
 

diff --git a/bricks/markdown/src/markdown-display/styles.shadow.css b/bricks/markdown/src/markdown-display/styles.shadow.css
@@ -7,29 +7,4 @@
 }
 
 @import "~@next-shared/markdown/dist/esm/prism-tomorrow.css";
-
-pre {
-  white-space: pre-wrap;
-  background-color: var(--palette-gray-3);
-  border-radius: 6px;
-  padding: 1em;
-}
-
-:not(pre) > code {
-  color: var(--eo-markdown-display-code-color);
-  background: var(--eo-markdown-display-code-background);
-  margin: 0 2px;
-  padding: 1px 6px;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-
-blockquote {
-  border-left: 6px solid var(--eo-markdown-display-blockquote-border-color);
-  padding: 0 1em;
-}
-
-:not(blockquote) > blockquote {
-  margin-left: 0;
-  margin-right: 0;
-}
+@import "~@next-shared/markdown/dist/esm/default.css";
diff --git a/shared/markdown/package.json b/shared/markdown/package.json
@@ -34,12 +34,16 @@
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --project tsconfig.build.json"
   },
   "dependencies": {
+    "@next-core/theme": "^1.5.4",
     "hast-util-to-string": "^3.0.0",
     "is-absolute-url": "^4.0.1",
     "prismjs": "^1.29.0",
     "react": "0.0.0-experimental-ee8509801-20230117",
     "refractor": "^4.8.1",
     "rehype-react": "^8.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
     "unified": "^11.0.4",

diff --git a/shared/markdown/src/MarkdownComponent.tsx b/shared/markdown/src/MarkdownComponent.tsx
@@ -2,7 +2,10 @@ import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
 import remarkToRehype from "remark-rehype";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 import rehypeReact, { Options as RehypeReactOptions } from "rehype-react";
 import { rehypePrism } from "./rehypePrism.js";
 import { rehypeLinks, type LinkOptions } from "./rehypeLinks.js";
@@ -27,7 +30,10 @@ export function MarkdownComponent({
     let ignore = false;
     unified()
       .use(remarkParse)
-      .use(remarkToRehype)
+      .use(remarkGfm)
+      .use(remarkToRehype, { allowDangerousHtml: true })
+      .use(rehypeRaw)
+      .use(rehypeSanitize)
       .use(rehypePrism)
       .use(rehypeLinks, linkOptions)
       .use(rehypeReact, production as RehypeReactOptions)

diff --git a/shared/markdown/src/default.css b/shared/markdown/src/default.css
@@ -0,0 +1,48 @@
+pre {
+  white-space: pre-wrap;
+  background-color: var(--palette-gray-3);
+  border-radius: 6px;
+  padding: 1em;
+}
+
+:not(pre) > code {
+  color: var(--shared-markdown-code-color);
+  background: var(--shared-markdown-code-background);
+  margin: 0 2px;
+  padding: 1px 6px;
+  white-space: nowrap;
+  border-radius: 3px;
+}
+
+blockquote {
+  border-left: 6px solid #bcc0c5;
+  padding: 0 1em;
+}
+
+:not(blockquote) > blockquote {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+table {
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+th,
+td {
+  border: 1px solid var(--shared-markdown-table-border-color);
+  padding: 6px 13px;
+}
+
+tr {
+  background-color: var(--shared-markdown-tr-background);
+}
+
+tr:nth-child(2n) {
+  background-color: var(--shared-markdown-tr-background-alt);
+}
diff --git a/shared/markdown/src/host-context.css b/shared/markdown/src/host-context.css
@@ -0,0 +1,16 @@
+:root {
+  --shared-markdown-code-color: #b30056;
+  --shared-markdown-code-background: #ffe6ec;
+  --shared-markdown-table-border-color: #ccc;
+  --shared-markdown-tr-background: #fff;
+  --shared-markdown-tr-background-alt: #f8f8f8;
+}
+
+html[data-theme="dark"],
+html[data-theme="dark-v2"] {
+  --shared-markdown-code-color: #f3679a;
+  --shared-markdown-code-background: var(--color-fill-bg-base-1);
+  --shared-markdown-table-border-color: var(--color-border-divider-line);
+  --shared-markdown-tr-background: rgba(255, 255, 255, 0);
+  --shared-markdown-tr-background-alt: var(--color-fill-bg-base-1);
+}
diff --git a/yarn.lock b/yarn.lock
@@ -9565,13 +9565,62 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+hast-util-from-parse5@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz#654a5676a41211e14ee80d1b1758c399a0327651"
+  integrity sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@types/unist" "^3.0.0"
+    devlop "^1.0.0"
+    hastscript "^8.0.0"
+    property-information "^6.0.0"
+    vfile "^6.0.0"
+    vfile-location "^5.0.0"
+    web-namespaces "^2.0.0"
+
 hast-util-parse-selector@^3.0.0:
   version "3.1.1"
   resolved "https://registry.npmmirror.com/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz#25ab00ae9e75cbc62cf7a901f68a247eade659e2"
   integrity sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==
   dependencies:
     "@types/hast" "^2.0.0"
 
+hast-util-parse-selector@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz#352879fa86e25616036037dd8931fb5f34cb4a27"
+  integrity sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==
+  dependencies:
+    "@types/hast" "^3.0.0"
+
+hast-util-raw@^9.0.0:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-9.0.4.tgz#2da03e37c46eb1a6f1391f02f9b84ae65818f7ed"
+  integrity sha512-LHE65TD2YiNsHD3YuXcKPHXPLuYh/gjp12mOfU8jxSrm1f/yJpsb0F/KKljS6U9LJoP0Ux+tCe8iJ2AsPzTdgA==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@types/unist" "^3.0.0"
+    "@ungap/structured-clone" "^1.0.0"
+    hast-util-from-parse5 "^8.0.0"
+    hast-util-to-parse5 "^8.0.0"
+    html-void-elements "^3.0.0"
+    mdast-util-to-hast "^13.0.0"
+    parse5 "^7.0.0"
+    unist-util-position "^5.0.0"
+    unist-util-visit "^5.0.0"
+    vfile "^6.0.0"
+    web-namespaces "^2.0.0"
+    zwitch "^2.0.0"
+
+hast-util-sanitize@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-5.0.1.tgz#8e90068cd68e651c569960b77a1b25076579b4cf"
+  integrity sha512-IGrgWLuip4O2nq5CugXy4GI2V8kx4sFVy5Hd4vF7AR2gxS0N9s7nEAVUyeMtZKZvzrxVsHt73XdTsno1tClIkQ==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@ungap/structured-clone" "^1.2.0"
+    unist-util-position "^5.0.0"
+
 hast-util-to-jsx-runtime@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz#3ed27caf8dc175080117706bf7269404a0aa4f7c"
@@ -9593,6 +9642,19 @@ hast-util-to-jsx-runtime@^2.0.0:
     unist-util-position "^5.0.0"
     vfile-message "^4.0.0"
 
+hast-util-to-parse5@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz#477cd42d278d4f036bc2ea58586130f6f39ee6ed"
+  integrity sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    comma-separated-tokens "^2.0.0"
+    devlop "^1.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    web-namespaces "^2.0.0"
+    zwitch "^2.0.0"
+
 hast-util-to-string@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz#2a131948b4b1b26461a2c8ac876e2c88d02946bd"
@@ -9618,6 +9680,17 @@ hastscript@^7.0.0:
     property-information "^6.0.0"
     space-separated-tokens "^2.0.0"
 
+hastscript@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-8.0.0.tgz#4ef795ec8dee867101b9f23cc830d4baf4fd781a"
+  integrity sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-parse-selector "^4.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+
 header-case@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
@@ -9711,6 +9784,11 @@ html-parse-stringify@^3.0.1:
   dependencies:
     void-elements "3.1.0"
 
+html-void-elements@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-3.0.0.tgz#fc9dbd84af9e747249034d4d62602def6517f1d7"
+  integrity sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==
+
 html2canvas@^1.0.0-rc.5, html2canvas@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
@@ -15958,6 +16036,15 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/regl/-/regl-1.6.1.tgz#6930172cda9b8fb65724abc0d4930d79333f5460"
   integrity sha512-7Z9rmpEqmLNwC9kCYCyfyu47eWZaQWeNpwZfwz99QueXN8B/Ow40DB0N+OeUeM/yu9pZAB01+JgJ+XghGveVoA==
 
+rehype-raw@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-7.0.0.tgz#59d7348fd5dbef3807bbaa1d443efd2dd85ecee4"
+  integrity sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    hast-util-raw "^9.0.0"
+    vfile "^6.0.0"
+
 rehype-react@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/rehype-react/-/rehype-react-8.0.0.tgz#a3e2fecb10579af7bb065c7b232410a500699ba7"
@@ -15967,6 +16054,14 @@ rehype-react@^8.0.0:
     hast-util-to-jsx-runtime "^2.0.0"
     unified "^11.0.0"
 
+rehype-sanitize@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-sanitize/-/rehype-sanitize-6.0.0.tgz#16e95f4a67a69cbf0f79e113c8e0df48203db73c"
+  integrity sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    hast-util-sanitize "^5.0.0"
+
 remark-gfm@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmmirror.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"
@@ -18085,6 +18180,14 @@ [email protected]:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vfile-location@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-5.0.3.tgz#cb9eacd20f2b6426d19451e0eafa3d0a846225c3"
+  integrity sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    vfile "^6.0.0"
+
 vfile-message@^3.0.0:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea"
@@ -18199,6 +18302,11 @@ wcwidth@^1.0.0, wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-namespaces@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
+  integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
+
 web-streams-polyfill@^3.2.1:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz#2073b91a2fdb1fbfbd401e7de0ac9f8214cecb4b"