@chayns-components/code-highlighter 5.0.0-beta.748 → 5.0.0-beta.752

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

@@ -23,13 +23,14 @@ const CodeHighlighter = ({
   language,
   highlightedLines,
   shouldFormatCode = false,
+  onFormatError,
   shouldShowLineNumbers = false
 }) => {
   const [width, setWidth] = (0, _react.useState)(0);
   const ref = (0, _react.useRef)(null);
   const {
     browser
-  } = (0, _chaynsApi.getDevice)();
+  } = (0, _chaynsApi.useDevice)();
   (0, _react.useEffect)(() => {
     if (ref.current) {
       const {
@@ -76,12 +77,16 @@ const CodeHighlighter = ({
     if (language) {
       const config = (0, _codeHighlighter2.getParserForLanguage)(language);
       if (shouldFormatCode && config) {
-        return (0, _standalone.format)(code, config);
+        try {
+          return (0, _standalone.format)(code, config);
+        } catch (error) {
+          if (typeof onFormatError !== 'undefined') onFormatError(error);
+        }
       }
       return code;
     }
     return code;
-  }, [code, language, shouldFormatCode]);
+  }, [code, language, shouldFormatCode, onFormatError]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighter, {
     $browser: browser === null || browser === void 0 ? void 0 : browser.name,
     $codeTheme: theme,

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","shouldShowLineNumbers","width","setWidth","useState","ref","useRef","browser","getDevice","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","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 { getDevice } 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     * 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    shouldShowLineNumbers = false,\n}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = getDevice();\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                return format(code, config) as unknown as string;\n            }\n\n            return code;\n        }\n\n        return code;\n    }, [code, language, shouldFormatCode]);\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","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":[]}

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

@@ -1,4 +1,4 @@
-import { getDevice } from 'chayns-api';
+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';
@@ -15,13 +15,14 @@ const CodeHighlighter = _ref => {
     language,
     highlightedLines,
     shouldFormatCode = false,
+    onFormatError,
     shouldShowLineNumbers = false
   } = _ref;
   const [width, setWidth] = useState(0);
   const ref = useRef(null);
   const {
     browser
-  } = getDevice();
+  } = useDevice();
   useEffect(() => {
     if (ref.current) {
       const {
@@ -71,12 +72,16 @@ const CodeHighlighter = _ref => {
     if (language) {
       const config = getParserForLanguage(language);
       if (shouldFormatCode && config) {
-        return format(code, config);
+        try {
+          return format(code, config);
+        } catch (error) {
+          if (typeof onFormatError !== 'undefined') onFormatError(error);
+        }
       }
       return code;
     }
     return code;
-  }, [code, language, shouldFormatCode]);
+  }, [code, language, shouldFormatCode, onFormatError]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledCodeHighlighter, {
     $browser: browser?.name,
     $codeTheme: theme,

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

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["getDevice","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","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","createElement","$browser","name","$codeTheme","text","showLineNumbers","wrapLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { getDevice } 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     * 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    shouldShowLineNumbers = false,\n}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = getDevice();\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                return format(code, config) as unknown as string;\n            }\n\n            return code;\n        }\n\n        return code;\n    }, [code, language, shouldFormatCode]);\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","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":[]}

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

@@ -23,6 +23,10 @@ export type CodeHighlighterProps = {
      * Whether the code should be formatted with prettier.
      */
     shouldFormatCode?: boolean;
+    /**
+     * Callback-Funktion, die aufgerufen wird, wenn das Formatieren des Codes fehlschlägt.
+     */
+    onFormatError?: (error: unknown) => void;
     /**
      * Whether the line numbers should be displayed.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/code-highlighter",
-    "version": "5.0.0-beta.748",
+    "version": "5.0.0-beta.752",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -66,7 +66,7 @@
         "typescript": "^5.5.4"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.748",
+        "@chayns-components/core": "^5.0.0-beta.750",
         "@types/react-syntax-highlighter": "^15.5.13",
         "babel-prettier-parser": "^0.10.8",
         "prettier": "^2.8.8",
@@ -82,5 +82,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6781c8233c309004e0ff239d9278137494f32bf5"
+    "gitHead": "8e5393bd3de375c6809f46db1435f3c00ad2f63e"
 }