Integrating Trix into SvelteKit project

+page.server.js

export const prerender = false
export const ssr = false

export const actions = {
  default: async ( {request}) => {
    const data = await request.formData();
    const content = data.get("content")
    
    return {
      content
    }
  }
}

+page.svelte

<script>
  import { enhance } from '$app/forms';
  import 'trix';
  import 'trix/dist/trix.css';

  export let form;
  export let initialContent = "";

  $: editorContent = form ? form.content : initialContent;
  let trixEditor;
  $: {
    if(trixEditor) {
      trixEditor.editor.setSelectedRange([0, Number.MAX_SAFE_INTEGER])
      trixEditor.editor.insertHTML(editorContent)
    }
  }
</script>

<form name="trix-form" method="POST" use:enhance>
  <input id="trix-content" type="hidden" name="content" value={editorContent} >
  <trix-editor
    bind:this={trixEditor}
    class="trix-content" 
    input="trix-content"
    />
  <button type="submit">Save</button>
</form>

<div class="trix-content">
  {@html editorContent}
</div>