@chayns-components/code-highlighter 5.0.0-beta.989 → 5.0.0-beta.991
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.map +1 -1
- package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js +2 -2
- package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js.map +1 -1
- package/lib/esm/components/code-highlighter/CodeHighlighter.js.map +1 -1
- package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js +2 -2
- package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js.map +1 -1
- package/lib/types/components/code-highlighter/CodeHighlighter.styles.d.ts +2 -3
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.js","names":["_chaynsApi","require","_standalone","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CodeHighlighter","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","useState","ref","useRef","browser","useDevice","useEffect","current","children","preElement","Array","from","find","tagName","toLowerCase","scrollWidth","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","$browser","name","$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 { useDevice } from 'chayns-api';\nimport { 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\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 const { browser } = useDevice();\n\n useEffect(() => {\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 // 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('twIgnore');\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 $browser={browser?.name} $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 <twIgnore>{formatLanguage(language)}</twIgnore>\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 [browser?.name, theme, language, code, copyButtonText, shouldShowLineNumbers, shouldWrapLines, lineWrapper, formattedCode]\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.js","names":["_chaynsApi","require","_standalone","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CodeHighlighter","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","useState","ref","useRef","browser","useDevice","useEffect","current","children","preElement","Array","from","find","tagName","toLowerCase","scrollWidth","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","$browser","name","$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 { BrowserName } from '@chayns-components/core';\nimport { useDevice } from 'chayns-api';\nimport { 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\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 const { browser } = useDevice();\n\n useEffect(() => {\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 // 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('twIgnore');\n\n while (element.firstChild) {\n wrapper.appendChild(element.firstChild);\n }\n\n element.appendChild(wrapper);\n });\n }, []);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter\n $browser={browser?.name as BrowserName}\n $shouldWrapLines={shouldWrapLines}\n $codeTheme={theme}\n ref={ref}\n >\n <StyledCodeHighlighterHeader $codeTheme={theme}>\n <StyledCodeHighlighterFileName $codeTheme={theme}>\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n {/* @ts-ignore */}\n <twIgnore>{formatLanguage(language)}</twIgnore>\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 browser?.name,\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_codeHighlighter","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCodeHighlighter","exports","styled","div","$codeTheme","CodeHighlighterTheme","Dark","$browser","theme","css","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_codeHighlighter","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCodeHighlighter","exports","styled","div","$codeTheme","CodeHighlighterTheme","Dark","$browser","theme","css","$shouldWrapLines","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { BrowserName, WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n $browser: BrowserName;\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 // 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 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,uBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAmE,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQ5D,MAAMW,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,UAAU,CAAC;EAAEC,QAAQ;EAAEC;AAAkC,CAAC,KAC9CD,QAAQ,KAAK,SAAS,GAChB,IAAAE,qBAAG;AACrB,8CAA8CD,KAAK,CAAC,UAAU,CAAC;AAC/D;AACA,mBAAmB,GACD,IAAAC,qBAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmDD,KAAK,CAAC,UAAU,CAAC;AACpE;AACA;AACA,mBAAmB;AACnB;AACA;AACA,2BAA2B,CAAC;EAAEE;AAAiB,CAAC,KAChCA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,2BAA2B,GAAAV,OAAA,CAAAU,2BAAA,GAAGT,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,MAAMM,6BAA6B,GAAAX,OAAA,CAAAW,6BAAA,GAAGV,yBAAM,CAACW,IAAwC;AAC5F,aAAa,CAAC;EAAET;AAAW,CAAC,KACpBA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.js","names":["useDevice","format","React","useCallback","useEffect","useMemo","useRef","useState","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","CodeHighlighter","_ref","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","ref","browser","current","children","preElement","Array","from","find","_ref2","tagName","toLowerCase","scrollWidth","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$browser","name","$shouldWrapLines","$codeTheme","text","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { 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\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 const { browser } = useDevice();\n\n useEffect(() => {\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 // 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('twIgnore');\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 $browser={browser?.name} $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 <twIgnore>{formatLanguage(language)}</twIgnore>\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 [browser?.name, theme, language, code, copyButtonText, shouldShowLineNumbers, shouldWrapLines, lineWrapper, formattedCode]\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.js","names":["useDevice","format","React","useCallback","useEffect","useMemo","useRef","useState","PrismAsyncLight","SyntaxHighlighter","oneDark","oneLight","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","CodeHighlighter","_ref","theme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","width","setWidth","ref","browser","current","children","preElement","Array","from","find","_ref2","tagName","toLowerCase","scrollWidth","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$browser","name","$shouldWrapLines","$codeTheme","text","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { BrowserName } from '@chayns-components/core';\nimport { useDevice } from 'chayns-api';\nimport { 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\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 const { browser } = useDevice();\n\n useEffect(() => {\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 // 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('twIgnore');\n\n while (element.firstChild) {\n wrapper.appendChild(element.firstChild);\n }\n\n element.appendChild(wrapper);\n });\n }, []);\n\n return useMemo(\n () => (\n <StyledCodeHighlighter\n $browser={browser?.name as BrowserName}\n $shouldWrapLines={shouldWrapLines}\n $codeTheme={theme}\n ref={ref}\n >\n <StyledCodeHighlighterHeader $codeTheme={theme}>\n <StyledCodeHighlighterFileName $codeTheme={theme}>\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n {/* @ts-ignore */}\n <twIgnore>{formatLanguage(language)}</twIgnore>\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 browser?.name,\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","css","CodeHighlighterTheme","StyledCodeHighlighter","div","_ref","$codeTheme","Dark","_ref2","$browser","theme","_ref3","$shouldWrapLines","StyledCodeHighlighterHeader","_ref4","StyledCodeHighlighterFileName","span","_ref5"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.styles.js","names":["styled","css","CodeHighlighterTheme","StyledCodeHighlighter","div","_ref","$codeTheme","Dark","_ref2","$browser","theme","_ref3","$shouldWrapLines","StyledCodeHighlighterHeader","_ref4","StyledCodeHighlighterFileName","span","_ref5"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import type { BrowserName, WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n $browser: BrowserName;\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 // 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 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,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,6BAA6B;AAQlE,OAAO,MAAMC,qBAAqB,GAAGH,MAAM,CAACI,GAA+B;AAC3E;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAC/BC,UAAU,KAAKJ,oBAAoB,CAACK,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA;AACxE;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,GAAG;AACrB,8CAA8CS,KAAK,CAAC,UAAU,CAAC;AAC/D;AACA,mBAAmB,GACDT,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmDS,KAAK,CAAC,UAAU,CAAC;AACpE;AACA;AACA,mBAAmB;AAAA;AACnB;AACA;AACA,2BAA2BC,KAAA;EAAA,IAAC;IAAEC;EAAiB,CAAC,GAAAD,KAAA;EAAA,OAChCC,gBAAgB,GAAG,UAAU,GAAG,KAAK;AAAA;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,2BAA2B,GAAGb,MAAM,CAACI,GAAqC;AACvF;AACA;AACA;AACA;AACA,UAAUU,KAAA;EAAA,IAAC;IAAER;EAAW,CAAC,GAAAQ,KAAA;EAAA,OAAMR,UAAU,KAAKJ,oBAAoB,CAACK,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AAChG;AACA,CAAC;AAMD,OAAO,MAAMQ,6BAA6B,GAAGf,MAAM,CAACgB,IAAwC;AAC5F,aAAaC,KAAA;EAAA,IAAC;IAAEX;EAAW,CAAC,GAAAW,KAAA;EAAA,OACpBX,UAAU,KAAKJ,oBAAoB,CAACK,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA;AACxE,CAAC","ignoreList":[]}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import type { WithTheme } from '@chayns-components/core';
|
|
2
|
-
import type { Browser } from 'detect-browser';
|
|
1
|
+
import type { BrowserName, WithTheme } from '@chayns-components/core';
|
|
3
2
|
import { CodeHighlighterTheme } from '../../types/codeHighlighter';
|
|
4
3
|
type StyledCodeHighlighterProps = WithTheme<{
|
|
5
4
|
$codeTheme: CodeHighlighterTheme;
|
|
6
|
-
$browser:
|
|
5
|
+
$browser: BrowserName;
|
|
7
6
|
$shouldWrapLines?: boolean;
|
|
8
7
|
}>;
|
|
9
8
|
export declare const StyledCodeHighlighter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledCodeHighlighterProps>> & string;
|
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.991",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -68,21 +68,21 @@
|
|
|
68
68
|
"typescript": "^5.7.3"
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
71
|
+
"@chayns-components/core": "^5.0.0-beta.991",
|
|
72
72
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
73
73
|
"babel-prettier-parser": "^0.10.8",
|
|
74
74
|
"prettier": "^2.8.8",
|
|
75
75
|
"react-syntax-highlighter": "^15.6.1"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
|
-
"chayns-api": "
|
|
78
|
+
"chayns-api": "^2.2.0-beta.2",
|
|
79
79
|
"framer-motion": ">=10.18.0",
|
|
80
|
-
"react": ">=
|
|
81
|
-
"react-dom": ">=
|
|
80
|
+
"react": ">=18.0.0",
|
|
81
|
+
"react-dom": ">=18.0.0",
|
|
82
82
|
"styled-components": ">=5.3.11"
|
|
83
83
|
},
|
|
84
84
|
"publishConfig": {
|
|
85
85
|
"access": "public"
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "6ed1ca79a66254c138d4ab065c78b555973e770f"
|
|
88
88
|
}
|