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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.65.3-featuresyntaxhighlighter-48cb44.36+8cc051d6e85",
+    "version": "0.65.3",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,17 +26,16 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^0.9.0",
+        "@apify/ui-icons": "^0.10.0",
         "@floating-ui/react": "^0.26.2",
         "clsx": "^2.0.0",
         "dayjs": "1.11.9",
         "fast-average-color": "^9.4.0",
         "history": "^5.3.0",
         "lodash": "^4.17.21",
-        "prism-react-renderer": "^2.4.1",
-        "prismjs": "^1.30.0",
         "query-string": "^8.1.0",
         "react-markdown": "^8.0.5",
+        "react-syntax-highlighter": "^15.5.0",
         "rehype-raw": "^6.1.1",
         "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^3.0.1",
@@ -55,6 +54,7 @@
         "@types/lodash": "^4.14.200",
         "@types/node": "^22.10.5",
         "@types/react": "^18.2.74",
+        "@types/react-syntax-highlighter": "^15.5.9",
         "@types/styled-components": "^5.1.34",
         "eslint": "^9.22.0",
         "eslint-plugin-import": "2.26.0",
@@ -65,5 +65,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "8cc051d6e85edbd8cd3c994fd90725e5b4f5cf8e"
+    "gitHead": "d28107308e89cc139489334a352f51de1ce3ff8f"
 }

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

@@ -1,28 +1,10 @@
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../../design_system/theme.js';
-import { Box } from '../../box.js';
-import type { SharedTextProps, SharedTextSize } from '../../text/text_shared.js';
+import type { SharedTextSize } from '../../text/text_shared.js';
+import { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
 
-export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
-    $fullWidth?: boolean;
-    $fullHeight?: string;
-    $showLineNumbers?: boolean;
-}
-
-export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`
-    background-color: ${theme.color.neutral.backgroundMuted} !important;
-    border: 1px solid ${theme.color.neutral.border};
-    border-radius: ${theme.radius.radius12};
-    overflow: hidden;
-
-    width: 100%;
-    ${({ $fullWidth }) => !$fullWidth && css`max-width: 860px;`}
-    ${({ $fullHeight }) => !$fullHeight && css`max-height: 600px;`}
-
-    background-color: transparent;
-    position: relative;
-`;
+const HIGHLIGHT_BACKGROUND_COLOR = 'rgba(22, 114, 235, 0.05)';
 
 export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
     $hasHeader: boolean;
@@ -123,6 +105,72 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
         }
     }
 
