@chayns-components/code-highlighter 5.0.54 → 5.0.57
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/cjs/components/code-highlighter/CodeHighlighter.js +5 -1
- package/lib/cjs/components/code-highlighter/CodeHighlighter.js.map +1 -1
- package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js +0 -5
- package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js.map +1 -1
- package/lib/esm/components/code-highlighter/CodeHighlighter.js +5 -1
- package/lib/esm/components/code-highlighter/CodeHighlighter.js.map +1 -1
- package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js +0 -5
- package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -91,6 +91,9 @@ const CodeHighlighter = ({
|
|
|
91
91
|
style
|
|
92
92
|
};
|
|
93
93
|
}, [highlightedLines, width]);
|
|
94
|
+
const lineNumberStyle = (0, _react.useMemo)(() => ({
|
|
95
|
+
WebkitUserSelect: 'none'
|
|
96
|
+
}), []);
|
|
94
97
|
const formattedCode = (0, _react.useMemo)(() => {
|
|
95
98
|
if (language) {
|
|
96
99
|
void (0, _codeHighlighter2.getParserForLanguage)(language).then(config => {
|
|
@@ -130,12 +133,13 @@ const CodeHighlighter = ({
|
|
|
130
133
|
copyButtonText: copyButtonText
|
|
131
134
|
})), /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.PrismAsyncLight, {
|
|
132
135
|
language: language ?? '',
|
|
136
|
+
lineNumberStyle: lineNumberStyle,
|
|
133
137
|
showLineNumbers: shouldShowLineNumbers,
|
|
134
138
|
style: theme === _codeHighlighter.CodeHighlighterTheme.Dark ? _prism.oneDark : _prism.oneLight,
|
|
135
139
|
wrapLines: true,
|
|
136
140
|
wrapLongLines: shouldWrapLines,
|
|
137
141
|
lineProps: lineWrapper
|
|
138
|
-
}, formattedCode)), [theme, language, code, copyButtonText,
|
|
142
|
+
}, formattedCode)), [shouldWrapLines, theme, language, code, copyButtonText, lineNumberStyle, shouldShowLineNumbers, lineWrapper, formattedCode]);
|
|
139
143
|
};
|
|
140
144
|
CodeHighlighter.displayName = 'CodeHighlighter';
|
|
141
145
|
var _default = exports.default = CodeHighlighter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_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","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","useState","ref","useRef","useEffect","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","useMemo","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","PrismAsyncLight","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 { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n CodeHighlighterLanguage,\n CodeHighlighterTheme,\n HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n StyledCodeHighlighter,\n StyledCodeHighlighterFileName,\n StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n root: HTMLDivElement | null;\n className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n if (!root) return;\n\n const preElement = root.querySelector('pre');\n if (!preElement) return;\n\n preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n /**\n * The code that should be displayed.\n */\n code: string;\n /**\n * The text that should be displayed after the copy button.\n * If not set, just the button is displayed without text.\n */\n copyButtonText?: string;\n /**\n * The lines of code that should be highlighted.\n * Following lines can be highlighted: added, removed and just marked.\n */\n highlightedLines?: HighlightedLines;\n /**\n * The language of the displayed code.\n */\n language: CodeHighlighterLanguage;\n /**\n * Function to be executed when the formatting of the code fails.\n */\n onFormatError?: (error: unknown) => void;\n /**\n * Whether the code should be formatted with prettier.\n */\n shouldFormatCode?: boolean;\n /**\n * Whether the line numbers should be displayed.\n */\n shouldShowLineNumbers?: boolean;\n /**\n * Whether long lines should be wrapped.\n */\n shouldWrapLines?: boolean;\n /**\n * The theme of the code block. Decide between dark and light.\n */\n theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n theme = CodeHighlighterTheme.Dark,\n code,\n copyButtonText,\n language,\n highlightedLines,\n shouldFormatCode = false,\n onFormatError,\n shouldShowLineNumbers = false,\n shouldWrapLines,\n}) => {\n const [width, setWidth] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n if (ref.current) {\n const { children } = ref.current;\n\n const preElement = Array.from(children).find(\n ({ tagName }) => tagName.toLowerCase() === 'pre',\n );\n\n if (preElement) {\n setWidth(preElement.scrollWidth);\n }\n }\n };\n\n handleResize();\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n // function to style highlighted code\n const lineWrapper = useCallback(\n (lineNumber: number) => {\n let style = {\n backgroundColor: 'none',\n display: 'block',\n borderRadius: '2px',\n width: width - 15,\n };\n\n if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#2EF29930' };\n } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#F22E5B30' };\n } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#cccccc40' };\n }\n\n return { style };\n },\n [highlightedLines, width],\n );\n\n const formattedCode = useMemo(() => {\n if (language) {\n void getParserForLanguage(language).then((config) => {\n if (shouldFormatCode && config) {\n try {\n return format(code, config) as unknown as string;\n } catch (error) {\n if (typeof onFormatError !== 'undefined') onFormatError(error);\n }\n }\n\n return code;\n });\n }\n\n return code;\n }, [code, language, shouldFormatCode, onFormatError]);\n\n useEffect(() => {\n const elements = document.getElementsByClassName('linenumber');\n\n Array.from(elements).forEach((element) => {\n const wrapper = document.createElement('tw-ignore');\n\n while (element.firstChild) {\n wrapper.appendChild(element.firstChild);\n }\n\n element.appendChild(wrapper);\n });\n }, []);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter $shouldWrapLines={shouldWrapLines} $codeTheme={theme} ref={ref}>\n <StyledCodeHighlighterHeader $codeTheme={theme}>\n <StyledCodeHighlighterFileName $codeTheme={theme}>\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n {/* @ts-ignore */}\n <tw-ignore>{formatLanguage(language)}</tw-ignore>\n </StyledCodeHighlighterFileName>\n <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n </StyledCodeHighlighterHeader>\n <SyntaxHighlighter\n language={language ?? ''}\n showLineNumbers={shouldShowLineNumbers}\n style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n wrapLines\n wrapLongLines={shouldWrapLines}\n lineProps={lineWrapper}\n >\n {formattedCode}\n </SyntaxHighlighter>\n </StyledCodeHighlighter>\n ),\n [\n theme,\n language,\n code,\n copyButtonText,\n shouldShowLineNumbers,\n shouldWrapLines,\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","_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","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","useState","ref","useRef","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","formattedCode","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","PrismAsyncLight","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 { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n CodeHighlighterLanguage,\n CodeHighlighterTheme,\n HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n StyledCodeHighlighter,\n StyledCodeHighlighterFileName,\n StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n root: HTMLDivElement | null;\n className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n if (!root) return;\n\n const preElement = root.querySelector('pre');\n if (!preElement) return;\n\n preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n /**\n * The code that should be displayed.\n */\n code: string;\n /**\n * The text that should be displayed after the copy button.\n * If not set, just the button is displayed without text.\n */\n copyButtonText?: string;\n /**\n * The lines of code that should be highlighted.\n * Following lines can be highlighted: added, removed and just marked.\n */\n highlightedLines?: HighlightedLines;\n /**\n * The language of the displayed code.\n */\n language: CodeHighlighterLanguage;\n /**\n * Function to be executed when the formatting of the code fails.\n */\n onFormatError?: (error: unknown) => void;\n /**\n * Whether the code should be formatted with prettier.\n */\n shouldFormatCode?: boolean;\n /**\n * Whether the line numbers should be displayed.\n */\n shouldShowLineNumbers?: boolean;\n /**\n * Whether long lines should be wrapped.\n */\n shouldWrapLines?: boolean;\n /**\n * The theme of the code block. Decide between dark and light.\n */\n theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n theme = CodeHighlighterTheme.Dark,\n code,\n copyButtonText,\n language,\n highlightedLines,\n shouldFormatCode = false,\n onFormatError,\n shouldShowLineNumbers = false,\n shouldWrapLines,\n}) => {\n const [width, setWidth] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n if (ref.current) {\n const { children } = ref.current;\n\n const preElement = Array.from(children).find(\n ({ tagName }) => tagName.toLowerCase() === 'pre',\n );\n\n if (preElement) {\n setWidth(preElement.scrollWidth);\n }\n }\n };\n\n handleResize();\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n // function to style highlighted code\n const lineWrapper = useCallback(\n (lineNumber: number) => {\n let style = {\n backgroundColor: 'none',\n display: 'block',\n borderRadius: '2px',\n width: width - 15,\n };\n\n if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#2EF29930' };\n } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#F22E5B30' };\n } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#cccccc40' };\n }\n\n return { style };\n },\n [highlightedLines, width],\n );\n\n const lineNumberStyle = useMemo(\n () => ({\n WebkitUserSelect: 'none' as const,\n }),\n [],\n );\n\n const formattedCode = useMemo(() => {\n if (language) {\n void getParserForLanguage(language).then((config) => {\n if (shouldFormatCode && config) {\n try {\n return format(code, config) as unknown as string;\n } catch (error) {\n if (typeof onFormatError !== 'undefined') onFormatError(error);\n }\n }\n\n return code;\n });\n }\n\n return code;\n }, [code, language, shouldFormatCode, onFormatError]);\n\n useEffect(() => {\n const elements = document.getElementsByClassName('linenumber');\n\n Array.from(elements).forEach((element) => {\n const wrapper = document.createElement('tw-ignore');\n\n while (element.firstChild) {\n wrapper.appendChild(element.firstChild);\n }\n\n element.appendChild(wrapper);\n });\n }, []);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter $shouldWrapLines={shouldWrapLines} $codeTheme={theme} ref={ref}>\n <StyledCodeHighlighterHeader $codeTheme={theme}>\n <StyledCodeHighlighterFileName $codeTheme={theme}>\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n {/* @ts-ignore */}\n <tw-ignore>{formatLanguage(language)}</tw-ignore>\n </StyledCodeHighlighterFileName>\n <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n </StyledCodeHighlighterHeader>\n <SyntaxHighlighter\n language={language ?? ''}\n lineNumberStyle={lineNumberStyle}\n showLineNumbers={shouldShowLineNumbers}\n style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n wrapLines\n wrapLongLines={shouldWrapLines}\n lineProps={lineWrapper}\n >\n {formattedCode}\n </SyntaxHighlighter>\n </StyledCodeHighlighter>\n ),\n [\n shouldWrapLines,\n theme,\n language,\n code,\n copyButtonText,\n lineNumberStyle,\n shouldShowLineNumbers,\n lineWrapper,\n formattedCode,\n ],\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -32,11 +32,6 @@ const StyledCodeHighlighter = exports.StyledCodeHighlighter = _styledComponents.
|
|
|
32
32
|
.language-markdown .token.table {
|
|
33
33
|
display: inline;
|
|
34
34
|
}
|
|
35
|
-
|
|
36
|
-
// Prevents the line-number gutter from being selected when users copy code.
|
|
37
|
-
.react-syntax-highlighter-line-number {
|
|
38
|
-
-webkit-user-select: none;
|
|
39
|
-
}
|
|
40
35
|
`;
|
|
41
36
|
const StyledCodeHighlighterHeader = exports.StyledCodeHighlighterHeader = _styledComponents.default.div`
|
|
42
37
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCodeHighlighter","exports","styled","div","$codeTheme","CodeHighlighterTheme","Dark","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n margin: 4px 0;\n background-color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n border-radius: 8px;\n padding-bottom: 6px;\n\n pre {\n margin: 0 !important;\n overflow: auto;\n padding: 15px;\n line-height: 1.5;\n\n code {\n white-space: ${({ $shouldWrapLines }) =>\n $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n }\n }\n\n // Fixes display of tables in code highlighter for markdown.\n .language-markdown .token.table {\n display: inline;\n }\n
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCodeHighlighter","exports","styled","div","$codeTheme","CodeHighlighterTheme","Dark","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n margin: 4px 0;\n background-color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n border-radius: 8px;\n padding-bottom: 6px;\n\n pre {\n margin: 0 !important;\n overflow: auto;\n padding: 15px;\n line-height: 1.5;\n\n code {\n white-space: ${({ $shouldWrapLines }) =>\n $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n }\n }\n\n // Fixes display of tables in code highlighter for markdown.\n .language-markdown .token.table {\n display: inline;\n }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid\n ${({ $codeTheme }) => ($codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAmE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAO5D,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,CAAC;EAAEC;AAAiB,CAAC,KAChCA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAU;AAChG;AACA,CAAC;AAMM,MAAMG,6BAA6B,GAAAR,OAAA,CAAAQ,6BAAA,GAAGP,yBAAM,CAACQ,IAAwC;AAC5F,aAAa,CAAC;EAAEN;AAAW,CAAC,KACpBA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}
|
|
@@ -83,6 +83,9 @@ const CodeHighlighter = ({
|
|
|
83
83
|
style
|
|
84
84
|
};
|
|
85
85
|
}, [highlightedLines, width]);
|
|
86
|
+
const lineNumberStyle = useMemo(() => ({
|
|
87
|
+
WebkitUserSelect: 'none'
|
|
88
|
+
}), []);
|
|
86
89
|
const formattedCode = useMemo(() => {
|
|
87
90
|
if (language) {
|
|
88
91
|
void getParserForLanguage(language).then(config => {
|
|
@@ -122,12 +125,13 @@ const CodeHighlighter = ({
|
|
|
122
125
|
copyButtonText: copyButtonText
|
|
123
126
|
})), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
|
|
124
127
|
language: language ?? '',
|
|
128
|
+
lineNumberStyle: lineNumberStyle,
|
|
125
129
|
showLineNumbers: shouldShowLineNumbers,
|
|
126
130
|
style: theme === CodeHighlighterTheme.Dark ? oneDark : oneLight,
|
|
127
131
|
wrapLines: true,
|
|
128
132
|
wrapLongLines: shouldWrapLines,
|
|
129
133
|
lineProps: lineWrapper
|
|
130
|
-
}, formattedCode)), [theme, language, code, copyButtonText,
|
|
134
|
+
}, formattedCode)), [shouldWrapLines, theme, language, code, copyButtonText, lineNumberStyle, shouldShowLineNumbers, lineWrapper, formattedCode]);
|
|
131
135
|
};
|
|
132
136
|
CodeHighlighter.displayName = 'CodeHighlighter';
|
|
133
137
|
export default CodeHighlighter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","ref","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n CodeHighlighterLanguage,\n CodeHighlighterTheme,\n HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n StyledCodeHighlighter,\n StyledCodeHighlighterFileName,\n StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n root: HTMLDivElement | null;\n className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n if (!root) return;\n\n const preElement = root.querySelector('pre');\n if (!preElement) return;\n\n preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n /**\n * The code that should be displayed.\n */\n code: string;\n /**\n * The text that should be displayed after the copy button.\n * If not set, just the button is displayed without text.\n */\n copyButtonText?: string;\n /**\n * The lines of code that should be highlighted.\n * Following lines can be highlighted: added, removed and just marked.\n */\n highlightedLines?: HighlightedLines;\n /**\n * The language of the displayed code.\n */\n language: CodeHighlighterLanguage;\n /**\n * Function to be executed when the formatting of the code fails.\n */\n onFormatError?: (error: unknown) => void;\n /**\n * Whether the code should be formatted with prettier.\n */\n shouldFormatCode?: boolean;\n /**\n * Whether the line numbers should be displayed.\n */\n shouldShowLineNumbers?: boolean;\n /**\n * Whether long lines should be wrapped.\n */\n shouldWrapLines?: boolean;\n /**\n * The theme of the code block. Decide between dark and light.\n */\n theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n theme = CodeHighlighterTheme.Dark,\n code,\n copyButtonText,\n language,\n highlightedLines,\n shouldFormatCode = false,\n onFormatError,\n shouldShowLineNumbers = false,\n shouldWrapLines,\n}) => {\n const [width, setWidth] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n if (ref.current) {\n const { children } = ref.current;\n\n const preElement = Array.from(children).find(\n ({ tagName }) => tagName.toLowerCase() === 'pre',\n );\n\n if (preElement) {\n setWidth(preElement.scrollWidth);\n }\n }\n };\n\n handleResize();\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n // function to style highlighted code\n const lineWrapper = useCallback(\n (lineNumber: number) => {\n let style = {\n backgroundColor: 'none',\n display: 'block',\n borderRadius: '2px',\n width: width - 15,\n };\n\n if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#2EF29930' };\n } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#F22E5B30' };\n } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#cccccc40' };\n }\n\n return { style };\n },\n [highlightedLines, width],\n );\n\n const formattedCode = useMemo(() => {\n if (language) {\n void getParserForLanguage(language).then((config) => {\n if (shouldFormatCode && config) {\n try {\n return format(code, config) as unknown as string;\n } catch (error) {\n if (typeof onFormatError !== 'undefined') onFormatError(error);\n }\n }\n\n return code;\n });\n }\n\n return code;\n }, [code, language, shouldFormatCode, onFormatError]);\n\n useEffect(() => {\n const elements = document.getElementsByClassName('linenumber');\n\n Array.from(elements).forEach((element) => {\n const wrapper = document.createElement('tw-ignore');\n\n while (element.firstChild) {\n wrapper.appendChild(element.firstChild);\n }\n\n element.appendChild(wrapper);\n });\n }, []);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter $shouldWrapLines={shouldWrapLines} $codeTheme={theme} ref={ref}>\n <StyledCodeHighlighterHeader $codeTheme={theme}>\n <StyledCodeHighlighterFileName $codeTheme={theme}>\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n {/* @ts-ignore */}\n <tw-ignore>{formatLanguage(language)}</tw-ignore>\n </StyledCodeHighlighterFileName>\n <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n </StyledCodeHighlighterHeader>\n <SyntaxHighlighter\n language={language ?? ''}\n showLineNumbers={shouldShowLineNumbers}\n style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n wrapLines\n wrapLongLines={shouldWrapLines}\n lineProps={lineWrapper}\n >\n {formattedCode}\n </SyntaxHighlighter>\n </StyledCodeHighlighter>\n ),\n [\n theme,\n language,\n code,\n copyButtonText,\n shouldShowLineNumbers,\n shouldWrapLines,\n lineWrapper,\n formattedCode,\n ],\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,qBAAqB;AAC5C,OAAOC,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACpF,SAASC,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;AAOjE,MAAMC,sBAAsB,GAAGA,CAAC;EAAEC,IAAI;EAAEC;AAAoC,CAAC,KAAK;EAC9E,IAAI,CAACD,IAAI,EAAE;EAEX,MAAME,UAAU,GAAGF,IAAI,CAACG,aAAa,CAAC,KAAK,CAAC;EAC5C,IAAI,CAACD,UAAU,EAAE;EAEjBA,UAAU,CAACE,SAAS,CAACC,GAAG,CAACJ,SAAS,CAAC;AACvC,CAAC;AA2CD,MAAMK,eAAyC,GAAGA,CAAC;EAC/CC,KAAK,GAAGf,oBAAoB,CAACgB,IAAI;EACjCC,IAAI;EACJC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChBC,gBAAgB,GAAG,KAAK;EACxBC,aAAa;EACbC,qBAAqB,GAAG,KAAK;EAC7BC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG/B,QAAQ,CAAC,CAAC,CAAC;EAErC,MAAMgC,GAAG,GAAGjC,MAAM,CAAiB,IAAI,CAAC;EAExCF,SAAS,CAAC,MAAM;IACZe,sBAAsB,CAAC;MAAEC,IAAI,EAAEmB,GAAG,CAACC,OAAO;MAAEnB,SAAS,EAAE;IAAmB,CAAC,CAAC;EAChF,CAAC,EAAE,EAAE,CAAC;EAENjB,SAAS,CAAC,MAAM;IACZ,MAAMqC,YAAY,GAAGA,CAAA,KAAM;MACvB,IAAIF,GAAG,CAACC,OAAO,EAAE;QACb,MAAM;UAAEE;QAAS,CAAC,GAAGH,GAAG,CAACC,OAAO;QAEhC,MAAMlB,UAAU,GAAGqB,KAAK,CAACC,IAAI,CAACF,QAAQ,CAAC,CAACG,IAAI,CACxC,CAAC;UAAEC;QAAQ,CAAC,KAAKA,OAAO,CAACC,WAAW,CAAC,CAAC,KAAK,KAC/C,CAAC;QAED,IAAIzB,UAAU,EAAE;UACZgB,QAAQ,CAAChB,UAAU,CAAC0B,WAAW,CAAC;QACpC;MACJ;IACJ,CAAC;IAEDP,YAAY,CAAC,CAAC;IAEdQ,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTQ,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEV,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMW,WAAW,GAAGjD,WAAW,CAC1BkD,UAAkB,IAAK;IACpB,IAAIC,KAAK,GAAG;MACRC,eAAe,EAAE,MAAM;MACvBC,OAAO,EAAE,OAAO;MAChBC,YAAY,EAAE,KAAK;MACnBpB,KAAK,EAAEA,KAAK,GAAG;IACnB,CAAC;IAED,IAAIL,gBAAgB,EAAE0B,KAAK,IAAI1B,gBAAgB,CAAC0B,KAAK,CAACC,QAAQ,CAACN,UAAU,CAAC,EAAE;MACxEC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAIvB,gBAAgB,EAAE4B,OAAO,IAAI5B,gBAAgB,CAAC4B,OAAO,CAACD,QAAQ,CAACN,UAAU,CAAC,EAAE;MACnFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAIvB,gBAAgB,EAAE6B,MAAM,IAAI7B,gBAAgB,CAAC6B,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,CAACtB,gBAAgB,EAAEK,KAAK,CAC5B,CAAC;EAED,MAAMyB,aAAa,GAAGzD,OAAO,CAAC,MAAM;IAChC,IAAI0B,QAAQ,EAAE;MACV,KAAKjB,oBAAoB,CAACiB,QAAQ,CAAC,CAACgC,IAAI,CAAEC,MAAM,IAAK;QACjD,IAAI/B,gBAAgB,IAAI+B,MAAM,EAAE;UAC5B,IAAI;YACA,OAAO/D,MAAM,CAAC4B,IAAI,EAAEmC,MAAM,CAAC;UAC/B,CAAC,CAAC,OAAOC,KAAK,EAAE;YACZ,IAAI,OAAO/B,aAAa,KAAK,WAAW,EAAEA,aAAa,CAAC+B,KAAK,CAAC;UAClE;QACJ;QAEA,OAAOpC,IAAI;MACf,CAAC,CAAC;IACN;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAACA,IAAI,EAAEE,QAAQ,EAAEE,gBAAgB,EAAEC,aAAa,CAAC,CAAC;EAErD9B,SAAS,CAAC,MAAM;IACZ,MAAM8D,QAAQ,GAAGC,QAAQ,CAACC,sBAAsB,CAAC,YAAY,CAAC;IAE9DzB,KAAK,CAACC,IAAI,CAACsB,QAAQ,CAAC,CAACG,OAAO,CAAEC,OAAO,IAAK;MACtC,MAAMC,OAAO,GAAGJ,QAAQ,CAACK,aAAa,CAAC,WAAW,CAAC;MAEnD,OAAOF,OAAO,CAACG,UAAU,EAAE;QACvBF,OAAO,CAACG,WAAW,CAACJ,OAAO,CAACG,UAAU,CAAC;MAC3C;MAEAH,OAAO,CAACI,WAAW,CAACH,OAAO,CAAC;IAChC,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOlE,OAAO,CACV,mBACIH,KAAA,CAAAsE,aAAA,CAACzD,qBAAqB;IAAC4D,gBAAgB,EAAEvC,eAAgB;IAACwC,UAAU,EAAEjD,KAAM;IAACY,GAAG,EAAEA;EAAI,gBAClFrC,KAAA,CAAAsE,aAAA,CAACvD,2BAA2B;IAAC2D,UAAU,EAAEjD;EAAM,gBAC3CzB,KAAA,CAAAsE,aAAA,CAACxD,6BAA6B;IAAC4D,UAAU,EAAEjD;EAAM,gBAG7CzB,KAAA,CAAAsE,aAAA,oBAAY3D,cAAc,CAACkB,QAAQ,CAAa,CACrB,CAAC,eAChC7B,KAAA,CAAAsE,aAAA,CAACtD,eAAe;IAAC2D,IAAI,EAAEhD,IAAK;IAACF,KAAK,EAAEA,KAAM;IAACG,cAAc,EAAEA;EAAe,CAAE,CACnD,CAAC,eAC9B5B,KAAA,CAAAsE,aAAA,CAAC/D,iBAAiB;IACdsB,QAAQ,EAAEA,QAAQ,IAAI,EAAG;IACzB+C,eAAe,EAAE3C,qBAAsB;IACvCmB,KAAK,EAAE3B,KAAK,KAAKf,oBAAoB,CAACgB,IAAI,GAAGlB,OAAO,GAAGC,QAAS;IAChEoE,SAAS;IACTC,aAAa,EAAE5C,eAAgB;IAC/B6C,SAAS,EAAE7B;EAAY,GAEtBU,aACc,CACA,CAC1B,EACD,CACInC,KAAK,EACLI,QAAQ,EACRF,IAAI,EACJC,cAAc,EACdK,qBAAqB,EACrBC,eAAe,EACfgB,WAAW,EACXU,aAAa,CAErB,CAAC;AACL,CAAC;AAEDpC,eAAe,CAACwD,WAAW,GAAG,iBAAiB;AAE/C,eAAexD,eAAe","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","ref","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","WebkitUserSelect","formattedCode","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n CodeHighlighterLanguage,\n CodeHighlighterTheme,\n HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n StyledCodeHighlighter,\n StyledCodeHighlighterFileName,\n StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n root: HTMLDivElement | null;\n className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n if (!root) return;\n\n const preElement = root.querySelector('pre');\n if (!preElement) return;\n\n preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n /**\n * The code that should be displayed.\n */\n code: string;\n /**\n * The text that should be displayed after the copy button.\n * If not set, just the button is displayed without text.\n */\n copyButtonText?: string;\n /**\n * The lines of code that should be highlighted.\n * Following lines can be highlighted: added, removed and just marked.\n */\n highlightedLines?: HighlightedLines;\n /**\n * The language of the displayed code.\n */\n language: CodeHighlighterLanguage;\n /**\n * Function to be executed when the formatting of the code fails.\n */\n onFormatError?: (error: unknown) => void;\n /**\n * Whether the code should be formatted with prettier.\n */\n shouldFormatCode?: boolean;\n /**\n * Whether the line numbers should be displayed.\n */\n shouldShowLineNumbers?: boolean;\n /**\n * Whether long lines should be wrapped.\n */\n shouldWrapLines?: boolean;\n /**\n * The theme of the code block. Decide between dark and light.\n */\n theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n theme = CodeHighlighterTheme.Dark,\n code,\n copyButtonText,\n language,\n highlightedLines,\n shouldFormatCode = false,\n onFormatError,\n shouldShowLineNumbers = false,\n shouldWrapLines,\n}) => {\n const [width, setWidth] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n if (ref.current) {\n const { children } = ref.current;\n\n const preElement = Array.from(children).find(\n ({ tagName }) => tagName.toLowerCase() === 'pre',\n );\n\n if (preElement) {\n setWidth(preElement.scrollWidth);\n }\n }\n };\n\n handleResize();\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n // function to style highlighted code\n const lineWrapper = useCallback(\n (lineNumber: number) => {\n let style = {\n backgroundColor: 'none',\n display: 'block',\n borderRadius: '2px',\n width: width - 15,\n };\n\n if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#2EF29930' };\n } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#F22E5B30' };\n } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#cccccc40' };\n }\n\n return { style };\n },\n [highlightedLines, width],\n );\n\n const lineNumberStyle = useMemo(\n () => ({\n WebkitUserSelect: 'none' as const,\n }),\n [],\n );\n\n const formattedCode = useMemo(() => {\n if (language) {\n void getParserForLanguage(language).then((config) => {\n if (shouldFormatCode && config) {\n try {\n return format(code, config) as unknown as string;\n } catch (error) {\n if (typeof onFormatError !== 'undefined') onFormatError(error);\n }\n }\n\n return code;\n });\n }\n\n return code;\n }, [code, language, shouldFormatCode, onFormatError]);\n\n useEffect(() => {\n const elements = document.getElementsByClassName('linenumber');\n\n Array.from(elements).forEach((element) => {\n const wrapper = document.createElement('tw-ignore');\n\n while (element.firstChild) {\n wrapper.appendChild(element.firstChild);\n }\n\n element.appendChild(wrapper);\n });\n }, []);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter $shouldWrapLines={shouldWrapLines} $codeTheme={theme} ref={ref}>\n <StyledCodeHighlighterHeader $codeTheme={theme}>\n <StyledCodeHighlighterFileName $codeTheme={theme}>\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n {/* @ts-ignore */}\n <tw-ignore>{formatLanguage(language)}</tw-ignore>\n </StyledCodeHighlighterFileName>\n <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n </StyledCodeHighlighterHeader>\n <SyntaxHighlighter\n language={language ?? ''}\n lineNumberStyle={lineNumberStyle}\n showLineNumbers={shouldShowLineNumbers}\n style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n wrapLines\n wrapLongLines={shouldWrapLines}\n lineProps={lineWrapper}\n >\n {formattedCode}\n </SyntaxHighlighter>\n </StyledCodeHighlighter>\n ),\n [\n shouldWrapLines,\n theme,\n language,\n code,\n copyButtonText,\n lineNumberStyle,\n shouldShowLineNumbers,\n lineWrapper,\n formattedCode,\n ],\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -25,11 +25,6 @@ export const StyledCodeHighlighter = styled.div`
|
|
|
25
25
|
.language-markdown .token.table {
|
|
26
26
|
display: inline;
|
|
27
27
|
}
|
|
28
|
-
|
|
29
|
-
// Prevents the line-number gutter from being selected when users copy code.
|
|
30
|
-
.react-syntax-highlighter-line-number {
|
|
31
|
-
-webkit-user-select: none;
|
|
32
|
-
}
|
|
33
28
|
`;
|
|
34
29
|
export const StyledCodeHighlighterHeader = styled.div`
|
|
35
30
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","CodeHighlighterTheme","StyledCodeHighlighter","div","$codeTheme","Dark","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n margin: 4px 0;\n background-color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n border-radius: 8px;\n padding-bottom: 6px;\n\n pre {\n margin: 0 !important;\n overflow: auto;\n padding: 15px;\n line-height: 1.5;\n\n code {\n white-space: ${({ $shouldWrapLines }) =>\n $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n }\n }\n\n // Fixes display of tables in code highlighter for markdown.\n .language-markdown .token.table {\n display: inline;\n }\n
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","CodeHighlighterTheme","StyledCodeHighlighter","div","$codeTheme","Dark","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n $shouldWrapLines?: boolean;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n margin: 4px 0;\n background-color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n border-radius: 8px;\n padding-bottom: 6px;\n\n pre {\n margin: 0 !important;\n overflow: auto;\n padding: 15px;\n line-height: 1.5;\n\n code {\n white-space: ${({ $shouldWrapLines }) =>\n $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;\n }\n }\n\n // Fixes display of tables in code highlighter for markdown.\n .language-markdown .token.table {\n display: inline;\n }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid\n ${({ $codeTheme }) => ($codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,6BAA6B;AAOlE,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E;AACA,wBAAwB,CAAC;EAAEC;AAAW,CAAC,KAC/BA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,CAAC;EAAEC;AAAiB,CAAC,KAChCA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,2BAA2B,GAAGP,MAAM,CAACG,GAAqC;AACvF;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAU;AAChG;AACA,CAAC;AAMD,OAAO,MAAMG,6BAA6B,GAAGR,MAAM,CAACS,IAAwC;AAC5F,aAAa,CAAC;EAAEL;AAAW,CAAC,KACpBA,UAAU,KAAKH,oBAAoB,CAACI,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/code-highlighter",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.57",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"typescript": "^5.9.3"
|
|
70
70
|
},
|
|
71
71
|
"dependencies": {
|
|
72
|
-
"@chayns-components/core": "^5.0.
|
|
72
|
+
"@chayns-components/core": "^5.0.57",
|
|
73
73
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
74
74
|
"babel-prettier-parser": "^0.10.8",
|
|
75
75
|
"prettier": "^2.8.8",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "3f21d528f8c7bb7ebbc02507785cad7c2d18299a"
|
|
90
90
|
}
|