✨ Added basic editor for custom formatting

frontend/src/lib/editor/card.svelte

@@ -68,15 +68,21 @@
 		</div>
 		<div class="flex flex-col">
 			<div class="flex justify-center pt-10 w-full">
-				<input
-					type="text"
-					bind:value={data.questions[selected_question].question}
-					placeholder="No title..."
-					class="p-3 rounded-lg border-gray-500 border text-center w-2/3 text-lg font-semibold placeholder:italic placeholder:font-normal dark:bg-gray-500"
-					class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
-						data.questions[selected_question].question
-					)}
-				/>
+				{#await import('$lib/inline-editor.svelte')}
+					<Spinner my_20={false} />
+				{:then c}
+					<div
+						class="rounded-lg placeholder:italic placeholder:font-normal dark:bg-gray-500"
+						class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
+							data.questions[selected_question].question
+						)}
+					>
+						<svelte:component
+							this={c.default}
+							bind:text={data.questions[selected_question].question}
+						/>
+					</div>
+				{/await}
 			</div>
 			{#if data.questions[selected_question].image != undefined && data.questions[selected_question].image !== ''}
 				<div class="flex justify-center pt-10 w-full max-h-72 w-full">

frontend/src/lib/editor/settings-card.svelte

@@ -40,11 +40,16 @@
 		</div>
 		<div class="dark:bg-gray-700">
 			<div class="flex justify-center pt-10 w-full">
-				<input
+				<!--<input
 					type="text"
 					bind:value={data.title}
 					class="p-3 rounded-lg border-gray-500 border text-center w-1/3 text-lg font-semibold dark:bg-gray-500"
-				/>
+				/>-->
+				{#await import('$lib/inline-editor.svelte')}
+					<Spinner my_20={false} />
+				{:then c}
+					<svelte:component this={c.default} bind:text={data.title} />
+				{/await}
 			</div>
 			<div class="flex justify-center pt-10 w-full max-h-32">
 				<textarea

frontend/src/lib/editor/sidebar.svelte

@@ -62,12 +62,13 @@
 			class:border-solid={!reach(dataSchema, 'title').isValidSync(data.title)}
 			class:border-2={!reach(dataSchema, 'title').isValidSync(data.title)}
 		>
-			<input
+			<p
 				type="text"
-				class="whitespace-nowrap truncate text-center w-full bg-transparent rounded font-semibold dark:text-white"
+				class="whitespace-nowrap truncate text-center w-full bg-transparent rounded dark:text-white"
 				class:dark:text-black={selected_question === -1}
-				bind:value={data.title}
-			/>
+			>
+				{@html data.title}
+			</p>
 		</div>
 		<div
 			use:tippy={{ content: data.description === '' ? "It's empty!" : data.description }}
@@ -160,7 +161,7 @@
 					{#if question.question === ''}
 						<span class="italic text-gray-500">No title...</span>
 					{:else}
-						{question.question}
+						{@html question.question}
 					{/if}
 				</h1>
 			</div>