npm - @chayns-components/code-highlighter - Versions diffs - 5.0.0-beta.915 → 5.0.0-beta.918 - Mend

@chayns-components/code-highlighter 5.0.0-beta.915 → 5.0.0-beta.918

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/lib/cjs/components/code-highlighter/CodeHighlighter.js CHANGED Viewed

@@ -24,7 +24,8 @@ const CodeHighlighter = ({
   highlightedLines,
   shouldFormatCode = false,
   onFormatError,
-  shouldShowLineNumbers = false
+  shouldShowLineNumbers = false,
+  shouldWrapLines
 }) => {
   const [width, setWidth] = (0, _react.useState)(0);
   const ref = (0, _react.useRef)(null);
@@ -99,6 +100,7 @@ const CodeHighlighter = ({
   }, []);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighter, {
     $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    $shouldWrapLines: shouldWrapLines,
     $codeTheme: theme,
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighterHeader, {
@@ -114,8 +116,9 @@ const CodeHighlighter = ({
     showLineNumbers: shouldShowLineNumbers,
     style: theme === _codeHighlighter.CodeHighlighterTheme.Dark ? _prism.oneDark : _prism.oneLight,
     wrapLines: true,
+    wrapLongLines: shouldWrapLines,
     lineProps: lineWrapper
-  }, formattedCode)), [browser === null || browser === void 0 ? void 0 : browser.name, theme, language, code, copyButtonText, shouldShowLineNumbers, lineWrapper, formattedCode]);
+  }, formattedCode)), [browser === null || browser === void 0 ? void 0 : browser.name, theme, language, code, copyButtonText, shouldShowLineNumbers, shouldWrapLines, lineWrapper, formattedCode]);
 };
 CodeHighlighter.displayName = 'CodeHighlighter';
 var _default = exports.default = CodeHighlighter;

