@chayns-components/code-highlighter 5.0.0-beta.883 → 5.0.0-beta.885

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

@@ -87,6 +87,16 @@ const CodeHighlighter = ({
     }
     return code;
   }, [code, language, shouldFormatCode, onFormatError]);
+  (0, _react.useEffect)(() => {
+    const elements = document.getElementsByClassName('linenumber');
+    Array.from(elements).forEach(element => {
+      const wrapper = document.createElement('twIgnore');
+      while (element.firstChild) {
+        wrapper.appendChild(element.firstChild);
+      }
+      element.appendChild(wrapper);
+    });
+  }, []);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighter, {
     $browser: browser === null || browser === void 0 ? void 0 : browser.name,
     $codeTheme: theme,
@@ -95,7 +105,7 @@ const CodeHighlighter = ({
     $codeTheme: theme
   }, /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighterFileName, {
     $codeTheme: theme
-  }, (0, _codeHighlighter2.formatLanguage)(language)), /*#__PURE__*/_react.default.createElement(_CopyToClipboard.default, {
+  }, /*#__PURE__*/_react.default.createElement("twIgnore", null, (0, _codeHighlighter2.formatLanguage)(language))), /*#__PURE__*/_react.default.createElement(_CopyToClipboard.default, {
     text: code,
     theme: theme,
     copyButtonText: copyButtonText

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","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CodeHighlighter","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","width","setWidth","useState","ref","useRef","browser","useDevice","useEffect","current","children","preElement","Array","from","find","tagName","toLowerCase","scrollWidth","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","useMemo","config","getParserForLanguage","format","error","createElement","StyledCodeHighlighter","$browser","name","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { 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     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Callback-Funktion, die aufgerufen wird, wenn das Formatieren des Codes fehlschlägt.\n     */\n    onFormatError?: (error: unknown) => void;\n\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: 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}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = useDevice();\n\n    useEffect(() => {\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    // 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            const config = getParserForLanguage(language);\n\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        return code;\n    }, [code, language, shouldFormatCode, onFormatError]);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter $browser={browser?.name} $codeTheme={theme} ref={ref}>\n                <StyledCodeHighlighterHeader $codeTheme={theme}>\n                    <StyledCodeHighlighterFileName $codeTheme={theme}>\n                        {formatLanguage(language)}\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                    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            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":["_chaynsApi","require","_standalone","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CodeHighlighter","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","width","setWidth","useState","ref","useRef","browser","useDevice","useEffect","current","children","preElement","Array","from","find","tagName","toLowerCase","scrollWidth","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","useMemo","config","getParserForLanguage","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$browser","name","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { 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     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Callback-Funktion, die aufgerufen wird, wenn das Formatieren des Codes fehlschlägt.\n     */\n    onFormatError?: (error: unknown) => void;\n\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: 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}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = useDevice();\n\n    useEffect(() => {\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    // 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            const config = getParserForLanguage(language);\n\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        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('twIgnore');\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 $browser={browser?.name} $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                        <twIgnore>{formatLanguage(language)}</twIgnore>\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                    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            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/copy-to-clipboard/CopyToClipboard.js

@@ -32,7 +32,7 @@ const CopyToClipboard = ({
     color: theme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'
   }), copyButtonText && /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardText, {
     $codeTheme: theme
-  }, copyButtonText)));
+  }, /*#__PURE__*/_react.default.createElement("twIgnore", null, copyButtonText))));
 };
 CopyToClipboard.displayName = 'CopyToClipboard';
 var _default = exports.default = CopyToClipboard;

