@chayns-components/code-highlighter 5.5.3 → 5.5.8

package/AGENTS.md

@@ -251,6 +251,43 @@ import { CodeHighlighter } from '@chayns-components/code-highlighter';
 />
 ```
 
+#### Sticky Header
+
+```tsx
+<CodeHighlighter
+    copyButtonText={'Code kopieren'}
+    shouldShowLineNumbers
+    language={'typescript'}
+    code={Array.from({ length: 100 }, (_, index) => `console.log('Zeile ${index + 1}');`).join(
+            '\n',
+        )}
+/>
+```
+
+#### Light
+
+```tsx
+<CodeHighlighter
+    copyButtonText={'Code kopieren'}
+    shouldShowLineNumbers
+    language={'tsx'}
+    code={General.args?.code}
+    theme={CodeHighlighterTheme.Light}
+/>
+```
+
+#### Dark
+
+```tsx
+<CodeHighlighter
+    copyButtonText={'Code kopieren'}
+    shouldShowLineNumbers
+    language={'tsx'}
+    code={General.args?.code}
+    theme={CodeHighlighterTheme.Dark}
+/>
+```
+
 ### Props
 
 No prop documentation available.

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

@@ -8,6 +8,7 @@ var _standalone = require("prettier/standalone");
 var _react = _interopRequireWildcard(require("react"));
 var _reactSyntaxHighlighter = require("react-syntax-highlighter");
 var _prism = require("react-syntax-highlighter/dist/esm/styles/prism");
+var _core = require("@chayns-components/core");
 var _codeHighlighter = require("../../types/codeHighlighter");
 var _codeHighlighter2 = require("../../utils/codeHighlighter");
 var _CodeHighlighter = require("./CodeHighlighter.styles");
@@ -24,7 +25,7 @@ const addScrollbarClassToPre = ({
   preElement.classList.add(className);
 };
 const CodeHighlighter = ({
-  theme = _codeHighlighter.CodeHighlighterTheme.Dark,
+  theme,
   code,
   copyButtonText,
   language,
@@ -34,8 +35,11 @@ const CodeHighlighter = ({
   shouldShowLineNumbers = false,
   shouldWrapLines
 }) => {
+  const colorScheme = (0, _core.useColorScheme)();
   const [width, setWidth] = (0, _react.useState)(0);
+  const [formattedCode, setFormattedCode] = (0, _react.useState)(code);
   const ref = (0, _react.useRef)(null);
+  const resolvedTheme = theme ?? ((colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.theme.colorMode) === 'dark' ? _codeHighlighter.CodeHighlighterTheme.Dark : _codeHighlighter.CodeHighlighterTheme.Light);
   (0, _react.useEffect)(() => {
     addScrollbarClassToPre({
       root: ref.current,
@@ -94,21 +98,32 @@ const CodeHighlighter = ({
   const lineNumberStyle = (0, _react.useMemo)(() => ({
     WebkitUserSelect: 'none'
   }), []);
-  const formattedCode = (0, _react.useMemo)(() => {
-    if (language) {
-      void (0, _codeHighlighter2.getParserForLanguage)(language).then(config => {
-        if (shouldFormatCode && config) {
-          try {
-            return (0, _standalone.format)(code, config);
-          } catch (error) {
-            if (typeof onFormatError !== 'undefined') onFormatError(error);
-          }
-        }
-        return code;
-      });
+  const syntaxHighlighterStyle = (0, _react.useMemo)(() => ({
+    padding: '0 15px 15px'
+  }), []);
+  (0, _react.useEffect)(() => {
+    let isCurrent = true;
+    if (!shouldFormatCode) {
+      setFormattedCode(code);
+      return () => {
+        isCurrent = false;
+      };
     }
-    return code;
-  }, [code, language, shouldFormatCode, onFormatError]);
+    void (0, _codeHighlighter2.getParserForLanguage)(language).then(config => {
+      if (!config || !isCurrent) {
+        return;
+      }
+      try {
+        setFormattedCode((0, _standalone.format)(code, config));
+      } catch (error) {
+        onFormatError === null || onFormatError === void 0 || onFormatError(error);
+        setFormattedCode(code);
+      }
+    });
+    return () => {
+      isCurrent = false;
+    };
+  }, [code, language, onFormatError, shouldFormatCode]);
   (0, _react.useEffect)(() => {
     const elements = document.getElementsByClassName('linenumber');
     Array.from(elements).forEach(element => {
@@ -121,25 +136,26 @@ const CodeHighlighter = ({
   }, []);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighter, {
     $shouldWrapLines: shouldWrapLines,
-    $codeTheme: theme,
+    $codeTheme: resolvedTheme,
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighterHeader, {
-    $codeTheme: theme
+    $codeTheme: resolvedTheme
   }, /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighterFileName, {
-    $codeTheme: theme
-  }, /*#__PURE__*/_react.default.createElement("tw-ignore", null, (0, _codeHighlighter2.formatLanguage)(language))), /*#__PURE__*/_react.default.createElement(_CopyToClipboard.default, {
+    $codeTheme: resolvedTheme
+  }, /*#__PURE__*/_react.default.createElement("tw-ignore", null, (0, _codeHighlighter2.formatLanguage)(language)))), /*#__PURE__*/_react.default.createElement(_CopyToClipboard.default, {
     text: code,
-    theme: theme,
+    theme: resolvedTheme,
     copyButtonText: copyButtonText
-  })), /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.PrismAsyncLight, {
+  }), /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.Prism, {
+    customStyle: syntaxHighlighterStyle,
     language: language ?? '',
     lineNumberStyle: lineNumberStyle,
     showLineNumbers: shouldShowLineNumbers,
-    style: theme === _codeHighlighter.CodeHighlighterTheme.Dark ? _prism.oneDark : _prism.oneLight,
+    style: resolvedTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? _prism.oneDark : _prism.oneLight,
     wrapLines: true,
     wrapLongLines: shouldWrapLines,
     lineProps: lineWrapper
-  }, formattedCode)), [shouldWrapLines, theme, language, code, copyButtonText, lineNumberStyle, shouldShowLineNumbers, lineWrapper, formattedCode]);
+  }, formattedCode)), [shouldWrapLines, resolvedTheme, language, code, copyButtonText, lineNumberStyle, syntaxHighlighterStyle, shouldShowLineNumbers, lineWrapper, formattedCode]);
 };
 CodeHighlighter.displayName = 'CodeHighlighter';
 var _default = exports.default = CodeHighlighter;

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

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","useState","ref","useRef","useEffect","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","useMemo","WebkitUserSelect","formattedCode","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","wrapLongLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme = CodeHighlighterTheme.Dark,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const [width, setWidth] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const formattedCode = useMemo(() => {\n        if (language) {\n            void getParserForLanguage(language).then((config) => {\n                if (shouldFormatCode && config) {\n                    try {\n                        return format(code, config) as unknown as string;\n                    } catch (error) {\n                        if (typeof onFormatError !== 'undefined') onFormatError(error);\n                    }\n                }\n\n                return code;\n            });\n        }\n\n        return code;\n    }, [code, language, shouldFormatCode, onFormatError]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter $shouldWrapLines={shouldWrapLines} $codeTheme={theme} ref={ref}>\n                <StyledCodeHighlighterHeader $codeTheme={theme}>\n                    <StyledCodeHighlighterFileName $codeTheme={theme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                    <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n                </StyledCodeHighlighterHeader>\n                <SyntaxHighlighter\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\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            shouldWrapLines,\n            theme,\n            language,\n            code,\n            copyButtonText,\n            lineNumberStyle,\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":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_core","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","colorScheme","useColorScheme","width","setWidth","useState","formattedCode","setFormattedCode","ref","useRef","resolvedTheme","colorMode","CodeHighlighterTheme","Dark","Light","useEffect","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","useMemo","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","Prism","customStyle","showLineNumbers","oneDark","oneLight","wrapLines","wrapLongLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useColorScheme } from '@chayns-components/core';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const colorScheme = useColorScheme();\n\n    const [width, setWidth] = useState(0);\n    const [formattedCode, setFormattedCode] = useState(code);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const resolvedTheme =\n        theme ??\n        (colorScheme?.theme.colorMode === 'dark'\n            ? CodeHighlighterTheme.Dark\n            : CodeHighlighterTheme.Light);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const syntaxHighlighterStyle = useMemo(\n        () => ({\n            padding: '0 15px 15px',\n        }),\n        [],\n    );\n\n    useEffect(() => {\n        let isCurrent = true;\n\n        if (!shouldFormatCode) {\n            setFormattedCode(code);\n\n            return () => {\n                isCurrent = false;\n            };\n        }\n\n        void getParserForLanguage(language).then((config) => {\n            if (!config || !isCurrent) {\n                return;\n            }\n\n            try {\n                setFormattedCode(format(code, config) as unknown as string);\n            } catch (error) {\n                onFormatError?.(error);\n                setFormattedCode(code);\n            }\n        });\n\n        return () => {\n            isCurrent = false;\n        };\n    }, [code, language, onFormatError, shouldFormatCode]);\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                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={resolvedTheme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={resolvedTheme}>\n                    <StyledCodeHighlighterFileName $codeTheme={resolvedTheme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                </StyledCodeHighlighterHeader>\n                <CopyToClipboard\n                    text={code}\n                    theme={resolvedTheme}\n                    copyButtonText={copyButtonText}\n                />\n                <SyntaxHighlighter\n                    customStyle={syntaxHighlighterStyle}\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            shouldWrapLines,\n            resolvedTheme,\n            language,\n            code,\n            copyButtonText,\n            lineNumberStyle,\n            syntaxHighlighterStyle,\n            shouldShowLineNumbers,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":";;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,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,SAAAT,wBAAAS,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAb,uBAAA,YAAAA,CAAAS,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAOlE,MAAMgB,sBAAsB,GAAGA,CAAC;EAAEC,IAAI;EAAEC;AAAoC,CAAC,KAAK;EAC9E,IAAI,CAACD,IAAI,EAAE;EAEX,MAAME,UAAU,GAAGF,IAAI,CAACG,aAAa,CAAC,KAAK,CAAC;EAC5C,IAAI,CAACD,UAAU,EAAE;EAEjBA,UAAU,CAACE,SAAS,CAACC,GAAG,CAACJ,SAAS,CAAC;AACvC,CAAC;AA2CD,MAAMK,eAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,IAAI;EACJC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChBC,gBAAgB,GAAG,KAAK;EACxBC,aAAa;EACbC,qBAAqB,GAAG,KAAK;EAC7BC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAG,IAAAC,oBAAc,EAAC,CAAC;EAEpC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EACrC,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAF,eAAQ,EAACZ,IAAI,CAAC;EAExD,MAAMe,GAAG,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAExC,MAAMC,aAAa,GACflB,KAAK,KACJ,CAAAS,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAET,KAAK,CAACmB,SAAS,MAAK,MAAM,GAClCC,qCAAoB,CAACC,IAAI,GACzBD,qCAAoB,CAACE,KAAK,CAAC;EAErC,IAAAC,gBAAS,EAAC,MAAM;IACZ/B,sBAAsB,CAAC;MAAEC,IAAI,EAAEuB,GAAG,CAACQ,OAAO;MAAE9B,SAAS,EAAE;IAAmB,CAAC,CAAC;EAChF,CAAC,EAAE,EAAE,CAAC;EAEN,IAAA6B,gBAAS,EAAC,MAAM;IACZ,MAAME,YAAY,GAAGA,CAAA,KAAM;MACvB,IAAIT,GAAG,CAACQ,OAAO,EAAE;QACb,MAAM;UAAEE;QAAS,CAAC,GAAGV,GAAG,CAACQ,OAAO;QAEhC,MAAM7B,UAAU,GAAGgC,KAAK,CAACC,IAAI,CAACF,QAAQ,CAAC,CAACG,IAAI,CACxC,CAAC;UAAEC;QAAQ,CAAC,KAAKA,OAAO,CAACC,WAAW,CAAC,CAAC,KAAK,KAC/C,CAAC;QAED,IAAIpC,UAAU,EAAE;UACZiB,QAAQ,CAACjB,UAAU,CAACqC,WAAW,CAAC;QACpC;MACJ;IACJ,CAAC;IAEDP,YAAY,CAAC,CAAC;IAEdQ,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTQ,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEV,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMW,WAAW,GAAG,IAAAC,kBAAW,EAC1BC,UAAkB,IAAK;IACpB,IAAIC,KAAK,GAAG;MACRC,eAAe,EAAE,MAAM;MACvBC,OAAO,EAAE,OAAO;MAChBC,YAAY,EAAE,KAAK;MACnB/B,KAAK,EAAEA,KAAK,GAAG;IACnB,CAAC;IAED,IAAIP,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEuC,KAAK,IAAIvC,gBAAgB,CAACuC,KAAK,CAACC,QAAQ,CAACN,UAAU,CAAC,EAAE;MACxEC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAIpC,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEyC,OAAO,IAAIzC,gBAAgB,CAACyC,OAAO,CAACD,QAAQ,CAACN,UAAU,CAAC,EAAE;MACnFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAIpC,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAE0C,MAAM,IAAI1C,gBAAgB,CAAC0C,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,CAACnC,gBAAgB,EAAEO,KAAK,CAC5B,CAAC;EAED,MAAMoC,eAAe,GAAG,IAAAC,cAAO,EAC3B,OAAO;IACHC,gBAAgB,EAAE;EACtB,CAAC,CAAC,EACF,EACJ,CAAC;EAED,MAAMC,sBAAsB,GAAG,IAAAF,cAAO,EAClC,OAAO;IACHG,OAAO,EAAE;EACb,CAAC,CAAC,EACF,EACJ,CAAC;EAED,IAAA5B,gBAAS,EAAC,MAAM;IACZ,IAAI6B,SAAS,GAAG,IAAI;IAEpB,IAAI,CAAC/C,gBAAgB,EAAE;MACnBU,gBAAgB,CAACd,IAAI,CAAC;MAEtB,OAAO,MAAM;QACTmD,SAAS,GAAG,KAAK;MACrB,CAAC;IACL;IAEA,KAAK,IAAAC,sCAAoB,EAAClD,QAAQ,CAAC,CAACmD,IAAI,CAAEC,MAAM,IAAK;MACjD,IAAI,CAACA,MAAM,IAAI,CAACH,SAAS,EAAE;QACvB;MACJ;MAEA,IAAI;QACArC,gBAAgB,CAAC,IAAAyC,kBAAM,EAACvD,IAAI,EAAEsD,MAAM,CAAsB,CAAC;MAC/D,CAAC,CAAC,OAAOE,KAAK,EAAE;QACZnD,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAGmD,KAAK,CAAC;QACtB1C,gBAAgB,CAACd,IAAI,CAAC;MAC1B;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACTmD,SAAS,GAAG,KAAK;IACrB,CAAC;EACL,CAAC,EAAE,CAACnD,IAAI,EAAEE,QAAQ,EAAEG,aAAa,EAAED,gBAAgB,CAAC,CAAC;EAErD,IAAAkB,gBAAS,EAAC,MAAM;IACZ,MAAMmC,QAAQ,GAAGC,QAAQ,CAACC,sBAAsB,CAAC,YAAY,CAAC;IAE9DjC,KAAK,CAACC,IAAI,CAAC8B,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,IAAAf,cAAO,EACV,mBACIrF,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAAC9F,gBAAA,CAAAiG,qBAAqB;IAClBC,gBAAgB,EAAE5D,eAAgB;IAClC6D,UAAU,EAAEnD,aAAc;IAC1BF,GAAG,EAAEA;EAAI,gBAETrD,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAAC9F,gBAAA,CAAAoG,2BAA2B;IAACD,UAAU,EAAEnD;EAAc,gBACnDvD,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAAC9F,gBAAA,CAAAqG,6BAA6B;IAACF,UAAU,EAAEnD;EAAc,gBAGrDvD,MAAA,CAAAY,OAAA,CAAAyF,aAAA,oBAAY,IAAAQ,gCAAc,EAACrE,QAAQ,CAAa,CACrB,CACN,CAAC,eAC9BxC,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAAC7F,gBAAA,CAAAI,OAAe;IACZkG,IAAI,EAAExE,IAAK;IACXD,KAAK,EAAEkB,aAAc;IACrBhB,cAAc,EAAEA;EAAe,CAClC,CAAC,eACFvC,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAACnG,uBAAA,CAAA6G,KAAiB;IACdC,WAAW,EAAEzB,sBAAuB;IACpC/C,QAAQ,EAAEA,QAAQ,IAAI,EAAG;IACzB4C,eAAe,EAAEA,eAAgB;IACjC6B,eAAe,EAAErE,qBAAsB;IACvCgC,KAAK,EAAErB,aAAa,KAAKE,qCAAoB,CAACC,IAAI,GAAGwD,cAAO,GAAGC,eAAS;IACxEC,SAAS;IACTC,aAAa,EAAExE,eAAgB;IAC/ByE,SAAS,EAAE7C;EAAY,GAEtBtB,aACc,CACA,CAC1B,EACD,CACIN,eAAe,EACfU,aAAa,EACbf,QAAQ,EACRF,IAAI,EACJC,cAAc,EACd6C,eAAe,EACfG,sBAAsB,EACtB3C,qBAAqB,EACrB6B,WAAW,EACXtB,aAAa,CAErB,CAAC;AACL,CAAC;AAEDf,eAAe,CAACmF,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7G,OAAA,GAEjCwB,eAAe","ignoreList":[]}

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

@@ -13,12 +13,17 @@ const StyledCodeHighlighter = exports.StyledCodeHighlighter = _styledComponents.
   $codeTheme
 }) => $codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};
     border-radius: 8px;
+    --code-highlighter-action-size: 32px;
+    --code-highlighter-action-inset: 8px;
     padding-bottom: 6px;
+    padding-top: calc(
+        var(--code-highlighter-action-size) + var(--code-highlighter-action-inset) * 2
+    );
 
     pre {
         margin: 0 !important;
         overflow: auto;
-        padding: 15px;
+        padding: 0 15px 15px;
         line-height: 1.5;
 
         code {
@@ -36,12 +41,9 @@ const StyledCodeHighlighter = exports.StyledCodeHighlighter = _styledComponents.
 const StyledCodeHighlighterHeader = exports.StyledCodeHighlighterHeader = _styledComponents.default.div`
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid
-        ${({
-  $codeTheme
-}) => $codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};
-    padding: 4px 12px;
+    padding: 0 12px;
+    height: 0;
+    transform: translateY(-26px);
 `;
 const StyledCodeHighlighterFileName = exports.StyledCodeHighlighterFileName = _styledComponents.default.span`
     color: ${({

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

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCodeHighlighter","exports","styled","div","$codeTheme","CodeHighlighterTheme","Dark","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n    margin: 4px 0;\n    background-color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n    border-radius: 8px;\n    padding-bottom: 6px;\n\n    pre {\n        margin: 0 !important;\n        overflow: auto;\n        padding: 15px;\n        line-height: 1.5;\n\n        code {\n            white-space: ${({ $shouldWrapLines }) =>\n                $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n        }\n    }\n\n    // Fixes display of tables in code highlighter for markdown.\n    .language-markdown .token.table {\n        display: inline;\n    }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 1px solid\n        ${({ $codeTheme }) => ($codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n    padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAmE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAO5D,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,CAAC;EAAEC;AAAiB,CAAC,KAChCA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAU;AAChG;AACA,CAAC;AAMM,MAAMG,6BAA6B,GAAAR,OAAA,CAAAQ,6BAAA,GAAGP,yBAAM,CAACQ,IAAwC;AAC5F,aAAa,CAAC;EAAEN;AAAW,CAAC,KACpBA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCodeHighlighter","exports","styled","div","$codeTheme","CodeHighlighterTheme","Dark","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n    margin: 4px 0;\n    background-color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n    border-radius: 8px;\n    --code-highlighter-action-size: 32px;\n    --code-highlighter-action-inset: 8px;\n    padding-bottom: 6px;\n    padding-top: calc(\n        var(--code-highlighter-action-size) + var(--code-highlighter-action-inset) * 2\n    );\n\n    pre {\n        margin: 0 !important;\n        overflow: auto;\n        padding: 0 15px 15px;\n        line-height: 1.5;\n\n        code {\n            white-space: ${({ $shouldWrapLines }) =>\n                $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n        }\n    }\n\n    // Fixes display of tables in code highlighter for markdown.\n    .language-markdown .token.table {\n        display: inline;\n    }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    height: 0;\n    transform: translateY(-26px);\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAmE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAO5D,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,CAAC;EAAEC;AAAiB,CAAC,KAChCA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMM,6BAA6B,GAAAR,OAAA,CAAAQ,6BAAA,GAAGP,yBAAM,CAACQ,IAAwC;AAC5F,aAAa,CAAC;EAAEN;AAAW,CAAC,KACpBA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _vitest = require("vitest");
+var _codeHighlighter = require("../../types/codeHighlighter");
+var _CodeHighlighter = _interopRequireDefault(require("./CodeHighlighter"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+_vitest.vi.mock('@chayns-components/core', () => ({
+  Icon: () => /*#__PURE__*/_react2.default.createElement("span", null),
+  SharingContextMenu: ({
+    children
+  }) => children,
+  useColorScheme: () => undefined
+}));
+_vitest.vi.mock('@chayns-components/textstring', () => ({
+  ttsToITextString: value => value,
+  useTextstringValue: ({
+    textstring
+  }) => textstring.fallback
+}));
+_vitest.vi.mock('chayns-api', () => ({
+  DialogType: {
+    TOAST: 1
+  },
+  ToastType: {
+    ERROR: 4,
+    SUCCESS: 2
+  },
+  createDialog: _vitest.vi.fn(() => ({
+    open: _vitest.vi.fn()
+  }))
+}));
+(0, _vitest.describe)('CodeHighlighter', () => {
+  (0, _vitest.it)('keeps the copy operation and renders sticky actions', () => {
+    const writeText = _vitest.vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();
+    const {
+      container
+    } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_CodeHighlighter.default, {
+      code: "const value = true;",
+      copyButtonText: "Copy code",
+      language: "typescript",
+      shouldShowLineNumbers: true,
+      theme: _codeHighlighter.CodeHighlighterTheme.Dark
+    }));
+    _react.fireEvent.click(_react.screen.getByRole('button', {
+      name: 'Copy code'
+    }));
+    (0, _vitest.expect)(writeText).toHaveBeenCalledWith('const value = true;');
+    (0, _vitest.expect)(container.querySelector('pre')).toHaveStyle({
+      overflow: 'auto',
+      padding: '0px 15px 15px'
+    });
+    (0, _vitest.expect)(container.firstChild).toHaveStyle({
+      backgroundColor: 'rgb(40, 44, 52)'
+    });
+  });
+  (0, _vitest.it)('formats code before highlighting when requested', async () => {
+    const {
+      container
+    } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_CodeHighlighter.default, {
+      code: "const value={label:'Ada'};",
+      language: "typescript",
+      shouldFormatCode: true,
+      theme: _codeHighlighter.CodeHighlighterTheme.Light
+    }));
+    await (0, _react.waitFor)(() => {
+      (0, _vitest.expect)(container.querySelector('pre')).toHaveTextContent("const value = { label: 'Ada' };");
+    });
+    (0, _vitest.expect)(container.querySelector('pre span')).toBeInTheDocument();
+    (0, _vitest.expect)(container.firstChild).toHaveStyle({
+      backgroundColor: 'rgb(250, 250, 250)'
+    });
+  });
+});
+//# sourceMappingURL=CodeHighlighter.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlighter.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_codeHighlighter","_CodeHighlighter","e","__esModule","default","vi","mock","Icon","createElement","SharingContextMenu","children","useColorScheme","undefined","ttsToITextString","value","useTextstringValue","textstring","fallback","DialogType","TOAST","ToastType","ERROR","SUCCESS","createDialog","fn","open","describe","it","writeText","spyOn","navigator","clipboard","mockResolvedValue","container","render","code","copyButtonText","language","shouldShowLineNumbers","theme","CodeHighlighterTheme","Dark","fireEvent","click","screen","getByRole","name","expect","toHaveBeenCalledWith","querySelector","toHaveStyle","overflow","padding","firstChild","backgroundColor","shouldFormatCode","Light","waitFor","toHaveTextContent","toBeInTheDocument"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it, vi } from 'vitest';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\nimport CodeHighlighter from './CodeHighlighter';\n\nvi.mock('@chayns-components/core', () => ({\n    Icon: () => <span />,\n    SharingContextMenu: ({ children }: { children: React.ReactNode }) => children,\n    useColorScheme: () => undefined,\n}));\n\nvi.mock('@chayns-components/textstring', () => ({\n    ttsToITextString: (value: unknown) => value,\n    useTextstringValue: ({ textstring }: { textstring: { fallback: string } }) =>\n        textstring.fallback,\n}));\n\nvi.mock('chayns-api', () => ({\n    DialogType: { TOAST: 1 },\n    ToastType: { ERROR: 4, SUCCESS: 2 },\n    createDialog: vi.fn(() => ({ open: vi.fn() })),\n}));\n\ndescribe('CodeHighlighter', () => {\n    it('keeps the copy operation and renders sticky actions', () => {\n        const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value = true;\"\n                copyButtonText=\"Copy code\"\n                language=\"typescript\"\n                shouldShowLineNumbers\n                theme={CodeHighlighterTheme.Dark}\n            />,\n        );\n\n        fireEvent.click(screen.getByRole('button', { name: 'Copy code' }));\n\n        expect(writeText).toHaveBeenCalledWith('const value = true;');\n        expect(container.querySelector('pre')).toHaveStyle({\n            overflow: 'auto',\n            padding: '0px 15px 15px',\n        });\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(40, 44, 52)' });\n    });\n\n    it('formats code before highlighting when requested', async () => {\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value={label:'Ada'};\"\n                language=\"typescript\"\n                shouldFormatCode\n                theme={CodeHighlighterTheme.Light}\n            />,\n        );\n\n        await waitFor(() => {\n            expect(container.querySelector('pre')).toHaveTextContent(\n                \"const value = { label: 'Ada' };\",\n            );\n        });\n        expect(container.querySelector('pre span')).toBeInTheDocument();\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(250, 250, 250)' });\n    });\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -5,41 +5,94 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _core = require("@chayns-components/core");
-var _react = _interopRequireDefault(require("react"));
+var _textstring = require("@chayns-components/textstring");
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireWildcard(require("react"));
 var _codeHighlighter = require("../../../types/codeHighlighter");
 var _CopyToClipboard = require("./CopyToClipboard.styles");
-var _textstring = require("@chayns-components/textstring");
 var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const STICKY_ACTION_OFFSET = 8;
 const CopyToClipboard = ({
   copyButtonText,
   text,
   theme
 }) => {
-  const handleClick = () => {
-    void navigator.clipboard.writeText(text);
-  };
-  const popupContent = /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
-    libraryName: "@chayns-components-code-highlighter"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      display: 'block',
-      padding: '5px'
+  const [isActionGroupSticky, setIsActionGroupSticky] = (0, _react.useState)(false);
+  const actionGroupRef = (0, _react.useRef)(null);
+  const defaultCopyText = (0, _textstring.useTextstringValue)({
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.copy)
+  });
+  const copiedText = (0, _textstring.useTextstringValue)({
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.copied)
+  });
+  const copyFailedText = (0, _textstring.useTextstringValue)({
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.copyFailed)
+  });
+  const shareText = (0, _textstring.useTextstringValue)({
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.share)
+  });
+  const copyText = copyButtonText ?? defaultCopyText;
+  const iconColor = theme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';
+  (0, _react.useEffect)(() => {
+    const updateStickyState = () => {
+      var _actionGroupRef$curre;
+      const actionGroupTop = (_actionGroupRef$curre = actionGroupRef.current) === null || _actionGroupRef$curre === void 0 ? void 0 : _actionGroupRef$curre.getBoundingClientRect().top;
+      setIsActionGroupSticky(actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET);
+    };
+    updateStickyState();
+    document.addEventListener('scroll', updateStickyState, true);
+    window.addEventListener('resize', updateStickyState);
+    return () => {
+      document.removeEventListener('scroll', updateStickyState, true);
+      window.removeEventListener('resize', updateStickyState);
+    };
+  }, []);
+  const handleCopy = (0, _react.useCallback)(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      void (0, _chaynsApi.createDialog)({
+        showCloseIcon: true,
+        text: copiedText,
+        toastType: _chaynsApi.ToastType.SUCCESS,
+        type: _chaynsApi.DialogType.TOAST
+      }).open();
+    } catch {
+      void (0, _chaynsApi.createDialog)({
+        showCloseIcon: true,
+        text: copyFailedText,
+        toastType: _chaynsApi.ToastType.ERROR,
+        type: _chaynsApi.DialogType.TOAST
+      }).open();
     }
