The How To

1. Make a hook file ex ./assets/js/hooks/textEditHook.js

import Quill from 'quill';
export let TextEditor = {
  mounted() {
    console.log('Mounting');
    let quill = new Quill(this.el, {
      theme: 'snow'
    });

    quill.on('text-change', (delta, oldDelta, source) => {
      if (source == 'api') {
        console.log("An API call triggered this change.");
      } else if (source == 'user') {
        console.log(this);
        this.pushEventTo(this.el.phxHookId, "text-editor", {"text_content": quill.getContents()})
      }
    });
    

  },
  updated(){
    console.log('U');
  }
}

1. Import it to your ./assets/js/app.js

import { TextEditor } from './hooks/textEditHook' //Put this at the top

1. Add hooks and assign it to Hooks.TextEditor (call this whatever but you must assign to Hooks

let Hooks = {}

// WYSIWYG
Hooks.TextEditor = TextEditor

1. Assign the hooks to your LiveSocket

let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})

Note!! This must be at the top level of the map; Not within params #IDidThisByAccident

1. Assign the phx-hook to where you want the element replaced

<div id="editor" phx-hook="TextEditor" phx-target={@myself} />

Note: I’ve set the phx-target to itself since I’m placing the handle-event function in there

1. Import the CSS whatever way you want. For my lazy butt I just did an inline CSS import at the top

<link href="<https://cdn.quilljs.com/1.3.6/quill.snow.css>" rel="stylesheet">