@apify/ui-library 0.65.3-featuresyntaxhighlighter-48cb44.38 → 0.65.3

package/src/components/code/code_block/utils.tsx

@@ -1,50 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { theme } from '../../../design_system/theme.js';
-import { CodeHighlighterLinePrefix } from '../prism_highlighter.js';
-
-// input: [2, 4, 5, 6, 8, 10, 11, 12]
-// returns string indicating what type of line it is (bashStartCommand, bashCommand, bashEmptyLine)
-// commands start -> bashStartCommand
-// every next line after command start until next command start or empty line -> bashCommand
-export const getBashLinePrefixes = (code: string, bashCommandsStart: number[] = []) => {
-    const lines = code.split('\n').map((line) => line.trim());
-
-    const bashLinePrefixesArray = lines.map((line, i) => {
-        const isEmptyLine = line.startsWith('#') || !line;
-
-        // by default each line that is not empty or comment is a command start
-        if (bashCommandsStart.length === 0) {
-            return isEmptyLine ? (
-                <CodeHighlighterLinePrefix />
-            ) : (
-                <CodeHighlighterLinePrefix color={theme.color.lavender.base}>$</CodeHighlighterLinePrefix>
-            );
-        }
-
-        if (bashCommandsStart.includes(i + 1)) {
-            return (
-                <CodeHighlighterLinePrefix color={theme.color.lavender.base}>$</CodeHighlighterLinePrefix>
-            );
-        }
-
-        if (isEmptyLine) {
-            return (
-                <CodeHighlighterLinePrefix />
-            );
-        }
-
-        return (
-            <CodeHighlighterLinePrefix color={theme.color.lavender.base}>&lt;</CodeHighlighterLinePrefix>
-        );
-    });
-
-    return Object.fromEntries(bashLinePrefixesArray.map((linePrefix, i) => [i + 1, linePrefix]));
-};
-
-export const getNumberLinePrefixes = (code: string): Record<number, ReactNode> => {
-    const numberOfLines = code.split('\n').length;
-    const numbersArray = Array.from({ length: numberOfLines }, (_, i) => i + 1);
-
-    return Object.fromEntries(numbersArray.map((number) => [number, <CodeHighlighterLinePrefix>{number}</CodeHighlighterLinePrefix>]));
-};

package/src/components/code/prism_highlighter.tsx

@@ -1,178 +0,0 @@
-import clsx from 'clsx';
-import _ from 'lodash';
-import type { HighlightProps } from 'prism-react-renderer';
-import { Highlight, Prism, themes } from 'prism-react-renderer';
-import type { ReactNode } from 'react';
-import { forwardRef, useRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { Text } from '../text/index.js';
-import type { SharedTextSize } from '../text/text_shared.js';
-
-(typeof global !== 'undefined' ? global : window).Prism = Prism;
-
-const HIGHLIGHT_BACKGROUND_COLOR = 'rgba(22, 114, 235, 0.05)';
-
-const loadLanguages = async () => {
-    await Promise.all([
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-bash.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-rust.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-bash.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-docker.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-http.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-javascript.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-json.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-markup.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-python.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-typescript.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-xml-doc.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-yaml.js'),
-    ]);
-};
-
-void loadLanguages();
-
-type StyledPreProps = {
-    $hasLinePrefixes: boolean,
-    $isSingleLine: boolean
-};
-
-const StyledPre = styled.pre<StyledPreProps>`
-    width: 100%;
-    position: relative;
-    overflow: auto;
-    z-index: 2;
-    padding: ${({ $isSingleLine }) => ($isSingleLine ? 0 : `${theme.space.space16} 0`)};
-    margin: 0;
-
-    code {
-        min-width: 100%;
-        display: inline-block;
-        vertical-align: middle;
-
-        *,
-        *::before,
-        *::after {
-            text-shadow: none !important;
-            font-style: normal !important;
-            font-family: inherit !important;
-            font-size: inherit !important;
-            font-weight: inherit !important;
-            line-height: inherit !important;
-            background-color: transparent !important;
-        }
-
-        & > div {
-            display: block;
-
-            &.highlighted {
-                background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                border-left: 6px solid ${theme.color.neutral.border} !important;
-                padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
-            }
-
-            ${({ $isSingleLine }) => !$isSingleLine && css<{$hasLinePrefixes: boolean}>`
-                &:hover {
-                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                    border-left: 6px solid ${theme.color.neutral.border} !important;
-                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
-                }
-            `}
-
-            ${({ $isSingleLine }) => ($isSingleLine ? css<StyledPreProps>`
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-                vertical-align: text-top;
-            ` : css<StyledPreProps>`
-                padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? theme.space.space8 : theme.space.space16)};
-                padding-right: ${theme.space.space16};
-
-                &:hover {
-                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                    border-left: 6px solid ${theme.color.neutral.border} !important;
-                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
-                }
-            `)}
-        }
-    }
-`;
-
-export const CodeHighlighterLinePrefix = styled(Text).attrs({ as: 'span' })`
-    display: inline-block;
-    margin-right: ${theme.space.space16};
-    text-align: right;
-    min-width: ${theme.space.space24};
-    color: ${({ color }) => color || theme.color.neutral.textSubtle};
-    user-select: none;
-    -webkit-user-select: none;
-`;
-
-type SyntaxHighlighterProps = Omit<HighlightProps, 'children' | 'language'> & {
-    size?: SharedTextSize,
-    linePrefixes?: Record<string, ReactNode>,
-    highlightLines?: number[],
-    language?: string,
-    className?: string,
-    isSingleLine: boolean,
-};
-
-export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterProps>(({
-    size = 'regular',
-    linePrefixes = {},
-    highlightLines = [],
-    language = 'javascript',
-    className,
-    isSingleLine,
-    ...rest
-}, ref) => {
-    const { uiTheme } = useSharedUiDependencies();
-    const hasLinePrefixes = !_.isEmpty(linePrefixes);
-    const highlightedLinesObject = useRef<Record<number, boolean>>(Object.fromEntries(highlightLines.map((e) => [e, true])));
-
-    return (
-        <Highlight
-            theme={uiTheme === 'DARK' ? themes.nightOwl : themes.oneLight}
-            language={language}
-            {...rest}
-        >
-            {({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (
-                <StyledPre
-                    className={clsx(className, prismClassName)}
-                    $hasLinePrefixes={hasLinePrefixes}
-                    $isSingleLine={isSingleLine}
-                    ref={ref}
-                >
-                    <Text
-                        size={size}
-                        type='code'
-                        as='code'
-                    >
-                        {tokens.map((line, i) => (
-                            <div key={i} {...getLineProps({ line, className: highlightedLinesObject.current[i + 1] ? 'highlighted' : '' })}>
-                                {hasLinePrefixes && (linePrefixes[i + 1] || <CodeHighlighterLinePrefix />)}
-                                {line.map((token, key) => (
-                                    <span key={key} {...getTokenProps({ token })} />
-                                ))}
-                            </div>
-                        ))}
-                    </Text>
-                </StyledPre>
-            )}
-        </Highlight>
-    );
-});