@kumologica/sdk 3.5.4 → 3.6.0-alpha10

package/src/app/ui/editor-client/src/js/ui/ui-settings.js

@@ -1,59 +1,64 @@
-RED.uiSettings = (function(){
-    let testConfigStore;
-    let cloudConfigStore   = window.__kumologica.settings.cloudConfigStore;
-    let networkConfigStore = window.__kumologica.settings.networkConfigStore
-    let shell      = window.__kumologica.electron.shell;
-    let dialog     = null;
-    let visible    = false;
-    let cmInstanceCloud = null;
-    let cmInstanceEnvvars = null;
-    let totalHeightAvailable;
-
-    let screen;
-
-    function getScreen() {
-      if (!screen){
-        // we get a reference here and not like the rest of the stores, as the testConfig relies on the project details set which are injected in the header.
-        testConfigStore = window.__kumologica.settings.testConfig;
-        // initialize the screen now
-        screen = [
-          { "selected": true,
-            "id": "ui-settings-creds",
-            "label": "Cloud Profiles",
-            "body": {
-              "title": "Cloud Profiles",
-              "subtitle": `
+RED.uiSettings = (function () {
+  let testConfigStore;
+  let cloudConfigStore = window.__kumologica.settings.cloudConfigStore;
+  let networkConfigStore = window.__kumologica.settings.networkConfigStore;
+  let shell = window.__kumologica.electron.shell;
+  let dialog = null;
+  let visible = false;
+  let cmInstanceCloud = null;
+  let cmInstanceEnvvars = null;
+  let totalHeightAvailable;
+
+  let screen;
+
+  function getScreen() {
+    if (!screen) {
+      // we get a reference here and not like the rest of the stores, as the testConfig relies on the project details set which are injected in the header.
+      testConfigStore = window.__kumologica.settings.testConfig;
+      // initialize the screen now
+      screen = [
+        {
+          selected: true,
+          id: "ui-settings-creds",
+          label: "Cloud Profiles",
+          body: {
+            title: "Cloud Profiles",
+            subtitle: `
                 Configure all of your cloud profile settings that can be used by this designer to support testing or deploying.
                 <a href="https://docs.kumologica.com/docs/guide/Intro.html" target="_blank">Learn more</a>`,
-              "html": `
+            html: `
                 <div>
                   <div id="fileLocationPath">
                       <span id="settingFilePath">${cloudConfigStore.getCloudConfigFileFullPath()}</span>
                   </div>
                   <textarea id="cloud-settings-editor" rows="20">
                   </textarea>
-                </div>`
-            },
-            "onInit": () => {
-              // load content of config credentials file: ~/.kumologica/credentials
-              let cloudConfigContent = cloudConfigStore.readCloudConfigFile();
-              cmInstanceCloud = initEditor('cloud-settings-editor', cloudConfigContent);
-            },
-            "onSelect": () => {
-              cmInstanceCloud.refresh();
-            },
-            "onSave": () => {
-              cloudConfigStore.writeCloudConfigFile(cmInstanceCloud.getValue());
-              RED.events.emit('settings:cloud-config-changed');
-            }
+                </div>`,
+          },
+          onInit: () => {
+            // load content of config credentials file: ~/.kumologica/credentials
+            let cloudConfigContent = cloudConfigStore.readCloudConfigFile();
+            cmInstanceCloud = initEditor(
+              "cloud-settings-editor",
+              cloudConfigContent
+            );
+          },
+          onSelect: () => {
+            cmInstanceCloud.refresh();
           },
-          {
-            "id": "ui-settings-network",
-            "label": "Network",
-            "body": {
-              "title": "Proxy Server Settings",
-              "subtitle": "Configure the proxy settings used by the designer. Flows will use the proxy specified on the nodes instead.",
-              "html": `
+          onSave: () => {
+            cloudConfigStore.writeCloudConfigFile(cmInstanceCloud.getValue());
+            RED.events.emit("settings:cloud-config-changed");
+          },
+        },
+        {
+          id: "ui-settings-network",
+          label: "Network",
+          body: {
+            title: "Proxy Server Settings",
+            subtitle:
+              "Configure the proxy settings used by the designer. Flows will use the proxy specified on the nodes instead.",
+            html: `
                 <div>
                   <form id="proxy-options-div">
                     <input type="radio" id="proxy-option-default" name="proxy-option" style="margin:0"> Use default operating system settings<br>
@@ -64,45 +69,45 @@ RED.uiSettings = (function(){
                     <div class="option"><label>Port</label><input type="text" id="proxy-port" /></div>
                   </div>
                   <div id="proxy-auth">
-                    <div id="proxyCredsRequiredBox" style="display: flex">
-                      <input type="checkbox" id="proxyAuthRequired" style="margin-right: 3px">
+                    <div id="proxyCredsRequiredBox" style="display: flex; align-items: flex-start">
+                      <input type="checkbox" id="proxyAuthRequired" style="margin-top: 3px; margin-right: 3px">
                         <label>Proxy server requires username and password</label>
                     </div>
-                    <div id="proxyCredsBox" style="padding-left: 40px">
+                    <div id="proxyCredsBox" style="padding-top: 10px;padding-left: 40px">
                       <div class="option"><label>Username</label><input type="text" id="proxy-auth-username" style="width:50%" /></div>
                       <div class="option"><label>Password</label><input type="password" id="proxy-auth-password" style="width:50%"/></div>
                     </div>
                   </div>
                 </div>
-              `
-            },
-            "onInit": () => {
-              // load content of config credentials file: ~/.kumologica/settings
-              let proxySettings = networkConfigStore.getProxyDetails();
-              initProxySettings(proxySettings);
-              handleProxySettingsEvent();
-            },
-            "onSelect": () => {},
-            "onSave": () => {
-              // Save proxy details
-              networkConfigStore.saveProxyDetails(
-                $('#proxy-option-custom').is(':checked'), // custom clicked?
-                $('#proxy-server').val(), // host
-                $('#proxy-port').val(), // port
-                $('#proxyAuthRequired').is(':checked'), // authentication clicked?
-                $('#proxy-auth-username').val(), // username
-                $('#proxy-auth-password').val() // password
-              );
-            }
+              `,
+          },
+          onInit: () => {
+            // load content of config credentials file: ~/.kumologica/settings
+            let proxySettings = networkConfigStore.getProxyDetails();
+            initProxySettings(proxySettings);
+            handleProxySettingsEvent();
           },
-          {
-            "id": "ui-settings-envvars",
-            "label": "Environments",
-            "body": {
-              "title": "Environments",
-              "subtitle": `
+          onSelect: () => {},
+          onSave: () => {
+            // Save proxy details
+            networkConfigStore.saveProxyDetails(
+              $("#proxy-option-custom").is(":checked"), // custom clicked?
+              $("#proxy-server").val(), // host
+              $("#proxy-port").val(), // port
+              $("#proxyAuthRequired").is(":checked"), // authentication clicked?
+              $("#proxy-auth-username").val(), // username
+              $("#proxy-auth-password").val() // password
+            );
+          },
+        },
+        {
+          id: "ui-settings-envvars",
+          label: "Environments",
+          body: {
+            title: "Environments",
+            subtitle: `
                 Environments are groups of key value pairs (variables) that allow you to quickly set a different context for each test executions`,
-              "html": `
+            html: `
                 <div>
                   <!--
                   <div id="fileLocationPath">
@@ -110,390 +115,400 @@ RED.uiSettings = (function(){
                   </div> -->
                   <textarea id="envvar-settings-editor" rows="20">
                   </textarea>
-                </div>`
-            },
-            "onInit": () => {
-              let envvarConfigContent = testConfigStore.getEnvironmentSectionFromConfig();
-              cmInstanceEnvvars = initEditor('envvar-settings-editor', envvarConfigContent);
-            },
-            "onSelect": () => {
-              cmInstanceEnvvars.refresh();
-            },
-            "onSave": () => {
-              testConfigStore.saveEnvironmentSectionIntoConfig(cmInstanceEnvvars.getValue());
-              RED.events.emit('settings:environment-variables-changed');
-            }
-          }
-        ];
-      }
-      return screen;
+                </div>`,
+          },
+          onInit: () => {
+            let envvarConfigContent =
+              testConfigStore.getEnvironmentSectionFromConfig();
+            cmInstanceEnvvars = initEditor(
+              "envvar-settings-editor",
+              envvarConfigContent
+            );
+          },
+          onSelect: () => {
+            cmInstanceEnvvars.refresh();
+          },
+          onSave: () => {
+            testConfigStore.saveEnvironmentSectionIntoConfig(
+              cmInstanceEnvvars.getValue()
+            );
+            RED.events.emit("settings:environment-variables-changed");
+          },
+        },
+      ];
     }
-
-    function createDialog() {
-       
-
-        // remove if previous dialog exist
-        $('#ui-settings').remove();
-
-        dialog = $('<div>', {
-            id: 'ui-settings',
-            class: 'ui-settings',
-        }).appendTo('#main-container');
-
-        // Programmatically calculate the height of the ui-settings window
-        totalHeightAvailable = $('#main-container').height();
-        let offset = 74;
-        $('#ui-settings').height(totalHeightAvailable - offset);
-
-        let wrapperDiv = $('<div>', {
-            class: 'ui-settings-body'
-        }).appendTo(dialog);
-
-        // Left pannel of settings
-        let optionsDiv = $(`
-          <div id="ui-settings-options">
-          </div>
-        `).appendTo(wrapperDiv);
-
-        // Left pannel of settings
-        getScreen().forEach(option => {
-          if (option.selected){
-            $(`
+    return screen;
+  }
+
+  function createDialog() {
+    // remove if previous dialog exist
+    $("#ui-settings").remove();
+
+    dialog = $("<div>", {
+      id: "ui-settings",
+      class: "ui-settings",
+    }).appendTo("#main-container");
+
+    let dialogContainer = $(
+      `<div id="ui-settings-container" class="ui-settings-conatiner" style="display:flex; height: 100%" </div>`
+    ).appendTo(dialog);
+    // Programmatically calculate the height of the ui-settings window
+    totalHeightAvailable = $("#main-container").height();
+    let offset = 74;
+    $("#ui-settings").height(totalHeightAvailable - 200);
+
+    // Left pannel of settings
+    let optionsLeft = $(`<div id="ui-settings-left"></div>`).appendTo(
+      dialogContainer
+    );
+
+    let rightSide = $(`<div id="ui-settings-right" </div>`).appendTo(
+      dialogContainer
+    );
+
+    let rightSideSettingsBody = $("<div>", {
+      class: "ui-settings-body",
+    }).appendTo(rightSide);
+
+    $(`
+      <div class="editor-tray-toolbar">
+        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only secondary" role="button" aria-disabled="false" id="options-cancel">Cancel</button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only primary" role="button" aria-disabled="false" id="options-save">Save</button>
+      </div>
+      `).appendTo(rightSide);
+
+    // Left pannel of settings
+    getScreen().forEach((option) => {
+      if (option.selected) {
+        $(`
             <div id="${option.id}" class="ui-settings-option ui-settings-option-selected">
               <span class="settingsOptionLabel">
                   ${option.label}
               </span>
-            </div>`).appendTo(optionsDiv);
-          } else {
-            $(`
+            </div>`).appendTo(optionsLeft);
+      } else {
+        $(`
             <div id="${option.id}" class="ui-settings-option ui-settings-option">
               <span class="settingsOptionLabel">
                   ${option.label}
               </span>
-            </div>`).appendTo(optionsDiv);
-          }
-          
-        });
+            </div>`).appendTo(optionsLeft);
+      }
+    });
 
-        // Right pannel of settings
-        let optionsBodyDiv = $(`
+    // Right pannel of settings
+    let optionsBodyDiv = $(`
         <div id="ui-settings-optionsbody">
         </div>
-        `).appendTo(wrapperDiv)
+        `).appendTo(rightSideSettingsBody);
 
-        getScreen().forEach(option => {
-          $(`
+    getScreen().forEach((option) => {
+      $(`
             <div id="${option.id}-body" class="ui-settings-general-body">
-              <div>
+              <div style="display=flex; flex-direction: column; height:100%">
                 <div class="settingsTitle">${option.body.title}</div>
                 <div class="settingsSubtitle">${option.body.subtitle}</div>
                 ${option.body.html}
               </div>
             </div>
-          `).appendTo(optionsBodyDiv)
-        });
-        
-        $(`
-        <div class="editor-tray-toolbar" style="top: 16px !important">
-          <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only secondary" role="button" aria-disabled="false" id="options-cancel">Cancel</button>
-          <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only primary" role="button" aria-disabled="false" id="options-save">Save</button>
-        </div>
-        `).appendTo(optionsBodyDiv);
-
-        // Initialize the options body screen
-        getScreen().forEach(option => {
-          // Left click on option
-          $(`#${option.id}`).click ((e) => {
-            resetWindows();
-            $(`#${option.id}`).addClass('ui-settings-option-selected');
-            $(`#${option.id}-body`).show();
-            option.onSelect();
-          });
-          // Specific functionality
-          option.onInit()
-
-          // Hide screen if not default
-          if (option.hasOwnProperty("selected") && option.selected){
-            $(`#${option.id}-body`).show();
-          } else {
-            $(`#${option.id}-body`).hide();
-          }
-        });
-        // Initialize the toolbar
-        $('#options-save').click(e=> {
-          saveSettings();
-        });
-
-        $('#options-cancel').click(e => {
-          cancelSettings();
-        });
-
-    }
-
-    function saveSettings() {
-      getScreen().forEach(option => {
-        option.onSave();
-      })
-      hide();
-    }
-
-    function cancelSettings() {
-      hide();
-    }
-
-    function selectProxyCustom() {
-      setTimeout(() => {
-        $('#proxy-option-custom').prop('checked', true);
-        $('#proxy-option-default').prop('checked', false);
-      }, 50);
-
-      $('#proxy-server').prop('readonly', false);
-      $('#proxy-port').prop('readonly', false);
-    }
-
-    function selectProxyDefault(){
-      setTimeout(() => {
-        $('#proxy-option-custom').prop('checked', false);
-        $('#proxy-option-default').prop('checked', true);
-      }, 50);
-      
-      $('#proxy-server').prop('readonly', true);
-      $('#proxy-port').prop('readonly', true);
-    }
-
-    function selectProxyAuth() {
-      setTimeout(() => {
-        let isChecked = $('#proxyAuthRequired').is(':checked');
-        if (isChecked){
-          $('#proxyAuthRequired').prop('checked', false);
-          $('#proxy-auth-username').prop('readonly', true);
-          $('#proxy-auth-password').prop('readonly', true);
-        } else {
-          $('#proxyAuthRequired').prop('checked', true);
-          $('#proxy-auth-username').prop('readonly', false);
-          $('#proxy-auth-password').prop('readonly', false);
-        }
-      }, 50);
-    }
-
-    function handleProxySettingsEvent(){
-      $('#proxy-option-default').click( () => {
-       RED.events.emit('settings:select-proxy-default');
-       return false;
+          `).appendTo(optionsBodyDiv);
+    });
+
+    // Initialize the options body screen
+    getScreen().forEach((option) => {
+      // Left click on option
+      $(`#${option.id}`).click((e) => {
+        resetWindows();
+        $(`#${option.id}`).addClass("ui-settings-option-selected");
+        $(`#${option.id}-body`).show();
+        option.onSelect();
       });
+      // Specific functionality
+      option.onInit();
 
-      $('#proxy-option-custom').click( () => {
-        RED.events.emit('settings:select-proxy-custom');
-        return false;
-      });
-
-      $('#proxyAuthRequired').click( function(e){
-        RED.events.emit('settings:select-proxy-auth');
-        return false;
-      });
-    }
-
-    function initProxySettings(proxySettings){
-      // console.log('[ui-settings] initProxySettings with settings:', proxySettings);
-      // Proxy server
-      if (proxySettings.custom){
-        $('#proxy-option-custom').prop('checked', true);
-        $('#proxy-option-default').prop('checked', false);
-        $('#proxy-server').val(proxySettings.host);
-        $('#proxy-port').val(proxySettings.port || '8080');
+      // Hide screen if not default
+      if (option.hasOwnProperty("selected") && option.selected) {
+        $(`#${option.id}-body`).show();
       } else {
-        $('#proxy-option-default').prop('checked', true);
-        $('#proxy-option-custom').prop('checked', false);
-        $('#proxy-server').prop('readonly', true);
-        $('#proxy-port').prop('readonly', true);
+        $(`#${option.id}-body`).hide();
       }
-      // Proxy auth
-      if (proxySettings.authentication){
-        $('#proxyAuthRequired').prop('checked', true);
-        $('#proxy-auth-username').val(proxySettings.username);
-        $('#proxy-auth-password').val(proxySettings.password);
+    });
+    // Initialize the toolbar
+    $("#options-save").click((e) => {
+      saveSettings();
+    });
+
+    $("#options-cancel").click((e) => {
+      cancelSettings();
+    });
+  }
+
+  function saveSettings() {
+    getScreen().forEach((option) => {
+      option.onSave();
+    });
+    hide();
+  }
+
+  function cancelSettings() {
+    hide();
+  }
+
+  function selectProxyCustom() {
+    setTimeout(() => {
+      $("#proxy-option-custom").prop("checked", true);
+      $("#proxy-option-default").prop("checked", false);
+    }, 50);
+
+    $("#proxy-server").prop("readonly", false);
+    $("#proxy-port").prop("readonly", false);
+  }
+
+  function selectProxyDefault() {
+    setTimeout(() => {
+      $("#proxy-option-custom").prop("checked", false);
+      $("#proxy-option-default").prop("checked", true);
+    }, 50);
+
+    $("#proxy-server").prop("readonly", true);
+    $("#proxy-port").prop("readonly", true);
+  }
+
+  function selectProxyAuth() {
+    setTimeout(() => {
+      let isChecked = $("#proxyAuthRequired").is(":checked");
+      if (isChecked) {
+        $("#proxyAuthRequired").prop("checked", false);
+        $("#proxy-auth-username").prop("readonly", true);
+        $("#proxy-auth-password").prop("readonly", true);
       } else {
-        $('#proxyAuthRequired').prop('checked', false);
-        $('#proxy-auth-username').prop('readonly', true);
-        $('#proxy-auth-password').prop('readonly', true);
+        $("#proxyAuthRequired").prop("checked", true);
+        $("#proxy-auth-username").prop("readonly", false);
+        $("#proxy-auth-password").prop("readonly", false);
       }
-
-      RED.events.on('settings:select-proxy-custom', selectProxyCustom);
-      RED.events.on('settings:select-proxy-default', selectProxyDefault);
-      RED.events.on('settings:select-proxy-auth', selectProxyAuth);
+    }, 50);
+  }
+
+  function handleProxySettingsEvent() {
+    $("#proxy-option-default").click(() => {
+      RED.events.emit("settings:select-proxy-default");
+      return false;
+    });
+
+    $("#proxy-option-custom").click(() => {
+      RED.events.emit("settings:select-proxy-custom");
+      return false;
+    });
+
+    $("#proxyAuthRequired").click(function (e) {
+      RED.events.emit("settings:select-proxy-auth");
+      return false;
+    });
+  }
+
+  function initProxySettings(proxySettings) {
+    // console.log('[ui-settings] initProxySettings with settings:', proxySettings);
+    // Proxy server
+    if (proxySettings.custom) {
+      $("#proxy-option-custom").prop("checked", true);
+      $("#proxy-option-default").prop("checked", false);
+      $("#proxy-server").val(proxySettings.host);
+      $("#proxy-port").val(proxySettings.port || "8080");
+    } else {
+      $("#proxy-option-default").prop("checked", true);
+      $("#proxy-option-custom").prop("checked", false);
+      $("#proxy-server").prop("readonly", true);
+      $("#proxy-port").prop("readonly", true);
     }
-
-    function initEditor(anchorId, contentBody) {
-        CodeMirror.defineMode("properties", function() {
-            return {
-              token: function(stream, state) {
-                var sol = stream.sol() || state.afterSection;
-                var eol = stream.eol();
-          
-                state.afterSection = false;
-          
-                if (sol) {
-                  if (state.nextMultiline) {
-                    state.inMultiline = true;
-                    state.nextMultiline = false;
-                  } else {
-                    state.position = "def";
-                  }
-                }
-          
-                if (eol && ! state.nextMultiline) {
-                  state.inMultiline = false;
-                  state.position = "def";
-                }
-          
-                if (sol) {
-                  while(stream.eatSpace()) {}
-                }
-          
-                var ch = stream.next();
-          
-                if (sol && (ch === "#" || ch === "!" || ch === ";")) {
-                  state.position = "comment";
-                  stream.skipToEnd();
-                  return "comment";
-                } else if (sol && ch === "[") {
-                  state.afterSection = true;
-                  stream.skipTo("]"); stream.eat("]");
-                  return "header";
-                } else if (ch === "=") {
-                  state.position = "quote";
-                  return null;
-                } else if (ch === "\\" && state.position === "quote") {
-                  if (stream.eol()) {  // end of line?
-                    // Multiline value
-                    state.nextMultiline = true;
-                  }
-                }
-          
-                return state.position;
-              },
-          
-              startState: function() {
-                return {
-                  position : "def",       // Current position, "def", "quote" or "comment"
-                  nextMultiline : false,  // Is the next line multiline value
-                  inMultiline : false,    // Is the current line a multiline value
-                  afterSection : false    // Did we just open a section
-                };
-              }
-          
-            };
-          });
-        let cmInstance = CodeMirror.fromTextArea(document.getElementById(anchorId), { 
-          theme: "monokai",
-          lineWrapping: true,
-          mode: 'properties'
-        });
-
-        // reset the listenere
-        cmInstance.off("change");
-
-        cmInstance.getDoc().setValue(contentBody);
-        cmInstance.focus();
-        //console.log(`lineCount: ${cmInstance.lineCount()}`)
-        // Set the cursor at the end of existing content
-        cmInstance.setCursor(cmInstance.lineCount(), 0);
-        let codeMirrorHeight = totalHeightAvailable - 400;
-
-        cmInstance.setSize(null, codeMirrorHeight);
-        // cmInstance.refresh();
-        setTimeout(function() {
-            cmInstance.refresh();
-           }, 100);
-
-        cmInstance.on("change", function(cm, change){
-          // enable the save button
-          $('#options-save').removeClass('disabled');
-        })
-
-        return cmInstance;
+    // Proxy auth
+    if (proxySettings.authentication) {
+      $("#proxyAuthRequired").prop("checked", true);
+      $("#proxy-auth-username").val(proxySettings.username);
+      $("#proxy-auth-password").val(proxySettings.password);
+    } else {
+      $("#proxyAuthRequired").prop("checked", false);
+      $("#proxy-auth-username").prop("readonly", true);
+      $("#proxy-auth-password").prop("readonly", true);
     }
 
-    function show(){
-        
-        // Disable the search dialog if opened
-        RED.actions.invoke('core:search:close');
-        RED.actions.invoke('core:project-info:close');
-        if (!visible){
-            RED.keyboard.add('*', 'escape', () => hide() );
-
-            createDialog();
-            dialog.slideDown(300);
-            visible = true;
-
-            // UI goodies
-            $('#ui-settings').click( e=> {
-              e.preventDefault();
-              if ($(e.target).is('a')){
-                shell.openExternal(e.target.href);
-              }
-              e.stopImmediatePropagation();
-            });
-      
-            $('#main-container').click((e)=> {
-                hide();
-            });
-        }
+    RED.events.on("settings:select-proxy-custom", selectProxyCustom);
+    RED.events.on("settings:select-proxy-default", selectProxyDefault);
+    RED.events.on("settings:select-proxy-auth", selectProxyAuth);
+  }
+
+  function initEditor(anchorId, contentBody) {
+    CodeMirror.defineMode("properties", function () {
+      return {
+        token: function (stream, state) {
+          var sol = stream.sol() || state.afterSection;
+          var eol = stream.eol();
+
+          state.afterSection = false;
+
+          if (sol) {
+            if (state.nextMultiline) {
+              state.inMultiline = true;
+              state.nextMultiline = false;
+            } else {
+              state.position = "def";
+            }
+          }
 
-    }
+          if (eol && !state.nextMultiline) {
+            state.inMultiline = false;
+            state.position = "def";
+          }
 
-    function showEnvironments() {
-      show();
-      $('#ui-settings-envvars').click();
-    }
+          if (sol) {
+            while (stream.eatSpace()) {}
+          }
 
-    function hide(){
-        if (visible){
-            $('#main-container').off('click');
-            RED.keyboard.remove('escape');
-            visible = false;
-            if (dialog !== null) {
-                dialog.slideUp(200, function () {
-                  // searchInput.searchBox('value', '');
-                });
-              }
+          var ch = stream.next();
+
+          if (sol && (ch === "#" || ch === "!" || ch === ";")) {
+            state.position = "comment";
+            stream.skipToEnd();
+            return "comment";
+          } else if (sol && ch === "[") {
+            state.afterSection = true;
+            stream.skipTo("]");
+            stream.eat("]");
+            return "header";
+          } else if (ch === "=") {
+            state.position = "quote";
+            return null;
+          } else if (ch === "\\" && state.position === "quote") {
+            if (stream.eol()) {
+              // end of line?
+              // Multiline value
+              state.nextMultiline = true;
+            }
+          }
+
+          return state.position;
+        },
+
+        startState: function () {
+          return {
+            position: "def", // Current position, "def", "quote" or "comment"
+            nextMultiline: false, // Is the next line multiline value
+            inMultiline: false, // Is the current line a multiline value
+            afterSection: false, // Did we just open a section
+          };
+        },
+      };
+    });
+    let cmInstance = CodeMirror.fromTextArea(
+      document.getElementById(anchorId),
+      {
+        theme: "monokai",
+        lineWrapping: true,
+        mode: "properties",
+      }
+    );
+
+    // reset the listenere
+    cmInstance.off("change");
+
+    cmInstance.getDoc().setValue(contentBody);
+    cmInstance.focus();
+    //console.log(`lineCount: ${cmInstance.lineCount()}`)
+    // Set the cursor at the end of existing content
+    cmInstance.setCursor(cmInstance.lineCount(), 0);
+    let codeMirrorHeight = totalHeightAvailable - 440;
+
+    cmInstance.setSize(null, codeMirrorHeight);
+    // cmInstance.refresh();
+    setTimeout(function () {
+      cmInstance.refresh();
+    }, 100);
+
+    cmInstance.on("change", function (cm, change) {
+      // enable the save button
+      $("#options-save").removeClass("disabled");
+    });
+
+    return cmInstance;
+  }
+
+  function show() {
+    // Disable the search dialog if opened
+    RED.actions.invoke("core:search:close");
+    RED.actions.invoke("core:project-info:close");
+    if (!visible) {
+      RED.keyboard.add("*", "escape", () => hide());
+
+      createDialog();
+      dialog.slideDown(300);
+      visible = true;
+
+      // UI goodies
+      $("#ui-settings").click((e) => {
+        e.preventDefault();
+        if ($(e.target).is("a")) {
+          shell.openExternal(e.target.href);
         }
-    }
+        e.stopImmediatePropagation();
+      });
 
-    function resetWindows() {
-      getScreen().forEach(option => {
-        $(`#${option.id}-body`).hide();
-        $(`#${option.id}`).removeClass('ui-settings-option-selected');
+      $("#main-container").click((e) => {
+        hide();
       });
     }
-
-    function getProxyHeader() {
-      // Read the proxy details
-      let proxyHeader = undefined;
-      let proxySettings = networkConfigStore.getProxyDetails();
-      let { custom, host, port, authentication, username, password } = proxySettings;
-      if (custom){
-        proxyHeader = `${host}:${port}`;
-        if (proxySettings.authentication){
-          proxyHeader = `${username}:${password}@${proxyHeader}`
-        }
-        proxyHeader = `http://${proxyHeader}`;
-      } 
-
-      return proxyHeader;
+  }
+
+  function showEnvironments() {
+    show();
+    $("#ui-settings-envvars").click();
+  }
+
+  function hide() {
+    if (visible) {
+      $("#main-container").off("click");
+      RED.keyboard.remove("escape");
+      visible = false;
+      if (dialog !== null) {
+        dialog.slideUp(200, function () {
+          // searchInput.searchBox('value', '');
+        });
+      }
     }
-
-    function init() {
-      RED.actions.add('core:settings:open', show);
-      RED.actions.add('core:settings:close', hide);
-      RED.actions.add('core:settings:select-environments', showEnvironments)
+  }
+
+  function resetWindows() {
+    getScreen().forEach((option) => {
+      $(`#${option.id}-body`).hide();
+      $(`#${option.id}`).removeClass("ui-settings-option-selected");
+    });
+  }
+
+  function getProxyHeader() {
+    // Read the proxy details
+    let proxyHeader = undefined;
+    let proxySettings = networkConfigStore.getProxyDetails();
+    let { custom, host, port, authentication, username, password } =
+      proxySettings;
+    if (custom) {
+      proxyHeader = `${host}:${port}`;
+      if (proxySettings.authentication) {
+        proxyHeader = `${username}:${password}@${proxyHeader}`;
+      }
+      proxyHeader = `http://${proxyHeader}`;
     }
 
-
-    return {
-        init: init,
-        show: show,
-        hide: hide,
-        getProxyHeader: getProxyHeader,
-    }
-})();
+    return proxyHeader;
+  }
+
+  function init() {
+    RED.actions.add("core:settings:open", show);
+    RED.actions.add("core:settings:close", hide);
+    RED.actions.add("core:settings:select-environments", showEnvironments);
+  }
+
+  return {
+    init: init,
+    show: show,
+    hide: hide,
+    getProxyHeader: getProxyHeader,
+  };
+})();