tesseract/showcases/web-kitchensink-reactnext/src/packages/react-refractor/index.tsx

import * as React from 'react';
import RefractorCore from 'react-refractor/all';
import styles from './style.module.css';
import {Marker} from 'react-refractor';

export type RefractorDerivedElement = HTMLDivElement;

export interface RefractorProps extends Omit<React.HTMLProps<RefractorDerivedElement>, 'children'> {
  code?: string;
  language?: string;
  lineNumbers?: boolean;
  tabSize?: number;
  header?: boolean;
  scroll?: boolean;
  actions?: React.ReactNode;
  markers?: Marker[];
}

export const Refractor = React.forwardRef<RefractorDerivedElement, RefractorProps>(({
  code: codeRaw = '',
  language = 'plain',
  lineNumbers = false,
  tabSize = 2,
  className,
  style,
  header = false,
  scroll = false,
  actions,
  markers = [],
  ...etcProps
}, forwardedRef) => {
  const code = codeRaw.trim();

  return (
    <div
      {...etcProps}
      className={`${styles['react-refractor']} ${className ?? ''}`.trim()}
      style={style}
      ref={forwardedRef}
    >
      {header && (
        <div className={styles['header']}>
          <div className={styles['language']}>
            {language}
          </div>
          {actions}
        </div>
      )}
      <div
        className={styles['content-wrapper']}
      >
        {lineNumbers && (
          <pre
            className={styles['line-numbers']}
          >
            <code>
              {code.split('\n').map((_, i) => (
                <React.Fragment key={i}>
                  {i > 0 && '\n'}
                  {i + 1}
                  {' '}
                </React.Fragment>
              ))}
            </code>
          </pre>
        )}
        <div
          className={`${styles['code-wrapper']} ${scroll ? styles['code-wrapper-scroll'] : ''}`.trim()}
        >
          <RefractorCore
            markers={markers}
            language={language}
            value={code}
            className="highlight"
          />
        </div>
      </div>
    </div>
  )
});

Refractor.displayName = 'Refractor';