+    .CodePre {
+        z-index: 2;
+        padding: ${theme.space.space16} 0 !important;
+
+        code {
+            & > span {
+                display: block;
+                padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? 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: ${({ $showLineNumbers }) => ($showLineNumbers ? '0.2' : '1')}rem;
+                }
+            }
+
+            // Common styles
+            [data*='bash']{
+                &::before {
+                    color: ${theme.color.lavender.base};
+                    padding-right: ${theme.space.space16};
+                    min-width: ${theme.space.space24};
+                    user-select: none;
+                    -webkit-user-select: none;
+                    font-size: 1em;
+                }
+            }
+
+            [data*='bashStartCommand'] {
+                &::before {
+                    content: '$';
+                }
+            }
+
+            [data*='bashCommand'] {
+                &::before {
+                    content: '>';
+                }
+            }
+
+            [data*='bashEmptyLine'] {
+                &::before {
+                    content: ' ';
+                }
+            }
+
+            [data*='highlighted'] {
+                background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                border-left: 6px solid ${theme.color.neutral.border} !important;
+                padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? '0.2' : '1')}rem;
+            }
+
+
+            .linenumber {
+                color: ${theme.color.neutral.textSubtle} !important;
+                padding-right: ${theme.space.space16} !important;
+                min-width: ${theme.space.space24} !important;
+                box-sizing: unset !important;
+                user-select: none;
+                -webkit-user-select: none;
+
+                ${({ $showLineNumbers }) => (!$showLineNumbers && css`display: none !important;`)}
+
+            }
+        }
+    }
 
     .CodeBlock-TopRightActionsWrapper {
         position: absolute;

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import type { RegularBoxProps } from '../../box.js';
 import { ColorWheelGradient } from '../../color_wheel_gradient.js';
@@ -7,9 +7,9 @@ import { Link } from '../../link.js';
 import { Text } from '../../text/index.js';
 import type { SharedTextSize } from '../../text/text_shared.js';
 import { ActionButton, CopyButton } from '../action_button.js';
-import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
+import { SyntaxHighlighter } from '../syntax_highlighter.js';
 import { CodeBlockWrapper } from './code_block.styled.js';
-import { getBashLinePrefixes, getNumberLinePrefixes } from './utils.js';
+import { mapPrefixToBashLine } from './utils.js';
 
 type CodeTab = {
     key: string;
@@ -149,7 +149,9 @@ export const CodeBlock = ({
 
     const isBash = currentLanguage === 'bash';
 
-    const showLineNumbers = !hideLineNumbers && !LANGUAGES_WITHOUT_LINE_NUMBERS.includes(currentLanguage ?? '');
+    const showLineNumbers = !hideLineNumbers
+        && !LANGUAGES_WITHOUT_LINE_NUMBERS.includes(currentLanguage ?? '');
+    const showBashPrompt = isBash && !hideBashPromptPrefixes;
     const showBashHeader = isBash && !hideBashHeader && !isMultiTab;
 
     const showHeader = isMultiTab || !!title || showBashHeader;
@@ -162,20 +164,28 @@ export const CodeBlock = ({
         syntaxHighlighterRef.current?.scrollTo(0, 0);
     };
 
-    const showBashPrompt = isBash && !hideBashPromptPrefixes;
-    const effectiveBashCommandsStart = currentTab?.bashCommandsStart ?? bashCommandsStart;
-
-    const linePrefixes = useMemo(() => {
-        if (showBashPrompt) {
-            return getBashLinePrefixes(currentCode, effectiveBashCommandsStart);
-        }
-
-        if (showLineNumbers) {
-            return getNumberLinePrefixes(currentCode);
-        }
-
-        return {};
-    }, [showLineNumbers, showBashPrompt, currentCode, effectiveBashCommandsStart]);
+    const currentBashLinesPrefixes = useMemo(() => {
+        if (!showBashPrompt) return [];
+        return mapPrefixToBashLine(
+            currentCode,
+            currentTab?.bashCommandsStart ?? bashCommandsStart,
+        );
+    }, [currentCode, bashCommandsStart, showBashPrompt, currentTab]);
+
+    const getLineProps = useCallback(
+        (lineNumber: number) => {
+            const data = [];
+            if (currentHighlightLines?.includes(lineNumber)) {
+                data.push('highlighted');
+            }
+            if (showBashPrompt) {
+                data.push(currentBashLinesPrefixes[lineNumber - 1]);
+            }
+
+            return { data: data.join(' ') };
+        },
+        [currentHighlightLines, showBashPrompt, currentBashLinesPrefixes],
+    );
 
     return (
         <CodeBlockWrapper
@@ -198,15 +208,16 @@ export const CodeBlock = ({
                 />
             )}
 
-            <PrismSyntaxHighlighter
-                code={currentCode}
-                linePrefixes={linePrefixes}
-                highlightLines={currentHighlightLines}
-                language={currentLanguage || 'text'}
+            <SyntaxHighlighter
+                showLineNumbers
+                wrapLines
+                language={currentLanguage}
                 size={size}
+                lineProps={getLineProps}
                 ref={syntaxHighlighterRef}
-                isSingleLine={false}
-            />
+            >
+                {currentCode}
+            </SyntaxHighlighter>
 
             <div className="CodeBlock-TopRightActionsWrapper">
                 {showActionButton && <ActionButton successStyle onClick={onActionButtonClick}>{actionButtonLabel ?? 'Run on Apify'}</ActionButton>}

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

@@ -0,0 +1,19 @@
+// 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
+// empty line or comment -> bashEmptyLine
+export const mapPrefixToBashLine = (code: string, bashCommandsStart: number[] = []) => {
+    const lines = code.split('\n').map((line) => line.trim());
+
+    // by default each line that is not empty or comment is a command start
+    if (bashCommandsStart.length === 0) {
+        return lines.map((line) => ((line.startsWith('#') || !line) ? 'bashEmptyLine' : 'bashStartCommand'));
+    }
+
+    return lines.map((line, i) => {
+        if (bashCommandsStart.includes(i + 1)) return 'bashStartCommand';
+        if (line.startsWith('#') || !line) return 'bashEmptyLine';
+        return 'bashCommand';
+    });
+};

package/src/components/code/index.ts

@@ -2,4 +2,3 @@ export * from './code_block/code_block.js';
 export * from './code_block/code_block_with_tabs.js';
 export * from './one_line_code/one_line_code.js';
 export * from './inline_code/inline_code.js';
-export * from './prism_highlighter.js';

package/src/components/code/one_line_code/one_line_code.tsx

@@ -8,9 +8,8 @@ import type { BoxProps } from '../../box.js';
 import { Text } from '../../text/index.js';
 import type { SharedTextSize } from '../../text/text_shared.js';
 import { ActionButton, CopyButton } from '../action_button.js';
-import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code_block.styled.js';
-import { SyntaxHighlighterBaseStylesWrapper } from '../code_block/code_block.styled.js';
-import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
+import type { SyntaxHighlighterBaseStylesWrapperProps } from '../syntax_highlighter.js';
+import { SyntaxHighlighter, SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
 
 export const oneLineCodeClassNames = {
     gradientWrapper: 'OneLineCode-GradientWrapper',
@@ -93,7 +92,6 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
             top: 0;
             bottom: 0;
             width: 4rem;
-            z-index: 5;
             background: linear-gradient(
                 to right,
                 transparent,
@@ -116,12 +114,32 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
         scrollbar-color: ${theme.color.neutral.border} transparent;
 
 
-        pre {
+        .CodePre {
             overflow: unset !important;
             display: flex;
             flex: 1;
             align-items: center;
             height: 2.8rem;
+
+            code {
+                & > span {
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    vertical-align: text-top;
+                    ${({ $showBashPrefixes }) => $showBashPrefixes && css`
+                        &::before {
+                            color: ${theme.color.lavender.base};
+                            padding-right: ${theme.space.space16};
+                            min-width: ${theme.space.space24};
+                            user-select: none;
+                            -webkit-user-select: none;
+                            content: "$";
+                            font-size: 1em;
+                        }
+                    `}
+                }
+            }
         }
     }
 `;
@@ -179,12 +197,13 @@ export function OneLineCode({
                             {httpMethod}
                         </Text>
                     )}
-                    <PrismSyntaxHighlighter
+                    <SyntaxHighlighter
                         language={language}
                         size={size}
-                        code={code}
-                        isSingleLine={true}
-                    />
+                        wrapLines
+                    >
+                        {code}
+                    </SyntaxHighlighter>
                 </div>
                 <div className={oneLineCodeClassNames.gradient} />
             </div>

package/src/components/code/syntax_highlighter.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { forwardRef } from 'react';
+// https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/228
+import type { SyntaxHighlighterProps as ReactSyntaxHighlighterProps } from 'react-syntax-highlighter';
+// @ts-ignore The library is badly typed and does not export the type
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash.js';
+// @ts-ignore The library is badly typed and does not export the type
+import dockerFile from 'react-syntax-highlighter/dist/esm/languages/prism/docker.js';
+// @ts-ignore The library is badly typed and does not export the type
+import http from 'react-syntax-highlighter/dist/esm/languages/prism/http.js';
+// @ts-ignore The library is badly typed and does not export the type
+import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript.js';
+// @ts-ignore The library is badly typed and does not export the type
+import json from 'react-syntax-highlighter/dist/esm/languages/prism/json.js';
+// @ts-ignore The library is badly typed and does not export the type
+import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup.js';
+// @ts-ignore The library is badly typed and does not export the type
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python.js';
+// @ts-ignore The library is badly typed and does not export the type
+import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript.js';
+// @ts-ignore The library is badly typed and does not export the type
+import xml from 'react-syntax-highlighter/dist/esm/languages/prism/xml-doc.js';
+// @ts-ignore The library is badly typed and does not export the type
+import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml.js';
+// @ts-ignore The library is badly typed and does not export the type
+import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light.js';
+// @ts-ignore The library is badly typed and does not export the type
+import dark from 'react-syntax-highlighter/dist/esm/styles/prism/night-owl.js';
+// @ts-ignore The library is badly typed and does not export the type
+import light from 'react-syntax-highlighter/dist/esm/styles/prism/prism.js';
+/* tslint:enable */
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box } from '../box.js';
+import { type SharedTextProps, Text } from '../text/index.js';
+import type { SharedTextSize } from '../text/text_shared.js';
+
+ReactSyntaxHighlighter.registerLanguage('typescript', ts);
+ReactSyntaxHighlighter.registerLanguage('javascript', js);
+ReactSyntaxHighlighter.registerLanguage('json', json);
+ReactSyntaxHighlighter.registerLanguage('bash', bash);
+ReactSyntaxHighlighter.registerLanguage('docker', dockerFile);
+ReactSyntaxHighlighter.registerLanguage('html', html);
+ReactSyntaxHighlighter.registerLanguage('xml', xml);
+ReactSyntaxHighlighter.registerLanguage('yaml', yaml);
+ReactSyntaxHighlighter.registerLanguage('python', python);
+ReactSyntaxHighlighter.registerLanguage('http', http);
+ReactSyntaxHighlighter.registerLanguage('jsonp', json);
+ReactSyntaxHighlighter.registerLanguage('jsonl', json);
+ReactSyntaxHighlighter.registerLanguage('rss', xml);
+
+const StyledPre = styled(Text)`
+    width: 100%;
+    position: relative;
+
+    *,
+    *::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;
+    }
+
+    code {
+        min-width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+        overflow: hidden;
+    }
+`;
+
+// Syntax highlighter uses inline style a lot which makes it hard to override them. To do so, we make the library not
+// use styles that we wish to set on our own (font-based styles, spacing, background, ...),
+const inlineCssReset = {
+    fontFamily: undefined,
+    fontSize: undefined,
+    fontWeight: undefined,
+    lineHeight: undefined,
+    background: undefined,
+    margin: undefined,
+    padding: undefined,
+};
+
+type SyntaxHighlighterProps = ReactSyntaxHighlighterProps & { size: SharedTextSize };
+
+export const SyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterProps>(({
+    size,
+    children,
+    ...rest
+}, ref) => {
+    const { uiTheme } = useSharedUiDependencies();
+
+    const PreTag = (preProps: ReactSyntaxHighlighterProps) => {
+        return <StyledPre {...preProps} size={size} forwardedAs='pre' type='code' ref={ref}/>;
+    };
+
+    return (
+        <ReactSyntaxHighlighter
+            PreTag={PreTag}
+            customStyle={inlineCssReset}
+            className="CodePre"
+            style={uiTheme === 'DARK' ? dark : light}
+            {...rest}
+        >
+            {children}
+        </ReactSyntaxHighlighter>
+    );
+});
+
+export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
+    $fullWidth?: boolean;
+    $fullHeight?: string;
+    $showLineNumbers?: boolean;
+}
+
+export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`
+    background-color: ${theme.color.neutral.backgroundMuted} !important;
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius12};
+    overflow: hidden;
+
+    width: 100%;
+    ${({ $fullWidth }) => !$fullWidth && css`max-width: 860px;`}
+    ${({ $fullHeight }) => !$fullHeight && css`max-height: 600px;`}
+
+    background-color: transparent;
+    position: relative;
+`;

package/dist/src/components/code/prism_highlighter.d.ts

@@ -1,13 +0,0 @@
-import type { HighlightProps } from 'prism-react-renderer';
-import type { ReactNode } from 'react';
-import type { SharedTextSize } from '../text/text_shared.js';
-export declare const CodeHighlighterLinePrefix: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../text/text_shared.js").SharedTextProps & import("react").RefAttributes<HTMLElement | undefined>>, any, {}, never>;
-export declare const PrismSyntaxHighlighter: import("react").ForwardRefExoticComponent<Omit<HighlightProps, "children" | "language"> & {
-    size?: SharedTextSize;
-    linePrefixes?: Record<string, ReactNode>;
-    highlightLines?: number[];
-    language?: string;
-    className?: string;
-    isSingleLine: boolean;
-} & import("react").RefAttributes<HTMLPreElement>>;
-//# sourceMappingURL=prism_highlighter.d.ts.map

package/dist/src/components/code/prism_highlighter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"prism_highlighter.d.ts","sourceRoot":"","sources":["../../../../src/components/code/prism_highlighter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAuG7D,eAAO,MAAM,yBAAyB,mNAQrC,CAAC;AAWF,eAAO,MAAM,sBAAsB;WARxB,cAAc;mBACN,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,MAAM,EAAE;eACd,MAAM;gBACL,MAAM;kBACJ,OAAO;kDA+CvB,CAAC"}

package/dist/src/components/code/prism_highlighter.js

@@ -1,116 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import _ from 'lodash';
-import { Highlight, Prism, themes } from 'prism-react-renderer';
-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';
-(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();
-const StyledPre = styled.pre `
-    width: 100%;
-    position: relative;
-    overflow: auto;
-    z-index: 2;
-    padding: ${({ $isSingleLine }) => ($isSingleLine ? 0 : `${theme.space.space16} 0`)};
-    margin: 0;
-
-    *,
-    *::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;
-    }
-
-    code {
-        min-width: 100%;
-        display: inline-block;
-        vertical-align: middle;
-
-        & > 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 `
-                &: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 `
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-                vertical-align: text-top;
-            ` : css `
-                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) `
-    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;
-`;
-export const PrismSyntaxHighlighter = forwardRef(({ size = 'regular', linePrefixes = {}, highlightLines = [], language = 'javascript', className, isSingleLine, ...rest }, ref) => {
-    const { uiTheme } = useSharedUiDependencies();
-    const hasLinePrefixes = !_.isEmpty(linePrefixes);
-    const highlightedLinesObject = useRef(Object.fromEntries(highlightLines.map((e) => [e, true])));
-    return (_jsx(Highlight, { theme: uiTheme === 'DARK' ? themes.nightOwl : themes.oneLight, language: language, ...rest, children: ({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (_jsx(StyledPre, { className: clsx(className, prismClassName), "$hasLinePrefixes": hasLinePrefixes, "$isSingleLine": isSingleLine, ref: ref, children: _jsx(Text, { size: size, type: 'code', as: 'code', children: tokens.map((line, i) => (_jsxs("div", { ...getLineProps({ line, className: highlightedLinesObject.current[i + 1] ? 'highlighted' : '' }), children: [hasLinePrefixes && (linePrefixes[i + 1] || _jsx(CodeHighlighterLinePrefix, {})), line.map((token, key) => (_jsx("span", { ...getTokenProps({ token }) }, key)))] }, i))) }) })) }));
-});
-//# sourceMappingURL=prism_highlighter.js.map

package/dist/src/components/code/prism_highlighter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"prism_highlighter.js","sourceRoot":"","sources":["../../../../src/components/code/prism_highlighter.tsx"],"names":[],"mappings":"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"}