fix to use with sveltekit

2023-12-11 13:34:34 -03:00
commit e14f35aff0
29 changed files with 4880 additions and 0 deletions
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,14 @@
+/** @format */
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {}
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,14 @@
+<!-- @format -->
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div>%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/lib/Editor.svelte
+++ b/src/lib/Editor.svelte
@@ -0,0 +1,30 @@
+<script>
+	import {onMount, onDestroy} from 'svelte'
+
+	export let options = {}
+	export let data = ''
+
+	let className = ''
+	export {className as class}
+
+	options = {
+		theme: 'snow',
+		...options,
+	}
+
+	let node
+	let destroy
+
+	onMount(async () => {
+		const {quill} = await import('./quill.js')
+		destroy = quill(node, options)
+	})
+
+	onDestroy(() => {
+		destroy && destroy()
+	})
+</script>
+
+<div class={className}>
+	<div bind:this={node} on:text-change>{@html data}</div>
+</div>
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -0,0 +1,2 @@
+// prettier-ignore
+export {default as Editor} from './Editor.svelte'
--- a/src/lib/quill.js
+++ b/src/lib/quill.js
@@ -0,0 +1,61 @@
+import Quill from 'quill'
+
+const Clipboard = Quill.import('modules/clipboard')
+const Delta = Quill.import('delta')
+
+class PlainClipboard extends Clipboard {
+	convert(html) {
+		if (typeof html === 'string') {
+			this.container.innerHTML = html
+		}
+		const text = this.container.textContent
+		this.container.innerHTML = ''
+		return new Delta().insert(text)
+	}
+}
+
+export function quill(node, options) {
+	const toolbar = [
+		[{header: 1}, {header: 2}],
+		['bold', 'italic', 'underline'],
+		[{list: 'ordered'}, {list: 'bullet'}],
+		['link', 'image', 'video'],
+		['code-block', 'clean'],
+	]
+
+	const {plainclipboard} = options
+	if (plainclipboard) {
+		Quill.register('modules/clipboard', PlainClipboard, true)
+	}
+
+	if (Reflect.has(options, 'plainclipboard')) {
+		Reflect.deleteProperty(options, 'plainclipboard')
+	}
+
+	const q = new Quill(node, {
+		modules: {
+			toolbar,
+		},
+		placeholder: 'Digite algo...',
+		...options,
+	})
+
+	const _container = node.querySelector('.ql-editor')
+
+	const onTextChange = () => {
+		const html = _container?.innerHTML ?? ''
+		const customEvent = new CustomEvent('text-change', {
+			detail: {
+				html,
+				text: q.getText(),
+			},
+		})
+		node.dispatchEvent(customEvent)
+	}
+
+	q.on('text-change', onTextChange)
+
+	return () => {
+		q.off('text-change', onTextChange)
+	}
+}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,19 @@
+<script>
+	import {Editor} from '$lib/index.js'
+
+	const options = {
+		theme: 'snow',
+		plainclipboard: true,
+	}
+
+	function onTextChange(event) {
+		console.debug(event.detail)
+	}
+</script>
+
+<svelte:head>
+	<link rel="preconnect" href="https://cdn.quilljs.com" crossorigin />
+	<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.7/quill.snow.css" crossorigin />
+</svelte:head>
+
+<Editor {options} on:text-change={onTextChange} data="Apenas um show" />