diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a981a71f2d..f1b19796cf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -28,6 +28,7 @@
 				"lodash": "^4.17.21",
 				"lucide-svelte": "^0.236.0",
 				"monaco-languageclient": "~6.0.3",
+				"quill": "^1.3.7",
 				"svelte-autosize": "^1.0.1",
 				"svelte-chartjs": "^3.1.0",
 				"svelte-dnd-action": "^0.9.22",
@@ -1975,6 +1976,18 @@
 				"node": ">=10.16.0"
 			}
 		},
+		"node_modules/call-bind": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+			"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+			"dependencies": {
+				"function-bind": "^1.1.1",
+				"get-intrinsic": "^1.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/call-me-maybe": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
@@ -2181,6 +2194,14 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/clone": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+			"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
 		"node_modules/color-convert": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2681,6 +2702,22 @@
 			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
 			"dev": true
 		},
+		"node_modules/deep-equal": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+			"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+			"dependencies": {
+				"is-arguments": "^1.0.4",
+				"is-date-object": "^1.0.1",
+				"is-regex": "^1.0.4",
+				"object-is": "^1.0.1",
+				"object-keys": "^1.1.1",
+				"regexp.prototype.flags": "^1.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/deep-is": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2709,6 +2746,21 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/define-properties": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+			"integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+			"dependencies": {
+				"has-property-descriptors": "^1.0.0",
+				"object-keys": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/delegates": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -3195,12 +3247,27 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/eventemitter3": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+			"integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+		},
+		"node_modules/extend": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+		},
 		"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==",
 			"dev": true
 		},
+		"node_modules/fast-diff": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+			"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+		},
 		"node_modules/fast-equals": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
@@ -3406,8 +3473,15 @@
 		"node_modules/function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-			"dev": true
+			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+		},
+		"node_modules/functions-have-names": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+			"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
 		"node_modules/gauge": {
 			"version": "3.0.2",
@@ -3448,6 +3522,20 @@
 				"node": ">=10.19"
 			}
 		},
+		"node_modules/get-intrinsic": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+			"integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+			"dependencies": {
+				"function-bind": "^1.1.1",
+				"has": "^1.0.3",
+				"has-proto": "^1.0.1",
+				"has-symbols": "^1.0.3"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -3630,7 +3718,6 @@
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-			"dev": true,
 			"dependencies": {
 				"function-bind": "^1.1.1"
 			},
@@ -3647,6 +3734,53 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/has-property-descriptors": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+			"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+			"dependencies": {
+				"get-intrinsic": "^1.1.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+			"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-symbols": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-tostringtag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+			"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+			"dependencies": {
+				"has-symbols": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/has-unicode": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -3820,6 +3954,21 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/is-arguments": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+			"integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/is-arrayish": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -3851,6 +4000,20 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/is-date-object": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+			"integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+			"dependencies": {
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3919,6 +4082,21 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/is-regex": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+			"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4912,6 +5090,29 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/object-is": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+			"integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/object-keys": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+			"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/ol": {
 			"version": "7.3.0",
 			"resolved": "https://registry.npmjs.org/ol/-/ol-7.3.0.tgz",
@@ -5027,6 +5228,11 @@
 			"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
 			"dev": true
 		},
+		"node_modules/parchment": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+			"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+		},
 		"node_modules/parent-module": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5918,6 +6124,32 @@
 			"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
 			"dev": true
 		},
+		"node_modules/quill": {
+			"version": "1.3.7",
+			"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+			"integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+			"dependencies": {
+				"clone": "^2.1.1",
+				"deep-equal": "^1.0.1",
+				"eventemitter3": "^2.0.3",
+				"extend": "^3.0.2",
+				"parchment": "^1.1.4",
+				"quill-delta": "^3.6.2"
+			}
+		},
+		"node_modules/quill-delta": {
+			"version": "3.6.3",
+			"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+			"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+			"dependencies": {
+				"deep-equal": "^1.0.1",
+				"extend": "^3.0.2",
+				"fast-diff": "1.1.2"
+			},
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
 		"node_modules/rbush": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
@@ -6121,6 +6353,22 @@
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
 			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
 		},
+		"node_modules/regexp.prototype.flags": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+			"integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.2.0",
+				"functions-have-names": "^1.2.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/require-from-string": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -9254,6 +9502,15 @@
 				"streamsearch": "^1.1.0"
 			}
 		},
