Allow frontmatter in rendered markdown (#10624)

airbytehq · Feb 24, 2022 · ef8001f · ef8001f
1 parent 996031e
commit ef8001f
Show file tree

Hide file tree

Showing 3 changed files with 272 additions and 4 deletions.
diff --git a/airbyte-webapp/package-lock.json b/airbyte-webapp/package-lock.json
diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json
@@ -47,6 +47,7 @@
     "react-widgets": "^4.6.1",
     "recharts": "^2.1.9",
     "rehype-urls": "^1.1.1",
+    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.0",
     "rest-hooks": "^5.0.20",
     "sanitize-html": "^2.7.0",

diff --git a/airbyte-webapp/src/components/Markdown/Markdown.tsx b/airbyte-webapp/src/components/Markdown/Markdown.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import remarkFrontmatter from "remark-frontmatter";
 import styled from "styled-components";
 import type { PluggableList } from "react-markdown/lib/react-markdown";
 
@@ -16,7 +17,9 @@ const Markdown: React.FC<Props> = ({ content, className, rehypePlugins }) => {
       linkTarget="_blank"
       className={className}
       skipHtml
-      remarkPlugins={[remarkGfm]}
+      // @ts-expect-error remarkFrontmatter currently has type conflicts due to duplicate vfile dependencies
+      // This is not actually causing any issues, but requires to disable TS on this for now.
+      remarkPlugins={[remarkFrontmatter, remarkGfm]}
       rehypePlugins={rehypePlugins}
       children={content || ""}
     />