@vertigis/react-ui 21.7.4 → 21.9.0

package/Markdown/Markdown.d.ts

@@ -48,6 +48,11 @@ export interface MarkdownProps extends BoxProps {
      * applied to the output. Defaults to `false`.
      */
     useBasicHtml?: boolean;
+    /**
+     * Adds support for the extensions found in GitHub Flavored Markdown.
+     * Defaults to `true`.
+     */
+    useGitHubFlavoredMarkdown?: boolean;
 }
 /**
  * A component that renders markdown as React nodes.

package/Markdown/Markdown.js

@@ -5,6 +5,7 @@ import { useMemo } from "react";
 import ReactMarkdown, {} from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
 import Box from "../Box/index.js";
 import Link, {} from "../Link/index.js";
 import Typography, {} from "../Typography/index.js";
@@ -75,7 +76,7 @@ const disallowedInlineElements = [
  * However, it is still recommended to set `escapeHtml` to true with untrusted
  * content.
  */
-const Markdown = ({ markdown, inline, escapeHtml, sanitize, linkTarget = "_blank", children, className, useBasicHtml, ...otherProps }) => {
+const Markdown = ({ markdown, inline, escapeHtml, sanitize, linkTarget = "_blank", children, className, useBasicHtml, useGitHubFlavoredMarkdown = true, ...otherProps }) => {
     const theme = useTheme();
     const disallowedElements = useMemo(() => (inline ? disallowedInlineElements : []), [inline]);
     const components = useMemo(() => useBasicHtml
@@ -132,6 +133,6 @@ const Markdown = ({ markdown, inline, escapeHtml, sanitize, linkTarget = "_blank
                     }, variant: "body1" }));
             },
         }, [linkTarget, theme, useBasicHtml]);
-    return (_jsx(Box, { component: inline ? "span" : "div", className: clsx("GcxMarkdown", className), ...otherProps, children: _jsx(ReactMarkdown, { components: components, disallowedElements: disallowedElements, rehypePlugins: escapeHtml ? [] : [rehypeRaw, rehypeSanitize], children: children && typeof children === "string" ? children : markdown }) }));
+    return (_jsx(Box, { component: inline ? "span" : "div", className: clsx("GcxMarkdown", className), ...otherProps, children: _jsx(ReactMarkdown, { components: components, disallowedElements: disallowedElements, rehypePlugins: escapeHtml ? [] : [rehypeRaw, rehypeSanitize], remarkPlugins: useGitHubFlavoredMarkdown ? [remarkGfm] : [], children: children && typeof children === "string" ? children : markdown }) }));
 };
 export default Markdown;

package/Markdown/MarkdownLegacy.d.ts

@@ -0,0 +1,48 @@
+import type { FC } from "react";
+import type { BoxProps } from "../Box/index.js";
+/**
+ * Properties for the `Markdown` component.
+ */
+export interface MarkdownProps extends BoxProps {
+    /**
+     * The markdown text to render.
+     */
+    markdown: string;
+    /**
+     * Override the default sanitization behaviour with a caller-supplied
+     * sanitization function that ensures that the resulting HTML is safe to
+     * insert into the DOM.
+     */
+    sanitize?: (unsafeHtml: string) => string;
+    /**
+     * If specified, produces HTML that is valid for contexts where only inline
+     * content is allowed (e.g. inside `<h1>` or `<span>` tags). HTML tags for
+     * block-level elements will be removed, but any text content will be
+     * preserved.
+     */
+    inline?: boolean;
+    /**
+     * If true, any HTML in the markdown will be escaped rather than passed
+     * through directly to the output as normal (since Markdown is a superset of
+     * HTML). This is useful in situations where you wish to only support pure
+     * Markdown syntax without also supporting HTML syntax. The default is
+     * `false`.
+     *
+     * IMPORTANT: The resulting HTML still needs to be sanitized whether or not
+     * this option is set.
+     */
+    escapeHtml?: boolean;
+    /**
+     * An optional value to apply to external hyperlinks via the `target`
+     * attribute.
+     *
+     * If this is omitted, links may still open in a separate target if the host
+     * page specifies a `target` via the `<base>` element in its `<head>`.
+     */
+    linkTarget?: string;
+}
+/**
+ * A component that renders markdown as HTML.
+ */
+declare const Markdown: FC<MarkdownProps>;
+export default Markdown;

package/Markdown/MarkdownLegacy.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Box from "../Box/index.js";
+import { sanitizeHtml } from "../utils/html.js";
+import { markdownToHtml } from "../utils/markdown.js";
+/**
+ * A component that renders markdown as HTML.
+ */
+const Markdown = ({ markdown, inline, escapeHtml, sanitize = sanitizeHtml, linkTarget, className, ...otherProps }) => (_jsx(Box, { component: inline ? "span" : "div", className: clsx("GcxMarkdown", className), dangerouslySetInnerHTML: {
+        __html: sanitize(markdownToHtml(markdown, { inline, escapeHtml, linkTarget })),
+    }, ...otherProps }));
+export default Markdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/react-ui",
-  "version": "21.7.4",
+  "version": "21.9.0",
   "description": "Utilities and React components used in VertiGIS applications.",
   "keywords": [
     "vertigis",
@@ -30,6 +30,7 @@
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "tslib": "^2.6.2",
     "xss": "^1.0.15"
   },