From 7360a5f0c95c59ad3e338dbbb7724eaeaa1947d2 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 5 Jul 2023 11:52:02 +0200
Subject: [PATCH] fix(frontend): Fix Quill component (#1797)

---
 .../components/inputs/AppQuillEditor.svelte     | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte b/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
index b22f82641d..ae7fa8d35d 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
@@ -10,8 +10,6 @@
 	export let configuration: RichConfigurations
 	export let render: boolean
 
-	import { onMount } from 'svelte'
-
 	let editor
 	let quill: any
 	export let toolbarOptions = [
@@ -32,7 +30,15 @@
 		result: ''
 	})
 
-	onMount(async () => {
+	$: if (!render) {
+		quill = undefined
+	}
+
+	$: if (!quill && render) {
+		loadQuill()
+	}
+
+	async function loadQuill() {
 		const { default: Quill } = await import('quill')
 
 		quill = new Quill(editor, {
@@ -42,13 +48,15 @@
 			theme: 'snow',
 			placeholder: placeholder
 		})
+
 		if (defaultValue) {
 			quill.root.innerHTML = defaultValue
 		}
+
 		quill.on('text-change', function (delta, oldDelta, source) {
 			setOutput()
 		})
-	})
+	}
 
 	$componentControl[id] = {
 		setValue(nvalue: string) {
@@ -64,6 +72,7 @@
 			outputs?.result.set(quill.root.innerHTML)
 		}
 	}
+
 	$: handleDefault(defaultValue)
 
 	function handleDefault(defaultValue: string | undefined) {