@apify/ui-library 1.106.2-featurereact19upgrade-8b5553.51 → 1.106.2

package/src/components/to_consolidate/markdown.tsx

@@ -1,9 +1,10 @@
 import clsx from 'clsx';
 import _ from 'lodash';
 import qs from 'query-string';
-import React, { type ElementType, useMemo } from 'react';
-import type { AllowElement, Components, ExtraProps as MarkdownComponentExtraProps } from 'react-markdown';
-import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
+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 rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import styled from 'styled-components';
@@ -14,13 +15,11 @@ 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 = {
@@ -32,7 +31,7 @@ const markdownClassNames = {
     INLINE_CODE: 'Markdown-InlineCode',
 } as const;
 
-const StyledMarkdownWrapper = styled(Box)<StyledReadmeProps>`
+const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
     @font-face {
         font-family: "ellipsis-font";
         src: local("Courier");
@@ -314,7 +313,7 @@ const StyledMarkdownWrapper = styled(Box)<StyledReadmeProps>`
 
 export interface HeadingRendererProps {
     node: {
-        tagName: keyof React.ElementType;
+        tagName: keyof JSX.IntrinsicElements;
     };
     children: React.ReactNode;
 }
@@ -323,24 +322,23 @@ export interface HeadingRendererProps {
  * Adds ids to headings
  */
 const DefaultHeadingRenderer = ({ node, children }: HeadingRendererProps) => {
-    const Tag = node.tagName as ElementType;
+    const Tag = node.tagName;
     const id = slugifyHeadingChildren(children);
     return <Tag id={id}>{children}</Tag>;
 };
 
-type CodeRendererComponentProps = {
-    className?: string,
-    children: React.ReactNode,
-} & MarkdownComponentExtraProps;
+interface CodeRendererComponentProps {
+    inline: boolean;
+    className: string;
+    children: React.ReactNode;
+}
 
 function CodeRenderer({
+    inline,
     className,
     children,
-    node,
 }: CodeRendererComponentProps) {
-    const isInline = node?.position?.start?.line === node?.position?.end?.line;
-
-    if (isInline) {
+    if (inline) {
         return <code className={clsx(className, markdownClassNames.INLINE_CODE)}>{children}</code>;
     }
 
@@ -480,7 +478,7 @@ const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { host
 interface ParagraphRendererProps extends React.HTMLAttributes<HTMLParagraphElement> {
     node?: {
         children: {
-            tagName: keyof React.ElementType;
+            tagName: keyof JSX.IntrinsicElements;
             type: string;
             value: string;
             properties: {
@@ -507,7 +505,7 @@ const ParagraphRenderer = ({ node, ...props }: ParagraphRendererProps) => {
 };
 
 const HeadingRendererWithAnchor = ({ node, children }: HeadingRendererProps) => {
-    const Tag = node.tagName as ElementType;
+    const Tag = node.tagName;
     const id = slugifyHeadingChildren(children);
 
     const { isCopied, copyToClipboard } = useCopyToClipboard();
@@ -565,79 +563,67 @@ const Markdown = ({
     const headingRenderer = addHeadingAnchors ? HeadingRendererWithAnchor : DefaultHeadingRenderer;
     const cleanedMarkdown = useMemo(() => cleanMarkdown(markdown), [markdown]);
     return (
-        <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>
+        <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>
     );
 };
 

package/src/utils/index.ts

@@ -3,4 +3,3 @@ 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/dist/src/utils/type_utils.d.ts

@@ -1,3 +0,0 @@
-import type { css } from 'styled-components';
-export type FlattenSimpleInterpolation = ReturnType<typeof css>;
-//# sourceMappingURL=type_utils.d.ts.map

package/dist/src/utils/type_utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type_utils.d.ts","sourceRoot":"","sources":["../../../src/utils/type_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,MAAM,0BAA0B,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC"}

package/dist/src/utils/type_utils.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=type_utils.js.map

package/dist/src/utils/type_utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"type_utils.js","sourceRoot":"","sources":["../../../src/utils/type_utils.ts"],"names":[],"mappings":""}

package/src/utils/type_utils.ts

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