@chayns-components/code-highlighter 5.0.0-beta.457 → 5.0.0-beta.458
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/lib/components/code-highlighter/CodeHighlighter.js +4 -4
- package/lib/components/code-highlighter/CodeHighlighter.js.map +1 -1
- package/lib/components/code-highlighter/CodeHighlighter.styles.d.ts +4 -4
- package/lib/components/code-highlighter/CodeHighlighter.styles.js +8 -8
- package/lib/components/code-highlighter/CodeHighlighter.styles.js.map +1 -1
- package/lib/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js +1 -1
- package/lib/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map +1 -1
- package/lib/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.d.ts +1 -1
- package/lib/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js +2 -2
- package/lib/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -59,12 +59,12 @@ const CodeHighlighter = _ref => {
|
|
|
59
59
|
return code;
|
|
60
60
|
}, [code, language, shouldFormatCode]);
|
|
61
61
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledCodeHighlighter, {
|
|
62
|
-
browser: browser?.name,
|
|
63
|
-
codeTheme: theme
|
|
62
|
+
$browser: browser?.name,
|
|
63
|
+
$codeTheme: theme
|
|
64
64
|
}, /*#__PURE__*/React.createElement(StyledCodeHighlighterHeader, {
|
|
65
|
-
codeTheme: theme
|
|
65
|
+
$codeTheme: theme
|
|
66
66
|
}, /*#__PURE__*/React.createElement(StyledCodeHighlighterFileName, {
|
|
67
|
-
codeTheme: theme
|
|
67
|
+
$codeTheme: theme
|
|
68
68
|
}, formatLanguage(language)), /*#__PURE__*/React.createElement(CopyToClipboard, {
|
|
69
69
|
text: code,
|
|
70
70
|
theme: theme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.js","names":["getDevice","format","React","useCallback","useMemo","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","CodeHighlighter","_ref","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","shouldShowLineNumbers","browser","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","config","createElement","name","codeTheme","text","showLineNumbers","wrapLines","lineProps","displayName"],"sources":["../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useMemo } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n CodeHighlighterLanguage,\n CodeHighlighterTheme,\n HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n StyledCodeHighlighter,\n StyledCodeHighlighterFileName,\n StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\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 * 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 * The theme of the code block. Decide between dark and light.\n */\n theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n theme = CodeHighlighterTheme.Dark,\n code,\n copyButtonText,\n language,\n highlightedLines,\n shouldFormatCode = false,\n shouldShowLineNumbers = false,\n}) => {\n const { browser } = getDevice();\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 };\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],\n );\n\n const formattedCode = useMemo(() => {\n if (language) {\n const config = getParserForLanguage(language);\n\n if (shouldFormatCode && config) {\n return format(code, config) as unknown as string;\n }\n\n return code;\n }\n\n return code;\n }, [code, language, shouldFormatCode]);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter browser={browser?.name} codeTheme={theme}>\n <StyledCodeHighlighterHeader codeTheme={theme}>\n <StyledCodeHighlighterFileName codeTheme={theme}>\n {formatLanguage(language)}\n </StyledCodeHighlighterFileName>\n <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n </StyledCodeHighlighterHeader>\n <SyntaxHighlighter\n language={language ?? ''}\n showLineNumbers={shouldShowLineNumbers}\n style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n wrapLines\n lineProps={lineWrapper}\n >\n {formattedCode}\n </SyntaxHighlighter>\n </StyledCodeHighlighter>\n ),\n [\n browser?.name,\n theme,\n language,\n code,\n copyButtonText,\n shouldShowLineNumbers,\n lineWrapper,\n formattedCode,\n ],\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,MAAM,QAAQ,qBAAqB;AAC5C,OAAOC,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,SAASC,eAAe,IAAIC,iBAAiB,QAAQ,0BAA0B;AAC/E,SAASC,OAAO,EAAEC,QAAQ,QAAQ,gDAAgD;AAClF,SAEIC,oBAAoB,QAEjB,6BAA6B;AACpC,SAASC,cAAc,EAAEC,oBAAoB,QAAQ,6BAA6B;AAClF,SACIC,qBAAqB,EACrBC,6BAA6B,EAC7BC,2BAA2B,QACxB,0BAA0B;AACjC,OAAOC,eAAe,MAAM,qCAAqC;AAmCjE,MAAMC,eAAyC,GAAGC,IAAA,IAQ5C;EAAA,IAR6C;IAC/CC,KAAK,GAAGT,oBAAoB,CAACU,IAAI;IACjCC,IAAI;IACJC,cAAc;IACdC,QAAQ;IACRC,gBAAgB;IAChBC,gBAAgB,GAAG,KAAK;IACxBC,qBAAqB,GAAG;EAC5B,CAAC,GAAAR,IAAA;EACG,MAAM;IAAES;EAAQ,CAAC,GAAG1B,SAAS,CAAC,CAAC;;EAE/B;EACA,MAAM2B,WAAW,GAAGxB,WAAW,CAC1ByB,UAAkB,IAAK;IACpB,IAAIC,KAAK,GAAG;MACRC,eAAe,EAAE,MAAM;MACvBC,OAAO,EAAE,OAAO;MAChBC,YAAY,EAAE;IAClB,CAAC;IAED,IAAIT,gBAAgB,EAAEU,KAAK,IAAIV,gBAAgB,CAACU,KAAK,CAACC,QAAQ,CAACN,UAAU,CAAC,EAAE;MACxEC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAIP,gBAAgB,EAAEY,OAAO,IAAIZ,gBAAgB,CAACY,OAAO,CAACD,QAAQ,CAACN,UAAU,CAAC,EAAE;MACnFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAIP,gBAAgB,EAAEa,MAAM,IAAIb,gBAAgB,CAACa,MAAM,CAACF,QAAQ,CAACN,UAAU,CAAC,EAAE;MACjFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD;IAEA,OAAO;MAAED;IAAM,CAAC;EACpB,CAAC,EACD,CAACN,gBAAgB,CACrB,CAAC;EAED,MAAMc,aAAa,GAAGjC,OAAO,CAAC,MAAM;IAChC,IAAIkB,QAAQ,EAAE;MACV,MAAMgB,MAAM,GAAG3B,oBAAoB,CAACW,QAAQ,CAAC;MAE7C,IAAIE,gBAAgB,IAAIc,MAAM,EAAE;QAC5B,OAAOrC,MAAM,CAACmB,IAAI,EAAEkB,MAAM,CAAC;MAC/B;MAEA,OAAOlB,IAAI;IACf;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAACA,IAAI,EAAEE,QAAQ,EAAEE,gBAAgB,CAAC,CAAC;EAEtC,OAAOpB,OAAO,CACV,mBACIF,KAAA,CAAAqC,aAAA,CAAC3B,qBAAqB;
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.js","names":["getDevice","format","React","useCallback","useMemo","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","CodeHighlighter","_ref","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","shouldShowLineNumbers","browser","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","config","createElement","$browser","name","$codeTheme","text","showLineNumbers","wrapLines","lineProps","displayName"],"sources":["../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useMemo } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n CodeHighlighterLanguage,\n CodeHighlighterTheme,\n HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n StyledCodeHighlighter,\n StyledCodeHighlighterFileName,\n StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\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 * 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 * The theme of the code block. Decide between dark and light.\n */\n theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n theme = CodeHighlighterTheme.Dark,\n code,\n copyButtonText,\n language,\n highlightedLines,\n shouldFormatCode = false,\n shouldShowLineNumbers = false,\n}) => {\n const { browser } = getDevice();\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 };\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],\n );\n\n const formattedCode = useMemo(() => {\n if (language) {\n const config = getParserForLanguage(language);\n\n if (shouldFormatCode && config) {\n return format(code, config) as unknown as string;\n }\n\n return code;\n }\n\n return code;\n }, [code, language, shouldFormatCode]);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter $browser={browser?.name} $codeTheme={theme}>\n <StyledCodeHighlighterHeader $codeTheme={theme}>\n <StyledCodeHighlighterFileName $codeTheme={theme}>\n {formatLanguage(language)}\n </StyledCodeHighlighterFileName>\n <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n </StyledCodeHighlighterHeader>\n <SyntaxHighlighter\n language={language ?? ''}\n showLineNumbers={shouldShowLineNumbers}\n style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n wrapLines\n lineProps={lineWrapper}\n >\n {formattedCode}\n </SyntaxHighlighter>\n </StyledCodeHighlighter>\n ),\n [\n browser?.name,\n theme,\n language,\n code,\n copyButtonText,\n shouldShowLineNumbers,\n lineWrapper,\n formattedCode,\n ],\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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"}
|
|
@@ -3,16 +3,16 @@ import type { WithTheme } from '@chayns-components/core';
|
|
|
3
3
|
import type { Browser } from 'detect-browser';
|
|
4
4
|
import { CodeHighlighterTheme } from '../../types/codeHighlighter';
|
|
5
5
|
type StyledCodeHighlighterProps = WithTheme<{
|
|
6
|
-
codeTheme: CodeHighlighterTheme;
|
|
7
|
-
browser: Browser | 'bot' | null | undefined;
|
|
6
|
+
$codeTheme: CodeHighlighterTheme;
|
|
7
|
+
$browser: Browser | 'bot' | null | undefined;
|
|
8
8
|
}>;
|
|
9
9
|
export declare const StyledCodeHighlighter: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledCodeHighlighterProps>>;
|
|
10
10
|
type StyledCodeHighlighterHeaderProps = WithTheme<{
|
|
11
|
-
codeTheme: CodeHighlighterTheme;
|
|
11
|
+
$codeTheme: CodeHighlighterTheme;
|
|
12
12
|
}>;
|
|
13
13
|
export declare const StyledCodeHighlighterHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledCodeHighlighterHeaderProps>>;
|
|
14
14
|
type StyledCodeHighlighterFileNameProps = WithTheme<{
|
|
15
|
-
codeTheme: CodeHighlighterTheme;
|
|
15
|
+
$codeTheme: CodeHighlighterTheme;
|
|
16
16
|
}>;
|
|
17
17
|
export declare const StyledCodeHighlighterFileName: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledCodeHighlighterFileNameProps>>;
|
|
18
18
|
export {};
|
|
@@ -4,9 +4,9 @@ export const StyledCodeHighlighter = styled.div`
|
|
|
4
4
|
margin: 4px 0;
|
|
5
5
|
background-color: ${_ref => {
|
|
6
6
|
let {
|
|
7
|
-
codeTheme
|
|
7
|
+
$codeTheme
|
|
8
8
|
} = _ref;
|
|
9
|
-
return codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa';
|
|
9
|
+
return $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa';
|
|
10
10
|
}};
|
|
11
11
|
border-radius: 8px;
|
|
12
12
|
padding-bottom: 6px;
|
|
@@ -20,10 +20,10 @@ export const StyledCodeHighlighter = styled.div`
|
|
|
20
20
|
// Styles for custom scrollbar
|
|
21
21
|
${_ref2 => {
|
|
22
22
|
let {
|
|
23
|
-
browser,
|
|
23
|
+
$browser,
|
|
24
24
|
theme
|
|
25
25
|
} = _ref2;
|
|
26
|
-
return browser === 'firefox' ? css`
|
|
26
|
+
return $browser === 'firefox' ? css`
|
|
27
27
|
scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
|
|
28
28
|
scrollbar-width: thin;
|
|
29
29
|
` : css`
|
|
@@ -55,18 +55,18 @@ export const StyledCodeHighlighterHeader = styled.div`
|
|
|
55
55
|
border-bottom: 1px solid
|
|
56
56
|
${_ref3 => {
|
|
57
57
|
let {
|
|
58
|
-
codeTheme
|
|
58
|
+
$codeTheme
|
|
59
59
|
} = _ref3;
|
|
60
|
-
return codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
|
|
60
|
+
return $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
|
|
61
61
|
}};
|
|
62
62
|
padding: 4px 12px;
|
|
63
63
|
`;
|
|
64
64
|
export const StyledCodeHighlighterFileName = styled.span`
|
|
65
65
|
color: ${_ref4 => {
|
|
66
66
|
let {
|
|
67
|
-
codeTheme
|
|
67
|
+
$codeTheme
|
|
68
68
|
} = _ref4;
|
|
69
|
-
return codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
|
|
69
|
+
return $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
|
|
70
70
|
}};
|
|
71
71
|
`;
|
|
72
72
|
//# sourceMappingURL=CodeHighlighter.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","css","CodeHighlighterTheme","StyledCodeHighlighter","div","_ref","codeTheme","Dark","_ref2","browser","theme","StyledCodeHighlighterHeader","_ref3","StyledCodeHighlighterFileName","span","_ref4"],"sources":["../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { Browser } from 'detect-browser';\nimport styled, { css } from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n codeTheme: CodeHighlighterTheme;\n browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n margin: 4px 0;\n background-color: ${({ codeTheme }) =>\n codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n border-radius: 8px;\n padding-bottom: 6px;\n\n pre {\n margin: 0 !important;\n overflow: auto;\n padding: 1em;\n line-height: 1.5;\n\n // Styles for custom scrollbar\n ${({ browser, theme }: StyledCodeHighlighterProps) =>\n browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n height: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid\n ${({ codeTheme }) => (codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n color: ${({ codeTheme })
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","css","CodeHighlighterTheme","StyledCodeHighlighter","div","_ref","$codeTheme","Dark","_ref2","$browser","theme","StyledCodeHighlighterHeader","_ref3","StyledCodeHighlighterFileName","span","_ref4"],"sources":["../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { Browser } from 'detect-browser';\nimport styled, { css } from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n margin: 4px 0;\n background-color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n border-radius: 8px;\n padding-bottom: 6px;\n\n pre {\n margin: 0 !important;\n overflow: auto;\n padding: 1em;\n line-height: 1.5;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledCodeHighlighterProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n height: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid\n ${({ $codeTheme }) => ($codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,6BAA6B;AAOlE,OAAO,MAAMC,qBAAqB,GAAGH,MAAM,CAACI,GAAgC;AAC5E;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAC/BC,UAAU,KAAKJ,oBAAoB,CAACK,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAkC,CAAC,GAAAF,KAAA;EAAA,OAC9CC,QAAQ,KAAK,SAAS,GAChBR,GAAI;AACtB,8CAA8CS,KAAK,CAAC,UAAU,CAAE;AAChE;AACA,mBAAmB,GACDT,GAAI;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmDS,KAAK,CAAC,UAAU,CAAE;AACrE;AACA;AACA,mBAAmB;AAAA,CAAC;AACpB;AACA,CAAC;AAMD,OAAO,MAAMC,2BAA2B,GAAGX,MAAM,CAACI,GAAsC;AACxF;AACA;AACA;AACA;AACA,UAAUQ,KAAA;EAAA,IAAC;IAAEN;EAAW,CAAC,GAAAM,KAAA;EAAA,OAAMN,UAAU,KAAKJ,oBAAoB,CAACK,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AACjG;AACA,CAAC;AAMD,OAAO,MAAMM,6BAA6B,GAAGb,MAAM,CAACc,IAAyC;AAC7F,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAW,CAAC,GAAAS,KAAA;EAAA,OACpBT,UAAU,KAAKJ,oBAAoB,CAACK,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACzE,CAAC"}
|
|
@@ -25,7 +25,7 @@ const CopyToClipboard = _ref => {
|
|
|
25
25
|
icons: ['fa-light fa-clipboard'],
|
|
26
26
|
color: theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'
|
|
27
27
|
}), copyButtonText && /*#__PURE__*/React.createElement(StyledCopyToClipboardText, {
|
|
28
|
-
codeTheme: theme
|
|
28
|
+
$codeTheme: theme
|
|
29
29
|
}, copyButtonText)));
|
|
30
30
|
};
|
|
31
31
|
CopyToClipboard.displayName = 'CopyToClipboard';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.js","names":["Icon","Popup","React","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardText","CopyToClipboard","_ref","copyButtonText","text","theme","handleClick","navigator","clipboard","writeText","popupContent","createElement","style","display","padding","content","onClick","icons","color","Dark","codeTheme","displayName"],"sources":["../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, Popup } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport { StyledCopyToClipboard, StyledCopyToClipboardText } from './CopyToClipboard.styles';\n\nexport type CopyToClipboardProps = {\n copyButtonText?: string;\n text: string;\n theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n const handleClick = () => {\n void navigator.clipboard.writeText(text);\n };\n\n const popupContent = (\n <span style={{ display: 'block', padding: '5px' }}>\n <p>Kopiert!</p>\n </span>\n );\n\n return (\n <Popup content={popupContent}>\n <StyledCopyToClipboard onClick={handleClick}>\n <Icon\n icons={['fa-light fa-clipboard']}\n color={theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'}\n />\n {copyButtonText && (\n <StyledCopyToClipboardText codeTheme={theme}>\n {copyButtonText}\n </StyledCopyToClipboardText>\n )}\n </StyledCopyToClipboard>\n </Popup>\n );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,KAAK,QAAQ,yBAAyB;AACrD,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,0BAA0B;AAQ3F,MAAMC,eAAyC,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,cAAc;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAC9E,MAAMI,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAKC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACL,IAAI,CAAC;EAC5C,CAAC;EAED,MAAMM,YAAY,gBACdb,KAAA,CAAAc,aAAA;IAAMC,KAAK,EAAE;MAAEC,OAAO,EAAE,OAAO;MAAEC,OAAO,EAAE;IAAM;EAAE,gBAC9CjB,KAAA,CAAAc,aAAA,YAAG,UAAW,CACZ,CACT;EAED,oBACId,KAAA,CAAAc,aAAA,CAACf,KAAK;IAACmB,OAAO,EAAEL;EAAa,gBACzBb,KAAA,CAAAc,aAAA,CAACZ,qBAAqB;IAACiB,OAAO,EAAEV;EAAY,gBACxCT,KAAA,CAAAc,aAAA,CAAChB,IAAI;IACDsB,KAAK,EAAE,CAAC,uBAAuB,CAAE;IACjCC,KAAK,EAAEb,KAAK,KAAKP,oBAAoB,CAACqB,IAAI,GAAG,SAAS,GAAG;EAAU,CACtE,CAAC,EACDhB,cAAc,iBACXN,KAAA,CAAAc,aAAA,CAACX,yBAAyB;IAACoB,
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.js","names":["Icon","Popup","React","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardText","CopyToClipboard","_ref","copyButtonText","text","theme","handleClick","navigator","clipboard","writeText","popupContent","createElement","style","display","padding","content","onClick","icons","color","Dark","$codeTheme","displayName"],"sources":["../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, Popup } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport { StyledCopyToClipboard, StyledCopyToClipboardText } from './CopyToClipboard.styles';\n\nexport type CopyToClipboardProps = {\n copyButtonText?: string;\n text: string;\n theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n const handleClick = () => {\n void navigator.clipboard.writeText(text);\n };\n\n const popupContent = (\n <span style={{ display: 'block', padding: '5px' }}>\n <p>Kopiert!</p>\n </span>\n );\n\n return (\n <Popup content={popupContent}>\n <StyledCopyToClipboard onClick={handleClick}>\n <Icon\n icons={['fa-light fa-clipboard']}\n color={theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'}\n />\n {copyButtonText && (\n <StyledCopyToClipboardText $codeTheme={theme}>\n {copyButtonText}\n </StyledCopyToClipboardText>\n )}\n </StyledCopyToClipboard>\n </Popup>\n );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,KAAK,QAAQ,yBAAyB;AACrD,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,0BAA0B;AAQ3F,MAAMC,eAAyC,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,cAAc;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAC9E,MAAMI,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAKC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACL,IAAI,CAAC;EAC5C,CAAC;EAED,MAAMM,YAAY,gBACdb,KAAA,CAAAc,aAAA;IAAMC,KAAK,EAAE;MAAEC,OAAO,EAAE,OAAO;MAAEC,OAAO,EAAE;IAAM;EAAE,gBAC9CjB,KAAA,CAAAc,aAAA,YAAG,UAAW,CACZ,CACT;EAED,oBACId,KAAA,CAAAc,aAAA,CAACf,KAAK;IAACmB,OAAO,EAAEL;EAAa,gBACzBb,KAAA,CAAAc,aAAA,CAACZ,qBAAqB;IAACiB,OAAO,EAAEV;EAAY,gBACxCT,KAAA,CAAAc,aAAA,CAAChB,IAAI;IACDsB,KAAK,EAAE,CAAC,uBAAuB,CAAE;IACjCC,KAAK,EAAEb,KAAK,KAAKP,oBAAoB,CAACqB,IAAI,GAAG,SAAS,GAAG;EAAU,CACtE,CAAC,EACDhB,cAAc,iBACXN,KAAA,CAAAc,aAAA,CAACX,yBAAyB;IAACoB,UAAU,EAAEf;EAAM,GACxCF,cACsB,CAEZ,CACpB,CAAC;AAEhB,CAAC;AAEDF,eAAe,CAACoB,WAAW,GAAG,iBAAiB;AAE/C,eAAepB,eAAe"}
|
|
@@ -3,7 +3,7 @@ import type { WithTheme } from '@chayns-components/core';
|
|
|
3
3
|
import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
|
|
4
4
|
export declare const StyledCopyToClipboard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
5
5
|
type StyledCopyToClipboardTextProps = WithTheme<{
|
|
6
|
-
codeTheme: CodeHighlighterTheme;
|
|
6
|
+
$codeTheme: CodeHighlighterTheme;
|
|
7
7
|
}>;
|
|
8
8
|
export declare const StyledCopyToClipboardText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledCopyToClipboardTextProps>>;
|
|
9
9
|
export {};
|
|
@@ -7,9 +7,9 @@ export const StyledCopyToClipboard = styled.div`
|
|
|
7
7
|
export const StyledCopyToClipboardText = styled.span`
|
|
8
8
|
color: ${_ref => {
|
|
9
9
|
let {
|
|
10
|
-
codeTheme
|
|
10
|
+
$codeTheme
|
|
11
11
|
} = _ref;
|
|
12
|
-
return codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
|
|
12
|
+
return $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
|
|
13
13
|
}};
|
|
14
14
|
font-size: small;
|
|
15
15
|
margin-left: 4px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.styles.js","names":["styled","CodeHighlighterTheme","StyledCopyToClipboard","div","StyledCopyToClipboardText","span","_ref","codeTheme","Dark"],"sources":["../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\nexport const StyledCopyToClipboard = styled.div`\n display: flex;\n align-items: center;\n`;\n\ntype StyledCopyToClipboardTextProps = WithTheme<{\n codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n color: ${({ codeTheme })
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.styles.js","names":["styled","CodeHighlighterTheme","StyledCopyToClipboard","div","StyledCopyToClipboardText","span","_ref","$codeTheme","Dark"],"sources":["../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\nexport const StyledCopyToClipboard = styled.div`\n display: flex;\n align-items: center;\n`;\n\ntype StyledCopyToClipboardTextProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n font-size: small;\n margin-left: 4px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,gCAAgC;AAErE,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAAI;AAChD;AACA;AACA,CAAC;AAKD,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACK,IAAqC;AACrF,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACpBC,UAAU,KAAKN,oBAAoB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACzE;AACA;AACA,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/code-highlighter",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.458",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"typescript": "^5.3.3"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
59
|
+
"@chayns-components/core": "^5.0.0-beta.458",
|
|
60
60
|
"@types/react-syntax-highlighter": "^15.5.11",
|
|
61
61
|
"babel-prettier-parser": "^0.10.8",
|
|
62
62
|
"prettier": "^3.2.5",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"publishConfig": {
|
|
73
73
|
"access": "public"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "1d73583ba75b4129c0b79b08a51c5c07d1d74a6c"
|
|
76
76
|
}
|