+		"call-bind": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+			"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+			"requires": {
+				"function-bind": "^1.1.1",
+				"get-intrinsic": "^1.0.2"
+			}
+		},
 		"call-me-maybe": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
@@ -9391,6 +9648,11 @@
 			"dev": true,
 			"optional": true
 		},
+		"clone": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+			"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+		},
 		"color-convert": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -9756,6 +10018,19 @@
 			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
 			"dev": true
 		},
+		"deep-equal": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+			"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+			"requires": {
+				"is-arguments": "^1.0.4",
+				"is-date-object": "^1.0.1",
+				"is-regex": "^1.0.4",
+				"object-is": "^1.0.1",
+				"object-keys": "^1.1.1",
+				"regexp.prototype.flags": "^1.2.0"
+			}
+		},
 		"deep-is": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -9778,6 +10053,15 @@
 				"inherits": "^2.0.3"
 			}
 		},
+		"define-properties": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+			"integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+			"requires": {
+				"has-property-descriptors": "^1.0.0",
+				"object-keys": "^1.1.1"
+			}
+		},
 		"delegates": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -10150,12 +10434,27 @@
 			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
 			"dev": true
 		},
+		"eventemitter3": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+			"integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+		},
+		"extend": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+		},
 		"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==",
 			"dev": true
 		},
+		"fast-diff": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+			"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+		},
 		"fast-equals": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
@@ -10316,8 +10615,12 @@
 		"function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-			"dev": true
+			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+		},
+		"functions-have-names": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+			"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
 		},
 		"gauge": {
 			"version": "3.0.2",
@@ -10352,6 +10655,17 @@
 				"xml-utils": "^1.0.2"
 			}
 		},
+		"get-intrinsic": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+			"integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+			"requires": {
+				"function-bind": "^1.1.1",
+				"has": "^1.0.3",
+				"has-proto": "^1.0.1",
+				"has-symbols": "^1.0.3"
+			}
+		},
 		"glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -10492,7 +10806,6 @@
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-			"dev": true,
 			"requires": {
 				"function-bind": "^1.1.1"
 			}
@@ -10503,6 +10816,32 @@
 			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 			"dev": true
 		},
+		"has-property-descriptors": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+			"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+			"requires": {
+				"get-intrinsic": "^1.1.1"
+			}
+		},
+		"has-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+			"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
+		},
+		"has-symbols": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+		},
+		"has-tostringtag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+			"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+			"requires": {
+				"has-symbols": "^1.0.2"
+			}
+		},
 		"has-unicode": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -10626,6 +10965,15 @@
 			"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
 			"dev": true
 		},
+		"is-arguments": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+			"integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+			"requires": {
+				"call-bind": "^1.0.2",
+				"has-tostringtag": "^1.0.0"
+			}
+		},
 		"is-arrayish": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -10651,6 +10999,14 @@
 				"has": "^1.0.3"
 			}
 		},
+		"is-date-object": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+			"integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+			"requires": {
+				"has-tostringtag": "^1.0.0"
+			}
+		},
 		"is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -10698,6 +11054,15 @@
 			"dev": true,
 			"peer": true
 		},
+		"is-regex": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+			"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+			"requires": {
+				"call-bind": "^1.0.2",
+				"has-tostringtag": "^1.0.0"
+			}
+		},
 		"isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -11433,6 +11798,20 @@
 			"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
 			"dev": true
 		},
