feat: Add `blur` event for new editable transcription text

assets/js/app.js

@@ -22,10 +22,28 @@ import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
 import topbar from "../vendor/topbar";
 
+let Hooks = {};
+/**
+ * This hook is necessary because we're watching for a blur event on a `p` tag with `contenteditable`.
+ * The phx-blur event didn't seem to have a way to send along the text of the field as there is no `value` attribute
+ * because it isn't a form field.
+ */
+Hooks.TranscriptionEditor = {
+  mounted() {
+    this.el.addEventListener("blur", (e) => {
+      const phxTarget = e.target.attributes["phx-target"].value;
+      this.pushEventTo(phxTarget, "reclassify_transcription", {
+        value: e.target.textContent,
+      });
+    });
+  },
+};
+
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");
 let liveSocket = new LiveSocket("/live", Socket, {
+  hooks: Hooks,
   params: { _csrf_token: csrfToken },
 });
 

lib/medical_transcription_web/components/transcription_text_component.ex

@@ -45,7 +45,6 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
   @impl Phoenix.LiveComponent
   def render(assigns) do
     # TODO: Adjust the blue border when editing
-    # TODO: Add back the phx-blur="reclassify_transcription"
 
     ~H"""
     <div class="flex gap-12 pb-10 border-b border-[#444444]/20">
@@ -63,9 +62,11 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
               <p class="h-full min-h-full rounded p-2"><%= @text %></p>
             </:loading>
             <p
+              id={"#{@id}-transcription-text"}
               contenteditable
               role="textbox"
               class="h-full min-h-full rounded p-2"
+              phx-hook="TranscriptionEditor"
               phx-target={@myself}
             >
               <.highlight text={@text} keywords={keywords} />