@apify/ui-library 0.58.0 → 0.59.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.58.0",
+    "version": "0.59.1",
     "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": "16fdc799cf1670638596509d7af5e0a5421a598c"
 }

package/src/components/link.tsx

@@ -92,8 +92,8 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
     const effectiveRel = clsx(
         rel,
         isExternal && 'external',
-        (isExternal || target === '_blank') && 'noopener noreferrer',
-        (isExternal && !isTrusted) && 'nofollow',
+        (isExternal || target === '_blank') && 'noopener',
+        (isExternal && !isTrusted) && 'nofollow noreferrer',
     );
 
     return (

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);

package/src/components/to_consolidate/markdown.tsx

@@ -417,21 +417,28 @@ const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { host
         && APIFY_HOSTNAMES.includes(urlParsed.hostname.toLowerCase())
         && urlParsed.protocol === 'https:'; // we want to disqualify links that have http: protocol. It's a mistake on users' side that we are penalized for.
 
-    let linkProps = {};
-    // If the link is an Apify link to the same hostname, we want to open in the same tab otherwise we want to open in a new tab
-    // If an external non-Apify link, we want to always open it in a new tab and add rel="noopener noreferrer nofollow"
-    // (and ugc if the link comes from the user-generated content)
-    if (isApifyLink && hasDifferentHostname) {
-        linkProps = { target: '_blank', rel: 'noopener noreferrer' };
-    } else if (!hasDifferentHostname && Link) { // Same host name, use the provided link for internal navigation
+    // Same host name, use the provided link for internal navigation
+    if (!hasDifferentHostname && Link) {
         return <Link to={urlParsed} {...props} />;
-    } else {
-        // USG - User Generated Content (new rel attribute for nofollow links)
-        // Google says:
-        // It’s valid to use nofollow with the new attributes — such as rel=”nofollow ugc”
-        // — if you wish to be backwards-compatible with services that don’t support the new attributes.
-        linkProps = { target: '_blank', rel: clsx('noopener noreferrer nofollow', isUserGeneratedContent && 'ugc') };
     }
+
+    let linkProps = {};
+
+    // If false, we want to open the link in the same tab (linkProps won't have any props)
+    if (hasDifferentHostname) {
+        // If the link is an Apify link to the different hostname, we want to open in a new tab
+        if (isApifyLink) {
+            linkProps = { target: '_blank', rel: 'noopener' };
+        } else {
+            // If an external non-Apify link, we want to always open it in a new tab and add rel="noopener noreferrer nofollow"
+            // USG - User Generated Content (new rel attribute for nofollow links)
+            // Google says:
+            // It’s valid to use nofollow with the new attributes — such as rel=”nofollow ugc”
+            // — if you wish to be backwards-compatible with services that don’t support the new attributes.
+            linkProps = { target: '_blank', rel: clsx('noopener noreferrer', 'nofollow', isUserGeneratedContent && 'ugc') };
+        }
+    }
+
     return <a href={href} {...props} {...linkProps} />;
 };