@chayns-components/code-highlighter 5.0.24 → 5.0.26

package/lib/cjs/components/code-highlighter/CodeHighlighter.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _chaynsApi = require("chayns-api");
 var _standalone = require("prettier/standalone");
 var _react = _interopRequireWildcard(require("react"));
 var _reactSyntaxHighlighter = require("react-syntax-highlighter");
@@ -15,6 +14,15 @@ var _CodeHighlighter = require("./CodeHighlighter.styles");
 var _CopyToClipboard = _interopRequireDefault(require("./copy-to-clipboard/CopyToClipboard"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const addScrollbarClassToPre = ({
+  root,
+  className
+}) => {
+  if (!root) return;
+  const preElement = root.querySelector('pre');
+  if (!preElement) return;
+  preElement.classList.add(className);
+};
 const CodeHighlighter = ({
   theme = _codeHighlighter.CodeHighlighterTheme.Dark,
   code,
@@ -28,9 +36,12 @@ const CodeHighlighter = ({
 }) => {
   const [width, setWidth] = (0, _react.useState)(0);
   const ref = (0, _react.useRef)(null);
-  const {
-    browser
-  } = (0, _chaynsApi.useDevice)();
+  (0, _react.useEffect)(() => {
+    addScrollbarClassToPre({
+      root: ref.current,
+      className: 'chayns-scrollbar'
+    });
+  }, []);
   (0, _react.useEffect)(() => {
     const handleResize = () => {
       if (ref.current) {
@@ -106,7 +117,6 @@ const CodeHighlighter = ({
     });
   }, []);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighter, {
-    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
     $shouldWrapLines: shouldWrapLines,
     $codeTheme: theme,
     ref: ref
@@ -125,7 +135,7 @@ const CodeHighlighter = ({
     wrapLines: true,
     wrapLongLines: shouldWrapLines,
     lineProps: lineWrapper
-  }, formattedCode)), [browser === null || browser === void 0 ? void 0 : browser.name, theme, language, code, copyButtonText, shouldShowLineNumbers, shouldWrapLines, lineWrapper, formattedCode]);
+  }, formattedCode)), [theme, language, code, copyButtonText, shouldShowLineNumbers, shouldWrapLines, lineWrapper, formattedCode]);
 };
 CodeHighlighter.displayName = 'CodeHighlighter';
 var _default = exports.default = CodeHighlighter;

package/lib/cjs/components/code-highlighter/CodeHighlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["_chaynsApi","require","_standalone","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CodeHighlighter","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","useState","ref","useRef","browser","useDevice","useEffect","handleResize","current","children","preElement","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","useMemo","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$browser","name","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","wrapLongLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { BrowserName } from '@chayns-components/core';\nimport { useDevice } from 'chayns-api';\nimport { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme = CodeHighlighterTheme.Dark,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = useDevice();\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const formattedCode = useMemo(() => {\n        if (language) {\n            void getParserForLanguage(language).then((config) => {\n                if (shouldFormatCode && config) {\n                    try {\n                        return format(code, config) as unknown as string;\n                    } catch (error) {\n                        if (typeof onFormatError !== 'undefined') onFormatError(error);\n                    }\n                }\n\n                return code;\n            });\n        }\n\n        return code;\n    }, [code, language, shouldFormatCode, onFormatError]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $browser={browser?.name as BrowserName}\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={theme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={theme}>\n                    <StyledCodeHighlighterFileName $codeTheme={theme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                    <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n                </StyledCodeHighlighterHeader>\n                <SyntaxHighlighter\n                    language={language ?? ''}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            browser?.name,\n            theme,\n            language,\n            code,\n            copyButtonText,\n            shouldShowLineNumbers,\n            shouldWrapLines,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","useState","ref","useRef","useEffect","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","useMemo","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","wrapLongLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme = CodeHighlighterTheme.Dark,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const formattedCode = useMemo(() => {\n        if (language) {\n            void getParserForLanguage(language).then((config) => {\n                if (shouldFormatCode && config) {\n                    try {\n                        return format(code, config) as unknown as string;\n                    } catch (error) {\n                        if (typeof onFormatError !== 'undefined') onFormatError(error);\n                    }\n                }\n\n                return code;\n            });\n        }\n\n        return code;\n    }, [code, language, shouldFormatCode, onFormatError]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter $shouldWrapLines={shouldWrapLines} $codeTheme={theme} ref={ref}>\n                <StyledCodeHighlighterHeader $codeTheme={theme}>\n                    <StyledCodeHighlighterFileName $codeTheme={theme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                    <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n                </StyledCodeHighlighterHeader>\n                <SyntaxHighlighter\n                    language={language ?? ''}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            theme,\n            language,\n            code,\n            copyButtonText,\n            shouldShowLineNumbers,\n            shouldWrapLines,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledCodeHighlighterHeader = exports.StyledCodeHighlighterFileName = exports.StyledCodeHighlighter = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _codeHighlighter = require("../../types/codeHighlighter");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledCodeHighlighter = exports.StyledCodeHighlighter = _styledComponents.default.div`
     margin: 4px 0;
     background-color: ${({
@@ -21,33 +21,6 @@ const StyledCodeHighlighter = exports.StyledCodeHighlighter = _styledComponents.
         padding: 15px;
         line-height: 1.5;
 
-        // Styles for custom scrollbar
-        ${({
-  $browser,
-  theme
-}) => $browser === 'firefox' ? (0, _styledComponents.css)`
-                      scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
-                      scrollbar-width: thin;
-                  ` : (0, _styledComponents.css)`
-                      &::-webkit-scrollbar {
-                          height: 5px;
-                      }
-
-                      &::-webkit-scrollbar-track {
-                          background-color: transparent;
-                      }
-
-                      &::-webkit-scrollbar-button {
-                          background-color: transparent;
-                          height: 5px;
-                      }
-
-                      &::-webkit-scrollbar-thumb {
-                          background-color: rgba(${theme['text-rgb']}, 0.15);
-                          border-radius: 20px;
-                      }
-                  `}
-
         code {
             white-space: ${({
   $shouldWrapLines

package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_codeHighlighter","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCodeHighlighter","exports","styled","div","$codeTheme","CodeHighlighterTheme","Dark","$browser","theme","css","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { BrowserName, WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $browser: BrowserName;\n    $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n    margin: 4px 0;\n    background-color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n    border-radius: 8px;\n    padding-bottom: 6px;\n\n    pre {\n        margin: 0 !important;\n        overflow: auto;\n        padding: 15px;\n        line-height: 1.5;\n\n        // Styles for custom scrollbar\n        ${({ $browser, theme }: StyledCodeHighlighterProps) =>\n            $browser === 'firefox'\n                ? css`\n                      scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                      scrollbar-width: thin;\n                  `\n                : css`\n                      &::-webkit-scrollbar {\n                          height: 5px;\n                      }\n\n                      &::-webkit-scrollbar-track {\n                          background-color: transparent;\n                      }\n\n                      &::-webkit-scrollbar-button {\n                          background-color: transparent;\n                          height: 5px;\n                      }\n\n                      &::-webkit-scrollbar-thumb {\n                          background-color: rgba(${theme['text-rgb']}, 0.15);\n                          border-radius: 20px;\n                      }\n                  `}\n\n        code {\n            white-space: ${({ $shouldWrapLines }) =>\n                $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n        }\n    }\n\n    // Fixes display of tables in code highlighter for markdown.\n    .language-markdown .token.table {\n        display: inline;\n    }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 1px solid\n        ${({ $codeTheme }) => ($codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n    padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAmE,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAQ5D,MAAMkB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,QAAQ;EAAEC;AAAkC,CAAC,KAC9CD,QAAQ,KAAK,SAAS,GAChB,IAAAE,qBAAG;AACrB,8CAA8CD,KAAK,CAAC,UAAU,CAAC;AAC/D;AACA,mBAAmB,GACD,IAAAC,qBAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmDD,KAAK,CAAC,UAAU,CAAC;AACpE;AACA;AACA,mBAAmB;AACnB;AACA;AACA,2BAA2B,CAAC;EAAEE;AAAiB,CAAC,KAChCA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,2BAA2B,GAAAV,OAAA,CAAAU,2BAAA,GAAGT,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAU;AAChG;AACA,CAAC;AAMM,MAAMM,6BAA6B,GAAAX,OAAA,CAAAW,6BAAA,GAAGV,yBAAM,CAACW,IAAwC;AAC5F,aAAa,CAAC;EAAET;AAAW,CAAC,KACpBA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCodeHighlighter","exports","styled","div","$codeTheme","CodeHighlighterTheme","Dark","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n    margin: 4px 0;\n    background-color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n    border-radius: 8px;\n    padding-bottom: 6px;\n\n    pre {\n        margin: 0 !important;\n        overflow: auto;\n        padding: 15px;\n        line-height: 1.5;\n\n        code {\n            white-space: ${({ $shouldWrapLines }) =>\n                $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n        }\n    }\n\n    // Fixes display of tables in code highlighter for markdown.\n    .language-markdown .token.table {\n        display: inline;\n    }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 1px solid\n        ${({ $codeTheme }) => ($codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n    padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAmE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAO5D,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,CAAC;EAAEC;AAAiB,CAAC,KAChCA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAU;AAChG;AACA,CAAC;AAMM,MAAMG,6BAA6B,GAAAR,OAAA,CAAAQ,6BAAA,GAAGP,yBAAM,CAACQ,IAAwC;AAC5F,aAAa,CAAC;EAAEN;AAAW,CAAC,KACpBA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}

package/lib/esm/components/code-highlighter/CodeHighlighter.js

@@ -1,4 +1,3 @@
-import { useDevice } from 'chayns-api';
 import { format } from 'prettier/standalone';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -7,6 +6,15 @@ import { CodeHighlighterTheme } from '../../types/codeHighlighter';
 import { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';
 import { StyledCodeHighlighter, StyledCodeHighlighterFileName, StyledCodeHighlighterHeader } from './CodeHighlighter.styles';
 import CopyToClipboard from './copy-to-clipboard/CopyToClipboard';
+const addScrollbarClassToPre = ({
+  root,
+  className
+}) => {
+  if (!root) return;
+  const preElement = root.querySelector('pre');
+  if (!preElement) return;
+  preElement.classList.add(className);
+};
 const CodeHighlighter = ({
   theme = CodeHighlighterTheme.Dark,
   code,
@@ -20,9 +28,12 @@ const CodeHighlighter = ({
 }) => {
   const [width, setWidth] = useState(0);
   const ref = useRef(null);
-  const {
-    browser
-  } = useDevice();
+  useEffect(() => {
+    addScrollbarClassToPre({
+      root: ref.current,
+      className: 'chayns-scrollbar'
+    });
+  }, []);
   useEffect(() => {
     const handleResize = () => {
       if (ref.current) {
@@ -98,7 +109,6 @@ const CodeHighlighter = ({
     });
   }, []);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledCodeHighlighter, {
-    $browser: browser?.name,
     $shouldWrapLines: shouldWrapLines,
     $codeTheme: theme,
     ref: ref
@@ -117,7 +127,7 @@ const CodeHighlighter = ({
     wrapLines: true,
     wrapLongLines: shouldWrapLines,
     lineProps: lineWrapper
-  }, formattedCode)), [browser?.name, theme, language, code, copyButtonText, shouldShowLineNumbers, shouldWrapLines, lineWrapper, formattedCode]);
+  }, formattedCode)), [theme, language, code, copyButtonText, shouldShowLineNumbers, shouldWrapLines, lineWrapper, formattedCode]);
 };
 CodeHighlighter.displayName = 'CodeHighlighter';
 export default CodeHighlighter;

package/lib/esm/components/code-highlighter/CodeHighlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["useDevice","format","React","useCallback","useEffect","useMemo","useRef","useState","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","CodeHighlighter","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","ref","browser","handleResize","current","children","preElement","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$browser","name","$shouldWrapLines","$codeTheme","text","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { BrowserName } from '@chayns-components/core';\nimport { useDevice } from 'chayns-api';\nimport { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme = CodeHighlighterTheme.Dark,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = useDevice();\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const formattedCode = useMemo(() => {\n        if (language) {\n            void getParserForLanguage(language).then((config) => {\n                if (shouldFormatCode && config) {\n                    try {\n                        return format(code, config) as unknown as string;\n                    } catch (error) {\n                        if (typeof onFormatError !== 'undefined') onFormatError(error);\n                    }\n                }\n\n                return code;\n            });\n        }\n\n        return code;\n    }, [code, language, shouldFormatCode, onFormatError]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $browser={browser?.name as BrowserName}\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={theme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={theme}>\n                    <StyledCodeHighlighterFileName $codeTheme={theme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                    <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n                </StyledCodeHighlighterHeader>\n                <SyntaxHighlighter\n                    language={language ?? ''}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            browser?.name,\n            theme,\n            language,\n            code,\n            copyButtonText,\n            shouldShowLineNumbers,\n            shouldWrapLines,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","ref","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme = CodeHighlighterTheme.Dark,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const formattedCode = useMemo(() => {\n        if (language) {\n            void getParserForLanguage(language).then((config) => {\n                if (shouldFormatCode && config) {\n                    try {\n                        return format(code, config) as unknown as string;\n                    } catch (error) {\n                        if (typeof onFormatError !== 'undefined') onFormatError(error);\n                    }\n                }\n\n                return code;\n            });\n        }\n\n        return code;\n    }, [code, language, shouldFormatCode, onFormatError]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter $shouldWrapLines={shouldWrapLines} $codeTheme={theme} ref={ref}>\n                <StyledCodeHighlighterHeader $codeTheme={theme}>\n                    <StyledCodeHighlighterFileName $codeTheme={theme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                    <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n                </StyledCodeHighlighterHeader>\n                <SyntaxHighlighter\n                    language={language ?? ''}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            theme,\n            language,\n            code,\n            copyButtonText,\n            shouldShowLineNumbers,\n            shouldWrapLines,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { CodeHighlighterTheme } from '../../types/codeHighlighter';
 export const StyledCodeHighlighter = styled.div`
     margin: 4px 0;
@@ -14,33 +14,6 @@ export const StyledCodeHighlighter = styled.div`
         padding: 15px;
         line-height: 1.5;
 
-        // Styles for custom scrollbar
-        ${({
-  $browser,
-  theme
-}) => $browser === 'firefox' ? css`
-                      scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
-                      scrollbar-width: thin;
-                  ` : css`
-                      &::-webkit-scrollbar {
-                          height: 5px;
-                      }
-
-                      &::-webkit-scrollbar-track {
-                          background-color: transparent;
-                      }
-
-                      &::-webkit-scrollbar-button {
-                          background-color: transparent;
-                          height: 5px;
-                      }
-
-                      &::-webkit-scrollbar-thumb {
-                          background-color: rgba(${theme['text-rgb']}, 0.15);
-                          border-radius: 20px;
-                      }
-                  `}
-
         code {
             white-space: ${({
   $shouldWrapLines

package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","css","CodeHighlighterTheme","StyledCodeHighlighter","div","$codeTheme","Dark","$browser","theme","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { BrowserName, WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $browser: BrowserName;\n    $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n    margin: 4px 0;\n    background-color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n    border-radius: 8px;\n    padding-bottom: 6px;\n\n    pre {\n        margin: 0 !important;\n        overflow: auto;\n        padding: 15px;\n        line-height: 1.5;\n\n        // Styles for custom scrollbar\n        ${({ $browser, theme }: StyledCodeHighlighterProps) =>\n            $browser === 'firefox'\n                ? css`\n                      scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                      scrollbar-width: thin;\n                  `\n                : css`\n                      &::-webkit-scrollbar {\n                          height: 5px;\n                      }\n\n                      &::-webkit-scrollbar-track {\n                          background-color: transparent;\n                      }\n\n                      &::-webkit-scrollbar-button {\n                          background-color: transparent;\n                          height: 5px;\n                      }\n\n                      &::-webkit-scrollbar-thumb {\n                          background-color: rgba(${theme['text-rgb']}, 0.15);\n                          border-radius: 20px;\n                      }\n                  `}\n\n        code {\n            white-space: ${({ $shouldWrapLines }) =>\n                $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n        }\n    }\n\n    // Fixes display of tables in code highlighter for markdown.\n    .language-markdown .token.table {\n        display: inline;\n    }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 1px solid\n        ${({ $codeTheme }) => ($codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n    padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,6BAA6B;AAQlE,OAAO,MAAMC,qBAAqB,GAAGH,MAAM,CAACI,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,QAAQ;EAAEC;AAAkC,CAAC,KAC9CD,QAAQ,KAAK,SAAS,GAChBN,GAAG;AACrB,8CAA8CO,KAAK,CAAC,UAAU,CAAC;AAC/D;AACA,mBAAmB,GACDP,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmDO,KAAK,CAAC,UAAU,CAAC;AACpE;AACA;AACA,mBAAmB;AACnB;AACA;AACA,2BAA2B,CAAC;EAAEC;AAAiB,CAAC,KAChCA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,2BAA2B,GAAGV,MAAM,CAACI,GAAqC;AACvF;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAU;AAChG;AACA,CAAC;AAMD,OAAO,MAAMK,6BAA6B,GAAGX,MAAM,CAACY,IAAwC;AAC5F,aAAa,CAAC;EAAEP;AAAW,CAAC,KACpBA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","CodeHighlighterTheme","StyledCodeHighlighter","div","$codeTheme","Dark","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n    margin: 4px 0;\n    background-color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n    border-radius: 8px;\n    padding-bottom: 6px;\n\n    pre {\n        margin: 0 !important;\n        overflow: auto;\n        padding: 15px;\n        line-height: 1.5;\n\n        code {\n            white-space: ${({ $shouldWrapLines }) =>\n                $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n        }\n    }\n\n    // Fixes display of tables in code highlighter for markdown.\n    .language-markdown .token.table {\n        display: inline;\n    }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 1px solid\n        ${({ $codeTheme }) => ($codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n    padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,6BAA6B;AAOlE,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,CAAC;EAAEC;AAAiB,CAAC,KAChCA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,2BAA2B,GAAGP,MAAM,CAACG,GAAqC;AACvF;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAU;AAChG;AACA,CAAC;AAMD,OAAO,MAAMG,6BAA6B,GAAGR,MAAM,CAACS,IAAwC;AAC5F,aAAa,CAAC;EAAEL;AAAW,CAAC,KACpBA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}

package/lib/types/components/code-highlighter/CodeHighlighter.styles.d.ts

@@ -1,8 +1,7 @@
-import type { BrowserName, WithTheme } from '@chayns-components/core';
+import type { WithTheme } from '@chayns-components/core';
 import { CodeHighlighterTheme } from '../../types/codeHighlighter';
 type StyledCodeHighlighterProps = WithTheme<{
     $codeTheme: CodeHighlighterTheme;
-    $browser: BrowserName;
     $shouldWrapLines?: boolean;
 }>;
 export declare const StyledCodeHighlighter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledCodeHighlighterProps>> & string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/code-highlighter",
-    "version": "5.0.24",
+    "version": "5.0.26",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -69,7 +69,7 @@
         "typescript": "^5.9.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.24",
+        "@chayns-components/core": "^5.0.26",
         "@types/react-syntax-highlighter": "^15.5.13",
         "babel-prettier-parser": "^0.10.8",
         "prettier": "^2.8.8",
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b9ab91825d63be8a824757ec2f50632d289276b9"
+    "gitHead": "17847c5f29ec81a09043d75bb8ff4180e7048f91"
 }