package/lib/cjs/components/code-highlighter/CodeHighlighter.js.map CHANGED Viewed

	@@ -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","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","config","getParserForLanguage","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$browser","name","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","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 Whether the code should be formatted with prettier.\n /\n shouldFormatCode?: boolean;\n /\n Callback-Funktion, die aufgerufen wird, wenn das Formatieren des Codes fehlschlägt.\n /\n onFormatError?: (error: unknown) => void;\n\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 onFormatError,\n shouldShowLineNumbers = false,\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 const config = getParserForLanguage(language);\n\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 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} $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 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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","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","config","getParserForLanguage","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 const config = getParserForLanguage(language);\n\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 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":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,uBAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,gBAAA,GAAAN,OAAA;AAKA,IAAAO,iBAAA,GAAAP,OAAA;AACA,IAAAQ,gBAAA,GAAAR,OAAA;AAKA,IAAAS,gBAAA,GAAAC,sBAAA,CAAAV,OAAA;AAAkE,SAAAU,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,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,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AA2ClE,MAAMW,eAAyC,GAAGA,CAAC;EAC/CC,KAAK,GAAGC,qCAAoB,CAACC,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,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAErC,MAAMC,GAAG,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAExC,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIJ,GAAG,CAACK,OAAO,EAAE;MACb,MAAM;QAAEC;MAAS,CAAC,GAAGN,GAAG,CAACK,OAAO;MAEhC,MAAME,UAAU,GAAGC,KAAK,CAACC,IAAI,CAACH,QAAQ,CAAC,CAACI,IAAI,CACxC,CAAC;QAAEC;MAAQ,CAAC,KAAKA,OAAO,CAACC,WAAW,CAAC,CAAC,KAAK,KAC/C,CAAC;MAED,IAAIL,UAAU,EAAE;QACZT,QAAQ,CAACS,UAAU,CAACM,WAAW,CAAC;MACpC;IACJ;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAC1BC,UAAkB,IAAK;IACpB,IAAIC,KAAK,GAAG;MACRC,eAAe,EAAE,MAAM;MACvBC,OAAO,EAAE,OAAO;MAChBC,YAAY,EAAE,KAAK;MACnBvB,KAAK,EAAEA,KAAK,GAAG;IACnB,CAAC;IAED,IAAIL,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAE6B,KAAK,IAAI7B,gBAAgB,CAAC6B,KAAK,CAACC,QAAQ,CAACN,UAAU,CAAC,EAAE;MACxEC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAI1B,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAE+B,OAAO,IAAI/B,gBAAgB,CAAC+B,OAAO,CAACD,QAAQ,CAACN,UAAU,CAAC,EAAE;MACnFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAI1B,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEgC,MAAM,IAAIhC,gBAAgB,CAACgC,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,CAACzB,gBAAgB,EAAEK,KAAK,CAC5B,CAAC;EAED,MAAM4B,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,IAAInC,QAAQ,EAAE;MACV,MAAMoC,MAAM,GAAG,IAAAC,sCAAoB,EAACrC,QAAQ,CAAC;MAE7C,IAAIE,gBAAgB,IAAIkC,MAAM,EAAE;QAC5B,IAAI;UACA,OAAO,IAAAE,kBAAM,EAACxC,IAAI,EAAEsC,MAAM,CAAC;QAC/B,CAAC,CAAC,OAAOG,KAAK,EAAE;UACZ,IAAI,OAAOpC,aAAa,KAAK,WAAW,EAAEA,aAAa,CAACoC,KAAK,CAAC;QAClE;MACJ;MAEA,OAAOzC,IAAI;IACf;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAACA,IAAI,EAAEE,QAAQ,EAAEE,gBAAgB,EAAEC,aAAa,CAAC,CAAC;EAErD,IAAAU,gBAAS,EAAC,MAAM;IACZ,MAAM2B,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,UAAU,CAAC;MAElD,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,OAAO,IAAAV,cAAO,EACV,mBACItE,MAAA,CAAAW,OAAA,CAAAsE,aAAA,CAAC3E,gBAAA,CAAA8E,qBAAqB;IAACC,QAAQ,EAAEvC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEwC,IAAK;IAACC,gBAAgB,EAAE/C,eAAgB;IAACgD,UAAU,EAAE1D,KAAM;IAACc,GAAG,EAAEA;EAAI,gBAC3G5C,MAAA,CAAAW,OAAA,CAAAsE,aAAA,CAAC3E,gBAAA,CAAAmF,2BAA2B;IAACD,UAAU,EAAE1D;EAAM,gBAC3C9B,MAAA,CAAAW,OAAA,CAAAsE,aAAA,CAAC3E,gBAAA,CAAAoF,6BAA6B;IAACF,UAAU,EAAE1D;EAAM,gBAG7C9B,MAAA,CAAAW,OAAA,CAAAsE,aAAA,mBAAW,IAAAU,gCAAc,EAACxD,QAAQ,CAAY,CACnB,CAAC,eAChCnC,MAAA,CAAAW,OAAA,CAAAsE,aAAA,CAAC1E,gBAAA,CAAAI,OAAe;IAACiF,IAAI,EAAE3D,IAAK;IAACH,KAAK,EAAEA,KAAM;IAACI,cAAc,EAAEA;EAAe,CAAE,CACnD,CAAC,eAC9BlC,MAAA,CAAAW,OAAA,CAAAsE,aAAA,CAAC/E,uBAAA,CAAA2F,eAAiB;IACd1D,QAAQ,EAAEA,QAAQ,IAAI,EAAG;IACzB2D,eAAe,EAAEvD,qBAAsB;IACvCsB,KAAK,EAAE/B,KAAK,KAAKC,qCAAoB,CAACC,IAAI,GAAG+D,cAAO,GAAGC,eAAS;IAChEC,SAAS;IACTC,aAAa,EAAE1D,eAAgB;IAC/B2D,SAAS,EAAEzC;EAAY,GAEtBW,aACc,CACA,CAC1B,EACD,CAACvB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEwC,IAAI,EAAExD,KAAK,EAAEK,QAAQ,EAAEF,IAAI,EAAEC,cAAc,EAAEK,qBAAqB,EAAEC,eAAe,EAAEkB,WAAW,EAAEW,aAAa,CAC7H,CAAC;AACL,CAAC;AAEDxC,eAAe,CAACuE,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3F,OAAA,GAEjCkB,eAAe","ignoreList":[]}

