From 613a0ab03c78e4255fb85bd5f4e704a733a1fd34 Mon Sep 17 00:00:00 2001
From: sorax <robert@hausgedacht.de>
Date: Tue, 12 Dec 2023 15:17:55 +0100
Subject: [PATCH] feat: insert new node on enter

---
 assets/js/hooks/index.ts | 30 +++++++++++++++++++++++++++---
 assets/js/hooks/node.ts  |  7 ++++++-
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/assets/js/hooks/index.ts b/assets/js/hooks/index.ts
index f7de1423..f4decbb8 100644
--- a/assets/js/hooks/index.ts
+++ b/assets/js/hooks/index.ts
@@ -1,11 +1,35 @@
-import { createNode } from "./node";
+import { createNode, focusNode } from "./node"
 
 export const Hooks = {
   outline: {
     mounted() {
       const container: HTMLElement = this.el
 
-      container.addEventListener("keydown", (event) => {
+      container.addEventListener("keydown", (event: KeyboardEvent) => {
+        const selection = window.getSelection()
+        const range = selection?.getRangeAt(0)
+
+        switch (event.key) {
+          case "Enter":
+            event.preventDefault()
+
+            const splitPos = range?.endOffset || 0
+
+            const target = <HTMLElement>event.target
+            const parent = target.parentElement!
+
+            const content = target.textContent || ""
+            const contentBefore = content.substring(0, splitPos)
+            const contentAfter = content.substring(splitPos)
+
+            const node = createNode({ content: contentAfter })
+            parent.after(node)
+
+            target.textContent = contentBefore
+
+            focusNode(node)
+            break
+        }
       })
 
       container.addEventListener("keyup", (event) => {
@@ -15,7 +39,7 @@ export const Hooks = {
         nodes.forEach(node => {
           const li = createNode(node)
           container.prepend(li)
-        });
+        })
       })
     }
   }
diff --git a/assets/js/hooks/node.ts b/assets/js/hooks/node.ts
index b8e91a0a..5bd350ad 100644
--- a/assets/js/hooks/node.ts
+++ b/assets/js/hooks/node.ts
@@ -8,7 +8,7 @@ interface Node {
 
 export function createNode({ uuid, content }: Node) {
   const input = document.createElement("div")
-  input.innerText = content || ""
+  input.textContent = content || ""
   input.contentEditable = "plaintext-only"
 
   const node = document.createElement("li")
@@ -18,3 +18,8 @@ export function createNode({ uuid, content }: Node) {
 
   return node
 }
+
+export function focusNode(node: HTMLElement) {
+  const input = node.firstChild as HTMLElement
+  input.focus()
+}