text: /**
   * Copyright (c) 2017-present, Facebook, Inc.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   */
  
  import React, {useEffect, useState, useRef} from 'react';
  import classnames from 'classnames';
  import Highlight, {defaultProps} from 'prism-react-renderer';
  import defaultTheme from 'prism-react-renderer/themes/palenight';
  import Clipboard from 'clipboard';
  import rangeParser from 'parse-numeric-range';
  import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
  import Playground from '@theme/Playground';
  import styles from './styles.module.css';
  
  const highlightLinesRangeRegex = /{([\d,-]+)}/;
  
  export default ({
    children,
    className: languageClassName,
    live,
    metastring,
    ...props
  }) => {
    const {
      siteConfig: {
        themeConfig: {prismTheme},
      },
    } = useDocusaurusContext();
    const [showCopied, setShowCopied] = useState(false);
    const target = useRef(null);
    const button = useRef(null);
    let highlightLines = [];
  
    if (metastring && highlightLinesRangeRegex.test(metastring)) {
      const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
      highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
    }
  
    useEffect(() => {
      let clipboard;
  
      if (button.current) {
        clipboard = new Clipboard(button.current, {
          target: () => target.current,
        });
      }
  
      return () => {
        if (clipboard) {
          clipboard.destroy();
        }
      };
    }, [button.current, target.current]);
  
    if (live) {
      return (
        <Playground
          scope={{...React}}
          code={children.trim()}
          theme={prismTheme || defaultTheme}
          {...props}
        />
      );
    }
  
    const language =
      languageClassName && languageClassName.replace(/language-/, '');
  
    const handleCopyCode = () => {
      window.getSelection().empty();
      setShowCopied(true);
  
      setTimeout(() => setShowCopied(false), 2000);
    };
  
    return (
      <Highlight
        {...defaultProps}
        theme={prismTheme || defaultTheme}
        code={children.trim()}
        language={language}>
        {({className, style, tokens, getLineProps, getTokenProps}) => (
          <div className={styles.codeBlockWrapper}>
            <pre
              ref={target}
              className={classnames(className, styles.codeBlock)}
              style={style}>
              {tokens.map((line, i) => {
                const lineProps = getLineProps({line, key: i});
  
                if (highlightLines.includes(i + 1)) {
                  lineProps.className = `${lineProps.className} highlight-line`;
                }
  
                return (
                  <div key={i} {...lineProps}>
                    {line.map((token, key) => (
                      <span key={key} {...getTokenProps({token, key})} />
                    ))}
                  </div>
                );
              })}
            </pre>
            <button
              ref={button}
              type="button"
              aria-label="Copy code to clipboard"
              className={styles.copyButton}
              onClick={handleCopyCode}>
              {showCopied ? 'Copied' : 'Copy'}
            </button>
          </div>
        )}
      </Highlight>
    );
  };
  