From 81827e2debb456c329ab28ad2ab6749f25e98c29 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Mon, 18 Sep 2023 21:33:26 +0530
Subject: [PATCH 1/8] chore: remove content editable

---
 frontend/package-lock.json | 28 ++++------------------------
 frontend/package.json      |  1 -
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e6847b42c..28ea1859e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -72,7 +72,6 @@
         "react": "^17.0.2",
         "react-beautiful-dnd": "^13.1.1",
         "react-code-input": "^3.10.1",
-        "react-contenteditable": "^3.3.7",
         "react-day-picker": "^8.8.0",
         "react-dom": "^17.0.2",
         "react-grid-layout": "^1.3.4",
@@ -13340,7 +13339,8 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -19594,18 +19594,6 @@
         "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/react-contenteditable": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.7.tgz",
-      "integrity": "sha512-GA9NbC0DkDdpN3iGvib/OMHWTJzDX2cfkgy5Tt98JJAbA3kLnyrNbBIpsSpPpq7T8d3scD39DHP+j8mAM7BIfQ==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "prop-types": "^15.7.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.3"
-      }
-    },
     "node_modules/react-day-picker": {
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.8.0.tgz",
@@ -33272,7 +33260,8 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "fast-diff": {
       "version": "1.3.0",
@@ -37807,15 +37796,6 @@
       "dev": true,
       "requires": {}
     },
-    "react-contenteditable": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.7.tgz",
-      "integrity": "sha512-GA9NbC0DkDdpN3iGvib/OMHWTJzDX2cfkgy5Tt98JJAbA3kLnyrNbBIpsSpPpq7T8d3scD39DHP+j8mAM7BIfQ==",
-      "requires": {
-        "fast-deep-equal": "^3.1.3",
-        "prop-types": "^15.7.1"
-      }
-    },
     "react-day-picker": {
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.8.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d954da2a8..42cd32385 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -80,7 +80,6 @@
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-code-input": "^3.10.1",
-    "react-contenteditable": "^3.3.7",
     "react-day-picker": "^8.8.0",
     "react-dom": "^17.0.2",
     "react-grid-layout": "^1.3.4",

From 7f753b23f80aeda8873a24d365e90922bb387ef9 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Mon, 18 Sep 2023 21:39:50 +0530
Subject: [PATCH 2/8] fix: secret input

---
 .../components/v2/SecretInput/SecretInput.tsx | 67 ++++++++++---------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 666c41d69..1ef7feb94 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react/no-danger */
-import { forwardRef, HTMLAttributes } from "react";
-import ContentEditable from "react-contenteditable";
+import { forwardRef, HTMLAttributes, useState } from "react";
 import sanitizeHtml, { DisallowedTagsModes } from "sanitize-html";
 
 import { useToggle } from "@app/hooks";
@@ -38,7 +37,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
   return newContent;
 };
 
-type Props = Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur"> & {
+type Props = Omit<HTMLAttributes<HTMLTextAreaElement>, "onChange" | "onBlur"> & {
   value?: string | null;
   isVisible?: boolean;
   isDisabled?: boolean;
@@ -46,30 +45,44 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur"> & {
   onBlur?: () => void;
 };
 
