vqe_module/frontend-plugin/src/EditorPage/CodeTextArea/CodeTextArea.tsx

import { Textarea } from "@mantine/core";
import { useEffect, useRef } from "react";

interface TextAreaProps {
  text: string;
  onTextChange: (text: string) => void;
  enabled: boolean;
}

export function CodeTextArea(props: TextAreaProps) {
  const inputRef = useRef(null);
  const lineRef = useRef(null);

  //Synchronize scrolling between the
  useEffect(() => {
    const inputEl = document.querySelector(".MoleculeEditInput");
    const lineEl = document.querySelector(".MoleculeEditLineNumber");
    if (!inputEl || !lineEl) return;

    let isSyncing = false; // prevents circular scroll events
    let activeEl = null; // element currently being scrolled

    const syncScroll = (source: Element, target: Element) => {
      if (isSyncing) return;
      isSyncing = true;

      requestAnimationFrame(() => {
        target.scrollTop = source.scrollTop;
        isSyncing = false;
      });
    };

    const onScroll = (e: Event) => {
      activeEl = e.target;
      if (activeEl === inputEl) {
        syncScroll(inputEl, lineEl);
      } else {
        syncScroll(lineEl, inputEl);
      }
    };

    inputEl.addEventListener("scroll", onScroll, { passive: true });
    lineEl.addEventListener("scroll", onScroll, { passive: true });

    return () => {
      inputEl.removeEventListener("scroll", onScroll);
      lineEl.removeEventListener("scroll", onScroll);
    };
  }, []);

  return (
    <Textarea
      className="MoleculeEdit"
      value={props.text}
      ref={inputRef}
      disabled={!props.enabled}
      onChange={(e) => {
        props.onTextChange(e.currentTarget.value);
      }}
      autoFocus
      wrap="no-wrap"
      leftSection={
        <div className="MoleculeEditLineNumber" ref={lineRef}>
          {Array.from({ length: props.text.split("\n").length }, (_, i) => {
            if (i > 1) {
              return i - 1;
            } else {
              return "";
            }
          }).join("\n")}
        </div>
      }
      classNames={{
        input: "MoleculeEditInput",
        wrapper: "MoleculeEditWrapper",
      }}
      onKeyDown={(e) => {
        // Stop arrow keys from reaching react-resizable-panels
        if (
          ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)
        ) {
          e.stopPropagation();
        }
      }}
    ></Textarea>
  );
}