Merge pull request #1010 from akhilmhdh:code-editor-fix

Stable multiline input

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",

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",

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 sanitizeHtml, { DisallowedTagsModes } from "sanitize-html";
 
 import { useToggle } from "@app/hooks";
@@ -35,58 +34,52 @@ 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<HTMLDivElement>, "onChange" | "onBlur"> & {
+type Props = HTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
   isVisible?: boolean;
   isDisabled?: boolean;
-  onChange?: (val: string) => void;
-  onBlur?: () => void;
 };
 
-export const SecretInput = forwardRef<HTMLDivElement, Props>(
+const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
-  ({ value, isVisible, onChange, onBlur, isDisabled, ...props }, ref) => {
+
+export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
+  ({ value, isVisible, onBlur, isDisabled, onFocus, ...props }, ref) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
 
     return (
-      <div
+      <div className="overflow-auto w-full" style={{ maxHeight: `${21 * 7}px` }}>
-        className="thin-scrollbar relative overflow-y-auto overflow-x-hidden"
+        <div className="relative overflow-hidden">
-        style={{ maxHeight: `${21 * 7}px` }}
+          <pre aria-hidden className="m-0 ">
-      >
+            <code className={`inline-block w-full  ${commonClassName}`}>
-        <div
+              <span
-          dangerouslySetInnerHTML={{
+                style={{ whiteSpace: "break-spaces" }}
-            __html: syntaxHighlight(value, isVisible || isSecretFocused)
+                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"
+              />
-          }`}
+            </code>
-          ref={ref}
+          </pre>
-        />
+          <textarea
-        <ContentEditable
+            style={{ whiteSpace: "break-spaces" }}
-          className="relative z-10 h-full w-full text-ellipsis inline-block whitespace-pre-wrap  break-all text-transparent caret-white outline-none"
+            aria-label="secret value"
-          role="textbox"
+            ref={ref}
-          onChange={(evt) => {
+            className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
-            if (onChange) onChange(evt.currentTarget.innerText.trim());
+            onFocus={() => setIsSecretFocused.on()}
-          }}
+            disabled={isDisabled}
-          onFocus={() => setIsSecretFocused.on()}
+            spellCheck={false}
-          disabled={isDisabled}
+            onBlur={(evt) => {
-          spellCheck={false}
+              onBlur?.(evt);
-          onBlur={() => {
+              setIsSecretFocused.off();
-            if (onBlur) onBlur();
+            }}
-            setIsSecretFocused.off();
+            value={value || ""}
-          }}
+            {...props}
-          html={
+          />
-            isVisible || isSecretFocused
+        </div>
-              ? sanitizeHtml(
-                  value?.replaceAll("<", "&lt;").replaceAll(">", "&gt;") || "",
-                  sanitizeConf
-                )
-              : syntaxHighlight(value, false)
-          }
-          {...props}
-        />
       </div>
     );
   }

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}