@chayns-components/code-highlighter 5.5.9 → 5.5.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/AGENTS.md +24 -0
  2. package/lib/cjs/components/code-highlighter/CodeHighlighter.js +2 -1
  3. package/lib/cjs/components/code-highlighter/CodeHighlighter.js.map +1 -1
  4. package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js +3 -16
  5. package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map +1 -1
  6. package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionState.js +66 -0
  7. package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionState.js.map +1 -0
  8. package/lib/esm/components/code-highlighter/CodeHighlighter.js +2 -1
  9. package/lib/esm/components/code-highlighter/CodeHighlighter.js.map +1 -1
  10. package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js +4 -16
  11. package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map +1 -1
  12. package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionState.js +59 -0
  13. package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionState.js.map +1 -0
  14. package/lib/types/components/code-highlighter/copy-to-clipboard/CopyToClipboard.d.ts +2 -1
  15. package/lib/types/components/code-highlighter/copy-to-clipboard/useStickyActionState.d.ts +2 -0
  16. package/package.json +4 -4
package/AGENTS.md CHANGED
@@ -288,6 +288,30 @@ import { CodeHighlighter } from '@chayns-components/code-highlighter';
288
288
  />
289
289
  ```
290
290
 
291
+ #### Nested Scroll Container
292
+
293
+ ```tsx
294
+ <CodeHighlighter
295
+ copyButtonText={'Code kopieren'}
296
+ shouldShowLineNumbers
297
+ language={'typescript'}
298
+ code={Array.from(
299
+ { length: 80 },
300
+ (_, index) => `const update${index + 1} = createUpdate(${index + 1});`,
301
+ ).join('\n')}
302
+ />
303
+ ```
304
+
305
+ #### Virtualized Chat Message
306
+
307
+ ```tsx
308
+ <CodeHighlighter
309
+ copyButtonText={'Code kopieren'}
310
+ shouldShowLineNumbers
311
+ language={'tsx'}
312
+ />
313
+ ```
314
+
291
315
  ### Props
292
316
 
293
317
  No prop documentation available.
package/lib/cjs/components/code-highlighter/CodeHighlighter.js CHANGED
@@ -145,7 +145,8 @@ const CodeHighlighter = ({
145
145
  }, /*#__PURE__*/_react.default.createElement("tw-ignore", null, (0, _codeHighlighter2.formatLanguage)(language)))), /*#__PURE__*/_react.default.createElement(_CopyToClipboard.default, {
146
146
  text: code,
147
147
  theme: resolvedTheme,
148
- copyButtonText: copyButtonText
148
+ copyButtonText: copyButtonText,
149
+ rootRef: ref
149
150
  }), /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.Prism, {
150
151
  customStyle: syntaxHighlighterStyle,
151
152
  language: language ?? '',
package/lib/cjs/components/code-highlighter/CodeHighlighter.js.map CHANGED
@@ -1 +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":[]}
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","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 CHANGED
@@ -11,16 +11,17 @@ var _react = _interopRequireWildcard(require("react"));
11
11
  var _codeHighlighter = require("../../../types/codeHighlighter");
12
12
  var _CopyToClipboard = require("./CopyToClipboard.styles");
13
13
  var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
14
+ var _useStickyActionState = require("./useStickyActionState");
14
15
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
16
  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); }
16
- const STICKY_ACTION_OFFSET = 8;
17
17
  const CopyToClipboard = ({
18
18
  copyButtonText,
19
+ rootRef,
19
20
  text,
20
21
  theme
21
22
  }) => {
22
- const [isActionGroupSticky, setIsActionGroupSticky] = (0, _react.useState)(false);
23
23
  const actionGroupRef = (0, _react.useRef)(null);
24
+ const isActionGroupSticky = (0, _useStickyActionState.useStickyActionState)(rootRef, actionGroupRef);
24
25
  const defaultCopyText = (0, _textstring.useTextstringValue)({
25
26
  textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.copy)
26
27
  });
@@ -35,20 +36,6 @@ const CopyToClipboard = ({
35
36
  });
36
37
  const copyText = copyButtonText ?? defaultCopyText;
37
38
  const iconColor = theme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';
38
- (0, _react.useEffect)(() => {
39
- const updateStickyState = () => {
40
- var _actionGroupRef$curre;
41
- const actionGroupTop = (_actionGroupRef$curre = actionGroupRef.current) === null || _actionGroupRef$curre === void 0 ? void 0 : _actionGroupRef$curre.getBoundingClientRect().top;
42
- setIsActionGroupSticky(actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET);
43
- };
44
- updateStickyState();
45
- document.addEventListener('scroll', updateStickyState, true);
46
- window.addEventListener('resize', updateStickyState);
47
- return () => {
48
- document.removeEventListener('scroll', updateStickyState, true);
49
- window.removeEventListener('resize', updateStickyState);
50
- };
51
- }, []);
52
39
  const handleCopy = (0, _react.useCallback)(async () => {
53
40
  try {
54
41
  await navigator.clipboard.writeText(text);
package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map CHANGED
@@ -1 +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":[]}
1
+ {"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 ADDED
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useStickyActionState = void 0;
7
+ var _react = require("react");
8
+ const isScrollable = element => {
9
+ const {
10
+ overflow,
11
+ overflowY
12
+ } = window.getComputedStyle(element);
13
+ return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
14
+ };
15
+ const getScrollableAncestor = element => {
16
+ let parent = element.parentElement;
17
+ while (parent) {
18
+ if (parent === document.body || parent === document.documentElement) {
19
+ return undefined;
20
+ }
21
+ if (isScrollable(parent)) {
22
+ return parent;
23
+ }
24
+ parent = parent.parentElement;
25
+ }
26
+ return undefined;
27
+ };
28
+ const useStickyActionState = (rootRef, actionRef) => {
29
+ const [isSticky, setIsSticky] = (0, _react.useState)(false);
30
+ (0, _react.useEffect)(() => {
31
+ const root = rootRef.current;
32
+ if (!root || !actionRef.current) {
33
+ return undefined;
34
+ }
35
+ const scrollContainer = getScrollableAncestor(root);
36
+ const updateStickyState = () => {
37
+ const containerTop = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect().top) ?? 0;
38
+ const stickyBoundary = containerTop + 1;
39
+ setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);
40
+ };
41
+ updateStickyState();
42
+ scrollContainer === null || scrollContainer === void 0 || scrollContainer.addEventListener('scroll', updateStickyState, {
43
+ passive: true
44
+ });
45
+ document.addEventListener('scroll', updateStickyState, true);
46
+ window.addEventListener('scroll', updateStickyState, {
47
+ passive: true
48
+ });
49
+ window.addEventListener('resize', updateStickyState);
50
+ const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateStickyState);
51
+ resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(root);
52
+ if (scrollContainer) {
53
+ resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(scrollContainer);
54
+ }
55
+ return () => {
56
+ scrollContainer === null || scrollContainer === void 0 || scrollContainer.removeEventListener('scroll', updateStickyState);
57
+ document.removeEventListener('scroll', updateStickyState, true);
58
+ window.removeEventListener('scroll', updateStickyState);
59
+ window.removeEventListener('resize', updateStickyState);
60
+ resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
61
+ };
62
+ }, [actionRef, rootRef]);
63
+ return isSticky;
64
+ };
65
+ exports.useStickyActionState = useStickyActionState;
66
+ //# sourceMappingURL=useStickyActionState.js.map
package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionState.js.map ADDED
@@ -0,0 +1 @@
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 CHANGED
@@ -137,7 +137,8 @@ const CodeHighlighter = ({
137
137
  }, /*#__PURE__*/React.createElement("tw-ignore", null, formatLanguage(language)))), /*#__PURE__*/React.createElement(CopyToClipboard, {
138
138
  text: code,
139
139
  theme: resolvedTheme,
140
- copyButtonText: copyButtonText
140
+ copyButtonText: copyButtonText,
141
+ rootRef: ref
141
142
  }), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
142
143
  customStyle: syntaxHighlighterStyle,
143
144
  language: language ?? '',
package/lib/esm/components/code-highlighter/CodeHighlighter.js.map CHANGED
@@ -1 +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":[]}
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","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 CHANGED
@@ -1,18 +1,19 @@
1
1
  import { Icon, SharingContextMenu } from '@chayns-components/core';
2
2
  import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
3
3
  import { createDialog, DialogType, ToastType } from 'chayns-api';
4
- import React, { useCallback, useEffect, useRef, useState } from 'react';
4
+ import React, { useCallback, useRef } from 'react';
5
5
  import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
6
6
  import { StyledCopyToClipboard, StyledCopyToClipboardActionGroup, StyledCopyToClipboardButton } from './CopyToClipboard.styles';
7
7
  import textStrings from '../../../constants/textStrings';
8
- const STICKY_ACTION_OFFSET = 8;
8
+ import { useStickyActionState } from './useStickyActionState';
9
9
  const CopyToClipboard = ({
10
10
  copyButtonText,
11
+ rootRef,
11
12
  text,
12
13
  theme
13
14
  }) => {
14
- const [isActionGroupSticky, setIsActionGroupSticky] = useState(false);
15
15
  const actionGroupRef = useRef(null);
16
+ const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);
16
17
  const defaultCopyText = useTextstringValue({
17
18
  textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy)
18
19
  });
@@ -27,19 +28,6 @@ const CopyToClipboard = ({
27
28
  });
28
29
  const copyText = copyButtonText ?? defaultCopyText;
29
30
  const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';
30
- useEffect(() => {
31
- const updateStickyState = () => {
32
- const actionGroupTop = actionGroupRef.current?.getBoundingClientRect().top;
33
- setIsActionGroupSticky(actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET);
34
- };
35
- updateStickyState();
36
- document.addEventListener('scroll', updateStickyState, true);
37
- window.addEventListener('resize', updateStickyState);
38
- return () => {
39
- document.removeEventListener('scroll', updateStickyState, true);
40
- window.removeEventListener('resize', updateStickyState);
41
- };
42
- }, []);
43
31
  const handleCopy = useCallback(async () => {
44
32
  try {
45
33
  await navigator.clipboard.writeText(text);
package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map CHANGED
@@ -1 +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":[]}
1
+ {"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 ADDED
@@ -0,0 +1,59 @@
1
+ import { useEffect, useState } from 'react';
2
+ const isScrollable = element => {
3
+ const {
4
+ overflow,
5
+ overflowY
6
+ } = window.getComputedStyle(element);
7
+ return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
8
+ };
9
+ const getScrollableAncestor = element => {
10
+ let parent = element.parentElement;
11
+ while (parent) {
12
+ if (parent === document.body || parent === document.documentElement) {
13
+ return undefined;
14
+ }
15
+ if (isScrollable(parent)) {
16
+ return parent;
17
+ }
18
+ parent = parent.parentElement;
19
+ }
20
+ return undefined;
21
+ };
22
+ export const useStickyActionState = (rootRef, actionRef) => {
23
+ const [isSticky, setIsSticky] = useState(false);
24
+ useEffect(() => {
25
+ const root = rootRef.current;
26
+ if (!root || !actionRef.current) {
27
+ return undefined;
28
+ }
29
+ const scrollContainer = getScrollableAncestor(root);
30
+ const updateStickyState = () => {
31
+ const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;
32
+ const stickyBoundary = containerTop + 1;
33
+ setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);
34
+ };
35
+ updateStickyState();
36
+ scrollContainer?.addEventListener('scroll', updateStickyState, {
37
+ passive: true
38
+ });
39
+ document.addEventListener('scroll', updateStickyState, true);
40
+ window.addEventListener('scroll', updateStickyState, {
41
+ passive: true
42
+ });
43
+ window.addEventListener('resize', updateStickyState);
44
+ const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateStickyState);
45
+ resizeObserver?.observe(root);
46
+ if (scrollContainer) {
47
+ resizeObserver?.observe(scrollContainer);
48
+ }
49
+ return () => {
50
+ scrollContainer?.removeEventListener('scroll', updateStickyState);
51
+ document.removeEventListener('scroll', updateStickyState, true);
52
+ window.removeEventListener('scroll', updateStickyState);
53
+ window.removeEventListener('resize', updateStickyState);
54
+ resizeObserver?.disconnect();
55
+ };
56
+ }, [actionRef, rootRef]);
57
+ return isSticky;
58
+ };
59
+ //# sourceMappingURL=useStickyActionState.js.map
package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionState.js.map ADDED
@@ -0,0 +1 @@
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 CHANGED
@@ -1,7 +1,8 @@
1
- import { FC } from 'react';
1
+ import { FC, RefObject } from 'react';
2
2
  import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
3
3
  export type CopyToClipboardProps = {
4
4
  copyButtonText?: string;
5
+ rootRef: RefObject<HTMLDivElement>;
5
6
  text: string;
6
7
  theme: CodeHighlighterTheme;
7
8
  };
package/lib/types/components/code-highlighter/copy-to-clipboard/useStickyActionState.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { RefObject } from 'react';
2
+ export declare const useStickyActionState: (rootRef: RefObject<HTMLElement>, actionRef: RefObject<HTMLElement>) => boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/code-highlighter",
3
- "version": "5.5.9",
3
+ "version": "5.5.12",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -74,8 +74,8 @@
74
74
  "vitest": "^1.6.1"
75
75
  },
76
76
  "dependencies": {
77
- "@chayns-components/core": "^5.5.9",
78
- "@chayns-components/textstring": "^5.5.8",
77
+ "@chayns-components/core": "^5.5.12",
78
+ "@chayns-components/textstring": "^5.5.12",
79
79
  "@types/react-syntax-highlighter": "^15.5.13",
80
80
  "babel-prettier-parser": "^0.10.8",
81
81
  "prettier": "^2.8.8",
@@ -92,5 +92,5 @@
92
92
  "publishConfig": {
93
93
  "access": "public"
94
94
  },
95
- "gitHead": "4660e894e1702d4a2399d0ee678dc46779d7ae98"
95
+ "gitHead": "55815a2a8c38fc3ed62f8b1bd1ee0bf34ccf4eef"
96
96
  }