@chayns-components/code-highlighter 5.5.3 → 5.5.8

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

@@ -3,13 +3,97 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCopyToClipboardText = exports.StyledCopyToClipboard = void 0;
+exports.StyledCopyToClipboardText = exports.StyledCopyToClipboardButton = exports.StyledCopyToClipboardActionGroup = exports.StyledCopyToClipboard = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _codeHighlighter = require("../../../types/codeHighlighter");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledCopyToClipboard = exports.StyledCopyToClipboard = _styledComponents.default.div`
+    position: sticky;
+    top: var(--code-highlighter-action-inset);
+    z-index: 1;
     display: flex;
-    align-items: center;
+    justify-content: flex-end;
+    height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));
+    margin-top: calc(
+        (var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1
+    );
+    padding-right: var(--code-highlighter-action-inset);
+`;
+const getActionGroupBorder = ({
+  $codeTheme,
+  $isSticky
+}) => {
+  if (!$isSticky) {
+    return 'transparent';
+  }
+  return $codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#5a6474' : '#d4d4d4';
+};
+const getActionGroupBackground = ({
+  $codeTheme,
+  $isSticky
+}) => {
+  if (!$isSticky) {
+    return 'transparent';
+  }
+  return $codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#343a46' : '#fafafa';
+};
+const getButtonHoverBackground = ({
+  $codeTheme
+}) => $codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';
+const getButtonActiveBackground = ({
+  $codeTheme
+}) => $codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';
+const getButtonHoverBorder = ({
+  $codeTheme
+}) => $codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#6a7485' : '#c2c2c2';
+const getButtonShadow = ({
+  $isSticky
+}) => $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none';
+const getButtonHoverShadow = ({
+  $isSticky
+}) => {
+  const insetShadow = 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)';
+  return $isSticky ? `0 2px 8px rgba(0, 0, 0, 0.32), ${insetShadow}` : insetShadow;
+};
+const StyledCopyToClipboardActionGroup = exports.StyledCopyToClipboardActionGroup = _styledComponents.default.div`
+    display: flex;
+    gap: 4px;
+    height: var(--code-highlighter-action-size);
+`;
+const StyledCopyToClipboardButton = exports.StyledCopyToClipboardButton = _styledComponents.default.button`
+    box-sizing: border-box;
+    border: 1px solid ${getActionGroupBorder};
+    border-radius: 4px;
+    width: var(--code-highlighter-action-size);
+    height: var(--code-highlighter-action-size);
+    padding: 0;
+    cursor: pointer;
+    background-color: ${getActionGroupBackground};
+    color: ${({
+  $codeTheme
+}) => $codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#f4f6f8' : '#999999'};
+    box-shadow: ${getButtonShadow};
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.15s ease,
+        transform 0.15s ease;
+
+    &:hover {
+        border-color: ${getButtonHoverBorder};
+        background-color: ${getButtonHoverBackground};
+        box-shadow: ${getButtonHoverShadow};
+    }
+
+    &:active {
+        background-color: ${getButtonActiveBackground};
+        transform: scale(0.94);
+    }
+
+    &:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
 `;
 const StyledCopyToClipboardText = exports.StyledCopyToClipboardText = _styledComponents.default.span`
     color: ${({

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

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCopyToClipboard","exports","styled","div","StyledCopyToClipboardText","span","$codeTheme","CodeHighlighterTheme","Dark"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\nexport const StyledCopyToClipboard = styled.div`\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledCopyToClipboardTextProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n    font-size: small;\n    margin-left: 4px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAsE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE/D,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA,CAAC;AAKM,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAGF,yBAAM,CAACG,IAAoC;AACpF,aAAa,CAAC;EAAEC;AAAW,CAAC,KACpBA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCopyToClipboard","exports","styled","div","getActionGroupBorder","$codeTheme","$isSticky","CodeHighlighterTheme","Dark","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonShadow","getButtonHoverShadow","insetShadow","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","button","StyledCopyToClipboardText","span"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\ntype StyledCopyToClipboardProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCopyToClipboard = styled.div<StyledCopyToClipboardProps>`\n    position: sticky;\n    top: var(--code-highlighter-action-inset);\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));\n    margin-top: calc(\n        (var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1\n    );\n    padding-right: var(--code-highlighter-action-inset);\n`;\n\ntype StyledCopyToClipboardButtonProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) =>\n    $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none';\n\nconst getButtonHoverShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) => {\n    const insetShadow = 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)';\n\n    return $isSticky ? `0 2px 8px rgba(0, 0, 0, 0.32), ${insetShadow}` : insetShadow;\n};\n\nexport const StyledCopyToClipboardActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--code-highlighter-action-size);\n`;\n\nexport const StyledCopyToClipboardButton = styled.button<StyledCopyToClipboardButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${getActionGroupBorder};\n    border-radius: 4px;\n    width: var(--code-highlighter-action-size);\n    height: var(--code-highlighter-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${getActionGroupBackground};\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#999999'};\n    box-shadow: ${getButtonShadow};\n    transition:\n        background-color 0.15s ease,\n        border-color 0.15s ease,\n        box-shadow 0.15s ease,\n        transform 0.15s ease;\n\n    &:hover {\n        border-color: ${getButtonHoverBorder};\n        background-color: ${getButtonHoverBackground};\n        box-shadow: ${getButtonHoverShadow};\n    }\n\n    &:active {\n        background-color: ${getButtonActiveBackground};\n        transform: scale(0.94);\n    }\n\n    &:focus-visible {\n        outline: 2px solid currentColor;\n        outline-offset: 2px;\n    }\n`;\n\ntype StyledCopyToClipboardTextProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n    font-size: small;\n    margin-left: 4px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAsE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAM/D,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC1F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAMC,wBAAwB,GAAGA,CAAC;EAAEJ,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC9F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAME,wBAAwB,GAAGA,CAAC;EAAEL;AAA6C,CAAC,KAC9EA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMG,yBAAyB,GAAGA,CAAC;EAAEN;AAA6C,CAAC,KAC/EA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMI,oBAAoB,GAAGA,CAAC;EAAEP;AAA6C,CAAC,KAC1EA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAEpE,MAAMK,eAAe,GAAGA,CAAC;EAAEP;AAA4C,CAAC,KACpEA,SAAS,GAAG,+BAA+B,GAAG,MAAM;AAExD,MAAMQ,oBAAoB,GAAGA,CAAC;EAAER;AAA4C,CAAC,KAAK;EAC9E,MAAMS,WAAW,GAAG,2CAA2C;EAE/D,OAAOT,SAAS,GAAG,kCAAkCS,WAAW,EAAE,GAAGA,WAAW;AACpF,CAAC;AAEM,MAAMC,gCAAgC,GAAAf,OAAA,CAAAe,gCAAA,GAAGd,yBAAM,CAACC,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAEM,MAAMc,2BAA2B,GAAAhB,OAAA,CAAAgB,2BAAA,GAAGf,yBAAM,CAACgB,MAAwC;AAC1F;AACA,wBAAwBd,oBAAoB;AAC5C;AACA;AACA;AACA;AACA;AACA,wBAAwBK,wBAAwB;AAChD,aAAa,CAAC;EAAEJ;AAAW,CAAC,KACpBA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,kBAAkBK,eAAe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,oBAAoB;AAC5C,4BAA4BF,wBAAwB;AACpD,sBAAsBI,oBAAoB;AAC1C;AACA;AACA;AACA,4BAA4BH,yBAAyB;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAKM,MAAMQ,yBAAyB,GAAAlB,OAAA,CAAAkB,yBAAA,GAAGjB,yBAAM,CAACkB,IAAoC;AACpF,aAAa,CAAC;EAAEf;AAAW,CAAC,KACpBA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/constants/textStrings.js

