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

Stable multiline input
2026-09-22 13:39:35 +00:00 · 2023-09-20 16:26:05 -04:00
parent b0991c33b0 2c7aac37a2
commit 1d66dbbce3
4 changed files with 41 additions and 69 deletions
--- 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",
--- 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",
--- 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 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>
    );
  }
--- 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}