npm - @vertigis/react-ui - Versions diffs - 21.6.0 → 21.7.0 - Mend

@vertigis/react-ui 21.6.0 → 21.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/Markdown/Markdown.d.ts CHANGED Viewed

@@ -1,17 +1,21 @@
-import type { FC } from "react";
+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.
+     * The markdown text to render. Optional, you can also supply the text as a
+     * child of this component.
      */
-    markdown: string;
+    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.
+     *
+     * @deprecated The Markdown component no longer operates by attaching raw
+     *   HTML strings to the DOM, so this property is ignored.
      */
     sanitize?: (unsafeHtml: string) => string;
     /**
@@ -28,21 +32,30 @@ export interface MarkdownProps extends BoxProps {
      * 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.
+     * IMPORTANT: A sanitizer is run on any inline HTML before it is passed to
+     * React, but you should still probably set this to `true` when dealing with
+     * untrusted sources.
      */
     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>`.
+     * attribute. Defaults to "_blank".
      */
     linkTarget?: string;
+    /**
+     * Whether to use standard HTML elements instead of their `react-ui`
+     * equivalents. If this is `true` the VertiGIS 'Meridian' style will not be
+     * applied to the output. Defaults to `false`.
+     */
+    useBasicHtml?: boolean;
 }
 /**
- * A component that renders markdown as HTML.
+ * A component that renders markdown as React nodes.
+ *
+ * GitHub style sanitation is applied to any inline HTML encountered, see:
+ * https://github.com/gjtorikian/html-pipeline/blob/a2e02ac/lib/html_pipeline/sanitization_filter.rb
+ * However, it is still recommended to set `escapeHtml` to true with untrusted
+ * content.
  */
 declare const Markdown: FC<MarkdownProps>;
 export default Markdown;

package/Markdown/Markdown.js CHANGED Viewed

@@ -1,12 +1,137 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import clsx from "clsx";
+import { useMemo } from "react";
+import ReactMarkdown, {} from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 import Box from "../Box/index.js";
-import { sanitizeHtml } from "../utils/html.js";
-import { markdownToHtml } from "../utils/markdown.js";
+import Link, {} from "../Link/index.js";
+import Typography, {} from "../Typography/index.js";
+import { useTheme } from "../styles/index.js";
+const disallowedInlineElements = [
+    "a",
+    "abbr",
+    "area",
+    "audio",
+    "b",
+    "bdi",
+    "bdo",
+    "br",
+    "button",
+    "canvas",
+    "cite",
+    "code",
+    "data",
+    "datalist",
+    "del",
+    "dfn",
+    "em",
+    "embed",
+    "i",
+    "iframe",
+    "img",
+    "input",
+    "ins",
+    "kbd",
+    "label",
+    "link",
+    "map",
+    "mark",
+    "math",
+    "meta",
+    "meter",
+    "noscript",
+    "object",
+    "output",
+    "picture",
+    "progress",
+    "q",
+    "ruby",
+    "s",
+    "samp",
+    "script",
+    "select",
+    "slot",
+    "small",
+    "span",
+    "strong",
+    "sub",
+    "sup",
+    "svg",
+    "template",
+    "textarea",
+    "time",
+    "u",
+    "var",
+    "video",
+    "wbr",
+];
 /**
- * A component that renders markdown as HTML.
+ * A component that renders markdown as React nodes.
+ *
+ * GitHub style sanitation is applied to any inline HTML encountered, see:
+ * https://github.com/gjtorikian/html-pipeline/blob/a2e02ac/lib/html_pipeline/sanitization_filter.rb
+ * However, it is still recommended to set `escapeHtml` to true with untrusted
+ * content.
  */
-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 }));
+const Markdown = ({ markdown, inline, escapeHtml, sanitize, linkTarget = "_blank", children, className, useBasicHtml, ...otherProps }) => {
+    const theme = useTheme();
+    const disallowedElements = useMemo(() => (inline ? disallowedInlineElements : []), [inline]);
+    const components = useMemo(() => useBasicHtml
+        ? {}
+        : {
+            a({ node, href, ...props }) {
+                const localLink = href?.startsWith(`${location.protocol}//${location.hostname}`) ||
+                    href?.startsWith(location.hostname) ||
+                    href?.startsWith("#") ||
+                    href?.startsWith("/");
+                return (_jsx(Link, { target: href?.startsWith("#") ? undefined : linkTarget, showExternalLinkIcon: !localLink, href: href, ...props }));
+            },
+            // Default margin values based on https://www.w3.org/TR/CSS2/sample.html
+            h1({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(0.67),
+                        marginBlockEnd: theme.spacing(0.67),
+                    }, variant: "h1" }));
+            },
+            h2({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(0.75),
+                        marginBlockEnd: theme.spacing(0.75),
+                    }, variant: "h2" }));
+            },
+            h3({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(0.83),
+                        marginBlockEnd: theme.spacing(0.83),
+                    }, variant: "h3" }));
+            },
+            h4({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(1),
+                        marginBlockEnd: theme.spacing(1),
+                    }, variant: "h4" }));
+            },
+            h5({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(1.5),
+                        marginBlockEnd: theme.spacing(1.5),
+                    }, variant: "h5" }));
+            },
+            h6({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(1.67),
+                        marginBlockEnd: theme.spacing(1.67),
+                    }, variant: "h6" }));
+            },
+            p({ node, ...props }) {
+                return (_jsx(Typography, { component: "p", ...props, sx: {
+                        marginBlockStart: theme.spacing(1),
+                        marginBlockEnd: theme.spacing(1),
+                    }, 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 }) }));
+};
 export default Markdown;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/react-ui",
