Commit
•
b5d433c
1
Parent(s):
7238311
feat: Add `blur` event for new editable transcription text
Browse files
assets/js/app.js
CHANGED
@@ -22,10 +22,28 @@ import { Socket } from "phoenix";
|
|
22 |
import { LiveSocket } from "phoenix_live_view";
|
23 |
import topbar from "../vendor/topbar";
|
24 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
25 |
let csrfToken = document
|
26 |
.querySelector("meta[name='csrf-token']")
|
27 |
.getAttribute("content");
|
28 |
let liveSocket = new LiveSocket("/live", Socket, {
|
|
|
29 |
params: { _csrf_token: csrfToken },
|
30 |
});
|
31 |
|
|
|
22 |
import { LiveSocket } from "phoenix_live_view";
|
23 |
import topbar from "../vendor/topbar";
|
24 |
|
25 |
+
let Hooks = {};
|
26 |
+
/**
|
27 |
+
* This hook is necessary because we're watching for a blur event on a `p` tag with `contenteditable`.
|
28 |
+
* 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
|
29 |
+
* because it isn't a form field.
|
30 |
+
*/
|
31 |
+
Hooks.TranscriptionEditor = {
|
32 |
+
mounted() {
|
33 |
+
this.el.addEventListener("blur", (e) => {
|
34 |
+
const phxTarget = e.target.attributes["phx-target"].value;
|
35 |
+
this.pushEventTo(phxTarget, "reclassify_transcription", {
|
36 |
+
value: e.target.textContent,
|
37 |
+
});
|
38 |
+
});
|
39 |
+
},
|
40 |
+
};
|
41 |
+
|
42 |
let csrfToken = document
|
43 |
.querySelector("meta[name='csrf-token']")
|
44 |
.getAttribute("content");
|
45 |
let liveSocket = new LiveSocket("/live", Socket, {
|
46 |
+
hooks: Hooks,
|
47 |
params: { _csrf_token: csrfToken },
|
48 |
});
|
49 |
|
lib/medical_transcription_web/components/transcription_text_component.ex
CHANGED
@@ -45,7 +45,6 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
|
|
45 |
@impl Phoenix.LiveComponent
|
46 |
def render(assigns) do
|
47 |
# TODO: Adjust the blue border when editing
|
48 |
-
# TODO: Add back the phx-blur="reclassify_transcription"
|
49 |
|
50 |
~H"""
|
51 |
<div class="flex gap-12 pb-10 border-b border-[#444444]/20">
|
@@ -63,9 +62,11 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
|
|
63 |
<p class="h-full min-h-full rounded p-2"><%= @text %></p>
|
64 |
</:loading>
|
65 |
<p
|
|
|
66 |
contenteditable
|
67 |
role="textbox"
|
68 |
class="h-full min-h-full rounded p-2"
|
|
|
69 |
phx-target={@myself}
|
70 |
>
|
71 |
<.highlight text={@text} keywords={keywords} />
|
|
|
45 |
@impl Phoenix.LiveComponent
|
46 |
def render(assigns) do
|
47 |
# TODO: Adjust the blue border when editing
|
|
|
48 |
|
49 |
~H"""
|
50 |
<div class="flex gap-12 pb-10 border-b border-[#444444]/20">
|
|
|
62 |
<p class="h-full min-h-full rounded p-2"><%= @text %></p>
|
63 |
</:loading>
|
64 |
<p
|
65 |
+
id={"#{@id}-transcription-text"}
|
66 |
contenteditable
|
67 |
role="textbox"
|
68 |
class="h-full min-h-full rounded p-2"
|
69 |
+
phx-hook="TranscriptionEditor"
|
70 |
phx-target={@myself}
|
71 |
>
|
72 |
<.highlight text={@text} keywords={keywords} />
|