diff --git a/src/main/resources/static/plugins/apitestmanager/app.bundle.js b/src/main/resources/static/plugins/apitestmanager/app.bundle.js
index fb45abe..d7be61a 100644
--- a/src/main/resources/static/plugins/apitestmanager/app.bundle.js
+++ b/src/main/resources/static/plugins/apitestmanager/app.bundle.js
@@ -587,7 +587,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n// const ZERO_WIDTH_SPACE = '&#8203;';\nvar ZERO_WIDTH_SPACE = '&#x200B;';\nvar EditableInputModel = /*#__PURE__*/function () {\n  function EditableInputModel() {\n    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';\n    _classCallCheck(this, EditableInputModel);\n    this.value = value;\n  }\n  _createClass(EditableInputModel, [{\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n    }\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n  return EditableInputModel;\n}();\nvar EditableInputView = /*#__PURE__*/function () {\n  function EditableInputView(model, controller, options) {\n    _classCallCheck(this, EditableInputView);\n    this.model = model;\n    this.controller = controller;\n    this.options = options;\n  }\n  _createClass(EditableInputView, [{\n    key: \"render\",\n    value: function render(element) {\n      this.element = element;\n      this.element.innerHTML = this.generateInputHtml();\n      this.editableDiv = this.element.querySelector('.editableInputContent');\n      this.attachEventListeners();\n    }\n  }, {\n    key: \"generateInputHtml\",\n    value: function generateInputHtml() {\n      var contentHtml = this.model.getValue() ? this.renderContent(this.parseContent(this.model.getValue())) : ZERO_WIDTH_SPACE;\n      var styleString = '';\n      if (this.options.style && _typeof(this.options.style) === 'object') {\n        var styles = Object.entries(this.options.style);\n        styleString = styles.map(function (_ref) {\n          var _ref2 = _slicedToArray(_ref, 2),\n            prop = _ref2[0],\n            value = _ref2[1];\n          return \"\".concat(prop, \": \").concat(value, \";\");\n        }).join(' ');\n      }\n      var style = styleString ? \"style=\\\"\".concat(styleString, \"\\\"\") : '';\n      return \"\\n            <div contenteditable=\\\"true\\\" \".concat(style, \" class=\\\"editableInputContent form-control\\\" data-value=\\\"\").concat(this.model.getValue(), \"\\\">\\n                \").concat(contentHtml, \"\\n            </div>\\n        \");\n    }\n  }, {\n    key: \"attachEventListeners\",\n    value: function attachEventListeners() {\n      var _this = this;\n      this.editableDiv.addEventListener('input', function (event) {\n        _this.controller.handleInput(_this.editableDiv);\n        if (_this.controller.additionalCallback) {\n          _this.controller.additionalCallback(_this.model.getValue());\n        }\n      });\n      this.editableDiv.addEventListener('paste', function (event) {\n        event.preventDefault();\n        if (navigator.clipboard && navigator.clipboard.readText) {\n          navigator.clipboard.readText().then(function (text) {\n            _this.insertTextAtCursor(text);\n          })[\"catch\"](function (err) {\n            console.error('Failed to read clipboard contents: ', err);\n            // Fallback to using clipboardData from the paste event\n            var text = (event.clipboardData || window.clipboardData).getData('text');\n            _this.insertTextAtCursor(text);\n          });\n        } else {\n          var text = (event.clipboardData || window.clipboardData).getData('text');\n          _this.insertTextAtCursor(text);\n        }\n      });\n    }\n  }, {\n    key: \"insertTextAtCursor\",\n    value: function insertTextAtCursor(text) {\n      var selection = window.getSelection();\n      if (!selection.rangeCount) return;\n      var range = selection.getRangeAt(0);\n      range.deleteContents();\n      var textNode = document.createTextNode(text);\n      range.insertNode(textNode);\n      range.setStartAfter(textNode);\n      range.setEndAfter(textNode);\n      selection.removeAllRanges();\n      selection.addRange(range);\n      this.controller.handleInput(this.editableDiv);\n    }\n  }, {\n    key: \"updateUI\",\n    value: function updateUI() {\n      var content = this.model.getValue();\n      if (content) {\n        this.editableDiv.innerHTML = this.renderContent(this.parseContent(content));\n      } else {\n        this.editableDiv.innerHTML = ZERO_WIDTH_SPACE; // Insert a zero-width space\n      }\n      this.editableDiv.setAttribute('data-value', content);\n    }\n  }, {\n    key: \"renderContent\",\n    value: function renderContent(contentArray) {\n      var content = '';\n      contentArray.forEach(function (item) {\n        if (item.startsWith('{{') && item.endsWith('}}')) {\n          content += \"<span class=\\\"variable\\\">\".concat(item, \"</span>\");\n        } else {\n          content += \"<span class=\\\"text\\\">\".concat(item, \"</span>\");\n        }\n      });\n      return content;\n    }\n  }, {\n    key: \"parseContent\",\n    value: function parseContent(inputString) {\n      var returnStringArray = [];\n      var regex = /{{.*?}}/g;\n      var lastIndex = 0;\n      inputString.replace(regex, function (match, index) {\n        // Add the string before the match\n        if (index > lastIndex) {\n          returnStringArray.push(inputString.slice(lastIndex, index));\n        }\n\n        // Add the matched string including the delimiters\n        returnStringArray.push(match);\n\n        // Update lastIndex for the next iteration\n        lastIndex = index + match.length;\n      });\n\n      // Add any remaining string after the last match\n      if (lastIndex < inputString.length) {\n        returnStringArray.push(inputString.slice(lastIndex));\n      }\n      return returnStringArray;\n    }\n  }]);\n  return EditableInputView;\n}();\nvar EditableInputController = /*#__PURE__*/function () {\n  function EditableInputController(model, options) {\n    _classCallCheck(this, EditableInputController);\n    this.model = model;\n    this.view = new EditableInputView(this.model, this, options);\n  }\n  _createClass(EditableInputController, [{\n    key: \"init\",\n    value: function init(element, callback) {\n      this.view.render(element);\n      this.additionalCallback = callback;\n    }\n  }, {\n    key: \"getCurrentCursor\",\n    value: function getCurrentCursor(element) {\n      var selection = window.getSelection();\n      if (selection.rangeCount === 0) return null;\n      var range = selection.getRangeAt(0);\n      var preCaretRange = range.cloneRange();\n      preCaretRange.selectNodeContents(element);\n      preCaretRange.setEnd(range.endContainer, range.endOffset);\n      var content = preCaretRange.toString().trim();\n      if (content === \"\\u200B\") {\n        return 0; // Return 0 if the content is only the zero-width space character\n      }\n      return content.replace(\"\\u200B\", '').length;\n    }\n  }, {\n    key: \"handleInput\",\n    value: function handleInput(editableDiv) {\n      // Check and remove zero-width space if it's the only content\n      if (editableDiv.innerHTML === '&#8203;') {\n        editableDiv.innerHTML = '';\n      }\n      var cursor = this.getCurrentCursor(editableDiv);\n      var mergedString = Array.from(editableDiv.childNodes).filter(function (node) {\n        // Keep only SPAN elements and text nodes\n        return node.nodeName.toUpperCase() === 'SPAN' || node.nodeType === 3;\n      }).map(function (node) {\n        return node.nodeType === 3 ? node.data.trim() : node.innerText.trim();\n      }).join('');\n      var result = mergedString.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n      var content = this.parseContent(result);\n      this.model.setValue(content.join(''));\n      // Optionally, update the view if needed\n      this.view.updateUI();\n      this.restoreCursor(editableDiv, cursor);\n    }\n  }, {\n    key: \"restoreCursor\",\n    value: function restoreCursor(element, position) {\n      var selection = window.getSelection();\n      var range = document.createRange();\n      range.setStart(element, 0);\n      range.collapse(true);\n      var nodeStack = [element];\n      var node,\n        foundStart = false,\n        stop = false;\n      var charIndex = 0;\n      while (!stop && (node = nodeStack.pop())) {\n        if (node.nodeType === 3) {\n          var nextCharIndex = charIndex + node.length;\n          if (!foundStart && position >= charIndex && position <= nextCharIndex) {\n            range.setStart(node, position - charIndex);\n            foundStart = true;\n          }\n          if (foundStart && position >= charIndex && position <= nextCharIndex) {\n            range.setEnd(node, position - charIndex);\n            stop = true;\n          }\n          charIndex = nextCharIndex;\n        } else {\n          var i = node.childNodes.length;\n          while (i--) {\n            nodeStack.push(node.childNodes[i]);\n          }\n        }\n      }\n      selection.removeAllRanges();\n      selection.addRange(range);\n    }\n  }, {\n    key: \"parseContent\",\n    value: function parseContent(inputString) {\n      var returnStringArray = [];\n      var regex = /{{.*?}}/g;\n      var lastIndex = 0;\n      inputString.replace(regex, function (match, index) {\n        // Add the string before the match\n        if (index > lastIndex) {\n          returnStringArray.push(inputString.slice(lastIndex, index));\n        }\n\n        // Add the matched string including the delimiters\n        returnStringArray.push(match);\n\n        // Update lastIndex for the next iteration\n        lastIndex = index + match.length;\n      });\n\n      // Add any remaining string after the last match\n      if (lastIndex < inputString.length) {\n        returnStringArray.push(inputString.slice(lastIndex));\n      }\n      return returnStringArray;\n    }\n  }, {\n    key: \"updateUI\",\n    value: function updateUI() {\n      this.view.updateUI();\n    }\n  }]);\n  return EditableInputController;\n}();\nvar EditableInput = /*#__PURE__*/function () {\n  function EditableInput() {\n    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _classCallCheck(this, EditableInput);\n    // Initialize the model with the value\n    this.model = new EditableInputModel(options.value || '');\n    this.controller = new EditableInputController(this.model, options);\n\n    // Additional properties as required\n    this.name = options.name || '';\n    this.id = options.id || '';\n    this[\"class\"] = options[\"class\"] || 'form-control';\n    this.placeholder = options.placeholder || '';\n  }\n  _createClass(EditableInput, [{\n    key: \"init\",\n    value: function init(element, callback) {\n      // Initialize the controller with the DOM element\n      this.controller.init(element, callback);\n    }\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      // Delegate to the model\n      return this.model.getValue();\n    }\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      // Delegate to the model and update the view\n      this.model.setValue(newValue);\n      this.controller.updateUI();\n    }\n\n    // Any additional methods required for interaction with this component\n  }]);\n  return EditableInput;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EditableInput);\n\n//# sourceURL=webpack://APITestManager/./src/components/EditableInput.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n// const ZERO_WIDTH_SPACE = '&#8203;';\nvar ZERO_WIDTH_SPACE = '&#x200B;';\nvar EditableInputModel = /*#__PURE__*/function () {\n  function EditableInputModel() {\n    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';\n    _classCallCheck(this, EditableInputModel);\n    this.value = value;\n  }\n  _createClass(EditableInputModel, [{\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n    }\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n  return EditableInputModel;\n}();\nvar EditableInputView = /*#__PURE__*/function () {\n  function EditableInputView(model, controller, options) {\n    _classCallCheck(this, EditableInputView);\n    this.model = model;\n    this.controller = controller;\n    this.options = options;\n  }\n  _createClass(EditableInputView, [{\n    key: \"render\",\n    value: function render(element) {\n      this.element = element;\n      this.element.innerHTML = this.generateInputHtml();\n      this.editableDiv = this.element.querySelector('.editableInputContent');\n      this.attachEventListeners();\n    }\n  }, {\n    key: \"generateInputHtml\",\n    value: function generateInputHtml() {\n      var contentHtml = this.model.getValue() ? this.renderContent(this.parseContent(this.model.getValue())) : ZERO_WIDTH_SPACE;\n      var styleString = '';\n      if (this.options.style && _typeof(this.options.style) === 'object') {\n        var styles = Object.entries(this.options.style);\n        styleString = styles.map(function (_ref) {\n          var _ref2 = _slicedToArray(_ref, 2),\n            prop = _ref2[0],\n            value = _ref2[1];\n          return \"\".concat(prop, \": \").concat(value, \";\");\n        }).join(' ');\n      }\n      var style = styleString ? \"style=\\\"\".concat(styleString, \"\\\"\") : '';\n      return \"\\n            <div contenteditable=\\\"true\\\" \".concat(style, \" class=\\\"editableInputContent form-control\\\" data-value=\\\"\").concat(this.model.getValue(), \"\\\">\\n                \").concat(contentHtml, \"\\n            </div>\\n        \");\n    }\n  }, {\n    key: \"attachEventListeners\",\n    value: function attachEventListeners() {\n      var _this = this;\n      this.editableDiv.addEventListener('input', function (event) {\n        _this.controller.handleInput(_this.editableDiv);\n        if (_this.controller.additionalCallback) {\n          _this.controller.additionalCallback(_this.model.getValue());\n        }\n      });\n      // this.editableDiv.addEventListener('paste', (event) => {\n      //     event.preventDefault();\n      //     if (navigator.clipboard && navigator.clipboard.readText) {\n      //         navigator.clipboard.readText().then(text => {\n      //             this.insertTextAtCursor(text);\n      //         }).catch(err => {\n      //             console.error('Failed to read clipboard contents: ', err);\n      //             // Fallback to using clipboardData from the paste event\n      //             const text = (event.clipboardData || window.clipboardData).getData('text');\n      //             this.insertTextAtCursor(text);\n      //         });\n      //     } else {\n      //         const text = (event.clipboardData || window.clipboardData).getData('text');\n      //         this.insertTextAtCursor(text);\n      //     }\n      // });\n      this.editableDiv.addEventListener('paste', function (event) {\n        event.preventDefault();\n        var text = (event.clipboardData || window.clipboardData).getData('text/plain'); // Using 'text/plain' for compatibility\n\n        if (text) {\n          console.log('Pasted text:', text); // Debug: Log pasted text\n          _this.insertTextAtCursor(text);\n          if (_this.controller.additionalCallback) {\n            _this.controller.additionalCallback(_this.model.getValue());\n          }\n        } else if (navigator.clipboard && navigator.clipboard.readText) {\n          navigator.clipboard.readText().then(function (text) {\n            console.log('Pasted text from clipboard API:', text); // Debug: Log pasted text\n            _this.insertTextAtCursor(text);\n            if (_this.controller.additionalCallback) {\n              _this.controller.additionalCallback(_this.model.getValue());\n            }\n          })[\"catch\"](function (err) {\n            console.error('Failed to read clipboard contents:', err);\n          });\n        } else {\n          console.error('No text found to paste and clipboard API not available.');\n        }\n      });\n    }\n  }, {\n    key: \"insertTextAtCursor\",\n    value: function insertTextAtCursor(text) {\n      var selection = window.getSelection();\n      if (!selection.rangeCount) return;\n      var range = selection.getRangeAt(0);\n      range.deleteContents();\n      var textNode = document.createTextNode(text);\n      range.insertNode(textNode);\n      range.setStartAfter(textNode);\n      range.setEndAfter(textNode);\n      selection.removeAllRanges();\n      selection.addRange(range);\n      this.controller.handleInput(this.editableDiv);\n    }\n  }, {\n    key: \"updateUI\",\n    value: function updateUI() {\n      var content = this.model.getValue();\n      if (content) {\n        this.editableDiv.innerHTML = this.renderContent(this.parseContent(content));\n      } else {\n        this.editableDiv.innerHTML = ZERO_WIDTH_SPACE; // Insert a zero-width space\n      }\n      this.editableDiv.setAttribute('data-value', content);\n    }\n  }, {\n    key: \"renderContent\",\n    value: function renderContent(contentArray) {\n      var content = '';\n      contentArray.forEach(function (item) {\n        if (item.startsWith('{{') && item.endsWith('}}')) {\n          content += \"<span class=\\\"variable\\\">\".concat(item, \"</span>\");\n        } else {\n          content += \"<span class=\\\"text\\\">\".concat(item, \"</span>\");\n        }\n      });\n      return content;\n    }\n  }, {\n    key: \"parseContent\",\n    value: function parseContent(inputString) {\n      var returnStringArray = [];\n      var regex = /{{.*?}}/g;\n      var lastIndex = 0;\n      inputString.replace(regex, function (match, index) {\n        // Add the string before the match\n        if (index > lastIndex) {\n          returnStringArray.push(inputString.slice(lastIndex, index));\n        }\n\n        // Add the matched string including the delimiters\n        returnStringArray.push(match);\n\n        // Update lastIndex for the next iteration\n        lastIndex = index + match.length;\n      });\n\n      // Add any remaining string after the last match\n      if (lastIndex < inputString.length) {\n        returnStringArray.push(inputString.slice(lastIndex));\n      }\n      return returnStringArray;\n    }\n  }]);\n  return EditableInputView;\n}();\nvar EditableInputController = /*#__PURE__*/function () {\n  function EditableInputController(model, options) {\n    _classCallCheck(this, EditableInputController);\n    this.model = model;\n    this.view = new EditableInputView(this.model, this, options);\n  }\n  _createClass(EditableInputController, [{\n    key: \"init\",\n    value: function init(element, callback) {\n      this.view.render(element);\n      this.additionalCallback = callback;\n    }\n  }, {\n    key: \"getCurrentCursor\",\n    value: function getCurrentCursor(element) {\n      var selection = window.getSelection();\n      if (selection.rangeCount === 0) return null;\n      var range = selection.getRangeAt(0);\n      var preCaretRange = range.cloneRange();\n      preCaretRange.selectNodeContents(element);\n      preCaretRange.setEnd(range.endContainer, range.endOffset);\n      var content = preCaretRange.toString().trim();\n      if (content === \"\\u200B\") {\n        return 0; // Return 0 if the content is only the zero-width space character\n      }\n      return content.replace(\"\\u200B\", '').length;\n    }\n  }, {\n    key: \"handleInput\",\n    value: function handleInput(editableDiv) {\n      // Check and remove zero-width space if it's the only content\n      if (editableDiv.innerHTML === '&#8203;') {\n        editableDiv.innerHTML = '';\n      }\n      var cursor = this.getCurrentCursor(editableDiv);\n      var mergedString = Array.from(editableDiv.childNodes).filter(function (node) {\n        // Keep only SPAN elements and text nodes\n        return node.nodeName.toUpperCase() === 'SPAN' || node.nodeType === 3;\n      }).map(function (node) {\n        return node.nodeType === 3 ? node.data.trim() : node.innerText.trim();\n      }).join('');\n      var result = mergedString.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n      var content = this.parseContent(result);\n      this.model.setValue(content.join(''));\n      // Optionally, update the view if needed\n      this.view.updateUI();\n      this.restoreCursor(editableDiv, cursor);\n    }\n  }, {\n    key: \"restoreCursor\",\n    value: function restoreCursor(element, position) {\n      var selection = window.getSelection();\n      var range = document.createRange();\n      range.setStart(element, 0);\n      range.collapse(true);\n      var nodeStack = [element];\n      var node,\n        foundStart = false,\n        stop = false;\n      var charIndex = 0;\n      while (!stop && (node = nodeStack.pop())) {\n        if (node.nodeType === 3) {\n          var nextCharIndex = charIndex + node.length;\n          if (!foundStart && position >= charIndex && position <= nextCharIndex) {\n            range.setStart(node, position - charIndex);\n            foundStart = true;\n          }\n          if (foundStart && position >= charIndex && position <= nextCharIndex) {\n            range.setEnd(node, position - charIndex);\n            stop = true;\n          }\n          charIndex = nextCharIndex;\n        } else {\n          var i = node.childNodes.length;\n          while (i--) {\n            nodeStack.push(node.childNodes[i]);\n          }\n        }\n      }\n      selection.removeAllRanges();\n      selection.addRange(range);\n    }\n  }, {\n    key: \"parseContent\",\n    value: function parseContent(inputString) {\n      var returnStringArray = [];\n      var regex = /{{.*?}}/g;\n      var lastIndex = 0;\n      inputString.replace(regex, function (match, index) {\n        // Add the string before the match\n        if (index > lastIndex) {\n          returnStringArray.push(inputString.slice(lastIndex, index));\n        }\n\n        // Add the matched string including the delimiters\n        returnStringArray.push(match);\n\n        // Update lastIndex for the next iteration\n        lastIndex = index + match.length;\n      });\n\n      // Add any remaining string after the last match\n      if (lastIndex < inputString.length) {\n        returnStringArray.push(inputString.slice(lastIndex));\n      }\n      return returnStringArray;\n    }\n  }, {\n    key: \"updateUI\",\n    value: function updateUI() {\n      this.view.updateUI();\n    }\n  }]);\n  return EditableInputController;\n}();\nvar EditableInput = /*#__PURE__*/function () {\n  function EditableInput() {\n    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _classCallCheck(this, EditableInput);\n    // Initialize the model with the value\n    this.model = new EditableInputModel(options.value || '');\n    this.controller = new EditableInputController(this.model, options);\n\n    // Additional properties as required\n    this.name = options.name || '';\n    this.id = options.id || '';\n    this[\"class\"] = options[\"class\"] || 'form-control';\n    this.placeholder = options.placeholder || '';\n  }\n  _createClass(EditableInput, [{\n    key: \"init\",\n    value: function init(element, callback) {\n      // Initialize the controller with the DOM element\n      this.controller.init(element, callback);\n    }\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      // Delegate to the model\n      return this.model.getValue();\n    }\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      // Delegate to the model and update the view\n      this.model.setValue(newValue);\n      this.controller.updateUI();\n    }\n\n    // Any additional methods required for interaction with this component\n  }]);\n  return EditableInput;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EditableInput);\n\n//# sourceURL=webpack://APITestManager/./src/components/EditableInput.js?");
 
 /***/ }),