@apify/ui-library 1.109.2 → 1.109.3-featurereact19upgrade-8b5553.119

package/src/components/to_consolidate/markdown.tsx

@@ -1,10 +1,9 @@
 import clsx from 'clsx';
 import _ from 'lodash';
 import qs from 'query-string';
-import React, { useMemo } from 'react';
-import type { Components } from 'react-markdown';
-import ReactMarkdown, { uriTransformer } from 'react-markdown';
-import type { AllowElement, Node } from 'react-markdown/lib/rehype-filter.js';
+import React, { type ElementType, useMemo } from 'react';
+import type { AllowElement, Components, ExtraProps as MarkdownComponentExtraProps } from 'react-markdown';
+import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import styled from 'styled-components';
@@ -15,11 +14,13 @@ import type { UiThemeOption } from '../../design_system/theme.js';
 import { theme } from '../../design_system/theme.js';
 import { useCopyToClipboard } from '../../utils/index.js';
 import { CodeBlock, inlineCodeStyles, OneLineCode } from '../code/index.js';
+import { Box } from '../index.js';
 import { Link as SharedLink, type LinkProps } from '../link.js';
 import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer/utils.js';
 
 interface StyledReadmeProps {
     $scrollMarginTopPx: number;
+    className?: string;
 }
 
 const markdownClassNames = {
@@ -31,7 +32,7 @@ const markdownClassNames = {
     INLINE_CODE: 'Markdown-InlineCode',
 } as const;
 
-const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
+const StyledMarkdownWrapper = styled(Box)<StyledReadmeProps>`
     @font-face {
         font-family: "ellipsis-font";
         src: local("Courier");
@@ -313,7 +314,7 @@ const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
 
 export interface HeadingRendererProps {
     node: {
-        tagName: keyof JSX.IntrinsicElements;
+        tagName: keyof React.ElementType;
     };
     children: React.ReactNode;
 }
@@ -322,23 +323,24 @@ export interface HeadingRendererProps {
  * Adds ids to headings
  */
 const DefaultHeadingRenderer = ({ node, children }: HeadingRendererProps) => {
-    const Tag = node.tagName;
+    const Tag = node.tagName as ElementType;
     const id = slugifyHeadingChildren(children);
     return <Tag id={id}>{children}</Tag>;
 };
 
-interface CodeRendererComponentProps {
-    inline: boolean;
-    className: string;
-    children: React.ReactNode;
-}
+type CodeRendererComponentProps = {
+    className?: string,
+    children: React.ReactNode,
+} & MarkdownComponentExtraProps;
 
 function CodeRenderer({
-    inline,
     className,
     children,
+    node,
 }: CodeRendererComponentProps) {
-    if (inline) {
+    const isInline = node?.position?.start?.line === node?.position?.end?.line;
+
+    if (isInline) {
         return <code className={clsx(className, markdownClassNames.INLINE_CODE)}>{children}</code>;
     }
 
@@ -478,7 +480,7 @@ const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { host
 interface ParagraphRendererProps extends React.HTMLAttributes<HTMLParagraphElement> {
     node?: {
         children: {
-            tagName: keyof JSX.IntrinsicElements;
+            tagName: keyof React.ElementType;
             type: string;
             value: string;
             properties: {
@@ -505,7 +507,7 @@ const ParagraphRenderer = ({ node, ...props }: ParagraphRendererProps) => {
 };
 
 const HeadingRendererWithAnchor = ({ node, children }: HeadingRendererProps) => {
-    const Tag = node.tagName;
+    const Tag = node.tagName as ElementType;
     const id = slugifyHeadingChildren(children);
 
     const { isCopied, copyToClipboard } = useCopyToClipboard();
@@ -563,67 +565,79 @@ const Markdown = ({
     const headingRenderer = addHeadingAnchors ? HeadingRendererWithAnchor : DefaultHeadingRenderer;
     const cleanedMarkdown = useMemo(() => cleanMarkdown(markdown), [markdown]);
     return (
-        <StyledMarkdown
-            $scrollMarginTopPx={scrollMarginTopPx}
-            className={className}
-            rehypePlugins={[rehypeRaw]}
-            remarkPlugins={[remarkGfm]}
-            allowedElements={[
-                'a',
-                'b',
-                'blockquote',
-                'br',
-                'center',
-                'code',
-                'del',
-                'em',
-                'h1',
-                'h2',
-                'h3',
-                'h4',
-                'h5',
-                'hr',
-                'i',
-                'img',
-                'li',
-                'ol',
-                'p',
-                'pre',
-                'span',
-                'strong',
-                'table',
-                'tbody',
-                'td',
-                'tfoot',
-                'th',
-                'thead',
-                'tr',
-                'u',
-                'ul',
-            ]}
-            allowElement={allowElement}
-            components={{
-                h1: headingRenderer,
-                h2: headingRenderer,
-                h3: headingRenderer,
-                h4: headingRenderer,
-                h5: headingRenderer,
-                a: (linkProps: LinkRendererProps) => (
-                    LinkRenderer
-                        ? LinkRenderer(linkProps, { hostname: currentPathHostname }, isUserGeneratedContent)
-                        : DefaultLinkRenderer(linkProps, { hostname: currentPathHostname }, isUserGeneratedContent)
-                ),
-                code: (codeProps: CodeRendererComponentProps) => CodeRenderer(codeProps),
-                p: ParagraphRenderer,
-                img: ({ node, ...imageProps }: React.ImgHTMLAttributes<HTMLImageElement> & { node?: Node }) => (
-                    <img {...imageProps} {...(lazyLoadImages ? { loading: 'lazy' } : {})} /> // node is injected by rehype-raw plugin and causing invalid prop
-                ),
-            } as unknown as Components}
-            transformLinkUri={(href) => (transformLinkUri ? uriTransformer(transformLinkUri(href)) : uriTransformer(href))}
-            transformImageUri={transformImageUri}
-        >
-            {cleanedMarkdown}
-        </StyledMarkdown>
+        <StyledMarkdownWrapper $scrollMarginTopPx={scrollMarginTopPx} className={className}>
+            <ReactMarkdown
+                rehypePlugins={[rehypeRaw]}
+                remarkPlugins={[remarkGfm]}
+                allowedElements={[
+                    'a',
+                    'b',
+                    'blockquote',
+                    'br',
+                    'center',
+                    'code',
+                    'del',
+                    'em',
+                    'h1',
+                    'h2',
+                    'h3',
+                    'h4',
+                    'h5',
+                    'hr',
+                    'i',
+                    'img',
+                    'li',
+                    'ol',
+                    'p',
+                    'pre',
+                    'span',
+                    'strong',
+                    'table',
+                    'tbody',
+                    'td',
+                    'tfoot',
+                    'th',
+                    'thead',
+                    'tr',
+                    'u',
+                    'ul',
+                ]}
+                allowElement={allowElement}
+                components={{
+                    h1: headingRenderer,
+                    h2: headingRenderer,
+                    h3: headingRenderer,
+                    h4: headingRenderer,
+                    h5: headingRenderer,
+                    a: (linkProps: LinkRendererProps) => (
+                        LinkRenderer
+                            ? LinkRenderer(linkProps, { hostname: currentPathHostname }, isUserGeneratedContent)
+                            : DefaultLinkRenderer(linkProps, { hostname: currentPathHostname }, isUserGeneratedContent)
+                    ),
+                    code: (codeProps: CodeRendererComponentProps) => CodeRenderer(codeProps),
+                    p: ParagraphRenderer,
+                    img: ({ node, ...imageProps }: React.ImgHTMLAttributes<HTMLImageElement> & { node?: Node }) => (
+                        <img
+                            {...imageProps}
+                            {...(lazyLoadImages ? { loading: 'lazy' } : {})}
+                        /> // node is injected by rehype-raw plugin and causing invalid prop
+                    ),
+                } as unknown as Components}
+                urlTransform={(href, _children, node) => {
+                    if (node.tagName === 'img') {
+                        return transformImageUri ? transformImageUri(href) : href;
+                    }
+
+                    if (node.tagName === 'a') {
+                        return transformLinkUri ? defaultUrlTransform(transformLinkUri(href)) : defaultUrlTransform(href);
+                    }
+
+                    return href;
+                }}
+            >
+                {cleanedMarkdown}
+            </ReactMarkdown>
+        </StyledMarkdownWrapper>
     );
 };
 

package/src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './sanitization.js';
 export * from './image_color.js';
 export * from './resize_observer.js';
 export * from './css_utils.js';
+export * from './type_utils.js';

package/src/utils/type_utils.ts

@@ -0,0 +1,3 @@
+import type { css } from 'styled-components';
+
+export type FlattenSimpleInterpolation = ReturnType<typeof css>;