carteles/src/lib/form/Form.svelte

<script>
	import { onMount } from 'svelte';
	import html2canvas from 'html2canvas';
	import Organized from '$lib/form/Organized.svelte';
	import Colabs from './Colabs.svelte';
	import {
		title,
		heading,
		subtitle,
		content,
		date,
		weekday,
		address,
		canvas
	} from '$lib/stores/store';

	/** @type {HTMLDivElement} */ let editor;
	let fileinput;

	const handleSubmit = async () => {
		console.log('submit');
	};

	const getContent = () => {
		if (!editor) {
			console.log('no hay editor');
			return;
		}
		if (editor && editor.firstChild !== null) {
			$content = editor.firstChild.innerHTML;
		}
	};

	const downloadCanvas = async () => {
		if ($canvas !== undefined) {
			const res = await html2canvas($canvas, { backgroundColor: '#fffffff' });
			const image = await res.toDataURL('image/png');
			const link = document.createElement('a');
			link.download = 'cartel.png';
			link.href = image;
			link.click();
		}
	};

	const quillOptions = {
		modules: {
			toolbar: [['bold', 'italic']]
		},
		theme: 'snow'
	};

	onMount(async () => {
		const { default: Quill } = await import('quill');

		let quill = new Quill(editor, {
			modules: {
				toolbar: quillOptions
			},
			theme: 'snow',
			placeholder: 'Detalles del evento'
		});
	});
</script>

<form on:submit|preventDefault={handleSubmit}>
	<div class="form-group">
		<label for="heading">Tipo de actividad</label>
		<input
			bind:value={$heading}
			type="text"
			name="heading"
			placeholder="Ej: Taller, charla, coloquio, debate, curso"
		/>
	</div>

	<div clasS="form-group">
		<label for="title">Título</label>
		<input bind:value={$title} type="text" name="title" placeholder="Título" />
	</div>

	<div class="form-group">
		<label for="subtitle">Subtítulo</label>
		<input bind:value={$subtitle} type="text" name="subtitle" placeholder="Subtítulo" />
	</div>

	<div class="form-group">
		<label for="content">Contenido</label>
		<div id="editor" on:click={getContent}>
			<div on:click={getContent} on:keyup={getContent} bind:this={editor} />
		</div>

		<div class="form-group">
			<label for="date">Fecha</label>
			<input bind:value={$date} type="datetime-local" name="date" />
		</div>

		<div class="form-group">
			<label for="weekday">Día de la semana</label>
			<input bind:value={$weekday} type="text" name="weekday" />
		</div>

		<div class="form-group">
			<label for="address">Dirección</label>
			<input bind:value={$address} type="text" name="address" />
		</div>
	</div>
	<div class="form-group media">
		<label for="organizedBy">Organiza:</label>
		<Organized />
		<label for="colabs">Colabora:</label>
		<Colabs />
	</div>
</form>
<button on:click|preventDefault={downloadCanvas}>Descargar</button>

<style>
	.form-group {
		margin: 1rem 0;
	}

	form {
		margin: 1rem;
		display: block;
	}

	input {
		display: block;
		width: 100%;
		font-size: 0.8rem;
		font-family: sans-serif;
		padding: 0.45rem;
	}

	label {
		display: block;
		font-size: 0.8rem;
		font-family: monospace;
		margin: 0.25rem 0;
	}

	#editor {
		background-color: white;
	}

	button {
		margin: 0 1rem;
		padding: 0.5rem;
		font-size: 1.1rem;
		cursor: pointer;
	}
</style>