-  }, /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
-    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.copied),
-    childrenTagName: "p"
-  })));
-  return /*#__PURE__*/_react.default.createElement(_core.Popup, {
-    content: popupContent
-  }, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboard, {
-    onClick: handleClick
+  }, [copiedText, copyFailedText, text]);
+  return /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboard, {
+    $codeTheme: theme,
+    ref: actionGroupRef
+  }, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardActionGroup, null, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardButton, {
+    $codeTheme: theme,
+    $isSticky: isActionGroupSticky,
+    "aria-label": copyText,
+    onClick: () => {
+      void handleCopy();
+    },
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    color: iconColor,
+    icons: ['fa-light fa-copy']
+  })), /*#__PURE__*/_react.default.createElement(_core.SharingContextMenu, {
+    link: text,
+    shouldUseDefaultTriggerStyles: false
+  }, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardButton, {
+    $codeTheme: theme,
+    $isSticky: isActionGroupSticky,
+    "aria-label": shareText,
+    type: "button"
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
-    icons: ['fa-light fa-clipboard'],
-    color: theme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'
-  }), copyButtonText && /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardText, {
-    $codeTheme: theme
-  }, /*#__PURE__*/_react.default.createElement("tw-ignore", null, copyButtonText))));
+    color: iconColor,
+    icons: ['fa fa-share-nodes']
+  })))));
 };
 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","_textstring","_textStrings","e","__esModule","default","CopyToClipboard","copyButtonText","text","theme","handleClick","navigator","clipboard","writeText","popupContent","createElement","TextstringProvider","libraryName","style","display","padding","Textstring","textstring","ttsToITextString","textStrings","components","codeHighlighter","copyToClipboard","copied","childrenTagName","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';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\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        <TextstringProvider libraryName=\"@chayns-components-code-highlighter\">\n            <span style={{ display: 'block', padding: '5px' }}>\n                <Textstring\n                    textstring={ttsToITextString(\n                        textStrings.components.codeHighlighter.copyToClipboard.copied,\n                    )}\n                    childrenTagName=\"p\"\n                />\n            </span>\n        </TextstringProvider>\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                        <tw-ignore>{copyButtonText}</tw-ignore>\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;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAAyD,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQzD,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,gBACdjB,MAAA,CAAAQ,OAAA,CAAAU,aAAA,CAACd,WAAA,CAAAe,kBAAkB;IAACC,WAAW,EAAC;EAAqC,gBACjEpB,MAAA,CAAAQ,OAAA,CAAAU,aAAA;IAAMG,KAAK,EAAE;MAAEC,OAAO,EAAE,OAAO;MAAEC,OAAO,EAAE;IAAM;EAAE,gBAC9CvB,MAAA,CAAAQ,OAAA,CAAAU,aAAA,CAACd,WAAA,CAAAoB,UAAU;IACPC,UAAU,EAAE,IAAAC,4BAAgB,EACxBC,oBAAW,CAACC,UAAU,CAACC,eAAe,CAACC,eAAe,CAACC,MAC3D,CAAE;IACFC,eAAe,EAAC;EAAG,CACtB,CACC,CACU,CACvB;EAED,oBACIhC,MAAA,CAAAQ,OAAA,CAAAU,aAAA,CAACpB,KAAA,CAAAmC,KAAK;IAACC,OAAO,EAAEjB;EAAa,gBACzBjB,MAAA,CAAAQ,OAAA,CAAAU,aAAA,CAACf,gBAAA,CAAAgC,qBAAqB;IAACC,OAAO,EAAEvB;EAAY,gBACxCb,MAAA,CAAAQ,OAAA,CAAAU,aAAA,CAACpB,KAAA,CAAAuC,IAAI;IACDC,KAAK,EAAE,CAAC,uBAAuB,CAAE;IACjCC,KAAK,EAAE3B,KAAK,KAAK4B,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG;EAAU,CACtE,CAAC,EACD/B,cAAc,iBACXV,MAAA,CAAAQ,OAAA,CAAAU,aAAA,CAACf,gBAAA,CAAAuC,yBAAyB;IAACC,UAAU,EAAE/B;EAAM,gBAGzCZ,MAAA,CAAAQ,OAAA,CAAAU,aAAA,oBAAYR,cAA0B,CACf,CAEZ,CACpB,CAAC;AAEhB,CAAC;AAEDD,eAAe,CAACmC,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtC,OAAA,GAEjCC,eAAe","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_codeHighlighter","_CopyToClipboard","_textStrings","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","STICKY_ACTION_OFFSET","CopyToClipboard","copyButtonText","text","theme","isActionGroupSticky","setIsActionGroupSticky","useState","actionGroupRef","useRef","defaultCopyText","useTextstringValue","textstring","ttsToITextString","textStrings","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","CodeHighlighterTheme","Dark","useEffect","updateStickyState","_actionGroupRef$curre","actionGroupTop","current","getBoundingClientRect","top","undefined","document","addEventListener","window","removeEventListener","handleCopy","useCallback","navigator","clipboard","writeText","createDialog","showCloseIcon","toastType","ToastType","SUCCESS","type","DialogType","TOAST","open","ERROR","createElement","StyledCopyToClipboard","$codeTheme","ref","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","$isSticky","onClick","Icon","color","icons","SharingContextMenu","link","shouldUseDefaultTriggerStyles","displayName","_default","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst STICKY_ACTION_OFFSET = 8;\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n    const [isActionGroupSticky, setIsActionGroupSticky] = useState(false);\n\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n\n    const defaultCopyText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n    });\n    const copiedText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copied),\n    });\n    const copyFailedText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n        ),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n    });\n\n    const copyText = copyButtonText ?? defaultCopyText;\n    const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n    useEffect(() => {\n        const updateStickyState = () => {\n            const actionGroupTop = actionGroupRef.current?.getBoundingClientRect().top;\n            setIsActionGroupSticky(\n                actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET,\n            );\n        };\n\n        updateStickyState();\n        document.addEventListener('scroll', updateStickyState, true);\n        window.addEventListener('resize', updateStickyState);\n\n        return () => {\n            document.removeEventListener('scroll', updateStickyState, true);\n            window.removeEventListener('resize', updateStickyState);\n        };\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(text);\n            void createDialog({\n                showCloseIcon: true,\n                text: copiedText,\n                toastType: ToastType.SUCCESS,\n                type: DialogType.TOAST,\n            }).open();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedText,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [copiedText, copyFailedText, text]);\n\n    return (\n        <StyledCopyToClipboard $codeTheme={theme} ref={actionGroupRef}>\n            <StyledCopyToClipboardActionGroup>\n                <StyledCopyToClipboardButton\n                    $codeTheme={theme}\n                    $isSticky={isActionGroupSticky}\n                    aria-label={copyText}\n                    onClick={() => {\n                        void handleCopy();\n                    }}\n                    type=\"button\"\n                >\n                    <Icon color={iconColor} icons={['fa-light fa-copy']} />\n                </StyledCopyToClipboardButton>\n                <SharingContextMenu link={text} shouldUseDefaultTriggerStyles={false}>\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={shareText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n                    </StyledCopyToClipboardButton>\n                </SharingContextMenu>\n            </StyledCopyToClipboardActionGroup>\n        </StyledCopyToClipboard>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}