Javascript connection form will apply CodeMirror to all textarea's dynamically

airflow/www/static/js/connection_form.js

@@ -362,20 +362,26 @@ $(document).ready(() => {
   // Initialize the form by setting a connection type.
   changeConnType(connTypeElem.value);
 
-  // Change conn.extra TextArea widget to CodeMirror
-  const textArea = document.getElementById("extra");
-  editor = CodeMirror.fromTextArea(textArea, {
-    mode: { name: "javascript", json: true },
-    gutters: ["CodeMirror-lint-markers"],
-    lineWrapping: true,
-    lint: true,
-  });
+  // Get all textarea elements
+  const textAreas = document.getElementsByTagName("textarea");
+
+  Array.from(textAreas).forEach((textArea) => {
+    if (textArea.id !== "description" && !$(textArea).is(":hidden")) {
+      // Change TextArea widget to CodeMirror
+      editor = CodeMirror.fromTextArea(textArea, {
+        mode: { name: "javascript", json: true },
+        gutters: ["CodeMirror-lint-markers"],
+        lineWrapping: true,
+        lint: true,
+      });
 
-  // beautify JSON but only if it is not equal to default value of empty string
-  const jsonData = editor.getValue();
-  if (jsonData !== "") {
-    const data = JSON.parse(jsonData);
-    const formattedData = JSON.stringify(data, null, 2);
-    editor.setValue(formattedData);
-  }
+      // beautify JSON but only if it is not equal to default value of empty string
+      const jsonData = editor.getValue();
+      if (jsonData !== "") {
+        const data = JSON.parse(jsonData);
+        const formattedData = JSON.stringify(data, null, 2);
+        editor.setValue(formattedData);
+      }
+    }
+  });
 });