+		"object-is": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+			"integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+			"requires": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.3"
+			}
+		},
+		"object-keys": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+			"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+		},
 		"ol": {
 			"version": "7.3.0",
 			"resolved": "https://registry.npmjs.org/ol/-/ol-7.3.0.tgz",
@@ -11523,6 +11902,11 @@
 			"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
 			"dev": true
 		},
+		"parchment": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+			"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+		},
 		"parent-module": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -12091,6 +12475,29 @@
 			"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
 			"dev": true
 		},
+		"quill": {
+			"version": "1.3.7",
+			"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+			"integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+			"requires": {
+				"clone": "^2.1.1",
+				"deep-equal": "^1.0.1",
+				"eventemitter3": "^2.0.3",
+				"extend": "^3.0.2",
+				"parchment": "^1.1.4",
+				"quill-delta": "^3.6.2"
+			}
+		},
+		"quill-delta": {
+			"version": "3.6.3",
+			"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+			"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+			"requires": {
+				"deep-equal": "^1.0.1",
+				"extend": "^3.0.2",
+				"fast-diff": "1.1.2"
+			}
+		},
 		"rbush": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
@@ -12256,6 +12663,16 @@
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
 			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
 		},
+		"regexp.prototype.flags": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+			"integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+			"requires": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.2.0",
+				"functions-have-names": "^1.2.3"
+			}
+		},
 		"require-from-string": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0f3ddcf68b..3ca45b2ede 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -88,6 +88,7 @@
 		"lodash": "^4.17.21",
 		"lucide-svelte": "^0.236.0",
 		"monaco-languageclient": "~6.0.3",
+		"quill": "^1.3.7",
 		"svelte-autosize": "^1.0.1",
 		"svelte-chartjs": "^3.1.0",
 		"svelte-dnd-action": "^0.9.22",
@@ -96,10 +97,10 @@
 		"svelte-timezone-picker": "^2.0.3",
 		"tailwind-merge": "^1.12.0",
 		"vscode-ws-jsonrpc": "3.0.0",
+		"windmill-parser-wasm": "file:../backend/parsers/windmill-parser-wasm/pkg",
 		"y-monaco": "^0.1.4",
 		"y-websocket": "^1.5.0",
-		"yjs": "^13.6.1",
-		"windmill-parser-wasm": "file:../backend/parsers/windmill-parser-wasm/pkg"
+		"yjs": "^13.6.1"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^1.20.1",
diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index 5b6bf5be93..e7b33a2c0c 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -8,6 +8,7 @@
 	export let popupClass = ''
 	export let disablePopup = false
 	export let disappearTimeout = 100
+	export let appearTimeout = 300
 
 	const [popperRef, popperContent] = createPopperActions({ placement })
 
@@ -26,13 +27,20 @@
 	}
 
 	let showTooltip = false
-	let timeout: NodeJS.Timeout
+	let timeout: NodeJS.Timeout | undefined = undefined
+	let inTimeout: NodeJS.Timeout | undefined = undefined
 
 	function open() {
 		clearTimeout(timeout)
-		showTooltip = true
+		if (appearTimeout == 0) {
+			showTooltip = true
+		} else {
+			inTimeout = setTimeout(() => (showTooltip = true), appearTimeout)
+		}
 	}
 	function close() {
+		inTimeout && clearTimeout(inTimeout)
+		inTimeout = undefined
 		timeout = setTimeout(() => (showTooltip = false), disappearTimeout)
 	}
 </script>
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
index 5544b177ef..a8dc16067d 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -4,7 +4,7 @@
 	import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte'
 
 	import { isObject } from '$lib/utils'
-	import { getContext, onMount } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { AppInput } from '../../../inputType'
 	import type { AppViewerContext, RichConfigurations } from '../../../types'
 	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'
@@ -62,11 +62,6 @@
 		outputs?.selectedRows.set(rows.map((x) => x.data))
 	}
 