package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_react","_interopRequireDefault","_codeHighlighter","_CopyToClipboard","e","__esModule","default","CopyToClipboard","copyButtonText","text","theme","handleClick","navigator","clipboard","writeText","popupContent","createElement","style","display","padding","Popup","content","StyledCopyToClipboard","onClick","Icon","icons","color","CodeHighlighterTheme","Dark","StyledCopyToClipboardText","$codeTheme","displayName","_default","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, Popup } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport { StyledCopyToClipboard, StyledCopyToClipboardText } from './CopyToClipboard.styles';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n    const handleClick = () => {\n        void navigator.clipboard.writeText(text);\n    };\n\n    const popupContent = (\n        <span style={{ display: 'block', padding: '5px' }}>\n            <p>Kopiert!</p>\n        </span>\n    );\n\n    return (\n        <Popup content={popupContent}>\n            <StyledCopyToClipboard onClick={handleClick}>\n                <Icon\n                    icons={['fa-light fa-clipboard']}\n                    color={theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'}\n                />\n                {copyButtonText && (\n                    <StyledCopyToClipboardText $codeTheme={theme}>\n                        {copyButtonText}\n                    </StyledCopyToClipboardText>\n                )}\n            </StyledCopyToClipboard>\n        </Popup>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AAA4F,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQ5F,MAAMG,eAAyC,GAAGA,CAAC;EAAEC,cAAc;EAAEC,IAAI;EAAEC;AAAM,CAAC,KAAK;EACnF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAKC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACL,IAAI,CAAC;EAC5C,CAAC;EAED,MAAMM,YAAY,gBACdf,MAAA,CAAAM,OAAA,CAAAU,aAAA;IAAMC,KAAK,EAAE;MAAEC,OAAO,EAAE,OAAO;MAAEC,OAAO,EAAE;IAAM;EAAE,gBAC9CnB,MAAA,CAAAM,OAAA,CAAAU,aAAA,YAAG,UAAW,CACZ,CACT;EAED,oBACIhB,MAAA,CAAAM,OAAA,CAAAU,aAAA,CAAClB,KAAA,CAAAsB,KAAK;IAACC,OAAO,EAAEN;EAAa,gBACzBf,MAAA,CAAAM,OAAA,CAAAU,aAAA,CAACb,gBAAA,CAAAmB,qBAAqB;IAACC,OAAO,EAAEZ;EAAY,gBACxCX,MAAA,CAAAM,OAAA,CAAAU,aAAA,CAAClB,KAAA,CAAA0B,IAAI;IACDC,KAAK,EAAE,CAAC,uBAAuB,CAAE;IACjCC,KAAK,EAAEhB,KAAK,KAAKiB,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG;EAAU,CACtE,CAAC,EACDpB,cAAc,iBACXR,MAAA,CAAAM,OAAA,CAAAU,aAAA,CAACb,gBAAA,CAAA0B,yBAAyB;IAACC,UAAU,EAAEpB;EAAM,GACxCF,cACsB,CAEZ,CACpB,CAAC;AAEhB,CAAC;AAEDD,eAAe,CAACwB,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEjCC,eAAe","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_react","_interopRequireDefault","_codeHighlighter","_CopyToClipboard","e","__esModule","default","CopyToClipboard","copyButtonText","text","theme","handleClick","navigator","clipboard","writeText","popupContent","createElement","style","display","padding","Popup","content","StyledCopyToClipboard","onClick","Icon","icons","color","CodeHighlighterTheme","Dark","StyledCopyToClipboardText","$codeTheme","displayName","_default","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, Popup } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport { StyledCopyToClipboard, StyledCopyToClipboardText } from './CopyToClipboard.styles';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n    const handleClick = () => {\n        void navigator.clipboard.writeText(text);\n    };\n\n    const popupContent = (\n        <span style={{ display: 'block', padding: '5px' }}>\n            <p>Kopiert!</p>\n        </span>\n    );\n\n    return (\n        <Popup content={popupContent}>\n            <StyledCopyToClipboard onClick={handleClick}>\n                <Icon\n                    icons={['fa-light fa-clipboard']}\n                    color={theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'}\n                />\n                {copyButtonText && (\n                    <StyledCopyToClipboardText $codeTheme={theme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <twIgnore>{copyButtonText}</twIgnore>\n                    </StyledCopyToClipboardText>\n                )}\n            </StyledCopyToClipboard>\n        </Popup>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AAA4F,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQ5F,MAAMG,eAAyC,GAAGA,CAAC;EAAEC,cAAc;EAAEC,IAAI;EAAEC;AAAM,CAAC,KAAK;EACnF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAKC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACL,IAAI,CAAC;EAC5C,CAAC;EAED,MAAMM,YAAY,gBACdf,MAAA,CAAAM,OAAA,CAAAU,aAAA;IAAMC,KAAK,EAAE;MAAEC,OAAO,EAAE,OAAO;MAAEC,OAAO,EAAE;IAAM;EAAE,gBAC9CnB,MAAA,CAAAM,OAAA,CAAAU,aAAA,YAAG,UAAW,CACZ,CACT;EAED,oBACIhB,MAAA,CAAAM,OAAA,CAAAU,aAAA,CAAClB,KAAA,CAAAsB,KAAK;IAACC,OAAO,EAAEN;EAAa,gBACzBf,MAAA,CAAAM,OAAA,CAAAU,aAAA,CAACb,gBAAA,CAAAmB,qBAAqB;IAACC,OAAO,EAAEZ;EAAY,gBACxCX,MAAA,CAAAM,OAAA,CAAAU,aAAA,CAAClB,KAAA,CAAA0B,IAAI;IACDC,KAAK,EAAE,CAAC,uBAAuB,CAAE;IACjCC,KAAK,EAAEhB,KAAK,KAAKiB,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG;EAAU,CACtE,CAAC,EACDpB,cAAc,iBACXR,MAAA,CAAAM,OAAA,CAAAU,aAAA,CAACb,gBAAA,CAAA0B,yBAAyB;IAACC,UAAU,EAAEpB;EAAM,gBAGzCV,MAAA,CAAAM,OAAA,CAAAU,aAAA,mBAAWR,cAAyB,CACb,CAEZ,CACpB,CAAC;AAEhB,CAAC;AAEDD,eAAe,CAACwB,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEjCC,eAAe","ignoreList":[]}

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

@@ -82,6 +82,16 @@ const CodeHighlighter = _ref => {
     }
     return code;
   }, [code, language, shouldFormatCode, onFormatError]);
