{"version":3,"file":"index.cjs","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { IconButton } from '@/components/IconButton';\n\nimport { cn } from '@/lib/cva';\nimport useColorStyle, { useButtonStateColors, useNumbersColor } from './useColorStyle';\nimport { CodeBlockProps } from './CodeBlock.types';\nimport styles from './CodeBlock.module.css';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport diff from 'react-syntax-highlighter/dist/cjs/languages/hljs/diff.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\nSyntaxHighlighter.registerLanguage('diff', diff.default || diff);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  ariaLabel,\n  onCopy,\n  onCopyError,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n  const numbersColor = useNumbersColor(theme);\n  const buttonStateColors = useButtonStateColors();\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n\n  const codeRegionLabel =\n    ariaLabel ?? (language ? `${language} code block` : 'Code block');\n\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => (\n    <code\n      {...props}\n      className={cn(styles['codeblock__content'], props.className)}\n    />\n  );\n  return (\n    <div\n      {...props}\n      style={{ '--codeblock-numbers': numbersColor, ...style } as React.CSSProperties}\n      className={cn(styles.codeblock, className)}\n    >\n      <SyntaxHighlighter\n        tabIndex={0}\n        role=\"group\"\n        aria-label={codeRegionLabel}\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        className={styles['codeblock__highlighter']}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </SyntaxHighlighter>\n      <div className={styles['codeblock__button-container']}>\n        {showWrapButton && (\n          <IconButton\n            className={styles['codeblock__button']}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <IconButton\n          className={styles['codeblock__button']}\n          style={\n            {\n              '--codeblock-button': copied\n                ? buttonStateColors.success\n                : errorCopy\n                  ? buttonStateColors.danger\n                  : undefined,\n            } as React.CSSProperties\n          }\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["SyntaxHighlighter","sql","bash","json","tsx","plaintext","diff","useState","useColorStyle","useNumbersColor","useButtonStateColors","wrap","props","jsx","cn","styles","jsxs","children","createElement","IconButton"],"mappings":"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"}