-	let mounted = false
-	onMount(() => {
-		mounted = true
-	})
-
 	$: outputs?.result?.set(result ?? [])
 
 	let clientHeight
diff --git a/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte b/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
new file mode 100644
index 0000000000..d5715936e6
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
+	import type { AppViewerContext, RichConfigurations } from '../../types'
+
+	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+
+	export let id: string
+	export let configuration: RichConfigurations
+	export let render: boolean
+
+	import { onMount } from 'svelte'
+
+	let editor
+	let quill: any
+	export let toolbarOptions = [
+		[{ header: 1 }, { header: 2 }, 'blockquote', 'link', 'image', 'video'],
+		['bold', 'italic', 'underline', 'strike'],
+		[{ list: 'ordered' }, { list: 'ordered' }],
+		[{ align: [] }],
+		['clean']
+	]
+
+	const { worldStore, componentControl, selectedComponent, connectingInput } =
+		getContext<AppViewerContext>('AppViewerContext')
+
+	let placeholder: string | undefined = undefined
+	let defaultValue: string | undefined = undefined
+
+	let outputs = initOutput($worldStore, id, {
+		result: ''
+	})
+
+	onMount(async () => {
+		const { default: Quill } = await import('quill')
+
+		quill = new Quill(editor, {
+			modules: {
+				toolbar: toolbarOptions
+			},
+			theme: 'snow',
+			placeholder: placeholder
+		})
+		if (defaultValue) {
+			quill.root.innerHTML = defaultValue
+		}
+		quill.on('text-change', function (delta, oldDelta, source) {
+			setOutput()
+		})
+	})
+
+	$componentControl[id] = {
+		setValue(nvalue: string) {
+			if (quill) {
+				quill.root.innerHTML = nvalue
+				setOutput()
+			}
+		}
+	}
+
+	function setOutput() {
+		if (quill) {
+			outputs?.result.set(quill.root.innerHTML)
+		}
+	}
+	$: handleDefault(defaultValue)
+
+	function handleDefault(defaultValue: string | undefined) {
+		if (quill) {
+			quill.root.innerHTML = defaultValue
+			setOutput()
+		}
+	}
+</script>
+
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+<InitializeComponent {id} />
+{#if render}
+	<div
+		class="editor-wrapper h-full flex-col flex max-h-full overflow-hidden"
+		on:pointerdown|stopPropagation={() => {
+			if (!$connectingInput.opened) {
+				$selectedComponent = [id]
+			}
+		}}
+	>
+		<div bind:this={editor} />
+	</div>
+{/if}
+
+<style>
+	@import 'https://cdn.quilljs.com/1.3.6/quill.snow.css';
+</style>
diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
index 91423d61c4..9ed41e2b6e 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
@@ -54,17 +54,19 @@
 <InitializeComponent {id} />
 
 {#if inputType === 'textarea'}
-	<textarea
-		class={twMerge(
-			'windmillapp w-full h-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
-			css?.input?.class ?? ''
-		)}
-		style="resize:none; {css?.input?.style ?? ''}"
-		on:pointerdown|stopPropagation={(e) =>
-			!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
-		bind:value
-		{placeholder}
-	/>
+	{#if render}
+		<textarea
+			class={twMerge(
+				'windmillapp w-full h-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
+				css?.input?.class ?? ''
+			)}
+			style="resize:none; {css?.input?.style ?? ''}"
+			on:pointerdown|stopPropagation={(e) =>
+				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+			bind:value
+			{placeholder}
+		/>
+	{/if}
 {:else}
 	<AlignWrapper {render} {verticalAlignment}>
 		{#if inputType === 'password'}
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index cf2f858b5b..2455847728 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -112,7 +112,8 @@
 		history,
 		pickVariableCallback,
 		movingcomponents: writable(undefined),
-		selectedComponentInEditor: writable(undefined)
+		selectedComponentInEditor: writable(undefined),
+		jobsDrawerOpen: writable(false),
 	})
 
 	let timeout: NodeJS.Timeout | undefined = undefined
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 2c6438f946..7ec8308146 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -93,7 +93,7 @@
 		openDebugRun
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	const { history } = getContext<AppEditorContext>('AppEditorContext')
+	const { history, jobsDrawerOpen } = getContext<AppEditorContext>('AppEditorContext')
 
 	const loading = {
 		publish: false,
@@ -103,7 +103,7 @@
 
 	$: if ($openDebugRun == undefined) {
 		$openDebugRun = (componentId: string) => {
-			jobsDrawerOpen = true
+			$jobsDrawerOpen = true
 
 			const job = $jobs.find((job) => job.component === componentId)
 			if (job) {
@@ -118,7 +118,6 @@
 
 	let draftDrawerOpen = false
 	let saveDrawerOpen = false
-	let jobsDrawerOpen = false
 	let inputsDrawerOpen = fromHub
 	let historyBrowserDrawerOpen = false
 
@@ -538,11 +537,11 @@
 	</DrawerContent>
 </Drawer>
 
-<Drawer bind:open={jobsDrawerOpen} size="900px">
+<Drawer bind:open={$jobsDrawerOpen} size="900px">
 	<DrawerContent
 		noPadding
 		title="Debug Runs"
-		on:close={() => (jobsDrawerOpen = false)}
+		on:close={() => ($jobsDrawerOpen = false)}
 		tooltip="Look at latests runs to spot potential bugs."
 		documentationLink="https://docs.windmill.dev/docs/apps/app_toolbar#debug-runs"
 	>
@@ -769,7 +768,7 @@
 					if (selectedJobId == undefined && $jobs.length > 0) {
 						selectedJobId = $jobs[0].job
 					}
-					jobsDrawerOpen = true
+					$jobsDrawerOpen = true
 				}}
 				color={hasErrors ? 'red' : 'light'}
 				size="xs"
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 934035d34f..1ff0283e99 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -49,6 +49,7 @@
 	import AppLogsComponent from '../../components/display/AppLogsComponent.svelte'
 	import AppFlowStatusComponent from '../../components/display/AppFlowStatusComponent.svelte'
 	import AppChartJs from '../../components/display/AppChartJs.svelte'
+	import AppQuillEditor from '../../components/inputs/AppQuillEditor.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -325,6 +326,8 @@
 				customCss={component.customCss}
 				{render}
 			/>
+		{:else if component.type === 'quillcomponent'}
+			<AppQuillEditor id={component.id} configuration={component.configuration} {render} />
 		{:else if component.type === 'textareainputcomponent'}
 			<AppTextInput
 				id={component.id}
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
index e2020b8292..bab7eb9d72 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
@@ -15,7 +15,8 @@
 	const { app, selectedComponent, focusedGrid, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	const { history, movingcomponents } = getContext<AppEditorContext>('AppEditorContext')
+	const { history, movingcomponents, jobsDrawerOpen } =
+		getContext<AppEditorContext>('AppEditorContext')
 
 	let tempGridItems: GridItem[] | undefined = undefined
 
@@ -129,7 +130,7 @@
 	}
 
 	async function handleCopy(event: KeyboardEvent) {
-		if (!$selectedComponent) {
+		if (!$selectedComponent || $jobsDrawerOpen) {
 			return
 		}
 		tempGridItems = undefined
@@ -198,7 +199,6 @@
 				if (parsed.type == ITEM_TYPE) {
 					copiedGridItems = parsed.items
 					subgrids = parsed.subgrids ?? subgrids
-					console.log('subgrids', subgrids)
 				} else {
 					copiedGridItems = undefined
 				}
@@ -242,7 +242,7 @@
 		} else if (copiedGridItems) {
 			let nitems: string[] = []
 			for (let copiedGridItem of copiedGridItems) {
-				let newItem = copyComponent(copiedGridItem, $focusedGrid, subgrids)
+				let newItem = copyComponent(copiedGridItem, $focusedGrid, subgrids, [])
 				newItem && nitems.push(newItem)
 			}
 			$selectedComponent = nitems.map((x) => x)
@@ -255,10 +255,12 @@
 		item: GridItem,
 		parentGrid: FocusedGrid | undefined,
 		subgrids: Record<string, GridItem[]>,
-		doNotVisit?: string
+		alreadyVisited: string[]
 	) {
-		if (item.id === doNotVisit) {
+		if (alreadyVisited.includes(item.id)) {
 			return
+		} else {
+			alreadyVisited.push(item.id)
 		}
 		const newItem = insertNewGridItem(
 			$app,
@@ -273,7 +275,7 @@
 					subgridItem,
 					{ parentComponentId: newItem, subGridIndex: i },
 					subgrids,
-					doNotVisit ?? newItem
+					alreadyVisited
 				)
 			})
 		}
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 4cec1a0c0f..670c9e133a 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -62,6 +62,7 @@ export type RecomputeOthersSource = {
 
 export type TextComponent = BaseComponent<'textcomponent'>
 export type TextInputComponent = BaseComponent<'textinputcomponent'>
+export type QuillComponent = BaseComponent<'quillcomponent'>
 export type TextareaInputComponent = BaseComponent<'textareainputcomponent'>
 export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>
 export type EmailInputComponent = BaseComponent<'emailinputcomponent'>
@@ -135,6 +136,7 @@ export type TypedComponent =
 	| LogComponent
 	| FlowStatusComponent
 	| TextInputComponent
+	| QuillComponent
 	| TextareaInputComponent
 	| PasswordInputComponent
 	| EmailInputComponent
@@ -1211,6 +1213,30 @@ Hello \${ctx.username}
 			}
 		}
 	},
+	quillcomponent: {
+		name: 'Rich Text Editor',
+		icon: TextCursorInput,
+		dims: '2:1-2:1' as AppComponentDimensions,
+		customCss: {
+			input: { class: '', style: '' }
+		},
+		initialData: {
+			componentInput: undefined,
+			configuration: {
+				placeholder: {
+					type: 'static',
+					value: 'Type...',
+					fieldType: 'text',
+					onlyStatic: true
+				},
+				defaultValue: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'text'
+				}
+			}
+		}
+	},
 	textareainputcomponent: {
 		name: 'Textarea',
 		icon: TextCursorInput,
diff --git a/frontend/src/lib/components/apps/editor/component/sets.ts b/frontend/src/lib/components/apps/editor/component/sets.ts
index 6acfde5b44..aa450c193b 100644
--- a/frontend/src/lib/components/apps/editor/component/sets.ts
+++ b/frontend/src/lib/components/apps/editor/component/sets.ts
@@ -31,6 +31,7 @@ const inputs: ComponentSet = {
 		'schemaformcomponent',
 		'textinputcomponent',
 		'textareainputcomponent',
+		'quillcomponent',
 		'passwordinputcomponent',
 		'emailinputcomponent',
 		'numberinputcomponent',
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts b/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts
index 95de9ae2c9..7c82d8c3f4 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts
@@ -668,6 +668,9 @@ export const quickStyleProperties: Record<
 	textinputcomponent: {
 		input: inputDefaultProps
 	},
+	quillcomponent: {
+		input: inputDefaultProps
+	},
 	textareainputcomponent: {
 		input: inputDefaultProps
 	},
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 52b8f00d4c..a6f8ffe89d 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -208,6 +208,7 @@ export type AppEditorContext = {
 	pickVariableCallback: Writable<((path: string) => void) | undefined>
 	selectedComponentInEditor: Writable<string | undefined>
 	movingcomponents: Writable<string[] | undefined>
+	jobsDrawerOpen: Writable<boolean>
 }
 
 export type FocusedGrid = { parentComponentId: string; subGridIndex: number }