@chayns-components/code-highlighter 5.0.0-beta.1066 → 5.0.0-beta.1068

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

@@ -33,17 +33,24 @@ const CodeHighlighter = ({
     browser
   } = (0, _chaynsApi.useDevice)();
   (0, _react.useEffect)(() => {
-    if (ref.current) {
-      const {
-        children
-      } = ref.current;
-      const preElement = Array.from(children).find(({
-        tagName
-      }) => tagName.toLowerCase() === 'pre');
-      if (preElement) {
-        setWidth(preElement.scrollWidth);
+    const handleResize = () => {
+      if (ref.current) {
+        const {
+          children
+        } = ref.current;
+        const preElement = Array.from(children).find(({
+          tagName
+        }) => tagName.toLowerCase() === 'pre');
+        if (preElement) {
+          setWidth(preElement.scrollWidth);
+        }
       }
-    }
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
   }, []);
 
   // function to style highlighted code

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","shouldWrapLines","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","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        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            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":["_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","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":";;;;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,uBAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,gBAAA,GAAAN,OAAA;AAKA,IAAAO,iBAAA,GAAAP,OAAA;AACA,IAAAQ,gBAAA,GAAAR,OAAA;AAKA,IAAAS,gBAAA,GAAAC,sBAAA,CAAAV,OAAA;AAAkE,SAAAU,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AA2ClE,MAAMW,eAAyC,GAAGA,CAAC;EAC/CC,KAAK,GAAGC,qCAAoB,CAACC,IAAI;EACjCC,IAAI;EACJC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChBC,gBAAgB,GAAG,KAAK;EACxBC,aAAa;EACbC,qBAAqB,GAAG,KAAK;EAC7BC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAErC,MAAMC,GAAG,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAExC,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACvB,IAAIL,GAAG,CAACM,OAAO,EAAE;QACb,MAAM;UAAEC;QAAS,CAAC,GAAGP,GAAG,CAACM,OAAO;QAEhC,MAAME,UAAU,GAAGC,KAAK,CAACC,IAAI,CAACH,QAAQ,CAAC,CAACI,IAAI,CACxC,CAAC;UAAEC;QAAQ,CAAC,KAAKA,OAAO,CAACC,WAAW,CAAC,CAAC,KAAK,KAC/C,CAAC;QAED,IAAIL,UAAU,EAAE;UACZV,QAAQ,CAACU,UAAU,CAACM,WAAW,CAAC;QACpC;MACJ;IACJ,CAAC;IAEDT,YAAY,CAAC,CAAC;IAEdU,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEX,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTU,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEZ,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMa,WAAW,GAAG,IAAAC,kBAAW,EAC1BC,UAAkB,IAAK;IACpB,IAAIC,KAAK,GAAG;MACRC,eAAe,EAAE,MAAM;MACvBC,OAAO,EAAE,OAAO;MAChBC,YAAY,EAAE,KAAK;MACnB3B,KAAK,EAAEA,KAAK,GAAG;IACnB,CAAC;IAED,IAAIL,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEiC,KAAK,IAAIjC,gBAAgB,CAACiC,KAAK,CAACC,QAAQ,CAACN,UAAU,CAAC,EAAE;MACxEC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAI9B,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEmC,OAAO,IAAInC,gBAAgB,CAACmC,OAAO,CAACD,QAAQ,CAACN,UAAU,CAAC,EAAE;MACnFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAI9B,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEoC,MAAM,IAAIpC,gBAAgB,CAACoC,MAAM,CAACF,QAAQ,CAACN,UAAU,CAAC,EAAE;MACjFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD;IAEA,OAAO;MAAED;IAAM,CAAC;EACpB,CAAC,EACD,CAAC7B,gBAAgB,EAAEK,KAAK,CAC5B,CAAC;EAED,MAAMgC,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,IAAIvC,QAAQ,EAAE;MACV,KAAK,IAAAwC,sCAAoB,EAACxC,QAAQ,CAAC,CAACyC,IAAI,CAAEC,MAAM,IAAK;QACjD,IAAIxC,gBAAgB,IAAIwC,MAAM,EAAE;UAC5B,IAAI;YACA,OAAO,IAAAC,kBAAM,EAAC7C,IAAI,EAAE4C,MAAM,CAAC;UAC/B,CAAC,CAAC,OAAOE,KAAK,EAAE;YACZ,IAAI,OAAOzC,aAAa,KAAK,WAAW,EAAEA,aAAa,CAACyC,KAAK,CAAC;UAClE;QACJ;QAEA,OAAO9C,IAAI;MACf,CAAC,CAAC;IACN;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAACA,IAAI,EAAEE,QAAQ,EAAEE,gBAAgB,EAAEC,aAAa,CAAC,CAAC;EAErD,IAAAU,gBAAS,EAAC,MAAM;IACZ,MAAMgC,QAAQ,GAAGC,QAAQ,CAACC,sBAAsB,CAAC,YAAY,CAAC;IAE9D7B,KAAK,CAACC,IAAI,CAAC0B,QAAQ,CAAC,CAACG,OAAO,CAAEC,OAAO,IAAK;MACtC,MAAMC,OAAO,GAAGJ,QAAQ,CAACK,aAAa,CAAC,WAAW,CAAC;MAEnD,OAAOF,OAAO,CAACG,UAAU,EAAE;QACvBF,OAAO,CAACG,WAAW,CAACJ,OAAO,CAACG,UAAU,CAAC;MAC3C;MAEAH,OAAO,CAACI,WAAW,CAACH,OAAO,CAAC;IAChC,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAX,cAAO,EACV,mBACI1E,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAChF,gBAAA,CAAAmF,qBAAqB;IAClBC,QAAQ,EAAE5C,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE6C,IAAoB;IACvCC,gBAAgB,EAAEpD,eAAgB;IAClCqD,UAAU,EAAE/D,KAAM;IAClBc,GAAG,EAAEA;EAAI,gBAET5C,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAChF,gBAAA,CAAAwF,2BAA2B;IAACD,UAAU,EAAE/D;EAAM,gBAC3C9B,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAChF,gBAAA,CAAAyF,6BAA6B;IAACF,UAAU,EAAE/D;EAAM,gBAG7C9B,MAAA,CAAAW,OAAA,CAAA2E,aAAA,oBAAY,IAAAU,gCAAc,EAAC7D,QAAQ,CAAa,CACrB,CAAC,eAChCnC,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC/E,gBAAA,CAAAI,OAAe;IAACsF,IAAI,EAAEhE,IAAK;IAACH,KAAK,EAAEA,KAAM;IAACI,cAAc,EAAEA;EAAe,CAAE,CACnD,CAAC,eAC9BlC,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAACpF,uBAAA,CAAAgG,eAAiB;IACd/D,QAAQ,EAAEA,QAAQ,IAAI,EAAG;IACzBgE,eAAe,EAAE5D,qBAAsB;IACvC0B,KAAK,EAAEnC,KAAK,KAAKC,qCAAoB,CAACC,IAAI,GAAGoE,cAAO,GAAGC,eAAS;IAChEC,SAAS;IACTC,aAAa,EAAE/D,eAAgB;IAC/BgE,SAAS,EAAE1C;EAAY,GAEtBW,aACc,CACA,CAC1B,EACD,CACI3B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE6C,IAAI,EACb7D,KAAK,EACLK,QAAQ,EACRF,IAAI,EACJC,cAAc,EACdK,qBAAqB,EACrBC,eAAe,EACfsB,WAAW,EACXW,aAAa,CAErB,CAAC;AACL,CAAC;AAED5C,eAAe,CAAC4E,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhG,OAAA,GAEjCkB,eAAe","ignoreList":[]}

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

@@ -25,20 +25,27 @@ const CodeHighlighter = _ref => {
     browser
   } = useDevice();
   useEffect(() => {
-    if (ref.current) {
-      const {
-        children
-      } = ref.current;
-      const preElement = Array.from(children).find(_ref2 => {
-        let {
-          tagName
-        } = _ref2;
-        return tagName.toLowerCase() === 'pre';
-      });
-      if (preElement) {
-        setWidth(preElement.scrollWidth);
+    const handleResize = () => {
+      if (ref.current) {
+        const {
+          children
+        } = ref.current;
+        const preElement = Array.from(children).find(_ref2 => {
+          let {
+            tagName
+          } = _ref2;
+          return tagName.toLowerCase() === 'pre';
+        });
+        if (preElement) {
+          setWidth(preElement.scrollWidth);
+        }
       }
-    }
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
   }, []);
 
   // function to style highlighted code

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","shouldWrapLines","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","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        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            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":["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","shouldWrapLines","width","setWidth","ref","browser","handleResize","current","children","preElement","Array","from","find","_ref2","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":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/code-highlighter",
-    "version": "5.0.0-beta.1066",
+    "version": "5.0.0-beta.1068",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -68,7 +68,7 @@
         "typescript": "^5.8.2"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.1066",
+        "@chayns-components/core": "^5.0.0-beta.1068",
         "@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": "124b9f31b94a257a8a1c5b1696998a99fc5dcb3f"
+    "gitHead": "4170c1df8ef1826ffbb8e297841f92fc54b66999"
 }