migrated the frontend file generation, changed folder structure

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

@@ -0,0 +1,85 @@
+import { Textarea } from "@mantine/core";
+import { useEffect, useRef } from "react";
+
+interface TextAreaProps {
+  text: string;
+  onTextChange: (text: string) => void;
+}
+
+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}
+      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>
+  );
+}