-export const SecretInput = forwardRef<HTMLDivElement, Props>(
-  ({ value, isVisible, onChange, onBlur, isDisabled, ...props }, ref) => {
+const commonClassName =
+  "font-mono text-base leading-5 caret-white border-none outline-none w-full break-all ";
+
+export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
+  ({ value, isVisible, onChange, onBlur, isDisabled, onFocus, ...props }, ref) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
+    const [text, setText] = useState(() => value || "");
+
+    const update = (code: string) => {
+      setText(code);
+      if (onChange) {
+        onChange(code);
+      }
+    };
+
+    const onInput = (event: any) => {
+      const code = event.target.value.trim() || "";
+      update(code);
+    };
 
     return (
-      <div
-        className="thin-scrollbar relative overflow-y-auto overflow-x-hidden"
-        style={{ maxHeight: `${21 * 7}px` }}
-      >
-        <div
-          dangerouslySetInnerHTML={{
-            __html: syntaxHighlight(value, isVisible || isSecretFocused)
-          }}
-          className={`absolute top-0 left-0 z-0 h-full w-full inline-block text-ellipsis whitespace-pre-wrap break-all ${
-            !value && value !== "" && "italic text-red-600/70"
-          }`}
+      <div className="relative">
+        <pre aria-hidden className="m-0 whitespace-pre-wrap">
+          <code className={`code inline-block w-full  ${commonClassName}`}>
+            <span
+              dangerouslySetInnerHTML={{
+                __html: syntaxHighlight(text, isVisible || isSecretFocused) ?? ""
+              }}
+            />
+          </code>
+        </pre>
+
+        <textarea
+          aria-label="secret value"
           ref={ref}
-        />
-        <ContentEditable
-          className="relative z-10 h-full w-full text-ellipsis inline-block whitespace-pre-wrap  break-all text-transparent caret-white outline-none"
-          role="textbox"
-          onChange={(evt) => {
-            if (onChange) onChange(evt.currentTarget.innerText.trim());
-          }}
+          className={`textarea absolute inset-0 h-full overflow-hidden block focus:border-0 resize-none bg-transparent text-transparent ${commonClassName}`}
+          value={text}
+          onChange={onInput}
           onFocus={() => setIsSecretFocused.on()}
           disabled={isDisabled}
           spellCheck={false}
@@ -77,14 +90,6 @@ export const SecretInput = forwardRef<HTMLDivElement, Props>(
             if (onBlur) onBlur();
             setIsSecretFocused.off();
           }}
-          html={
-            isVisible || isSecretFocused
-              ? sanitizeHtml(
-                  value?.replaceAll("<", "&lt;").replaceAll(">", "&gt;") || "",
-                  sanitizeConf
-                )
-              : syntaxHighlight(value, false)
-          }
           {...props}
         />
       </div>

From 3be38675793dc93035375192f4a04594e2bc2bae Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Mon, 18 Sep 2023 21:51:33 +0530
Subject: [PATCH 3/8] fix: font size

---
 frontend/src/components/v2/SecretInput/SecretInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 1ef7feb94..1573fa961 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -46,7 +46,7 @@ type Props = Omit<HTMLAttributes<HTMLTextAreaElement>, "onChange" | "onBlur"> &
 };
 
 const commonClassName =
-  "font-mono text-base leading-5 caret-white border-none outline-none w-full break-all ";
+  "font-mono text-sm leading-5 caret-white border-none outline-none w-full break-all ";
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
   ({ value, isVisible, onChange, onBlur, isDisabled, onFocus, ...props }, ref) => {

From ef7bf0939883169f0d3544a093bad84c4473df61 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Mon, 18 Sep 2023 23:02:30 +0530
Subject: [PATCH 4/8] fix: trimming

---
 frontend/src/components/v2/SecretInput/SecretInput.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 1573fa961..10ed24f43 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -56,12 +56,12 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const update = (code: string) => {
       setText(code);
       if (onChange) {
-        onChange(code);
+        onChange(code.trim());
       }
     };
 
     const onInput = (event: any) => {
-      const code = event.target.value.trim() || "";
+      const code = event.target.value || "";
       update(code);
     };
 
@@ -80,7 +80,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         <textarea
           aria-label="secret value"
           ref={ref}
-          className={`textarea absolute inset-0 h-full overflow-hidden block focus:border-0 resize-none bg-transparent text-transparent ${commonClassName}`}
+          className={`textarea absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent focus:border-0 ${commonClassName}`}
           value={text}
           onChange={onInput}
           onFocus={() => setIsSecretFocused.on()}

From 63e8ecce5be3ee1805821593585e52d8e479c7bd Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Mon, 18 Sep 2023 23:44:08 +0530
Subject: [PATCH 5/8] fix: break

---
 frontend/src/components/v2/SecretInput/SecretInput.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 10ed24f43..1c4094ce2 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -46,7 +46,7 @@ type Props = Omit<HTMLAttributes<HTMLTextAreaElement>, "onChange" | "onBlur"> &
 };
 
 const commonClassName =
-  "font-mono text-sm leading-5 caret-white border-none outline-none w-full break-all ";
+  "font-mono text-sm caret-white border-none outline-none w-full break-all py-4";
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
   ({ value, isVisible, onChange, onBlur, isDisabled, onFocus, ...props }, ref) => {
@@ -67,7 +67,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
 
     return (
       <div className="relative">
-        <pre aria-hidden className="m-0 whitespace-pre-wrap">
+        <pre aria-hidden className="m-0 " style={{ whiteSpace: "break-spaces" }}>
           <code className={`code inline-block w-full  ${commonClassName}`}>
             <span
               dangerouslySetInnerHTML={{
@@ -78,6 +78,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         </pre>
 
         <textarea
+          style={{ whiteSpace: "break-spaces" }}
           aria-label="secret value"
           ref={ref}
           className={`textarea absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent focus:border-0 ${commonClassName}`}

From f84235eea33ac31374d74afe674c34894bf77f4d Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Tue, 19 Sep 2023 00:23:39 +0530
Subject: [PATCH 6/8] fix: scroll

---
 .../components/v2/SecretInput/SecretInput.tsx | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 1c4094ce2..c3b64e906 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -66,33 +66,36 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     };
 
     return (
-      <div className="relative">
-        <pre aria-hidden className="m-0 " style={{ whiteSpace: "break-spaces" }}>
-          <code className={`code inline-block w-full  ${commonClassName}`}>
-            <span
-              dangerouslySetInnerHTML={{
-                __html: syntaxHighlight(text, isVisible || isSecretFocused) ?? ""
-              }}
-            />
-          </code>
-        </pre>
+      <div className="overflow-auto" style={{ maxHeight: `${21 * 7}px` }}>
+        <div className="relative overflow-hidden">
+          <pre aria-hidden className="m-0 ">
+            <code className={`inline-block w-full  ${commonClassName}`}>
+              <span
+                style={{ whiteSpace: "break-spaces" }}
+                dangerouslySetInnerHTML={{
+                  __html: syntaxHighlight(text, isVisible || isSecretFocused) ?? ""
+                }}
+              />
+            </code>
+          </pre>
 
-        <textarea
-          style={{ whiteSpace: "break-spaces" }}
-          aria-label="secret value"
-          ref={ref}
-          className={`textarea absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent focus:border-0 ${commonClassName}`}
-          value={text}
-          onChange={onInput}
-          onFocus={() => setIsSecretFocused.on()}
-          disabled={isDisabled}
-          spellCheck={false}
-          onBlur={() => {
-            if (onBlur) onBlur();
-            setIsSecretFocused.off();
-          }}
-          {...props}
-        />
+          <textarea
+            style={{ whiteSpace: "break-spaces" }}
+            aria-label="secret value"
+            ref={ref}
+            className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
+            value={text}
+            onChange={onInput}
+            onFocus={() => setIsSecretFocused.on()}
+            disabled={isDisabled}
+            spellCheck={false}
+            onBlur={() => {
+              if (onBlur) onBlur();
+              setIsSecretFocused.off();
+            }}
+            {...props}
+          />
+        </div>
       </div>
     );
   }

From 6b8d4c2fea28351a954ee776307cf74ac094fde7 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Tue, 19 Sep 2023 07:29:44 +0530
Subject: [PATCH 7/8] fix: padding

---
 frontend/src/components/v2/SecretInput/SecretInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index c3b64e906..04fba8fe4 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -46,7 +46,7 @@ type Props = Omit<HTMLAttributes<HTMLTextAreaElement>, "onChange" | "onBlur"> &
 };
 
 const commonClassName =
-  "font-mono text-sm caret-white border-none outline-none w-full break-all py-4";
+  "font-mono text-sm caret-white border-none outline-none w-full break-all pb-4";
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
   ({ value, isVisible, onChange, onBlur, isDisabled, onFocus, ...props }, ref) => {

From 2c7aac37a21792fde14af92962df4e6fb3e0d113 Mon Sep 17 00:00:00 2001
From: Akhil Mohan <akhilmhdh@gmail.com>
Date: Wed, 20 Sep 2023 17:00:49 +0530
Subject: [PATCH 8/8] feat: resolved trailing whitespace not showing up

---
 .../components/v2/SecretInput/SecretInput.tsx | 40 ++++++-------------
 .../SecretInputRow/SecretInputRow.tsx         |  2 +-
 2 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 04fba8fe4..d7476ec57 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import { forwardRef, HTMLAttributes, useState } from "react";
+import { forwardRef, HTMLAttributes } from "react";
 import sanitizeHtml, { DisallowedTagsModes } from "sanitize-html";
 
 import { useToggle } from "@app/hooks";
@@ -34,65 +34,49 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
       `<span class="ph-no-capture text-yellow">&#36;&#123;<span class="ph-no-capture text-yello-200/80">${b}</span>&#125;</span>`
   );
 
-  return newContent;
+  // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
+  // when break is added a line break works properly
+  return `${newContent}<br/>`;
 };
 
-type Props = Omit<HTMLAttributes<HTMLTextAreaElement>, "onChange" | "onBlur"> & {
+type Props = HTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
   isVisible?: boolean;
   isDisabled?: boolean;
-  onChange?: (val: string) => void;
-  onBlur?: () => void;
 };
 
-const commonClassName =
-  "font-mono text-sm caret-white border-none outline-none w-full break-all pb-4";
+const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
-  ({ value, isVisible, onChange, onBlur, isDisabled, onFocus, ...props }, ref) => {
+  ({ value, isVisible, onBlur, isDisabled, onFocus, ...props }, ref) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
-    const [text, setText] = useState(() => value || "");
-
-    const update = (code: string) => {
-      setText(code);
-      if (onChange) {
-        onChange(code.trim());
-      }
-    };
-
-    const onInput = (event: any) => {
-      const code = event.target.value || "";
-      update(code);
-    };
 
     return (
-      <div className="overflow-auto" style={{ maxHeight: `${21 * 7}px` }}>
+      <div className="overflow-auto w-full" style={{ maxHeight: `${21 * 7}px` }}>
         <div className="relative overflow-hidden">
           <pre aria-hidden className="m-0 ">
             <code className={`inline-block w-full  ${commonClassName}`}>
               <span
                 style={{ whiteSpace: "break-spaces" }}
                 dangerouslySetInnerHTML={{
-                  __html: syntaxHighlight(text, isVisible || isSecretFocused) ?? ""
+                  __html: syntaxHighlight(value, isVisible || isSecretFocused) ?? ""
                 }}
               />
             </code>
           </pre>
-
           <textarea
             style={{ whiteSpace: "break-spaces" }}
             aria-label="secret value"
             ref={ref}
             className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
-            value={text}
-            onChange={onInput}
             onFocus={() => setIsSecretFocused.on()}
             disabled={isDisabled}
             spellCheck={false}
-            onBlur={() => {
-              if (onBlur) onBlur();
+            onBlur={(evt) => {
+              onBlur?.(evt);
               setIsSecretFocused.off();
             }}
+            value={value || ""}
             {...props}
           />
         </div>
diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
index c31c6df2e..9788c614b 100644
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -270,7 +270,7 @@ export const SecretInputRow = memo(
           className="flex w-full flex-grow flex-row border-r border-none border-red"
           style={{ padding: "0.5rem 0 0.5rem 1rem" }}
         >
-          <div className="w-full">
+          <div className="w-full flex items-center">
             {isOverridden ? (
               <Controller
                 control={control}