diff --git a/assets/js/hooks/index.ts b/assets/js/hooks/index.ts index f1924521..f146f0bf 100644 --- a/assets/js/hooks/index.ts +++ b/assets/js/hooks/index.ts @@ -65,7 +65,7 @@ export const Hooks = { const content = node.content node.content = content?.substring(0, splitPos) - updateItem(node) + updateItem(node, container) const newNode: Node = { temp_id: self.crypto.randomUUID(), @@ -91,7 +91,7 @@ export const Hooks = { const prevNode = getNodeByItem(prevItem) prevNode.content += node.content - updateItem(prevNode) + updateItem(prevNode, container) item.parentNode?.removeChild(item) @@ -107,7 +107,7 @@ export const Hooks = { const nextNode = getNodeByItem(nextItem) node.content += nextNode.content - updateItem(node) + updateItem(node, container) nextItem.parentNode?.removeChild(nextItem) @@ -115,16 +115,31 @@ export const Hooks = { this.pushEvent("delete_node", nextNode.uuid) break - // case "Tab": - // event.preventDefault() + case "Tab": + event.preventDefault() + + if (event.shiftKey) { + if (node.parent_id) { + node.prev_id = node.parent_id + node.parent_id = undefined + + updateItem(node, container) + focusItem(item) + + this.pushEvent("update_node", node) + } + } else { + if (node.prev_id) { + node.parent_id = node.prev_id + node.prev_id = undefined - // if (event.shiftKey) { - // // outdentNode(node) - // // node.prev_id = node.parent_id - // } else { - // // indentNode(node) - // } - // break + updateItem(node, container) + focusItem(item) + + this.pushEvent("update_node", node) + } + } + break } }) @@ -133,26 +148,18 @@ export const Hooks = { // }) this.handleEvent("list", ({ nodes }) => { + // add all items nodes.forEach(node => { const item = createItem(node) container.append(item) }) - // sort all items + // sort & indent all items nodes.forEach(node => { - const item = getItemById(node.uuid) - const prevItem = getItemById(node.prev_id) - const parentItem = getItemById(node.parent_id) - - if (prevItem) { - prevItem.after(item) - } else if (parentItem) { - parentItem.querySelector("ol")?.append(item) - } else { - container.append(item) - } + updateItem(node, container) }) + // focus last item const lastItem = container.lastElementChild as HTMLLIElement focusItem(lastItem) }) diff --git a/assets/js/hooks/item.ts b/assets/js/hooks/item.ts index 81c6c04c..74b25ca7 100644 --- a/assets/js/hooks/item.ts +++ b/assets/js/hooks/item.ts @@ -22,7 +22,7 @@ export function createItem({ uuid, temp_id, content, parent_id, prev_id }: Node) return item } -export function updateItem({ uuid, temp_id, content, parent_id, prev_id }: Node) { +export function updateItem({ uuid, temp_id, content, parent_id, prev_id }: Node, container: HTMLElement) { const item = getItemById(temp_id || uuid!) if (!item) return @@ -33,12 +33,23 @@ export function updateItem({ uuid, temp_id, content, parent_id, prev_id }: Node) item.setAttribute("data-parent", parent_id || "") item.setAttribute("data-prev", prev_id || "") + + const prevItem = getItemById(prev_id) + const parentItem = getItemById(parent_id) + + if (prevItem) { + prevItem.after(item) + } else if (parentItem) { + parentItem.querySelector("ol")?.append(item) + } else { + container.append(item) + } } -export function getItemById(uuid: string) { - const item = document.getElementById("outline-node-" + uuid) +export function getItemById(uuid: string | undefined) { + if (!uuid) return null - return item + return document.getElementById("outline-node-" + uuid) } export function getNodeByEvent(event: Event): Node { diff --git a/lib/radiator/outline.ex b/lib/radiator/outline.ex index d2cb0aca..38d2a6e7 100644 --- a/lib/radiator/outline.ex +++ b/lib/radiator/outline.ex @@ -43,6 +43,25 @@ defmodule Radiator.Outline do |> Repo.get!(id) end + @doc """ + Gets a single node. + + Returns `nil` if the Node does not exist. + + ## Examples + + iex> get_node(123) + %Node{} + + iex> get_node(456) + nil + + """ + def get_node(id) do + Node + |> Repo.get(id) + end + @doc """ Creates a node. diff --git a/lib/radiator_web/components/layouts/app.html.heex b/lib/radiator_web/components/layouts/app.html.heex index 89e33730..3b77d11d 100644 --- a/lib/radiator_web/components/layouts/app.html.heex +++ b/lib/radiator_web/components/layouts/app.html.heex @@ -1,5 +1,5 @@ -
-