editor-change events not showing up when used in a phoenix liveview

[benbot]

Yeah, so this is a really strange one.

I have Quill hooked up to an element in a phoenix live view, but the editor-change event never seems to fire.

defmodule OutlinesWorkWeb.EditorLive do
  use OutlinesWorkWeb, :live_view
  on_mount {OutlinesWorkWeb.LiveUserAuth, :live_user_required}

  def render(assigns) do
    ~H"""
    <main id="mainEditor" class='md:flex justify-center bg-neutral h-[100vh] items-center' phx-hook='quillEditor'>
      <textarea id="editor" class="text-black w-full lg:w-10/12 h-[80vh]">
      </textarea>
    </main>

    <script type="module">
      liveSocket.enableDebug()
      const quill = new Quill('#editor');
      console.log("BEN: ", quill);

      quill.on('editor-change', (delta, old, source) => {
        console.log("HERE: ", delta)
      });
      
      document.querySelector("#editor").addEventListener('input', () => console.log("Change"))
    </script>
    """
  end

  def mount(_param, _session, socket) do
    {:ok, socket, layout: false}
  end
end

I can see the input event firing from the event listener at the bottom, but nothing from the quill.

Any idea what I could do to debug this further?

[benbot]

Ah okay, weirdly enough, quill doesn't like being attached to a textarea

If i move that script to an mounted phx-hook and make the textare a div instead, it seems to work!