@@ -8,9 +8,21 @@ var _default = exports.default = {
   components: {
     codeHighlighter: {
       copyToClipboard: {
+        copy: {
+          stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copy',
+          fallback: 'Kopieren'
+        },
         copied: {
           stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copied',
           fallback: 'Kopiert!'
+        },
+        copyFailed: {
+          stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed',
+          fallback: 'Kopieren fehlgeschlagen'
+        },
+        share: {
+          stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share',
+          fallback: 'Teilen'
         }
       }
     }

package/lib/cjs/constants/textStrings.js.map

@@ -1 +1 @@
-{"version":3,"file":"textStrings.js","names":["components","codeHighlighter","copyToClipboard","copied","stringName","fallback"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        codeHighlighter: {\n            copyToClipboard: {\n                copied: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copied',\n                    fallback: 'Kopiert!',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":";;;;;;iCAAe;EACXA,UAAU,EAAE;IACRC,eAAe,EAAE;MACbC,eAAe,EAAE;QACbC,MAAM,EAAE;UACJC,UAAU,EACN,0FAA0F;UAC9FC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"textStrings.js","names":["components","codeHighlighter","copyToClipboard","copy","stringName","fallback","copied","copyFailed","share"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        codeHighlighter: {\n            copyToClipboard: {\n                copy: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copy',\n                    fallback: 'Kopieren',\n                },\n                copied: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copied',\n                    fallback: 'Kopiert!',\n                },\n                copyFailed: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed',\n                    fallback: 'Kopieren fehlgeschlagen',\n                },\n                share: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share',\n                    fallback: 'Teilen',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":";;;;;;iCAAe;EACXA,UAAU,EAAE;IACRC,eAAe,EAAE;MACbC,eAAe,EAAE;QACbC,IAAI,EAAE;UACFC,UAAU,EACN,wFAAwF;UAC5FC,QAAQ,EAAE;QACd,CAAC;QACDC,MAAM,EAAE;UACJF,UAAU,EACN,0FAA0F;UAC9FC,QAAQ,EAAE;QACd,CAAC;QACDE,UAAU,EAAE;UACRH,UAAU,EACN,8FAA8F;UAClGC,QAAQ,EAAE;QACd,CAAC;QACDG,KAAK,EAAE;UACHJ,UAAU,EACN,yFAAyF;UAC7FC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}

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

@@ -1,7 +1,8 @@
 import { format } from 'prettier/standalone';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useColorScheme } from '@chayns-components/core';
 import { CodeHighlighterTheme } from '../../types/codeHighlighter';
 import { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';
 import { StyledCodeHighlighter, StyledCodeHighlighterFileName, StyledCodeHighlighterHeader } from './CodeHighlighter.styles';
@@ -16,7 +17,7 @@ const addScrollbarClassToPre = ({
   preElement.classList.add(className);
 };
 const CodeHighlighter = ({
-  theme = CodeHighlighterTheme.Dark,
+  theme,
   code,
   copyButtonText,
   language,
@@ -26,8 +27,11 @@ const CodeHighlighter = ({
   shouldShowLineNumbers = false,
   shouldWrapLines
 }) => {
+  const colorScheme = useColorScheme();
   const [width, setWidth] = useState(0);
+  const [formattedCode, setFormattedCode] = useState(code);
   const ref = useRef(null);
+  const resolvedTheme = theme ?? (colorScheme?.theme.colorMode === 'dark' ? CodeHighlighterTheme.Dark : CodeHighlighterTheme.Light);
   useEffect(() => {
     addScrollbarClassToPre({
       root: ref.current,
@@ -86,21 +90,32 @@ const CodeHighlighter = ({
   const lineNumberStyle = useMemo(() => ({
     WebkitUserSelect: 'none'
   }), []);
-  const formattedCode = useMemo(() => {
-    if (language) {
-      void getParserForLanguage(language).then(config => {
-        if (shouldFormatCode && config) {
-          try {
-            return format(code, config);
-          } catch (error) {
-            if (typeof onFormatError !== 'undefined') onFormatError(error);
-          }
-        }
-        return code;
-      });
+  const syntaxHighlighterStyle = useMemo(() => ({
+    padding: '0 15px 15px'
+  }), []);
+  useEffect(() => {
+    let isCurrent = true;
+    if (!shouldFormatCode) {
+      setFormattedCode(code);
+      return () => {
+        isCurrent = false;
+      };
     }
-    return code;
-  }, [code, language, shouldFormatCode, onFormatError]);
+    void getParserForLanguage(language).then(config => {
+      if (!config || !isCurrent) {
+        return;
+      }
+      try {
+        setFormattedCode(format(code, config));
+      } catch (error) {
+        onFormatError?.(error);
+        setFormattedCode(code);
+      }
+    });
+    return () => {
+      isCurrent = false;
+    };
+  }, [code, language, onFormatError, shouldFormatCode]);
   useEffect(() => {
     const elements = document.getElementsByClassName('linenumber');
     Array.from(elements).forEach(element => {
@@ -113,25 +128,26 @@ const CodeHighlighter = ({
   }, []);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledCodeHighlighter, {
     $shouldWrapLines: shouldWrapLines,
-    $codeTheme: theme,
+    $codeTheme: resolvedTheme,
     ref: ref
   }, /*#__PURE__*/React.createElement(StyledCodeHighlighterHeader, {
-    $codeTheme: theme
+    $codeTheme: resolvedTheme
   }, /*#__PURE__*/React.createElement(StyledCodeHighlighterFileName, {
-    $codeTheme: theme
-  }, /*#__PURE__*/React.createElement("tw-ignore", null, formatLanguage(language))), /*#__PURE__*/React.createElement(CopyToClipboard, {
+    $codeTheme: resolvedTheme
+  }, /*#__PURE__*/React.createElement("tw-ignore", null, formatLanguage(language)))), /*#__PURE__*/React.createElement(CopyToClipboard, {
     text: code,
-    theme: theme,
+    theme: resolvedTheme,
     copyButtonText: copyButtonText
-  })), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+  }), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    customStyle: syntaxHighlighterStyle,
     language: language ?? '',
     lineNumberStyle: lineNumberStyle,
     showLineNumbers: shouldShowLineNumbers,
-    style: theme === CodeHighlighterTheme.Dark ? oneDark : oneLight,
+    style: resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : 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';
 export default CodeHighlighter;

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

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","ref","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","WebkitUserSelect","formattedCode","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","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 { 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":["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":"AAAA,SAASA,MAAM,QAAQ,qBAAqB;AAC5C,OAAOC,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACpF,SAASC,KAAK,IAAIC,iBAAiB,QAAQ,0BAA0B;AACrE,SAASC,OAAO,EAAEC,QAAQ,QAAQ,gDAAgD;AAClF,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAEIC,oBAAoB,QAEjB,6BAA6B;AACpC,SAASC,cAAc,EAAEC,oBAAoB,QAAQ,6BAA6B;AAClF,SACIC,qBAAqB,EACrBC,6BAA6B,EAC7BC,2BAA2B,QACxB,0BAA0B;AACjC,OAAOC,eAAe,MAAM,qCAAqC;AAOjE,MAAMC,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,GAAGzB,cAAc,CAAC,CAAC;EAEpC,MAAM,CAAC0B,KAAK,EAAEC,QAAQ,CAAC,GAAGhC,QAAQ,CAAC,CAAC,CAAC;EACrC,MAAM,CAACiC,aAAa,EAAEC,gBAAgB,CAAC,GAAGlC,QAAQ,CAACsB,IAAI,CAAC;EAExD,MAAMa,GAAG,GAAGpC,MAAM,CAAiB,IAAI,CAAC;EAExC,MAAMqC,aAAa,GACff,KAAK,KACJS,WAAW,EAAET,KAAK,CAACgB,SAAS,KAAK,MAAM,GAClC/B,oBAAoB,CAACgC,IAAI,GACzBhC,oBAAoB,CAACiC,KAAK,CAAC;EAErC1C,SAAS,CAAC,MAAM;IACZgB,sBAAsB,CAAC;MAAEC,IAAI,EAAEqB,GAAG,CAACK,OAAO;MAAEzB,SAAS,EAAE;IAAmB,CAAC,CAAC;EAChF,CAAC,EAAE,EAAE,CAAC;EAENlB,SAAS,CAAC,MAAM;IACZ,MAAM4C,YAAY,GAAGA,CAAA,KAAM;MACvB,IAAIN,GAAG,CAACK,OAAO,EAAE;QACb,MAAM;UAAEE;QAAS,CAAC,GAAGP,GAAG,CAACK,OAAO;QAEhC,MAAMxB,UAAU,GAAG2B,KAAK,CAACC,IAAI,CAACF,QAAQ,CAAC,CAACG,IAAI,CACxC,CAAC;UAAEC;QAAQ,CAAC,KAAKA,OAAO,CAACC,WAAW,CAAC,CAAC,KAAK,KAC/C,CAAC;QAED,IAAI/B,UAAU,EAAE;UACZgB,QAAQ,CAAChB,UAAU,CAACgC,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,GAAGxD,WAAW,CAC1ByD,UAAkB,IAAK;IACpB,IAAIC,KAAK,GAAG;MACRC,eAAe,EAAE,MAAM;MACvBC,OAAO,EAAE,OAAO;MAChBC,YAAY,EAAE,KAAK;MACnB1B,KAAK,EAAEA,KAAK,GAAG;IACnB,CAAC;IAED,IAAIN,gBAAgB,EAAEiC,KAAK,IAAIjC,gBAAgB,CAACiC,KAAK,CAACC,QAAQ,CAACN,UAAU,CAAC,EAAE;MACxEC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAI9B,gBAAgB,EAAEmC,OAAO,IAAInC,gBAAgB,CAACmC,OAAO,CAACD,QAAQ,CAACN,UAAU,CAAC,EAAE;MACnFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAI9B,gBAAgB,EAAEoC,MAAM,IAAIpC,gBAAgB,CAACoC,MAAM,CAACF,QAAQ,CAACN,UAAU,CAAC,EAAE;MACjFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD;IAEA,OAAO;MAAED;IAAM,CAAC;EACpB,CAAC,EACD,CAAC7B,gBAAgB,EAAEM,KAAK,CAC5B,CAAC;EAED,MAAM+B,eAAe,GAAGhE,OAAO,CAC3B,OAAO;IACHiE,gBAAgB,EAAE;EACtB,CAAC,CAAC,EACF,EACJ,CAAC;EAED,MAAMC,sBAAsB,GAAGlE,OAAO,CAClC,OAAO;IACHmE,OAAO,EAAE;EACb,CAAC,CAAC,EACF,EACJ,CAAC;EAEDpE,SAAS,CAAC,MAAM;IACZ,IAAIqE,SAAS,GAAG,IAAI;IAEpB,IAAI,CAACxC,gBAAgB,EAAE;MACnBQ,gBAAgB,CAACZ,IAAI,CAAC;MAEtB,OAAO,MAAM;QACT4C,SAAS,GAAG,KAAK;MACrB,CAAC;IACL;IAEA,KAAK1D,oBAAoB,CAACgB,QAAQ,CAAC,CAAC2C,IAAI,CAAEC,MAAM,IAAK;MACjD,IAAI,CAACA,MAAM,IAAI,CAACF,SAAS,EAAE;QACvB;MACJ;MAEA,IAAI;QACAhC,gBAAgB,CAACxC,MAAM,CAAC4B,IAAI,EAAE8C,MAAM,CAAsB,CAAC;MAC/D,CAAC,CAAC,OAAOC,KAAK,EAAE;QACZ1C,aAAa,GAAG0C,KAAK,CAAC;QACtBnC,gBAAgB,CAACZ,IAAI,CAAC;MAC1B;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACT4C,SAAS,GAAG,KAAK;IACrB,CAAC;EACL,CAAC,EAAE,CAAC5C,IAAI,EAAEE,QAAQ,EAAEG,aAAa,EAAED,gBAAgB,CAAC,CAAC;EAErD7B,SAAS,CAAC,MAAM;IACZ,MAAMyE,QAAQ,GAAGC,QAAQ,CAACC,sBAAsB,CAAC,YAAY,CAAC;IAE9D7B,KAAK,CAACC,IAAI,CAAC0B,QAAQ,CAAC,CAACG,OAAO,CAAEC,OAAO,IAAK;MACtC,MAAMC,OAAO,GAAGJ,QAAQ,CAACK,aAAa,CAAC,WAAW,CAAC;MAEnD,OAAOF,OAAO,CAACG,UAAU,EAAE;QACvBF,OAAO,CAACG,WAAW,CAACJ,OAAO,CAACG,UAAU,CAAC;MAC3C;MAEAH,OAAO,CAACI,WAAW,CAACH,OAAO,CAAC;IAChC,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO7E,OAAO,CACV,mBACIH,KAAA,CAAAiF,aAAA,CAACnE,qBAAqB;IAClBsE,gBAAgB,EAAElD,eAAgB;IAClCmD,UAAU,EAAE5C,aAAc;IAC1BD,GAAG,EAAEA;EAAI,gBAETxC,KAAA,CAAAiF,aAAA,CAACjE,2BAA2B;IAACqE,UAAU,EAAE5C;EAAc,gBACnDzC,KAAA,CAAAiF,aAAA,CAAClE,6BAA6B;IAACsE,UAAU,EAAE5C;EAAc,gBAGrDzC,KAAA,CAAAiF,aAAA,oBAAYrE,cAAc,CAACiB,QAAQ,CAAa,CACrB,CACN,CAAC,eAC9B7B,KAAA,CAAAiF,aAAA,CAAChE,eAAe;IACZqE,IAAI,EAAE3D,IAAK;IACXD,KAAK,EAAEe,aAAc;IACrBb,cAAc,EAAEA;EAAe,CAClC,CAAC,eACF5B,KAAA,CAAAiF,aAAA,CAAC1E,iBAAiB;IACdgF,WAAW,EAAElB,sBAAuB;IACpCxC,QAAQ,EAAEA,QAAQ,IAAI,EAAG;IACzBsC,eAAe,EAAEA,eAAgB;IACjCqB,eAAe,EAAEvD,qBAAsB;IACvC0B,KAAK,EAAElB,aAAa,KAAK9B,oBAAoB,CAACgC,IAAI,GAAGnC,OAAO,GAAGC,QAAS;IACxEgF,SAAS;IACTC,aAAa,EAAExD,eAAgB;IAC/ByD,SAAS,EAAElC;EAAY,GAEtBnB,aACc,CACA,CAC1B,EACD,CACIJ,eAAe,EACfO,aAAa,EACbZ,QAAQ,EACRF,IAAI,EACJC,cAAc,EACduC,eAAe,EACfE,sBAAsB,EACtBpC,qBAAqB,EACrBwB,WAAW,EACXnB,aAAa,CAErB,CAAC;AACL,CAAC;AAEDb,eAAe,CAACmE,WAAW,GAAG,iBAAiB;AAE/C,eAAenE,eAAe","ignoreList":[]}

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

@@ -6,12 +6,17 @@ export const StyledCodeHighlighter = styled.div`
   $codeTheme
 }) => $codeTheme === 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 {
@@ -29,12 +34,9 @@ export const StyledCodeHighlighter = styled.div`
 export const StyledCodeHighlighterHeader = styled.div`
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid
-        ${({
-  $codeTheme
-}) => $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};
-    padding: 4px 12px;
+    padding: 0 12px;
+    height: 0;
+    transform: translateY(-26px);
 `;
 export const StyledCodeHighlighterFileName = styled.span`
     color: ${({

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

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","CodeHighlighterTheme","StyledCodeHighlighter","div","$codeTheme","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,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,6BAA6B;AAOlE,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKH,oBAAoB,CAACI,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;AAMD,OAAO,MAAMC,2BAA2B,GAAGP,MAAM,CAACG,GAAqC;AACvF;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAU;AAChG;AACA,CAAC;AAMD,OAAO,MAAMG,6BAA6B,GAAGR,MAAM,CAACS,IAAwC;AAC5F,aAAa,CAAC;EAAEL;AAAW,CAAC,KACpBA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","CodeHighlighterTheme","StyledCodeHighlighter","div","$codeTheme","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,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,6BAA6B;AAOlE,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKH,oBAAoB,CAACI,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;AAMD,OAAO,MAAMC,2BAA2B,GAAGP,MAAM,CAACG,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMK,6BAA6B,GAAGR,MAAM,CAACS,IAAwC;AAC5F,aAAa,CAAC;EAAEL;AAAW,CAAC,KACpBA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlighter.test.js","names":["fireEvent","render","screen","waitFor","React","describe","expect","it","vi","CodeHighlighterTheme","CodeHighlighter","mock","Icon","createElement","SharingContextMenu","children","useColorScheme","undefined","ttsToITextString","value","useTextstringValue","textstring","fallback","DialogType","TOAST","ToastType","ERROR","SUCCESS","createDialog","fn","open","writeText","spyOn","navigator","clipboard","mockResolvedValue","container","code","copyButtonText","language","shouldShowLineNumbers","theme","Dark","click","getByRole","name","toHaveBeenCalledWith","querySelector","toHaveStyle","overflow","padding","firstChild","backgroundColor","shouldFormatCode","Light","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/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js

@@ -1,38 +1,89 @@
-import { Icon, Popup } from '@chayns-components/core';
-import React from 'react';
+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 { CodeHighlighterTheme } from '../../../types/codeHighlighter';
-import { StyledCopyToClipboard, StyledCopyToClipboardText } from './CopyToClipboard.styles';
-import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';
+import { StyledCopyToClipboard, StyledCopyToClipboardActionGroup, StyledCopyToClipboardButton } from './CopyToClipboard.styles';
 import textStrings from '../../../constants/textStrings';
+const STICKY_ACTION_OFFSET = 8;
 const CopyToClipboard = ({
   copyButtonText,
   text,
   theme
 }) => {
-  const handleClick = () => {
-    void navigator.clipboard.writeText(text);
-  };
-  const popupContent = /*#__PURE__*/React.createElement(TextstringProvider, {
-    libraryName: "@chayns-components-code-highlighter"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      display: 'block',
-      padding: '5px'
+  const [isActionGroupSticky, setIsActionGroupSticky] = useState(false);
+  const actionGroupRef = useRef(null);
+  const defaultCopyText = useTextstringValue({
+    textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy)
+  });
+  const copiedText = useTextstringValue({
+    textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copied)
+  });
+  const copyFailedText = useTextstringValue({
+    textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copyFailed)
+  });
+  const shareText = useTextstringValue({
+    textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share)
+  });
+  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);
+      void createDialog({
+        showCloseIcon: true,
+        text: copiedText,
+        toastType: ToastType.SUCCESS,
+        type: DialogType.TOAST
+      }).open();
+    } catch {
+      void createDialog({
+        showCloseIcon: true,
+        text: copyFailedText,
+        toastType: ToastType.ERROR,
+        type: DialogType.TOAST
+      }).open();
     }
-  }, /*#__PURE__*/React.createElement(Textstring, {
-    textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copied),
-    childrenTagName: "p"
-  })));
-  return /*#__PURE__*/React.createElement(Popup, {
-    content: popupContent
-  }, /*#__PURE__*/React.createElement(StyledCopyToClipboard, {
-    onClick: handleClick
+  }, [copiedText, copyFailedText, text]);
+  return /*#__PURE__*/React.createElement(StyledCopyToClipboard, {
+    $codeTheme: theme,
+    ref: actionGroupRef
+  }, /*#__PURE__*/React.createElement(StyledCopyToClipboardActionGroup, null, /*#__PURE__*/React.createElement(StyledCopyToClipboardButton, {
+    $codeTheme: theme,
+    $isSticky: isActionGroupSticky,
+    "aria-label": copyText,
+    onClick: () => {
+      void handleCopy();
+    },
+    type: "button"
   }, /*#__PURE__*/React.createElement(Icon, {
-    icons: ['fa-light fa-clipboard'],
-    color: theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'
-  }), copyButtonText && /*#__PURE__*/React.createElement(StyledCopyToClipboardText, {
-    $codeTheme: theme
-  }, /*#__PURE__*/React.createElement("tw-ignore", null, copyButtonText))));
+    color: iconColor,
+    icons: ['fa-light fa-copy']
+  })), /*#__PURE__*/React.createElement(SharingContextMenu, {
+    link: text,
+    shouldUseDefaultTriggerStyles: false
+  }, /*#__PURE__*/React.createElement(StyledCopyToClipboardButton, {
+    $codeTheme: theme,
+    $isSticky: isActionGroupSticky,
+    "aria-label": shareText,
+    type: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: iconColor,
+    icons: ['fa fa-share-nodes']
+  })))));
 };
 CopyToClipboard.displayName = 'CopyToClipboard';
 export default CopyToClipboard;