@chayns-components/code-highlighter 5.5.9 → 5.5.12

package/AGENTS.md

@@ -288,6 +288,30 @@ import { CodeHighlighter } from '@chayns-components/code-highlighter';
 />
 ```
 
+#### Nested Scroll Container
+
+```tsx
+<CodeHighlighter
+    copyButtonText={'Code kopieren'}
+    shouldShowLineNumbers
+    language={'typescript'}
+    code={Array.from(
+            { length: 80 },
+            (_, index) => `const update${index + 1} = createUpdate(${index + 1});`,
+        ).join('\n')}
+/>
+```
+
+#### Virtualized Chat Message
+
+```tsx
+<CodeHighlighter
+    copyButtonText={'Code kopieren'}
+    shouldShowLineNumbers
+    language={'tsx'}
+/>
+```
+
 ### Props
 
 No prop documentation available.

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

@@ -145,7 +145,8 @@ const CodeHighlighter = ({
   }, /*#__PURE__*/_react.default.createElement("tw-ignore", null, (0, _codeHighlighter2.formatLanguage)(language)))), /*#__PURE__*/_react.default.createElement(_CopyToClipboard.default, {
     text: code,
     theme: resolvedTheme,
-    copyButtonText: copyButtonText
+    copyButtonText: copyButtonText,
+    rootRef: ref
   }), /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.Prism, {
     customStyle: syntaxHighlighterStyle,
     language: language ?? '',

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

@@ -1 +1 @@
-{"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":"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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","rootRef","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                    rootRef={ref}\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":"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","ignoreList":[]}

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

@@ -11,16 +11,17 @@ var _react = _interopRequireWildcard(require("react"));
 var _codeHighlighter = require("../../../types/codeHighlighter");
 var _CopyToClipboard = require("./CopyToClipboard.styles");
 var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
+var _useStickyActionState = require("./useStickyActionState");
 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,
+  rootRef,
   text,
   theme
 }) => {
-  const [isActionGroupSticky, setIsActionGroupSticky] = (0, _react.useState)(false);
   const actionGroupRef = (0, _react.useRef)(null);
+  const isActionGroupSticky = (0, _useStickyActionState.useStickyActionState)(rootRef, actionGroupRef);
   const defaultCopyText = (0, _textstring.useTextstringValue)({
     textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.copy)
   });
@@ -35,20 +36,6 @@ const CopyToClipboard = ({
   });
   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);

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_codeHighlighter","_CopyToClipboard","_textStrings","_interopRequireDefault","_useStickyActionState","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CopyToClipboard","copyButtonText","rootRef","text","theme","actionGroupRef","useRef","isActionGroupSticky","useStickyActionState","defaultCopyText","useTextstringValue","textstring","ttsToITextString","textStrings","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","CodeHighlighterTheme","Dark","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, RefObject, useCallback, useRef } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionState } from './useStickyActionState';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    rootRef: RefObject<HTMLDivElement>;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, rootRef, text, theme }) => {\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\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    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":[]}

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStickyActionState = void 0;
+var _react = require("react");
+const isScrollable = element => {
+  const {
+    overflow,
+    overflowY
+  } = window.getComputedStyle(element);
+  return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
+};
+const getScrollableAncestor = element => {
+  let parent = element.parentElement;
+  while (parent) {
+    if (parent === document.body || parent === document.documentElement) {
+      return undefined;
+    }
+    if (isScrollable(parent)) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return undefined;
+};
+const useStickyActionState = (rootRef, actionRef) => {
+  const [isSticky, setIsSticky] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const root = rootRef.current;
+    if (!root || !actionRef.current) {
+      return undefined;
+    }
+    const scrollContainer = getScrollableAncestor(root);
+    const updateStickyState = () => {
+      const containerTop = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect().top) ?? 0;
+      const stickyBoundary = containerTop + 1;
+      setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);
+    };
+    updateStickyState();
+    scrollContainer === null || scrollContainer === void 0 || scrollContainer.addEventListener('scroll', updateStickyState, {
+      passive: true
+    });
+    document.addEventListener('scroll', updateStickyState, true);
+    window.addEventListener('scroll', updateStickyState, {
+      passive: true
+    });
+    window.addEventListener('resize', updateStickyState);
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateStickyState);
+    resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(root);
+    if (scrollContainer) {
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(scrollContainer);
+    }
+    return () => {
+      scrollContainer === null || scrollContainer === void 0 || scrollContainer.removeEventListener('scroll', updateStickyState);
+      document.removeEventListener('scroll', updateStickyState, true);
+      window.removeEventListener('scroll', updateStickyState);
+      window.removeEventListener('resize', updateStickyState);
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+    };
+  }, [actionRef, rootRef]);
+  return isSticky;
+};
+exports.useStickyActionState = useStickyActionState;
+//# sourceMappingURL=useStickyActionState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStickyActionState.js","names":["_react","require","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","document","body","documentElement","undefined","useStickyActionState","rootRef","actionRef","isSticky","setIsSticky","useState","useEffect","root","current","scrollContainer","updateStickyState","containerTop","getBoundingClientRect","top","stickyBoundary","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/useStickyActionState.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst isScrollable = (element: HTMLElement) => {\n    const { overflow, overflowY } = window.getComputedStyle(element);\n\n    return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n    let parent = element.parentElement;\n\n    while (parent) {\n        if (parent === document.body || parent === document.documentElement) {\n            return undefined;\n        }\n\n        if (isScrollable(parent)) {\n            return parent;\n        }\n\n        parent = parent.parentElement;\n    }\n\n    return undefined;\n};\n\nexport const useStickyActionState = (\n    rootRef: RefObject<HTMLElement>,\n    actionRef: RefObject<HTMLElement>,\n) => {\n    const [isSticky, setIsSticky] = useState(false);\n\n    useEffect(() => {\n        const root = rootRef.current;\n        if (!root || !actionRef.current) {\n            return undefined;\n        }\n\n        const scrollContainer = getScrollableAncestor(root);\n\n        const updateStickyState = () => {\n            const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n            const stickyBoundary = containerTop + 1;\n\n            setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);\n        };\n\n        updateStickyState();\n        scrollContainer?.addEventListener('scroll', updateStickyState, { passive: true });\n        document.addEventListener('scroll', updateStickyState, true);\n        window.addEventListener('scroll', updateStickyState, { passive: true });\n        window.addEventListener('resize', updateStickyState);\n\n        const resizeObserver =\n            typeof ResizeObserver === 'undefined'\n                ? undefined\n                : new ResizeObserver(updateStickyState);\n        resizeObserver?.observe(root);\n\n        if (scrollContainer) {\n            resizeObserver?.observe(scrollContainer);\n        }\n\n        return () => {\n            scrollContainer?.removeEventListener('scroll', updateStickyState);\n            document.removeEventListener('scroll', updateStickyState, true);\n            window.removeEventListener('scroll', updateStickyState);\n            window.removeEventListener('resize', updateStickyState);\n            resizeObserver?.disconnect();\n        };\n    }, [actionRef, rootRef]);\n\n    return isSticky;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -137,7 +137,8 @@ const CodeHighlighter = ({
   }, /*#__PURE__*/React.createElement("tw-ignore", null, formatLanguage(language)))), /*#__PURE__*/React.createElement(CopyToClipboard, {
     text: code,
     theme: resolvedTheme,
-    copyButtonText: copyButtonText
+    copyButtonText: copyButtonText,
+    rootRef: ref
   }), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
     customStyle: syntaxHighlighterStyle,
     language: language ?? '',

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

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","Prism","SyntaxHighlighter","oneDark","oneLight","useColorScheme","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","colorScheme","width","setWidth","formattedCode","setFormattedCode","ref","resolvedTheme","colorMode","Dark","Light","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","customStyle","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { 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":"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","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","Prism","SyntaxHighlighter","oneDark","oneLight","useColorScheme","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","colorScheme","width","setWidth","formattedCode","setFormattedCode","ref","resolvedTheme","colorMode","Dark","Light","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","rootRef","customStyle","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { 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                    rootRef={ref}\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":"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","ignoreList":[]}

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

@@ -1,18 +1,19 @@
 import { Icon, SharingContextMenu } from '@chayns-components/core';
 import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
 import { createDialog, DialogType, ToastType } from 'chayns-api';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
 import { StyledCopyToClipboard, StyledCopyToClipboardActionGroup, StyledCopyToClipboardButton } from './CopyToClipboard.styles';
 import textStrings from '../../../constants/textStrings';
-const STICKY_ACTION_OFFSET = 8;
+import { useStickyActionState } from './useStickyActionState';
 const CopyToClipboard = ({
   copyButtonText,
+  rootRef,
   text,
   theme
 }) => {
-  const [isActionGroupSticky, setIsActionGroupSticky] = useState(false);
   const actionGroupRef = useRef(null);
+  const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);
   const defaultCopyText = useTextstringValue({
     textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy)
   });
@@ -27,19 +28,6 @@ const CopyToClipboard = ({
   });
   const copyText = copyButtonText ?? defaultCopyText;
   const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';
-  useEffect(() => {
-    const updateStickyState = () => {
-      const actionGroupTop = actionGroupRef.current?.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 = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(text);

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

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.js","names":["Icon","SharingContextMenu","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useRef","useState","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","textStrings","STICKY_ACTION_OFFSET","CopyToClipboard","copyButtonText","text","theme","isActionGroupSticky","setIsActionGroupSticky","actionGroupRef","defaultCopyText","textstring","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","Dark","updateStickyState","actionGroupTop","current","getBoundingClientRect","top","undefined","document","addEventListener","window","removeEventListener","handleCopy","navigator","clipboard","writeText","showCloseIcon","toastType","SUCCESS","type","TOAST","open","ERROR","createElement","$codeTheme","ref","$isSticky","onClick","color","icons","link","shouldUseDefaultTriggerStyles","displayName"],"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":[]}
+{"version":3,"file":"CopyToClipboard.js","names":["Icon","SharingContextMenu","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useRef","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","textStrings","useStickyActionState","CopyToClipboard","copyButtonText","rootRef","text","theme","actionGroupRef","isActionGroupSticky","defaultCopyText","textstring","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","Dark","handleCopy","navigator","clipboard","writeText","showCloseIcon","toastType","SUCCESS","type","TOAST","open","ERROR","createElement","$codeTheme","ref","$isSticky","onClick","color","icons","link","shouldUseDefaultTriggerStyles","displayName"],"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, RefObject, useCallback, useRef } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionState } from './useStickyActionState';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    rootRef: RefObject<HTMLDivElement>;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, rootRef, text, theme }) => {\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\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    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":[]}

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

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+const isScrollable = element => {
+  const {
+    overflow,
+    overflowY
+  } = window.getComputedStyle(element);
+  return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
+};
+const getScrollableAncestor = element => {
+  let parent = element.parentElement;
+  while (parent) {
+    if (parent === document.body || parent === document.documentElement) {
+      return undefined;
+    }
+    if (isScrollable(parent)) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return undefined;
+};
+export const useStickyActionState = (rootRef, actionRef) => {
+  const [isSticky, setIsSticky] = useState(false);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !actionRef.current) {
+      return undefined;
+    }
+    const scrollContainer = getScrollableAncestor(root);
+    const updateStickyState = () => {
+      const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;
+      const stickyBoundary = containerTop + 1;
+      setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);
+    };
+    updateStickyState();
+    scrollContainer?.addEventListener('scroll', updateStickyState, {
+      passive: true
+    });
+    document.addEventListener('scroll', updateStickyState, true);
+    window.addEventListener('scroll', updateStickyState, {
+      passive: true
+    });
+    window.addEventListener('resize', updateStickyState);
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateStickyState);
+    resizeObserver?.observe(root);
+    if (scrollContainer) {
+      resizeObserver?.observe(scrollContainer);
+    }
+    return () => {
+      scrollContainer?.removeEventListener('scroll', updateStickyState);
+      document.removeEventListener('scroll', updateStickyState, true);
+      window.removeEventListener('scroll', updateStickyState);
+      window.removeEventListener('resize', updateStickyState);
+      resizeObserver?.disconnect();
+    };
+  }, [actionRef, rootRef]);
+  return isSticky;
+};
+//# sourceMappingURL=useStickyActionState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStickyActionState.js","names":["useEffect","useState","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","document","body","documentElement","undefined","useStickyActionState","rootRef","actionRef","isSticky","setIsSticky","root","current","scrollContainer","updateStickyState","containerTop","getBoundingClientRect","top","stickyBoundary","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/useStickyActionState.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst isScrollable = (element: HTMLElement) => {\n    const { overflow, overflowY } = window.getComputedStyle(element);\n\n    return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n    let parent = element.parentElement;\n\n    while (parent) {\n        if (parent === document.body || parent === document.documentElement) {\n            return undefined;\n        }\n\n        if (isScrollable(parent)) {\n            return parent;\n        }\n\n        parent = parent.parentElement;\n    }\n\n    return undefined;\n};\n\nexport const useStickyActionState = (\n    rootRef: RefObject<HTMLElement>,\n    actionRef: RefObject<HTMLElement>,\n) => {\n    const [isSticky, setIsSticky] = useState(false);\n\n    useEffect(() => {\n        const root = rootRef.current;\n        if (!root || !actionRef.current) {\n            return undefined;\n        }\n\n        const scrollContainer = getScrollableAncestor(root);\n\n        const updateStickyState = () => {\n            const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n            const stickyBoundary = containerTop + 1;\n\n            setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);\n        };\n\n        updateStickyState();\n        scrollContainer?.addEventListener('scroll', updateStickyState, { passive: true });\n        document.addEventListener('scroll', updateStickyState, true);\n        window.addEventListener('scroll', updateStickyState, { passive: true });\n        window.addEventListener('resize', updateStickyState);\n\n        const resizeObserver =\n            typeof ResizeObserver === 'undefined'\n                ? undefined\n                : new ResizeObserver(updateStickyState);\n        resizeObserver?.observe(root);\n\n        if (scrollContainer) {\n            resizeObserver?.observe(scrollContainer);\n        }\n\n        return () => {\n            scrollContainer?.removeEventListener('scroll', updateStickyState);\n            document.removeEventListener('scroll', updateStickyState, true);\n            window.removeEventListener('scroll', updateStickyState);\n            window.removeEventListener('resize', updateStickyState);\n            resizeObserver?.disconnect();\n        };\n    }, [actionRef, rootRef]);\n\n    return isSticky;\n};\n"],"mappings":"AAAA,SAAoBA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAEtD,MAAMC,YAAY,GAAIC,OAAoB,IAAK;EAC3C,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAGC,MAAM,CAACC,gBAAgB,CAACJ,OAAO,CAAC;EAEhE,OAAO,qBAAqB,CAACK,IAAI,CAAC,GAAGJ,QAAQ,IAAIC,SAAS,EAAE,CAAC;AACjE,CAAC;AAED,MAAMI,qBAAqB,GAAIN,OAAoB,IAAK;EACpD,IAAIO,MAAM,GAAGP,OAAO,CAACQ,aAAa;EAElC,OAAOD,MAAM,EAAE;IACX,IAAIA,MAAM,KAAKE,QAAQ,CAACC,IAAI,IAAIH,MAAM,KAAKE,QAAQ,CAACE,eAAe,EAAE;MACjE,OAAOC,SAAS;IACpB;IAEA,IAAIb,YAAY,CAACQ,MAAM,CAAC,EAAE;MACtB,OAAOA,MAAM;IACjB;IAEAA,MAAM,GAAGA,MAAM,CAACC,aAAa;EACjC;EAEA,OAAOI,SAAS;AACpB,CAAC;AAED,OAAO,MAAMC,oBAAoB,GAAGA,CAChCC,OAA+B,EAC/BC,SAAiC,KAChC;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EAE/CD,SAAS,CAAC,MAAM;IACZ,MAAMqB,IAAI,GAAGJ,OAAO,CAACK,OAAO;IAC5B,IAAI,CAACD,IAAI,IAAI,CAACH,SAAS,CAACI,OAAO,EAAE;MAC7B,OAAOP,SAAS;IACpB;IAEA,MAAMQ,eAAe,GAAGd,qBAAqB,CAACY,IAAI,CAAC;IAEnD,MAAMG,iBAAiB,GAAGA,CAAA,KAAM;MAC5B,MAAMC,YAAY,GAAGF,eAAe,EAAEG,qBAAqB,CAAC,CAAC,CAACC,GAAG,IAAI,CAAC;MACtE,MAAMC,cAAc,GAAGH,YAAY,GAAG,CAAC;MAEvCL,WAAW,CAACC,IAAI,CAACK,qBAAqB,CAAC,CAAC,CAACC,GAAG,IAAIC,cAAc,CAAC;IACnE,CAAC;IAEDJ,iBAAiB,CAAC,CAAC;IACnBD,eAAe,EAAEM,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,EAAE;MAAEM,OAAO,EAAE;IAAK,CAAC,CAAC;IACjFlB,QAAQ,CAACiB,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,EAAE,IAAI,CAAC;IAC5DlB,MAAM,CAACuB,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,EAAE;MAAEM,OAAO,EAAE;IAAK,CAAC,CAAC;IACvExB,MAAM,CAACuB,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;IAEpD,MAAMO,cAAc,GAChB,OAAOC,cAAc,KAAK,WAAW,GAC/BjB,SAAS,GACT,IAAIiB,cAAc,CAACR,iBAAiB,CAAC;IAC/CO,cAAc,EAAEE,OAAO,CAACZ,IAAI,CAAC;IAE7B,IAAIE,eAAe,EAAE;MACjBQ,cAAc,EAAEE,OAAO,CAACV,eAAe,CAAC;IAC5C;IAEA,OAAO,MAAM;MACTA,eAAe,EAAEW,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;MACjEZ,QAAQ,CAACsB,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,EAAE,IAAI,CAAC;MAC/DlB,MAAM,CAAC4B,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;MACvDlB,MAAM,CAAC4B,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;MACvDO,cAAc,EAAEI,UAAU,CAAC,CAAC;IAChC,CAAC;EACL,CAAC,EAAE,CAACjB,SAAS,EAAED,OAAO,CAAC,CAAC;EAExB,OAAOE,QAAQ;AACnB,CAAC","ignoreList":[]}

package/lib/types/components/code-highlighter/copy-to-clipboard/CopyToClipboard.d.ts

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import { FC, RefObject } from 'react';
 import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
 export type CopyToClipboardProps = {
     copyButtonText?: string;
+    rootRef: RefObject<HTMLDivElement>;
     text: string;
     theme: CodeHighlighterTheme;
 };

package/lib/types/components/code-highlighter/copy-to-clipboard/useStickyActionState.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useStickyActionState: (rootRef: RefObject<HTMLElement>, actionRef: RefObject<HTMLElement>) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/code-highlighter",
-    "version": "5.5.9",
+    "version": "5.5.12",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -74,8 +74,8 @@
         "vitest": "^1.6.1"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.5.9",
-        "@chayns-components/textstring": "^5.5.8",
+        "@chayns-components/core": "^5.5.12",
+        "@chayns-components/textstring": "^5.5.12",
         "@types/react-syntax-highlighter": "^15.5.13",
         "babel-prettier-parser": "^0.10.8",
         "prettier": "^2.8.8",
@@ -92,5 +92,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4660e894e1702d4a2399d0ee678dc46779d7ae98"
+    "gitHead": "55815a2a8c38fc3ed62f8b1bd1ee0bf34ccf4eef"
 }