LiveView Form with phx-hook input example

server.exs

Application.put_env(:sample, SamplePhoenix.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 5001],
  server: true,
  live_view: [signing_salt: "aaaaaaaa"],
  secret_key_base: String.duplicate("a", 64)
)

Mix.install([
  {:plug_cowboy, "~> 2.7"},
  {:jason, "~> 1.0"},
  {:phoenix, "~> 1.7.0"},
  {:phoenix_live_view, "~> 0.20.0"}
])

defmodule SamplePhoenix.ErrorView do
  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end

defmodule SamplePhoenix.SampleLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}
  alias Phoenix.LiveView.JS

  def mount(_params, _session, socket) do
    socket =
      socket
      |> assign(result: nil)

    {:ok, socket}
  end

  # layout
  def render("live.html", assigns) do
    ~H"""
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/priv/static/phoenix.min.js" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/priv/static/phoenix_live_view.min.js" />
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js" />
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
    <script>
      const TuiEditorHook = {
        mounted() {
          this.editor = new toastui.Editor({
            el: this.el,
          })

          this.el.addEventListener("with_content", e => {
            const payload = { content: this.editor.getHTML() }

            this.pushEvent(e.detail.event, payload)
          })
        },
        destroyed() {
          this.editor.destroy()
        }
      }

      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket, {hooks: {TuiEditorHook}})
      liveSocket.connect()
    </script>
    <style>
      * { font-size: 1.1em; }
    </style>
    <%= @inner_content %>
    """
  end

  # render
  def render(assigns) do
    ~H"""
    <.form
      for={%{}}
      phx-submit={JS.dispatch("with_content", detail: %{event: "submit"}, to: "#content-editor")}
    >
      <input type="text" name="title" id="form-title" value="" />
      <div id="content-editor" phx-update="ignore" phx-hook="TuiEditorHook" />

      <button type="submit">Submit</button>
    </.form>
    <div>
      result: <%= inspect(@result) %>
    </div>
    """
  end

  def handle_event("submit", params, socket) do
    socket =
      socket
      |> assign(result: params)

    {:noreply, socket}
  end
end

defmodule Router do
  use Phoenix.Router
  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", SamplePhoenix do
    pipe_through(:browser)

    live("/", SampleLive, :index)
  end
end

defmodule SamplePhoenix.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)
  plug(Router)
end

{:ok, _} = Supervisor.start_link([SamplePhoenix.Endpoint], strategy: :one_for_one)
Process.sleep(:infinity)