@chayns-components/code-highlighter 5.5.3 → 5.5.8
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.
- package/AGENTS.md +37 -0
- package/lib/cjs/components/code-highlighter/CodeHighlighter.js +39 -23
- package/lib/cjs/components/code-highlighter/CodeHighlighter.js.map +1 -1
- package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js +9 -7
- package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js.map +1 -1
- package/lib/cjs/components/code-highlighter/CodeHighlighter.test.js +78 -0
- package/lib/cjs/components/code-highlighter/CodeHighlighter.test.js.map +1 -0
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js +77 -24
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map +1 -1
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js +86 -2
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js.map +1 -1
- package/lib/cjs/constants/textStrings.js +12 -0
- package/lib/cjs/constants/textStrings.js.map +1 -1
- package/lib/esm/components/code-highlighter/CodeHighlighter.js +40 -24
- package/lib/esm/components/code-highlighter/CodeHighlighter.js.map +1 -1
- package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js +9 -7
- package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js.map +1 -1
- package/lib/esm/components/code-highlighter/CodeHighlighter.test.js +74 -0
- package/lib/esm/components/code-highlighter/CodeHighlighter.test.js.map +1 -0
- package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js +77 -26
- package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map +1 -1
- package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js +85 -1
- package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js.map +1 -1
- package/lib/esm/constants/textStrings.js +12 -0
- package/lib/esm/constants/textStrings.js.map +1 -1
- package/lib/types/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.d.ts +21 -1
- package/lib/types/constants/textStrings.d.ts +12 -0
- package/package.json +11 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.js","names":["Icon","
|
|
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,8 +1,92 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
|
|
3
3
|
export const StyledCopyToClipboard = styled.div`
|
|
4
|
+
position: sticky;
|
|
5
|
+
top: var(--code-highlighter-action-inset);
|
|
6
|
+
z-index: 1;
|
|
4
7
|
display: flex;
|
|
5
|
-
|
|
8
|
+
justify-content: flex-end;
|
|
9
|
+
height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));
|
|
10
|
+
margin-top: calc(
|
|
11
|
+
(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1
|
|
12
|
+
);
|
|
13
|
+
padding-right: var(--code-highlighter-action-inset);
|
|
14
|
+
`;
|
|
15
|
+
const getActionGroupBorder = ({
|
|
16
|
+
$codeTheme,
|
|
17
|
+
$isSticky
|
|
18
|
+
}) => {
|
|
19
|
+
if (!$isSticky) {
|
|
20
|
+
return 'transparent';
|
|
21
|
+
}
|
|
22
|
+
return $codeTheme === CodeHighlighterTheme.Dark ? '#5a6474' : '#d4d4d4';
|
|
23
|
+
};
|
|
24
|
+
const getActionGroupBackground = ({
|
|
25
|
+
$codeTheme,
|
|
26
|
+
$isSticky
|
|
27
|
+
}) => {
|
|
28
|
+
if (!$isSticky) {
|
|
29
|
+
return 'transparent';
|
|
30
|
+
}
|
|
31
|
+
return $codeTheme === CodeHighlighterTheme.Dark ? '#343a46' : '#fafafa';
|
|
32
|
+
};
|
|
33
|
+
const getButtonHoverBackground = ({
|
|
34
|
+
$codeTheme
|
|
35
|
+
}) => $codeTheme === CodeHighlighterTheme.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';
|
|
36
|
+
const getButtonActiveBackground = ({
|
|
37
|
+
$codeTheme
|
|
38
|
+
}) => $codeTheme === CodeHighlighterTheme.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';
|
|
39
|
+
const getButtonHoverBorder = ({
|
|
40
|
+
$codeTheme
|
|
41
|
+
}) => $codeTheme === CodeHighlighterTheme.Dark ? '#6a7485' : '#c2c2c2';
|
|
42
|
+
const getButtonShadow = ({
|
|
43
|
+
$isSticky
|
|
44
|
+
}) => $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none';
|
|
45
|
+
const getButtonHoverShadow = ({
|
|
46
|
+
$isSticky
|
|
47
|
+
}) => {
|
|
48
|
+
const insetShadow = 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)';
|
|
49
|
+
return $isSticky ? `0 2px 8px rgba(0, 0, 0, 0.32), ${insetShadow}` : insetShadow;
|
|
50
|
+
};
|
|
51
|
+
export const StyledCopyToClipboardActionGroup = styled.div`
|
|
52
|
+
display: flex;
|
|
53
|
+
gap: 4px;
|
|
54
|
+
height: var(--code-highlighter-action-size);
|
|
55
|
+
`;
|
|
56
|
+
export const StyledCopyToClipboardButton = styled.button`
|
|
57
|
+
box-sizing: border-box;
|
|
58
|
+
border: 1px solid ${getActionGroupBorder};
|
|
59
|
+
border-radius: 4px;
|
|
60
|
+
width: var(--code-highlighter-action-size);
|
|
61
|
+
height: var(--code-highlighter-action-size);
|
|
62
|
+
padding: 0;
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
background-color: ${getActionGroupBackground};
|
|
65
|
+
color: ${({
|
|
66
|
+
$codeTheme
|
|
67
|
+
}) => $codeTheme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#999999'};
|
|
68
|
+
box-shadow: ${getButtonShadow};
|
|
69
|
+
transition:
|
|
70
|
+
background-color 0.15s ease,
|
|
71
|
+
border-color 0.15s ease,
|
|
72
|
+
box-shadow 0.15s ease,
|
|
73
|
+
transform 0.15s ease;
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
border-color: ${getButtonHoverBorder};
|
|
77
|
+
background-color: ${getButtonHoverBackground};
|
|
78
|
+
box-shadow: ${getButtonHoverShadow};
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&:active {
|
|
82
|
+
background-color: ${getButtonActiveBackground};
|
|
83
|
+
transform: scale(0.94);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&:focus-visible {
|
|
87
|
+
outline: 2px solid currentColor;
|
|
88
|
+
outline-offset: 2px;
|
|
89
|
+
}
|
|
6
90
|
`;
|
|
7
91
|
export const StyledCopyToClipboardText = styled.span`
|
|
8
92
|
color: ${({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.styles.js","names":["styled","CodeHighlighterTheme","StyledCopyToClipboard","div","
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.styles.js","names":["styled","CodeHighlighterTheme","StyledCopyToClipboard","div","getActionGroupBorder","$codeTheme","$isSticky","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,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,gCAAgC;AAMrE,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,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,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAMC,wBAAwB,GAAGA,CAAC;EAAEH,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC9F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAME,wBAAwB,GAAGA,CAAC;EAAEJ;AAA6C,CAAC,KAC9EA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMG,yBAAyB,GAAGA,CAAC;EAAEL;AAA6C,CAAC,KAC/EA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMI,oBAAoB,GAAGA,CAAC;EAAEN;AAA6C,CAAC,KAC1EA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AAEpE,MAAMK,eAAe,GAAGA,CAAC;EAAEN;AAA4C,CAAC,KACpEA,SAAS,GAAG,+BAA+B,GAAG,MAAM;AAExD,MAAMO,oBAAoB,GAAGA,CAAC;EAAEP;AAA4C,CAAC,KAAK;EAC9E,MAAMQ,WAAW,GAAG,2CAA2C;EAE/D,OAAOR,SAAS,GAAG,kCAAkCQ,WAAW,EAAE,GAAGA,WAAW;AACpF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACG,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,2BAA2B,GAAGhB,MAAM,CAACiB,MAAwC;AAC1F;AACA,wBAAwBb,oBAAoB;AAC5C;AACA;AACA;AACA;AACA;AACA,wBAAwBI,wBAAwB;AAChD,aAAa,CAAC;EAAEH;AAAW,CAAC,KACpBA,UAAU,KAAKJ,oBAAoB,CAACM,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;AAKD,OAAO,MAAMQ,yBAAyB,GAAGlB,MAAM,CAACmB,IAAoC;AACpF,aAAa,CAAC;EAAEd;AAAW,CAAC,KACpBA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -2,9 +2,21 @@ export default {
|
|
|
2
2
|
components: {
|
|
3
3
|
codeHighlighter: {
|
|
4
4
|
copyToClipboard: {
|
|
5
|
+
copy: {
|
|
6
|
+
stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copy',
|
|
7
|
+
fallback: 'Kopieren'
|
|
8
|
+
},
|
|
5
9
|
copied: {
|
|
6
10
|
stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copied',
|
|
7
11
|
fallback: 'Kopiert!'
|
|
12
|
+
},
|
|
13
|
+
copyFailed: {
|
|
14
|
+
stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed',
|
|
15
|
+
fallback: 'Kopieren fehlgeschlagen'
|
|
16
|
+
},
|
|
17
|
+
share: {
|
|
18
|
+
stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share',
|
|
19
|
+
fallback: 'Teilen'
|
|
8
20
|
}
|
|
9
21
|
}
|
|
10
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textStrings.js","names":["components","codeHighlighter","copyToClipboard","
|
|
1
|
+
{"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":"AAAA,eAAe;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":[]}
|
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
|
|
2
|
-
export declare const StyledCopyToClipboard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("
|
|
2
|
+
export declare const StyledCopyToClipboard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme"> & {
|
|
3
|
+
$codeTheme: CodeHighlighterTheme;
|
|
4
|
+
} & {
|
|
5
|
+
theme: import("@chayns-components/core").Theme;
|
|
6
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme"> & {
|
|
7
|
+
$codeTheme: CodeHighlighterTheme;
|
|
8
|
+
} & {
|
|
9
|
+
theme: import("@chayns-components/core").Theme;
|
|
10
|
+
}, never>>> & string;
|
|
11
|
+
export declare const StyledCopyToClipboardActionGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
12
|
+
export declare const StyledCopyToClipboardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$codeTheme" | "theme" | "$isSticky"> & {
|
|
13
|
+
$codeTheme: CodeHighlighterTheme;
|
|
14
|
+
$isSticky: boolean;
|
|
15
|
+
} & {
|
|
16
|
+
theme: import("@chayns-components/core").Theme;
|
|
17
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$codeTheme" | "theme" | "$isSticky"> & {
|
|
18
|
+
$codeTheme: CodeHighlighterTheme;
|
|
19
|
+
$isSticky: boolean;
|
|
20
|
+
} & {
|
|
21
|
+
theme: import("@chayns-components/core").Theme;
|
|
22
|
+
}, never>>> & string;
|
|
3
23
|
export declare const StyledCopyToClipboardText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$codeTheme" | "theme"> & {
|
|
4
24
|
$codeTheme: CodeHighlighterTheme;
|
|
5
25
|
} & {
|
|
@@ -2,10 +2,22 @@ declare const _default: {
|
|
|
2
2
|
readonly components: {
|
|
3
3
|
readonly codeHighlighter: {
|
|
4
4
|
readonly copyToClipboard: {
|
|
5
|
+
readonly copy: {
|
|
6
|
+
readonly stringName: "txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copy";
|
|
7
|
+
readonly fallback: "Kopieren";
|
|
8
|
+
};
|
|
5
9
|
readonly copied: {
|
|
6
10
|
readonly stringName: "txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copied";
|
|
7
11
|
readonly fallback: "Kopiert!";
|
|
8
12
|
};
|
|
13
|
+
readonly copyFailed: {
|
|
14
|
+
readonly stringName: "txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed";
|
|
15
|
+
readonly fallback: "Kopieren fehlgeschlagen";
|
|
16
|
+
};
|
|
17
|
+
readonly share: {
|
|
18
|
+
readonly stringName: "txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share";
|
|
19
|
+
readonly fallback: "Teilen";
|
|
20
|
+
};
|
|
9
21
|
};
|
|
10
22
|
};
|
|
11
23
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/code-highlighter",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.8",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"build:types": "tsc",
|
|
46
46
|
"build:cjs": "cross-env NODE_ENV=cjs babel src --out-dir lib/cjs --extensions=.ts,.tsx --source-maps --ignore=src/stories",
|
|
47
47
|
"build:esm": "cross-env NODE_ENV=esm babel src --out-dir lib/esm --extensions=.ts,.tsx --source-maps --ignore=src/stories",
|
|
48
|
+
"test": "vitest",
|
|
48
49
|
"watch:js": "npm run build:esm -- --watch",
|
|
49
50
|
"link": "npm link && npm run watch:js"
|
|
50
51
|
},
|
|
@@ -57,20 +58,24 @@
|
|
|
57
58
|
"@babel/preset-env": "^7.29.7",
|
|
58
59
|
"@babel/preset-react": "^7.29.7",
|
|
59
60
|
"@babel/preset-typescript": "^7.29.7",
|
|
61
|
+
"@testing-library/jest-dom": "^6.10.0",
|
|
62
|
+
"@testing-library/react": "^16.3.2",
|
|
60
63
|
"@types/react": "^18.3.31",
|
|
61
64
|
"@types/react-dom": "^18.3.7",
|
|
62
65
|
"@types/styled-components": "^5.1.36",
|
|
63
66
|
"babel-loader": "^9.2.1",
|
|
64
67
|
"cross-env": "^7.0.3",
|
|
68
|
+
"jsdom": "^26.1.0",
|
|
65
69
|
"lerna": "^8.2.4",
|
|
66
70
|
"react": "^18.3.1",
|
|
67
71
|
"react-dom": "^18.3.1",
|
|
68
|
-
"styled-components": "^6.4.
|
|
69
|
-
"typescript": "^5.9.3"
|
|
72
|
+
"styled-components": "^6.4.4",
|
|
73
|
+
"typescript": "^5.9.3",
|
|
74
|
+
"vitest": "^1.6.1"
|
|
70
75
|
},
|
|
71
76
|
"dependencies": {
|
|
72
|
-
"@chayns-components/core": "^5.5.
|
|
73
|
-
"@chayns-components/textstring": "^5.
|
|
77
|
+
"@chayns-components/core": "^5.5.8",
|
|
78
|
+
"@chayns-components/textstring": "^5.5.8",
|
|
74
79
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
75
80
|
"babel-prettier-parser": "^0.10.8",
|
|
76
81
|
"prettier": "^2.8.8",
|
|
@@ -87,5 +92,5 @@
|
|
|
87
92
|
"publishConfig": {
|
|
88
93
|
"access": "public"
|
|
89
94
|
},
|
|
90
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "d02c312f0bee710f279abfc8d16bd8d17c8a703d"
|
|
91
96
|
}
|