{"version":3,"file":"code-block-code.cjs","sources":["../../../components/code-block/code-block-code.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Highlight, Language } from 'prism-react-renderer';\nimport { ComponentProps, memo } from 'react';\nimport { useIsomorphicLayoutEffect } from '~/hooks';\nimport code from './code.module.css';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport interface CodeBlockCodeProps extends ComponentProps<'div'> {\n  children: string;\n  language: Language;\n  value?: string;\n  className?: string;\n}\n\nconst emptyTheme = { plain: {}, styles: [] };\n\nexport const CodeBlockCode = ({\n  children,\n  language,\n  className,\n  value,\n  ...props\n}: CodeBlockCodeProps) => {\n  const { value: contextValue, setCode, setValue } = useCodeBlockContext();\n  const computedValue = value ?? language;\n  const isContextValueDefined = !!contextValue;\n  const shouldRender = !isContextValueDefined || contextValue === computedValue;\n  const content = children.trim();\n\n  useIsomorphicLayoutEffect(() => {\n    // if value is not defined, set the value\n    if (!isContextValueDefined) setValue(language);\n    // if should render, store the code\n    if (shouldRender) setCode(content);\n  }, [\n    content,\n    setCode,\n    shouldRender,\n    setValue,\n    language,\n    isContextValueDefined\n  ]);\n\n  if (!shouldRender) return null;\n\n  return (\n    <div\n      className={cx(styles.codeContent, className)}\n      data-slot='code-block-code'\n      {...props}\n    >\n      <CodeHighlight content={content} language={language} />\n    </div>\n  );\n};\n\nCodeBlockCode.displayName = 'CodeBlock.Code';\n\nconst CodeHighlight = memo(\n  ({ content, language }: { content: string; language: Language }) => {\n    const { hideLineNumbers, maxLines, collapsed } = useCodeBlockContext();\n    const canCollapse = maxLines && maxLines > 0;\n    return (\n      <Highlight theme={emptyTheme} code={content} language={language}>\n        {({\n          className: highlightClassName,\n          style,\n          tokens,\n          getLineProps,\n          getTokenProps\n        }) => {\n          const renderedTokens =\n            canCollapse && collapsed ? tokens.slice(0, maxLines) : tokens;\n          return (\n            <pre\n              className={cx(code.theme, styles.pre, highlightClassName)}\n              style={style}\n              data-slot='code-block-pre'\n            >\n              {renderedTokens.map((line, i) => (\n                <div\n                  key={i}\n                  data-slot='code-block-line'\n                  {...getLineProps({ line })}\n                >\n                  {!hideLineNumbers && (\n                    <span\n                      className={styles.lineNumber}\n                      data-slot='code-block-line-number'\n                    >\n                      {i + 1}\n                    </span>\n                  )}\n                  <span\n                    className={styles.lineContent}\n                    data-slot='code-block-line-content'\n                  >\n                    {line.map((token, key) => (\n                      <span\n                        key={key}\n                        data-slot='code-block-token'\n                        {...getTokenProps({ token })}\n                      />\n                    ))}\n                  </span>\n                </div>\n              ))}\n            </pre>\n          );\n        }}\n      </Highlight>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBA;AAEa;AAOX;AACA;AACA;;AAEA;;;AAIE;;;AAEA;;AACF;;;;;;;AAOC;AAED;AAAmB;AAEnB;AASF;AAEA;AAEA;;AAGI;AACA;;;;AAkDF;;"}