+  useEffect(() => {
+    const elements = document.getElementsByClassName('linenumber');
+    Array.from(elements).forEach(element => {
+      const wrapper = document.createElement('twIgnore');
+      while (element.firstChild) {
+        wrapper.appendChild(element.firstChild);
+      }
+      element.appendChild(wrapper);
+    });
+  }, []);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledCodeHighlighter, {
     $browser: browser?.name,
     $codeTheme: theme,
@@ -90,7 +100,7 @@ const CodeHighlighter = _ref => {
     $codeTheme: theme
   }, /*#__PURE__*/React.createElement(StyledCodeHighlighterFileName, {
     $codeTheme: theme
-  }, formatLanguage(language)), /*#__PURE__*/React.createElement(CopyToClipboard, {
+  }, /*#__PURE__*/React.createElement("twIgnore", null, formatLanguage(language))), /*#__PURE__*/React.createElement(CopyToClipboard, {
     text: code,
     theme: theme,
     copyButtonText: copyButtonText

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","_ref","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","width","setWidth","ref","browser","current","children","preElement","Array","from","find","_ref2","tagName","toLowerCase","scrollWidth","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","config","error","createElement","$browser","name","$codeTheme","text","showLineNumbers","wrapLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { 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     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Callback-Funktion, die aufgerufen wird, wenn das Formatieren des Codes fehlschlägt.\n     */\n    onFormatError?: (error: unknown) => void;\n\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: 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}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = useDevice();\n\n    useEffect(() => {\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    // 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            const config = getParserForLanguage(language);\n\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        return code;\n    }, [code, language, shouldFormatCode, onFormatError]);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter $browser={browser?.name} $codeTheme={theme} ref={ref}>\n                <StyledCodeHighlighterHeader $codeTheme={theme}>\n                    <StyledCodeHighlighterFileName $codeTheme={theme}>\n                        {formatLanguage(language)}\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                    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            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":["useDevice","format","React","useCallback","useEffect","useMemo","useRef","useState","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","CodeHighlighter","_ref","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","width","setWidth","ref","browser","current","children","preElement","Array","from","find","_ref2","tagName","toLowerCase","scrollWidth","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$browser","name","$codeTheme","text","showLineNumbers","wrapLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { 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     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Callback-Funktion, die aufgerufen wird, wenn das Formatieren des Codes fehlschlägt.\n     */\n    onFormatError?: (error: unknown) => void;\n\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: 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}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = useDevice();\n\n    useEffect(() => {\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    // 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            const config = getParserForLanguage(language);\n\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        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('twIgnore');\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 $browser={browser?.name} $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                        <twIgnore>{formatLanguage(language)}</twIgnore>\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                    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            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/copy-to-clipboard/CopyToClipboard.js

@@ -26,7 +26,7 @@ const CopyToClipboard = _ref => {
     color: theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'
   }), copyButtonText && /*#__PURE__*/React.createElement(StyledCopyToClipboardText, {
     $codeTheme: theme
-  }, copyButtonText)));
+  }, /*#__PURE__*/React.createElement("twIgnore", null, copyButtonText))));
 };
 CopyToClipboard.displayName = 'CopyToClipboard';
 export default CopyToClipboard;