package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js CHANGED Viewed

@@ -48,6 +48,12 @@ const StyledCodeHighlighter = exports.StyledCodeHighlighter = _styledComponents.
                           border-radius: 20px;
                       }
                   `}
+        code{
+            white-space: ${({
+  $shouldWrapLines
+}) => $shouldWrapLines ? 'pre-wrap' : 'pre'} !important;
+        }
     }
     // Fixes display of tables in code highlighter for markdown.

package/lib/cjs/components/code-highlighter/CodeHighlighter.styles.js.map CHANGED Viewed

	@@ -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","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","span"],"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: 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\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":";;;;;;AAEA,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;~~AAO5D~~,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;AACA;AACA;AACA;AACA,CAAC;AAMM,~~MAAME~~,2BAA2B,~~GAAAT~~,OAAA,~~CAAAS~~,2BAAA,~~GAAGR~~,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,~~MAAMK~~,6BAA6B,~~GAAAV~~,OAAA,~~CAAAU~~,6BAAA,~~GAAGT~~,yBAAM,~~CAACU~~,IAAwC;AAC5F,aAAa,CAAC;~~EAAER~~;AAAW,CAAC,KACpBA,UAAU,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,CAAC","ignoreList":[]}
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 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 $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 }) => $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":";;;;;;AAEA,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,KAAKA,gBAAgB,GAAG,UAAU,GAAG,KAAK;AAC1F;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":[]}

package/lib/esm/components/code-highlighter/CodeHighlighter.js CHANGED Viewed

@@ -16,7 +16,8 @@ const CodeHighlighter = _ref => {
     highlightedLines,
     shouldFormatCode = false,
     onFormatError,
-    shouldShowLineNumbers = false
+    shouldShowLineNumbers = false,
+    shouldWrapLines
   } = _ref;
   const [width, setWidth] = useState(0);
   const ref = useRef(null);
@@ -94,6 +95,7 @@ const CodeHighlighter = _ref => {
   }, []);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledCodeHighlighter, {
     $browser: browser?.name,
+    $shouldWrapLines: shouldWrapLines,
     $codeTheme: theme,
     ref: ref
   }, /*#__PURE__*/React.createElement(StyledCodeHighlighterHeader, {
@@ -109,8 +111,9 @@ const CodeHighlighter = _ref => {
     showLineNumbers: shouldShowLineNumbers,
     style: theme === CodeHighlighterTheme.Dark ? oneDark : oneLight,
     wrapLines: true,
+    wrapLongLines: shouldWrapLines,
     lineProps: lineWrapper
-  }, formattedCode)), [browser?.name, theme, language, code, copyButtonText, shouldShowLineNumbers, lineWrapper, formattedCode]);
+  }, formattedCode)), [browser?.name, theme, language, code, copyButtonText, shouldShowLineNumbers, shouldWrapLines, lineWrapper, formattedCode]);
 };
 CodeHighlighter.displayName = 'CodeHighlighter';
 export default CodeHighlighter;

package/lib/esm/components/code-highlighter/CodeHighlighter.js.map CHANGED Viewed

	@@ -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","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","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$browser","name","$codeTheme","text","showLineNumbers","wrapLines","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 Whether the code should be formatted with prettier.\n /\n shouldFormatCode?: boolean;\n /\n Callback-Funktion, die aufgerufen wird, wenn das Formatieren des Codes fehlschlägt.\n /\n onFormatError?: (error: unknown) => void;\n\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 onFormatError,\n shouldShowLineNumbers = false,\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 const config = getParserForLanguage(language);\n\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 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} $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 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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","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","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 const config = getParserForLanguage(language);\n\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 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":[]}

package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js CHANGED Viewed

@@ -46,6 +46,15 @@ export const StyledCodeHighlighter = styled.div`
                       }
                   `;
 }}
+        code{
+            white-space: ${_ref3 => {
+  let {
+    $shouldWrapLines
+  } = _ref3;
+  return $shouldWrapLines ? 'pre-wrap' : 'pre';
+}} !important;
+        }
     }
     // Fixes display of tables in code highlighter for markdown.
@@ -58,19 +67,19 @@ export const StyledCodeHighlighterHeader = styled.div`
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid
-        ${_ref3 => {
+        ${_ref4 => {
   let {
     $codeTheme
-  } = _ref3;
+  } = _ref4;
   return $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
 }};
     padding: 4px 12px;
 `;
 export const StyledCodeHighlighterFileName = styled.span`
-    color: ${_ref4 => {
+    color: ${_ref5 => {
   let {
     $codeTheme
-  } = _ref4;
+  } = _ref5;
   return $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
 }};
 `;

package/lib/esm/components/code-highlighter/CodeHighlighter.styles.js.map CHANGED Viewed

	@@ -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: 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\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":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,6BAA6B;~~AAOlE~~,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;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,2BAA2B,~~GAAGX~~,MAAM,CAACI,GAAqC;AACvF;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,CAAC;AAChG;AACA,CAAC;AAMD,OAAO,~~MAAMM~~,6BAA6B,~~GAAGb~~,MAAM,~~CAACc~~,IAAwC;AAC5F,aAAaC,KAAA;EAAA,IAAC;~~IAAET~~;EAAW,CAAC,~~GAAAS~~,KAAA;EAAA,~~OACpBT~~,UAAU,KAAKJ,oBAAoB,CAACK,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA;AACxE,CAAC","ignoreList":[]}
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 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 $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 }) => $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":"AAEA,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,OAAKC,gBAAgB,GAAG,UAAU,GAAG,KAAK;AAAA;AAC1F;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":[]}

package/lib/types/components/code-highlighter/CodeHighlighter.d.ts CHANGED Viewed

@@ -20,17 +20,21 @@ export type CodeHighlighterProps = {
      */
     language: CodeHighlighterLanguage;
     /**
-     * Whether the code should be formatted with prettier.
+     * Function to be executed when the formatting of the code fails.
      */
-    shouldFormatCode?: boolean;
+    onFormatError?: (error: unknown) => void;
     /**
-     * Callback-Funktion, die aufgerufen wird, wenn das Formatieren des Codes fehlschlägt.
+     * Whether the code should be formatted with prettier.
      */
-    onFormatError?: (error: unknown) => void;
+    shouldFormatCode?: boolean;
     /**
      * Whether the line numbers should be displayed.
      */
     shouldShowLineNumbers?: boolean;
+    /**
+     * Whether long lines should be wrapped.
+     */
+    shouldWrapLines?: boolean;
     /**
      * The theme of the code block. Decide between dark and light.
      */

package/lib/types/components/code-highlighter/CodeHighlighter.styles.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { CodeHighlighterTheme } from '../../types/codeHighlighter';
 type StyledCodeHighlighterProps = WithTheme<{
     $codeTheme: CodeHighlighterTheme;
     $browser: Browser | 'bot' | null | undefined;
+    $shouldWrapLines?: boolean;
 }>;
 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;
 type StyledCodeHighlighterHeaderProps = WithTheme<{

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/code-highlighter",
-    "version": "5.0.0-beta.915",
+    "version": "5.0.0-beta.918",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -68,7 +68,7 @@
         "typescript": "^5.7.2"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.915",
+        "@chayns-components/core": "^5.0.0-beta.918",
         "@types/react-syntax-highlighter": "^15.5.13",
         "babel-prettier-parser": "^0.10.8",
         "prettier": "^2.8.8",
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "204b4347196c90a032de249bdee1d441be0e4155"
+    "gitHead": "0895d349cc96e8c9135a294d8d927e7588e565f4"
 }