Function CodeSurferContent

packs/standalone/src/frame.tsx:72–153

({
  dimensions,
  stepPair,
  t,
  tokens,
  types,
  maxLineCount,
  showNumbers
}: {
  dimensions?: Dimensions;
  stepPair: Tuple<Step>;
  t: number;
  tokens: string[][];
  types: string[][];
  maxLineCount: number;
  showNumbers: boolean;
})

}

function CodeSurferContent({
  dimensions,
  stepPair,
  t,
  tokens,
  types,
  maxLineCount,
  showNumbers
}: {
  dimensions?: Dimensions;
  stepPair: Tuple<Step>;
  t: number;
  tokens: string[][];
  types: string[][];
  maxLineCount: number;
  showNumbers: boolean;
}) {
  const ref = React.useRef<HTMLPreElement | null>(null);

  const scaleAnimation = React.useMemo(
    () => scaleToFocus(stepPair, dimensions),
    [stepPair, dimensions]
  );

  const scrollAnimation = React.useMemo(
    () => scrollToFocus(stepPair, dimensions),
    [stepPair, dimensions]
  );

  const scale = scaleAnimation(t);
  const scrollTop = scrollAnimation(t);
  const verticalOrigin = dimensions
    ? dimensions.containerHeight / 2 + scrollTop
    : 0;

  React.useLayoutEffect(() => {
    if (ref.current == null) return;
    ref.current.scrollTop = scrollTop;
  }, [scrollTop]);

  const unfocusedStyle = useUnfocusedStyle();

  return (
    <Styled.Pre
      className="cs-content"
      ref={ref}
      style={{
        margin: 0,
        height: "100%",
        overflow: "hidden"
      }}
    >
      <Styled.Code
        className="cs-scaled-content"
        style={{
          display: "block",
          //TODO isnt contentHeight always undefined?
          height: dimensions ? dimensions.contentHeight : "100%",