@apify/ui-library 0.58.0 → 0.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.58.0",
+    "version": "0.59.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -41,7 +41,9 @@
         "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^3.0.1",
         "remark-toc": "8.0.1",
-        "slugify": "^1.6.6"
+        "slugify": "^1.6.6",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^5.0.0"
     },
     "peerDependencies": {
         "react": "17.x || 18.x",
@@ -65,5 +67,5 @@
         "recast": "^0.23.9",
         "typescript": "^5.1.6"
     },
-    "gitHead": "256677147856d54ab9872ac71372f6c0601d5d48"
+    "gitHead": "aff5f2f1a3db4fa021ade9588f4d923e59527e8b"
 }

package/src/components/simple_markdown/simple_markdown.tsx

@@ -1,3 +1,4 @@
+import type { Root, Element, Text as TextNode } from 'hast';
 import React, { useCallback, useMemo, useRef } from 'react';
 import type { Components } from 'react-markdown';
 import ReactMarkdown, { uriTransformer } from 'react-markdown';
@@ -6,6 +7,8 @@ import rehypeRaw from 'rehype-raw';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
 import styled from 'styled-components';
+import type { Pluggable, PluggableList } from 'unified';
+import { visit } from 'unist-util-visit';
 
 import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
@@ -43,8 +46,33 @@ const StyledMarkdown = styled(ReactMarkdown)`
     }
 `;
 
-export const defaultRehypePlugins = [rehypeRaw];
-export const defaultRemarkPlugins = [remarkGfm];
+// Function to recursively process unsupported elements
+const unwrapUnsupportedElement = (node: Element): (Element | TextNode)[] => {
+    return node.children.flatMap((child) => {
+        if (child.type === 'text') {
+            return child; // Keep text as is
+        }
+        if (child.type === 'element') {
+            if (defaultAllowedElements.includes(child.tagName)) {
+                return child; // Keep supported elements
+            }
+            return unwrapUnsupportedElement(child as Element);
+        }
+        return []; // Ignore other node types
+    });
+};
+
+const getUnsupportedRehypeTagsSanitationPlugIn = (
+    allowedElements: string[],
+): Pluggable<any[]> => () => (tree: Root) => {
+    visit(tree, 'element', (node, index, parent) => {
+        if (!allowedElements.includes(node.tagName) && parent && typeof index === 'number') {
+            // Replace unsupported element with its valid children
+            parent.children.splice(index, 1, ...unwrapUnsupportedElement(node));
+        }
+    });
+};
+
 export const defaultAllowedElements = [
     'a',
     'b',
@@ -79,6 +107,9 @@ export const defaultAllowedElements = [
     'ul',
 ];
 
+export const defaultRehypePlugins = [rehypeRaw];
+export const defaultRemarkPlugins = [remarkGfm];
+
 // TODO: Add Image component
 const regularMarkdownSizeComponents: Components = {
     h1: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading1'>{children}</HeadingContent>,
@@ -151,13 +182,15 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
 }) => {
     const cleanedMarkdown = useMemo(() => cleanMarkdown(markdown), [markdown]);
 
+    const effectiveAllowedElements = useRef(allowedElements || defaultAllowedElements);
+
     const effectiveComponents = useRef({
         ...(size === 'regular' ? regularMarkdownSizeComponents : smallMarkdownSizeComponents),
         ...components,
     });
 
-    const rehypePluginsRef = useRef([
-        ...(rehypePlugins || defaultRehypePlugins),
+    const rehypePluginsRef = useRef<PluggableList>([
+        ...(rehypePlugins || [...defaultRehypePlugins, getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current)]),
         rehypeSanitize, // lets always sanitize the output
     ]);
 
@@ -168,7 +201,7 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
             components={effectiveComponents.current}
             rehypePlugins={rehypePluginsRef.current}
             remarkPlugins={remarkPlugins || defaultRemarkPlugins}
-            allowedElements={allowedElements || defaultAllowedElements}
+            allowedElements={effectiveAllowedElements.current}
             transformLinkUri={(href, children, title) => {
                 const transformed = transformLinkUri ? transformLinkUri(href, children, title) : defaultUrlTransform(href);
                 return uriTransformer(transformed);