@apify/ui-library 0.71.1-featcolortokens-178953.56 → 0.71.1-featcolortokens-178953.63

package/src/components/to_consolidate/markdown.tsx

@@ -1,609 +0,0 @@
-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';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import styled from 'styled-components';
-
-import { LinkIcon } from '@apify/ui-icons';
-
-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 { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer/utils.js';
-
-interface StyledReadmeProps {
-    $scrollMarginTopPx: number;
-}
-
-const markdownClassNames = {
-    COPY_BUTTON: 'Markdown-CopyButton',
-    CODE_PRE: 'Markdown-CodePre',
-    VIDEO_WRAPPER: 'Markdown-VideoWrapper',
-    IFRAME_CONTAINER: 'Iframe-container',
-    HEADING_COPY_ICON: 'ReadmeRenderer-headingCopyIcon',
-    INLINE_CODE: 'Markdown-InlineCode',
-} as const;
-
-const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
-    @font-face {
-        font-family: "ellipsis-font";
-        src: local("Courier");
-        unicode-range: U+2026;
-        size-adjust: 0%;
-    }
-
-    &>:first-child {
-        margin-top: 0;
-    }
-
-    h1, h2, h3, h4, h5 {
-        scroll-margin-top: ${({ $scrollMarginTopPx }) => `${$scrollMarginTopPx}px`};
-        margin-top: ${theme.space.space32};
-        margin-bottom: ${theme.space.space16};
-        align-items: center;
-
-        & > .${markdownClassNames.INLINE_CODE} {
-            font-size: inherit !important;
-            line-height: inherit !important;
-        }
-
-        /* Do no change the font style if the heading is defined as bold in the markdown and is wrapped in a <strong> tag */
-        strong {
-            font-size: inherit !important;
-            line-height: inherit !important;
-            font-weight: inherit !important;
-        }
-
-        a {
-            text-decoration: none !important;
-        }
-
-        .${markdownClassNames.HEADING_COPY_ICON} {
-            display: none;
-            transform: translateX(${theme.space.space4});
-            color: ${theme.color.neutral.textSubtle};
-
-            svg {
-                stroke: ${theme.color.primary.text};
-                max-height: 1em !important;
-            }
-        }
-
-        &:hover {
-            .${markdownClassNames.HEADING_COPY_ICON} {
-                display: inline-block;
-            }
-        }
-    }
-
-    p, li, strong, b, table {
-        ${theme.typography.content.mobile.paragraph}
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.paragraph}
-        }
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.paragraph}
-        }
-        a {
-            overflow-wrap: break-word;
-            text-decoration: none;
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    p {
-        margin: ${theme.space.space16} 0;
-    }
-
-    h1 {
-        ${theme.typography.content.mobile.heading1}
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.heading1}
-        }
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.heading1}
-        }
-    }
-
-    h2 {
-        ${theme.typography.content.mobile.heading2}
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.heading2}
-        }
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.heading2}
-        }
-    }
-
-    h3 {
-        ${theme.typography.content.mobile.heading3}
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.heading3}
-        }
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.heading3}
-        }
-    }
-
-    h4 {
-        ${theme.typography.content.mobile.heading4}
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.heading4}
-        }
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.heading4}
-        }
-    }
-
-    h5 {
-        ${theme.typography.content.mobile.heading5}
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.heading5}
-        }
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.heading5}
-        }
-    }
-
-    h6 {
-        ${theme.typography.content.mobile.heading6}
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.heading6}
-        }
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.heading6}
-        }
-    }
-
-    img {
-        max-width: 100%;
-    }
-
-    ul, ol {
-        padding-left: ${theme.space.space32};
-    }
-
-    li {
-        margin-top: ${theme.space.space4};
-    }
-
-    hr {
-        color: ${theme.color.neutral.border};
-    }
-
-    strong {
-        ${theme.typography.content.mobile.paragraphStrong}
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.paragraphStrong}
-        }
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.paragraphStrong}
-        }
-    }
-
-    blockquote {
-        border-left: 2px solid ${theme.color.neutral.separatorSubtle};
-        padding-left: ${theme.space.space16};
-
-        color: ${theme.color.neutral.textMuted};
-
-        p {
-            margin-bottom: 0;
-        }
-    }
-
-    table {
-        display: block;
-        overflow: auto;
-        border-collapse: collapse;
-
-        td, th {
-            border: 1px solid ${theme.color.neutral.border};
-            padding: ${theme.space.space16};
-            text-align: left;
-        }
-
-        tr:nth-child(even):not([class]) {
-            > th, > td {
-                background-color: inherit;
-            }
-        }
-    }
-
-    th {
-        ${theme.typography.content.mobile.paragraphStrong}
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.paragraphStrong}
-        }
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.paragraphStrong}
-        }
-    }
-
-    a:hover {
-        text-decoration: underline;
-    }
-
-    .${markdownClassNames.VIDEO_WRAPPER} {
-        width: 65%;
-        display: block;
-
-        .${markdownClassNames.IFRAME_CONTAINER} {
-            position: relative;
-            overflow: hidden;
-            width: 100%;
-            padding-top: 56.25%;
-            display: block;
-
-            iframe {
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                width: 100%;
-                height: 100%;
-                border: 0px;
-            }
-        }
-    }
-
-    .${markdownClassNames.INLINE_CODE} {
-        ${inlineCodeStyles}
-        ${theme.typography.content.mobile.snippet}
-        /* prevents long URLs from overflowing its container */
-        hyphens: auto;
-        overflow-wrap: break-word;
-
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.content.tablet.snippet}
-        }
-        
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.content.desktop.snippet}
-        }
-        
-        b, strong{
-            font-size: inherit !important;
-            line-height: inherit !important;
-            font-family: inherit !important;
-        }
-    }
-`;
-
-export interface HeadingRendererProps {
-    node: {
-        tagName: keyof JSX.IntrinsicElements;
-    };
-    children: React.ReactNode;
-}
-
-/**
- * Adds ids to headings
- */
-const DefaultHeadingRenderer = ({ node, children }: HeadingRendererProps) => {
-    const Tag = node.tagName;
-    const id = slugifyHeadingChildren(children);
-    return <Tag id={id}>{children}</Tag>;
-};
-
-interface CodeRendererComponentProps {
-    inline: boolean;
-    className: string;
-    children: React.ReactNode;
-}
-
-function CodeRenderer({
-    inline,
-    className,
-    children,
-}: CodeRendererComponentProps) {
-    if (inline) {
-        return <code className={clsx(className, markdownClassNames.INLINE_CODE)}>{children}</code>;
-    }
-
-    const code = String(children).replace(/\n$/, '').trim();
-    const match = /language-(\w+)/.exec(className || '');
-    const language = match?.[1]?.toLowerCase();
-    const isOneLineCode = code.split('\n').length <= 1;
-
-    if (isOneLineCode) {
-        return (
-            <OneLineCode
-                language={language}
-                fullWidth
-            >
-                {code}
-            </OneLineCode>
-        );
-    }
-
-    return (
-        <CodeBlock
-            content={code}
-            language={language}
-            hideLineNumbers
-            fullWidth
-            hideBashHeader
-            hideBashPromptPrefixes
-        />
-    );
-}
-
-const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtube(?:-nocookie)?\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([a-zA-Z0-9\-_]+)(?:\S*)?$/;
-const vimeoRegex = /^((?:https?:\/\/)?(?:player\.)?vimeo\.com(?:\/video)?\/(\d+))$/;
-
-const getVideoSrc = (link: string) => {
-    const youtubeLink = link.match(youtubeRegex);
-    const vimeoLink = link.match(vimeoRegex);
-    let src;
-    if (youtubeLink) {
-        // add rel=0 to disable related videos from other channels at the end of the video
-        // add enablejsapi=1 to enable tracking videos via API through Google Analytics
-        src = qs.stringifyUrl({ url: `https://www.youtube.com/embed/${youtubeLink[1]}`, query: { rel: 0, enablejsapi: 1 } });
-    }
-    if (vimeoLink) src = `https://player.vimeo.com/video/${vimeoLink[2]}`;
-
-    return src;
-};
-
-interface VideoProps {
-    src: string;
-}
-const Video = ({ src }: VideoProps) => {
-    return (
-        <span className={markdownClassNames.VIDEO_WRAPPER}>
-            <span className="Iframe-container">
-                <iframe loading="lazy" allowFullScreen src={src} />
-            </span>
-        </span>
-    );
-};
-
-export const APIFY_HOSTNAMES = [
-    'apify.com',
-    'docs.apify.com',
-    'help.apify.com',
-    'sdk.apify.com',
-    'blog.apify.com',
-    'kb.apify.com', // old knowledge base domain (redirects to help.apify.com)
-    'my.apify.com', // old console.domain (redirects to console.apify.com)
-    'console.apify.com',
-    'crawlee.dev',
-];
-
-interface LinkRendererProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    node: {
-        properties: {
-            enableEmbeddedVideo: boolean;
-        };
-    };
-    href: string;
-}
-
-interface LinkRendererOptions {
-    hostname?: string,
-    Link?: React.ElementType;
-}
-
-// We want no-follow for external links
-// Also if link is a video from youtube or vimeo, we want to render it as iframe
-// Allowing to pass hostname to check if the link is an Apify link to the same hostname (is needed for SSR on the web)
-const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { hostname, Link }: LinkRendererOptions, isUserGeneratedContent?: boolean) => {
-    const videoSrc = node.properties.enableEmbeddedVideo && getVideoSrc(href);
-    if (videoSrc) return <Video src={videoSrc} />;
-
-    // check for anchor links, hash link are not parsable by URL constructor
-    const isHashLink = (href || '').startsWith('#');
-    if (isHashLink) return <a href={href} {...props} />;
-
-    let urlParsed: URL | undefined;
-    try { // TODO: replace with URL.canParse() when we have node 19+ 🥲
-        urlParsed = new URL(href);
-    } catch {
-        // Probably invalid url, go on as it doesn't make sense to track this error
-        // This component is used on all Actor pages - readmes.
-        // So it is mainly for the user-generated content - there can be many invalid links and we won't do anything about it anyway.
-        return <span>{href}</span>;
-    }
-
-    if (!hostname && (typeof window !== 'undefined' && !window?.location?.hostname)) return <a href={href} {...props} />;
-
-    const currentHostname = hostname || (typeof window !== 'undefined' && window?.location?.hostname.toLowerCase());
-    const hasDifferentHostname = urlParsed && (urlParsed.hostname.toLowerCase() !== currentHostname);
-    const isApifyLink = urlParsed
-        && 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.
-
-    // Same host name, use the provided link for internal navigation
-    if (!hasDifferentHostname && Link) {
-        return <Link to={urlParsed} {...props} />;
-    }
-
-    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 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 nofollow', isUserGeneratedContent && 'ugc') };
-        }
-    }
-
-    return <a href={href} {...props} {...linkProps} />;
-};
-
-// node is just to omit from exported props
-interface ParagraphRendererProps extends React.HTMLAttributes<HTMLParagraphElement> {
-    node?: {
-        children: {
-            tagName: keyof JSX.IntrinsicElements;
-            type: string;
-            value: string;
-            properties: {
-                enableEmbeddedVideo: boolean;
-            };
-        }[];
-    };
-}
-
-// If the paragraph is just a link to youtube or vimeo, we want to render it as iframe
-const ParagraphRenderer = ({ node, ...props }: ParagraphRendererProps) => {
-    // We enable embedded video only is surrounded by new lines (will be rendered as only child in paragraph)
-    node?.children.forEach((child) => {
-        // eslint-disable-next-line no-param-reassign
-        if (child.tagName === 'a') child.properties.enableEmbeddedVideo = node.children.length === 1; // This means the link is the only child
-    });
-    const child = node?.children[0];
-    const isText = child?.type === 'text';
-
-    const videoSrc = isText && getVideoSrc(child.value);
-    if (videoSrc) return <Video src={videoSrc} />;
-
-    return <p {...props} />;
-};
-
-const HeadingRendererWithAnchor = ({ node, children }: HeadingRendererProps) => {
-    const Tag = node.tagName;
-    const id = slugifyHeadingChildren(children);
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [_isCopied, handleClick] = useCopyToClipboard({
-        text: id ?? '',
-        // We want the whole URL to be copied, not just the ID
-        transform: (text) => {
-            const url = new URL(window.location.href);
-            url.hash = `#${text}`;
-            return url.toString();
-        },
-    });
-
-    return (
-        <Tag id={id}>
-            {children}
-            <a
-                onClick={handleClick}
-                href={`#${id}`}
-                className={`${markdownClassNames.HEADING_COPY_ICON}`}
-            >
-                <LinkIcon size="16" />
-            </a>
-        </Tag>
-    );
-};
-
-export interface MarkdownProps {
-    markdown: string;
-    transformLinkUri?: (href: string) => string;
-    transformImageUri?: (src: string) => string;
-    className?: string;
-    theme?: UiThemeOption;
-    scrollMarginTopPx?: number; // Offset from top of page to account for sticky header
-    // Function where we can define which elements are allowed in the markdown. See    // Function where we can define which elements are allowed in the markdown. See https://github.com/remarkjs/react-markdown#props for more info
-    allowElement?: AllowElement
-    isUserGeneratedContent?: boolean;
-    currentPathHostname?: string;
-    addHeadingAnchors?: boolean;
-    Link?: React.ElementType;
-    LinkRenderer?: (props: LinkRendererProps, options: LinkRendererOptions, isUserGeneratedContent?: boolean) => React.ReactElement;
-    lazyLoadImages?: boolean;
-}
-
-const Markdown = ({
-    markdown,
-    transformLinkUri,
-    transformImageUri,
-    className,
-    scrollMarginTopPx = 10,
-    allowElement,
-    currentPathHostname,
-    addHeadingAnchors,
-    isUserGeneratedContent,
-    Link,
-    LinkRenderer,
-    lazyLoadImages,
-}: MarkdownProps) => {
-    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, Link }, isUserGeneratedContent)
-                        : DefaultLinkRenderer(linkProps, { hostname: currentPathHostname, Link }, 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>
-    );
-};
-
-const MemoizedMarkdown = React.memo(Markdown, (prevProps, nextProps) => _.isEqual(prevProps, nextProps));
-export { MemoizedMarkdown as Markdown };