-  "version": "21.6.0",
+  "version": "21.7.0",
   "description": "Utilities and React components used in VertiGIS applications.",
   "keywords": [
     "vertigis",
@@ -27,6 +27,9 @@
     "lodash.escape": "^4.0.1",
     "marked": "^12.0.1",
     "react-color": "^2.19.3",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "tslib": "^2.6.2",
     "xss": "^1.0.15"
   },

package/utils/markdown.d.ts CHANGED Viewed

@@ -33,6 +33,8 @@ export interface MarkdownToHtmlOptions {
  * Converts markdown text into HTML. The resulting HTML is sanitized and safe to
  * insert into the DOM.
  *
+ * @deprecated Use the `Markdown` component to add markdown safely without
+ *   parsing raw HTML strings.
  * @param markdown The markdown text to convert.
  * @param options Options that affect how the text is converted.
  */
@@ -44,6 +46,8 @@ export declare function markdownToSafeHtml(markdown: string, options?: MarkdownT
  * caller's responsibility to sanitize the resulting HTML prior to inserting it
  * into the DOM. You must do this even if `escapeHtml` is set to true.
  *
+ * @deprecated Use the `Markdown` component to add markdown safely without
+ *   parsing raw HTML strings.
  * @param markdown The markdown text to convert.
  * @param options Options that affect how the text is converted.
  */

package/utils/markdown.js CHANGED Viewed

@@ -33,6 +33,8 @@ class CustomRenderer extends marked.Renderer {
  * Converts markdown text into HTML. The resulting HTML is sanitized and safe to
  * insert into the DOM.
  *
+ * @deprecated Use the `Markdown` component to add markdown safely without
+ *   parsing raw HTML strings.
  * @param markdown The markdown text to convert.
  * @param options Options that affect how the text is converted.
  */
@@ -46,6 +48,8 @@ export function markdownToSafeHtml(markdown, options) {
  * caller's responsibility to sanitize the resulting HTML prior to inserting it
  * into the DOM. You must do this even if `escapeHtml` is set to true.
  *
+ * @deprecated Use the `Markdown` component to add markdown safely without
+ *   parsing raw HTML strings.
  * @param markdown The markdown text to convert.
  * @param options Options that affect how the text is converted.
  */