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

Stable multiline input

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>(
-  ({ value, isVisible, onChange, onBlur, isDisabled, ...props }, ref) => {
+const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
+
+export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
+  ({ value, isVisible, onBlur, isDisabled, onFocus, ...props }, ref) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
 
     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"
-          }`}
-          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());
-          }}
-          onFocus={() => setIsSecretFocused.on()}
-          disabled={isDisabled}
-          spellCheck={false}
-          onBlur={() => {
-            if (onBlur) onBlur();
-            setIsSecretFocused.off();
-          }}
-          html={
-            isVisible || isSecretFocused
-              ? sanitizeHtml(
-                  value?.replaceAll("<", "&lt;").replaceAll(">", "&gt;") || "",
-                  sanitizeConf
-                )
-              : syntaxHighlight(value, false)
-          }
-          {...props}
-        />
+      <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(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}`}
+            onFocus={() => setIsSecretFocused.on()}
+            disabled={isDisabled}
+            spellCheck={false}
+            onBlur={(evt) => {
+              onBlur?.(evt);
+              setIsSecretFocused.off();
+            }}
+            value={value || ""}
+            {...props}
+          />
+        </div>
       </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}