Fixed the issue with overflowing secrets (#30)

frontend/components/dashboard/DashboardInputField.js

@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useRef } from "react";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import guidGenerator from "../utilities/randomId";
 
+const REGEX = /([$]{.*?})/g;
+
 /**
  * This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
  * @param {string} text - the value of the input in the Dashboard Input Field
@@ -73,55 +75,53 @@ const DashboardInputField = ({
       </div>
     );
   } else if (type === "value") {
+    const ref = useRef(null);
+  
+    const syncScroll = (e) => {
+      ref.current.scrollTop = e.target.scrollTop;
+      ref.current.scrollLeft = e.target.scrollLeft;
+    };
+
     return (
       <div className="flex-col w-full">
         <div
           className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
         >
           <input
-            onChange={(e) => onChangeHandler(e.target.value, index)}
-            type={type}
             value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onScroll={syncScroll}
             className={`${
               blurred
                 ? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
                 : ""
             } asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`}
             spellCheck="false"
+            placeholder="This is a placeholder!"
           />
-          <div
+          <div 
+            ref={ref} 
             className={`${
               blurred
                 ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
                 : ""
-            } flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
+            } flex flex-row font-mono absolute z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
           >
-            {findReferences(value).map((texts, id) => {
+            {
-              if (id % 2 == 0 || texts.length <= 2) {
+              value
-                return (
+              .split(REGEX)
-                  <span className="ph-no-capture" key={id}>
+              .map((word, i) => {
-                    {texts}
+                if (word.match(REGEX) !== null) {
-                  </span>
+                  return (
-                );
+                    <span key={i} className="text-yellow-400">
-              }
+                      {word}
-              return (
-                <span className="ph-no-capture text-yellow" key={id}>
-                  {texts.slice(0, 2)}
-                  <span className="ph-no-capture text-yellow-200/80">
-                    {texts.slice(2, texts.length - 1)}
-                  </span>
-                  {texts.slice(texts.length - 1, texts.length) == "}" ? (
-                    <span className="ph-no-capture text-yellow">
-                      {texts.slice(texts.length - 1, texts.length)}{" "}
                     </span>
-                  ) : (
+                  );
-                    <span className="ph-no-capture text-yellow-400">
+                } else {
-                      {texts.slice(texts.length - 1, texts.length)}{" "}
+                  return <span key={i}>{word}</span>;
-                    </span>
+                }
-                  )}
+              })
-                </span>
+            }
-              );
-            })}
           </div>
           {blurred && (
             <div className="z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-9 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
@@ -137,7 +137,7 @@ const DashboardInputField = ({
                   />
                 ))}
             </div>
-          )}
+          )} 
         </div>
       </div>
     );