feat: handle focus event

assets/js/hooks/index.ts

@@ -5,6 +5,22 @@ export const Hooks = {
     mounted() {
       const container: HTMLElement = this.el
 
+      container.addEventListener("focusin", (event: FocusEvent) => {
+        const target = <HTMLElement>event.target
+        const domNode = target.parentElement!
+        const id = domNode.getAttribute("data-id")
+
+        this.pushEvent("set_focus", id)
+      })
+
+      container.addEventListener("focusout", (event) => {
+        const target = <HTMLElement>event.target
+        const domNode = target.parentElement!
+        const id = domNode.getAttribute("data-id")
+
+        this.pushEvent("remove_focus", id)
+      })
+
       container.addEventListener("keydown", (event: KeyboardEvent) => {
         const selection = window.getSelection()
         const range = selection?.getRangeAt(0)
@@ -22,12 +38,13 @@ export const Hooks = {
             const contentBefore = content.substring(0, splitPos)
             const contentAfter = content.substring(splitPos)
 
-            const node = createNode({ content: contentAfter })
-            parent.after(node)
+            const domNode = createNode({ content: contentAfter })
+            parent.after(domNode)
 
             target.textContent = contentBefore
 
-            focusNode(node)
+            focusNode(domNode)
+
             break
         }
       })

assets/js/hooks/node.ts

@@ -11,15 +11,20 @@ export function createNode({ uuid, content }: Node) {
   input.textContent = content || ""
   input.contentEditable = "plaintext-only"
 
-  const node = document.createElement("li")
-  node.className = "my-2 ml-2"
-  node.appendChild(input)
-  uuid && (node.id = "outline-node-" + uuid)
+  // const ol = document.createElement("ol")
+  // ol.className = "ml-2 list-disc list-inside"
 
-  return node
+  const domNode = document.createElement("li")
+  domNode.className = "my-2 ml-2"
+  domNode.appendChild(input)
+  // domNode.appendChild(ol)
+  uuid && (domNode.id = "outline-node-" + uuid)
+
+  return domNode
 }
 
-export function focusNode(node: HTMLElement) {
-  const input = node.firstChild as HTMLElement
+
+export function focusNode(domNode: HTMLElement) {
+  const input = domNode.firstChild as HTMLElement
   input.focus()
 }

lib/radiator_web/live/outline_live/index.ex

@@ -35,6 +35,21 @@ defmodule RadiatorWeb.OutlineLive.Index do
     |> reply(:noreply)
   end
 
+  def handle_event("set_focus", _node_id, socket) do
+    socket
+    |> reply(:noreply)
+  end
+
+  def handle_event("remove_focus", _node_id, socket) do
+    socket
+    |> reply(:noreply)
+  end
+
+  def handle_event("create_node", _params, socket) do
+    socket
+    |> reply(:noreply)
+  end
+
   # def handle_event("delete", %{"uuid" => uuid}, socket) do
   #   node = Outline.get_node!(uuid)
   #   Outline.delete_node(node)