@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/src/components/to_consolidate/markdown.tsx

@@ -0,0 +1,593 @@
+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 } from 'react-markdown/lib/rehype-filter';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import styled from 'styled-components';
+
+import { Link16 } from '@apify/icons';
+
+import type { UiThemeOption } from '../../design_system/theme';
+import { theme } from '../../design_system/theme';
+import { useCopyToClipboard } from '../../utils';
+import { CodeBlock, OneLineCode, inlineCodeStyles } from '../code';
+import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer/utils';
+
+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}
+        @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.
+
+    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
+        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') };
+    }
+    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) => {
+        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}`}
+            >
+                <Link16 viewBox="0 0 16 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: (imageProps: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...imageProps} {...(lazyLoadImages ? { loading: 'lazy' } : {})} />,
+            } 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 };