svelte quill

+page.svelte

<script>
  import Quill from 'quill';
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  
  import { onMount } from 'svelte';

  let editor;
	export let toolbarOptions = [
		[{ header: 1 }, { header: 2 }, "blockquote", "link"],
		["bold", "italic", "underline", "strike"],
		[{ list: "ordered" }, { list: "ordered" }],
		[{ align: [] }],
		["clean"]
	];
	
  let quill
  let contents = ""
  onMount(async () => {
		quill = new Quill(editor, {
      modules: {
        toolbar: toolbarOptions
      },
      theme: "snow",
      placeholder: "Write your story..."
    });
    quill.on('text-change', (d, od, s) => {
      contents = quill.root.innerHTML
    })


  });
</script>


<div class="editor-wrapper">
  <div bind:this={editor} />
</div>
<br>

<h1>Contents Formatted</h1>
{#if quill}
<div>
  {@html contents}
</div>
{/if}

<br>
<h1>Contents Raw</h1>
{#if quill}
<div>
  {contents}
</div>
{/if}