package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.js","names":["Icon","Popup","React","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardText","CopyToClipboard","_ref","copyButtonText","text","theme","handleClick","navigator","clipboard","writeText","popupContent","createElement","style","display","padding","content","onClick","icons","color","Dark","$codeTheme","displayName"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, Popup } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport { StyledCopyToClipboard, StyledCopyToClipboardText } from './CopyToClipboard.styles';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n    const handleClick = () => {\n        void navigator.clipboard.writeText(text);\n    };\n\n    const popupContent = (\n        <span style={{ display: 'block', padding: '5px' }}>\n            <p>Kopiert!</p>\n        </span>\n    );\n\n    return (\n        <Popup content={popupContent}>\n            <StyledCopyToClipboard onClick={handleClick}>\n                <Icon\n                    icons={['fa-light fa-clipboard']}\n                    color={theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'}\n                />\n                {copyButtonText && (\n                    <StyledCopyToClipboardText $codeTheme={theme}>\n                        {copyButtonText}\n                    </StyledCopyToClipboardText>\n                )}\n            </StyledCopyToClipboard>\n        </Popup>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,KAAK,QAAQ,yBAAyB;AACrD,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,0BAA0B;AAQ3F,MAAMC,eAAyC,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,cAAc;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAC9E,MAAMI,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAKC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACL,IAAI,CAAC;EAC5C,CAAC;EAED,MAAMM,YAAY,gBACdb,KAAA,CAAAc,aAAA;IAAMC,KAAK,EAAE;MAAEC,OAAO,EAAE,OAAO;MAAEC,OAAO,EAAE;IAAM;EAAE,gBAC9CjB,KAAA,CAAAc,aAAA,YAAG,UAAW,CACZ,CACT;EAED,oBACId,KAAA,CAAAc,aAAA,CAACf,KAAK;IAACmB,OAAO,EAAEL;EAAa,gBACzBb,KAAA,CAAAc,aAAA,CAACZ,qBAAqB;IAACiB,OAAO,EAAEV;EAAY,gBACxCT,KAAA,CAAAc,aAAA,CAAChB,IAAI;IACDsB,KAAK,EAAE,CAAC,uBAAuB,CAAE;IACjCC,KAAK,EAAEb,KAAK,KAAKP,oBAAoB,CAACqB,IAAI,GAAG,SAAS,GAAG;EAAU,CACtE,CAAC,EACDhB,cAAc,iBACXN,KAAA,CAAAc,aAAA,CAACX,yBAAyB;IAACoB,UAAU,EAAEf;EAAM,GACxCF,cACsB,CAEZ,CACpB,CAAC;AAEhB,CAAC;AAEDF,eAAe,CAACoB,WAAW,GAAG,iBAAiB;AAE/C,eAAepB,eAAe","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.js","names":["Icon","Popup","React","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardText","CopyToClipboard","_ref","copyButtonText","text","theme","handleClick","navigator","clipboard","writeText","popupContent","createElement","style","display","padding","content","onClick","icons","color","Dark","$codeTheme","displayName"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, Popup } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport { StyledCopyToClipboard, StyledCopyToClipboardText } from './CopyToClipboard.styles';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n    const handleClick = () => {\n        void navigator.clipboard.writeText(text);\n    };\n\n    const popupContent = (\n        <span style={{ display: 'block', padding: '5px' }}>\n            <p>Kopiert!</p>\n        </span>\n    );\n\n    return (\n        <Popup content={popupContent}>\n            <StyledCopyToClipboard onClick={handleClick}>\n                <Icon\n                    icons={['fa-light fa-clipboard']}\n                    color={theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'}\n                />\n                {copyButtonText && (\n                    <StyledCopyToClipboardText $codeTheme={theme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <twIgnore>{copyButtonText}</twIgnore>\n                    </StyledCopyToClipboardText>\n                )}\n            </StyledCopyToClipboard>\n        </Popup>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,KAAK,QAAQ,yBAAyB;AACrD,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,0BAA0B;AAQ3F,MAAMC,eAAyC,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,cAAc;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAC9E,MAAMI,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAKC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACL,IAAI,CAAC;EAC5C,CAAC;EAED,MAAMM,YAAY,gBACdb,KAAA,CAAAc,aAAA;IAAMC,KAAK,EAAE;MAAEC,OAAO,EAAE,OAAO;MAAEC,OAAO,EAAE;IAAM;EAAE,gBAC9CjB,KAAA,CAAAc,aAAA,YAAG,UAAW,CACZ,CACT;EAED,oBACId,KAAA,CAAAc,aAAA,CAACf,KAAK;IAACmB,OAAO,EAAEL;EAAa,gBACzBb,KAAA,CAAAc,aAAA,CAACZ,qBAAqB;IAACiB,OAAO,EAAEV;EAAY,gBACxCT,KAAA,CAAAc,aAAA,CAAChB,IAAI;IACDsB,KAAK,EAAE,CAAC,uBAAuB,CAAE;IACjCC,KAAK,EAAEb,KAAK,KAAKP,oBAAoB,CAACqB,IAAI,GAAG,SAAS,GAAG;EAAU,CACtE,CAAC,EACDhB,cAAc,iBACXN,KAAA,CAAAc,aAAA,CAACX,yBAAyB;IAACoB,UAAU,EAAEf;EAAM,gBAGzCR,KAAA,CAAAc,aAAA,mBAAWR,cAAyB,CACb,CAEZ,CACpB,CAAC;AAEhB,CAAC;AAEDF,eAAe,CAACoB,WAAW,GAAG,iBAAiB;AAE/C,eAAepB,eAAe","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/code-highlighter",
-    "version": "5.0.0-beta.883",
+    "version": "5.0.0-beta.885",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -68,7 +68,7 @@
         "typescript": "^5.6.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.883",
+        "@chayns-components/core": "^5.0.0-beta.885",
         "@types/react-syntax-highlighter": "^15.5.13",
         "babel-prettier-parser": "^0.10.8",
         "prettier": "^2.8.8",
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d217479b542104863e9644e75559a68416ce5d9a"
+    "gitHead": "77da4abecd17e83781b1c029cdeb1694d0d33244"
 }