feat: insert new node on enter

podlove · Dec 12, 2023 · 613a0ab · 613a0ab
1 parent d6ea02d
commit 613a0ab
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git 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
@@ -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()
+}