From 840b7386f84377d2baf1f791f8caa66f8faaec84 Mon Sep 17 00:00:00 2001
From: Miguel Camba <miguel.camba@gmail.com>
Date: Sat, 11 Jan 2025 00:04:33 +0100
Subject: [PATCH 01/10] This does nothing yet, but the UI works

---
 .../SelectedElementFloatingMenu/DragMenuOption.svelte    | 9 ++++++---
 lib/beacon/live_admin/live/page_editor_live/edit.ex      | 6 ++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte b/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
index d540da98..5d04a70c 100644
--- a/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
+++ b/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
@@ -6,6 +6,8 @@
     selectedAstElementId,
     parentOfSelectedAstElement,
     grandParentOfSelectedAstElement,
+    parentSelectedAstElementId,
+    grandParentSelectedAstElementId,
   } from "$lib/stores/page"
   import { findHoveredSiblingIndex, getBoundingRect, getDragDirection, type Coords } from "$lib/utils/drag-helpers"
   import { live } from "$lib/stores/live"
@@ -168,7 +170,7 @@
   }
 
   function applyNewOrder() {
-    let parent = isParent ? $grandParentOfSelectedAstElement : $parentOfSelectedAstElement
+    let [parent, parentId] = isParent ? [$grandParentOfSelectedAstElement, $grandParentSelectedAstElementId] : [$parentOfSelectedAstElement, $parentSelectedAstElementId]
 
     if (newIndex !== null && newIndex !== dragElementInfo.selectedIndex && !!parent) {
       // Reordering happened, apply new order
@@ -188,9 +190,10 @@
         parts[parts.length - 1] = newSelectedIndex.toString()
         $selectedAstElementId = parts.join(".")
       }
-      $pageAst = [...$pageAst]
+      // $pageAst = [...$pageAst]
       // Update in the server
-      $live.pushEvent("update_page_ast", { id: $pageInfo.id, ast: $pageAst })
+      $live.pushEvent("update_page_node", { id: $pageInfo.id, node_id: parentId, node: parent })
+      // $live.pushEvent("update_page_ast", { id: $pageInfo.id, ast: $pageAst })
     }
   }
 
diff --git a/lib/beacon/live_admin/live/page_editor_live/edit.ex b/lib/beacon/live_admin/live/page_editor_live/edit.ex
index d999113f..8de5dd20 100644
--- a/lib/beacon/live_admin/live/page_editor_live/edit.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/edit.ex
@@ -54,6 +54,12 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Edit do
 
     {:noreply, socket}
   end
+  
+  def handle_event("update_page_node", %{"node_id" => node_id, "node" => node}, socket) do
+    # TODO: update the ast node
+
+    {:noreply, socket}
+  end
 
   def handle_event(
         "render_component_in_page",

From 87f364e51a1ea89b502542115643ee3496dce402 Mon Sep 17 00:00:00 2001
From: Miguel Camba <miguel.camba@gmail.com>
Date: Fri, 17 Jan 2025 20:16:53 +0100
Subject: [PATCH 02/10] Kind of working

---
 .../live_admin/live/page_editor_live/edit.ex      | 10 +++++++---
 .../live/page_editor_live/form_component.ex       | 13 ++++++++++++-
 lib/beacon/live_admin/visual_editor.ex            | 15 +++++++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/lib/beacon/live_admin/live/page_editor_live/edit.ex b/lib/beacon/live_admin/live/page_editor_live/edit.ex
index 8de5dd20..e23838b6 100644
--- a/lib/beacon/live_admin/live/page_editor_live/edit.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/edit.ex
@@ -54,10 +54,14 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Edit do
 
     {:noreply, socket}
   end
-  
-  def handle_event("update_page_node", %{"node_id" => node_id, "node" => node}, socket) do
-    # TODO: update the ast node
 
+  def handle_event("update_page_node", %{"node_id" => path, "node" => node}, socket) do
+    # TODO: update the ast node
+    send_update(Beacon.LiveAdmin.PageEditorLive.FormComponent,
+      id: "page-editor-form",
+      path: path,
+      node: node
+    )
     {:noreply, socket}
   end
 
diff --git a/lib/beacon/live_admin/live/page_editor_live/form_component.ex b/lib/beacon/live_admin/live/page_editor_live/form_component.ex
index 3b82f590..e223a9fc 100644
--- a/lib/beacon/live_admin/live/page_editor_live/form_component.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/form_component.ex
@@ -88,7 +88,17 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do
     deleted_attrs = Map.get(payload, :deleted, [])
     ast = VisualEditor.update_node(socket.assigns.builder_page_ast, path, attrs, deleted_attrs)
 
-    # TODO: Don't save immediately. Debounce serializing this to a template
+    update_template_later(socket, ast)
+  end
+
+  # changed element from visual editor control
+  def update(%{path: path, node: node}, %{assigns: %{editor: "visual"}} = socket) do
+    ast = VisualEditor.replace_node(socket.assigns.builder_page_ast, path, node)
+
+    update_template_later(socket, ast)
+  end
+
+  defp update_template_later(socket, ast) do
     template = Beacon.Template.HEEx.HEExDecoder.decode(ast)
     params = Map.merge(socket.assigns.form.params, %{"template" => template})
     changeset = Content.change_page(socket.assigns.site, socket.assigns.page, params)
@@ -98,6 +108,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do
      |> assign_form(changeset)
      |> assign_template(template)
      |> assign(builder_page_ast: ast)}
+    {:ok, socket}
   end
 
   @impl true
diff --git a/lib/beacon/live_admin/visual_editor.ex b/lib/beacon/live_admin/visual_editor.ex
index 85d58218..19fff351 100644
--- a/lib/beacon/live_admin/visual_editor.ex
+++ b/lib/beacon/live_admin/visual_editor.ex
@@ -53,6 +53,21 @@ defmodule Beacon.LiveAdmin.VisualEditor do
     end
   end
 
+  def replace_node(nodes, path, new_node) do
+    path = resolve_path(path)
+    replace_node_recursive(nodes, path, new_node)
+  end
+
+  defp replace_node_recursive(nodes, [index], new_node) do
+    List.update_at(nodes, index, fn _ -> new_node end)
+  end
+
+  defp replace_node_recursive(nodes, [index | rest], new_node) do
+    List.update_at(nodes, index, fn node ->
+      %{node | "content" => replace_node_recursive(node["content"], rest, new_node)}
+    end)
+  end
+
   # FIXME: update "root" node - it will crash if any property is updated on the root node (choose Up one level up to root)
   def update_node(nodes, path, attrs, deleted_attrs) do
     path = resolve_path(path)

From 446cb74d37bcc9f3c0c19158d3a972ce92b758d4 Mon Sep 17 00:00:00 2001
From: cibernox <265339+cibernox@users.noreply.github.com>
Date: Fri, 17 Jan 2025 19:17:44 +0000
Subject: [PATCH 03/10] auto format code

---
 .../SelectedElementFloatingMenu/DragMenuOption.svelte         | 4 +++-
 lib/beacon/live_admin/live/page_editor_live/edit.ex           | 1 +
 lib/beacon/live_admin/live/page_editor_live/form_component.ex | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte b/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
index 5d04a70c..a71bb1b9 100644
--- a/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
+++ b/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
@@ -170,7 +170,9 @@
   }
 
   function applyNewOrder() {
-    let [parent, parentId] = isParent ? [$grandParentOfSelectedAstElement, $grandParentSelectedAstElementId] : [$parentOfSelectedAstElement, $parentSelectedAstElementId]
+    let [parent, parentId] = isParent
+      ? [$grandParentOfSelectedAstElement, $grandParentSelectedAstElementId]
+      : [$parentOfSelectedAstElement, $parentSelectedAstElementId]
 
     if (newIndex !== null && newIndex !== dragElementInfo.selectedIndex && !!parent) {
       // Reordering happened, apply new order
diff --git a/lib/beacon/live_admin/live/page_editor_live/edit.ex b/lib/beacon/live_admin/live/page_editor_live/edit.ex
index e23838b6..90fc99e5 100644
--- a/lib/beacon/live_admin/live/page_editor_live/edit.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/edit.ex
@@ -62,6 +62,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Edit do
       path: path,
       node: node
     )
+
     {:noreply, socket}
   end
 
diff --git a/lib/beacon/live_admin/live/page_editor_live/form_component.ex b/lib/beacon/live_admin/live/page_editor_live/form_component.ex
index e223a9fc..51406491 100644
--- a/lib/beacon/live_admin/live/page_editor_live/form_component.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/form_component.ex
@@ -108,6 +108,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do
      |> assign_form(changeset)
      |> assign_template(template)
      |> assign(builder_page_ast: ast)}
+
     {:ok, socket}
   end
 

From db1a55fb94ecc6d3d36761a286c6dbc80e2354c0 Mon Sep 17 00:00:00 2001
From: Miguel Camba <miguel.camba@gmail.com>
Date: Fri, 17 Jan 2025 20:47:47 +0100
Subject: [PATCH 04/10] Finally working

---
 lib/beacon/live_admin/live/page_editor_live/form_component.ex | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/beacon/live_admin/live/page_editor_live/form_component.ex b/lib/beacon/live_admin/live/page_editor_live/form_component.ex
index 51406491..2a5f4721 100644
--- a/lib/beacon/live_admin/live/page_editor_live/form_component.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/form_component.ex
@@ -108,8 +108,6 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do
      |> assign_form(changeset)
      |> assign_template(template)
      |> assign(builder_page_ast: ast)}
-
-    {:ok, socket}
   end
 
   @impl true

From 1ec9cd1ed577b58df023a198b65957e4c7d31d52 Mon Sep 17 00:00:00 2001
From: Miguel Camba <miguel.camba@gmail.com>
Date: Fri, 17 Jan 2025 20:48:23 +0100
Subject: [PATCH 05/10] Remove commented code

---
 .../SelectedElementFloatingMenu/DragMenuOption.svelte           | 2 --
 1 file changed, 2 deletions(-)

diff --git a/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte b/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
index a71bb1b9..02867728 100644
--- a/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
+++ b/assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
@@ -192,10 +192,8 @@
         parts[parts.length - 1] = newSelectedIndex.toString()
         $selectedAstElementId = parts.join(".")
       }
-      // $pageAst = [...$pageAst]
       // Update in the server
       $live.pushEvent("update_page_node", { id: $pageInfo.id, node_id: parentId, node: parent })
-      // $live.pushEvent("update_page_ast", { id: $pageInfo.id, ast: $pageAst })
     }
   }
 

From 70679e65b145072b6dd2070f5808379e8973f0b1 Mon Sep 17 00:00:00 2001
From: Miguel Camba <miguel.camba@gmail.com>
Date: Fri, 17 Jan 2025 21:13:55 +0100
Subject: [PATCH 06/10] Use fine grained updates when editing content too

---
 assets/svelte/components/PageAstNode.svelte   |   7 +-
 .../svelte/components/SidebarSection.svelte   | 229 ------------------
 assets/svelte/utils/ast-manipulation.ts       |   9 +-
 3 files changed, 11 insertions(+), 234 deletions(-)
 delete mode 100644 assets/svelte/components/SidebarSection.svelte

diff --git a/assets/svelte/components/PageAstNode.svelte b/assets/svelte/components/PageAstNode.svelte
index b74d582f..4c02e762 100644
--- a/assets/svelte/components/PageAstNode.svelte
+++ b/assets/svelte/components/PageAstNode.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import {
+    selectedAstElementId,
     selectedAstElement,
     slotTargetElement,
     highlightedAstElement,
@@ -8,7 +9,7 @@
     setSelectedDom,
   } from "$lib/stores/page"
   import { draggedComponentDefinition } from "$lib/stores/dragAndDrop"
-  import { updateNodeContent, updateAst } from "$lib/utils/ast-manipulation"
+  import { updateNodeContent, updateNode } from "$lib/utils/ast-manipulation"
   import { elementCanBeDroppedInTarget } from "$lib/utils/drag-helpers"
   import type { AstNode } from "$lib/types"
   export let node: AstNode
@@ -88,7 +89,7 @@
     }
     if (children.length === 0) {
       if (target.innerText !== node.content) {
-        updateNodeContent(node, target.innerText)
+        updateNodeContent($selectedAstElementId, node, target.innerText)
       }
     } else {
       let tmpClone = target.cloneNode(true) as HTMLElement
@@ -97,7 +98,7 @@
       let newText = tmpClone.textContent?.trim() || ""
       if (node.content[stringChildIndex] !== newText) {
         node.content[stringChildIndex] = newText
-        updateAst()
+        updateNode($selectedAstElementId, node);
       }
     }
   }
diff --git a/assets/svelte/components/SidebarSection.svelte b/assets/svelte/components/SidebarSection.svelte
deleted file mode 100644
index acfd1b40..00000000
--- a/assets/svelte/components/SidebarSection.svelte
+++ /dev/null
@@ -1,229 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte"
-  import type { AstElement, AstNode } from "$lib/types"
-  import { highlightedAstElement, findAstElementId, selectedAstElementId, isAstElement } from "$lib/stores/page"
-  // import CodeEditor from "./CodeEditor.svelte"
-
-  const dispatch = createEventDispatcher()
-  export let value: string | null = ""
-  export let astNodes: AstNode[] | null = null
-  export let clearOnUpdate = false
-  export let expanded = true
-  export let placeholder: string = ""
-  export let large: boolean = false
-  export let disableDelete: boolean = false
-  export let disabled: boolean = false
-  $: astElements = (astNodes || []).filter(isAstElement)
-
-  function highlightAstElement(astElement: AstElement) {
-    $highlightedAstElement = astElement
-  }
-  function unhighlightAstElement() {
-    $highlightedAstElement = undefined
-  }
-
-  function deleteAttribute() {
-    if (confirm("Are you sure you want to delete this attribute?")) {
-      dispatch("delete")
-    }
-  }
-
-  let internalValue: string | null = astElements ? null : value
-  $: {
-    if (astNodes?.length === 1) {
-      let first = astNodes[0]
-      if (!isAstElement(first)) {
-        internalValue = first
-      }
-    } else if (astNodes) {
-      internalValue = null
-    }
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (!(e.target instanceof HTMLInputElement)) return
-    let text = e.target.value
-    if (e.key === "Enter" && text && text.length > 0 && text !== value) {
-      dispatch("update", text)
-      if (clearOnUpdate) {
-        internalValue = null
-        e.target.value = ""
-      }
-    }
-  }
-  function handleTextChange(e: Event) {
-    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
-      dispatch("textChange", e.target.value)
-    }
-  }
-  function select(astElement: AstElement) {
-    let id = findAstElementId(astElement)
-    $selectedAstElementId = id
-  }
-  function moveAstElement(movement: number, astElement: AstElement) {
-    if (!astNodes) return
-    let astNodesCopy = Array.from(astNodes)
-    let index = astNodesCopy.indexOf(astElement)
-    astNodesCopy.splice(index, 1)
-    astNodesCopy.splice(index + movement, 0, astElement)
-    dispatch("nodesChange", astNodesCopy)
-  }
-
-  function updateNodeContents(e: Event, idx: number) {
-    let astNodesCopy = [...astNodes]
-    astNodesCopy[idx] = (e.target as HTMLInputElement).value
-    dispatch("nodesChange", astNodesCopy)
-  }
-</script>
-
-<section class="p-4 border-b border-b-gray-100 border-solid">
-  <header class="flex items-center text-sm mb-2 font-medium">
-    <button
-      type="button"
-      class="w-full flex items-center justify-between gap-x-1 p-1 font-semibold group"
-      on:click={() => (expanded = !expanded)}
-      aria-expanded={expanded}
-    >
-      <span>
-        <span class="hover:text-blue-700 active:text-blue-900"><slot name="heading" /></span>
-        {#if !disableDelete}
-          <button type="button" class="ml-4" title="Delete attribute" on:click|stopPropagation={deleteAttribute}
-            ><span class="hero-trash text-red hover:text-red"></span></button
-          >
-        {/if}
-      </span>
-      <span class={expanded ? "" : " [&_path]:origin-center [&_path]:rotate-180"}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-5 h-5 stroke-slate-500 fill-slate-500 group-hover:stroke-current group-hover:fill-current"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06l7.5-7.5Z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
-    <!-- Classes -->
-  </header>
-  {#if $$slots["value"]}
-    <slot name="input">
-      <input
-        type="text"
-        class="w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm"
-        {placeholder}
-        value={internalValue}
-        on:keydown={handleKeydown}
-        on:change={handleTextChange}
-      />
-    </slot>
-    <div class="pt-3"><slot name="value" /></div>
-  {:else if expanded}
-    <slot name="input">
-      {#if internalValue}
-        {#if large}
-          <!-- <CodeEditor value={internalValue} on:change={(e) => dispatch('textChange', e.detail)}/> -->
-          <textarea
-            class="w-full py-1 px-2 bg-slate-100 border-slate-100 rounded-md leading-6 text-sm"
-            {placeholder}
-            value={internalValue}
-            {disabled}
-            on:keydown={handleKeydown}
-            on:change={handleTextChange}
-          ></textarea>
-        {:else}
-          <input
-            type="text"
-            class="w-full py-1 px-2 bg-slate-100 border-slate-100 rounded-md leading-6 text-sm"
-            {placeholder}
-            value={internalValue}
-            on:keydown={handleKeydown}
-            on:change={handleTextChange}
-          />
-        {/if}
-        {#if $$slots["value"]}
-          <div class="pt-3"><slot name="value" /></div>
-        {/if}
-      {:else if astNodes}
-        {#each astNodes as astNode, idx}
-          {#if isAstElement(astNode)}
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
-            <div
-              on:mouseenter={() => highlightAstElement(astNode)}
-              on:mouseleave={() => unhighlightAstElement()}
-              class="mt-5"
-            >
-              <div class="flex items-center justify-between">
-                <span><code>&lt;{astNode.tag}&gt;</code></span>
-                <button
-                  class="flex items-center justify-center gap-x-0.5 px-2 py-1 bg-cyan-300 font-bold text-xs uppercase tracking-wide rounded transition-colors hover:bg-cyan-900 active:bg-cyan-700 hover:text-white"
-                  on:click={() => select(astNode)}
-                >
-                  Edit <span class="sr-only">{astNode.tag} element</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3">
-                    <path
-                      d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"
-                    />
-                    <path
-                      d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div class="mt-2 grid grid-cols-2 gap-x-1">
-                <button
-                  class="flex items-center justify-center gap-x-0.5 px-1.5 py-1 bg-cyan-800 font-bold text-xs uppercase tracking-wide rounded hover:bg-cyan-950 active:bg-cyan-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white"
-                  disabled={idx === 0}
-                  on:click={() => moveAstElement(-1, astNode)}
-                >
-                  <span>Move <span class="sr-only">{astNode.tag} element</span> up</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3">
-                    <path
-                      fill-rule="evenodd"
-                      d="M11.47 2.47a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06l-6.22-6.22V21a.75.75 0 0 1-1.5 0V4.81l-6.22 6.22a.75.75 0 1 1-1.06-1.06l7.5-7.5Z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </button>
-                <button
-                  class="flex items-center justify-center gap-x-0.5 px-1.5 py-1 bg-cyan-800 font-bold text-xs uppercase tracking-wide rounded hover:bg-cyan-950 active:bg-cyan-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white"
-                  disabled={idx === astNodes.length - 1}
-                  on:click={() => moveAstElement(1, astNode)}
-                >
-                  <span>Move <span class="sr-only">{astNode.tag} element</span> down</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3">
-                    <path
-                      fill-rule="evenodd"
-                      d="M12 2.25a.75.75 0 0 1 .75.75v16.19l6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.5 7.5a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 1 1 1.06-1.06l6.22 6.22V3a.75.75 0 0 1 .75-.75Z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          {:else if large}
-            <textarea
-              class="w-full py-1 px-2 bg-slate-100 border-slate-100 rounded-md leading-6 text-sm"
-              {placeholder}
-              value={astNode}
-              on:keydown={handleKeydown}
-              on:change={(e) => updateNodeContents(e, idx)}
-            ></textarea>
-          {:else}
-            <input
-              type="text"
-              class="w-full py-1 px-2 mt-5 bg-slate-100 border-slate-100 rounded-md leading-6 text-sm"
-              {placeholder}
-              value={astNode}
-              on:keydown={handleKeydown}
-              on:change={(e) => updateNodeContents(e, idx)}
-            />
-          {/if}
-        {/each}
-      {/if}
-    </slot>
-  {/if}
-</section>
diff --git a/assets/svelte/utils/ast-manipulation.ts b/assets/svelte/utils/ast-manipulation.ts
index e08eaf5c..4aca4eb8 100644
--- a/assets/svelte/utils/ast-manipulation.ts
+++ b/assets/svelte/utils/ast-manipulation.ts
@@ -4,10 +4,10 @@ import { get } from "svelte/store"
 import type { AstNode, Page, PageInfo } from "$lib/types"
 import { getParentNodeId } from "./ast-helpers"
 
-export function updateNodeContent(node, text) {
+export function updateNodeContent(path, node, text) {
   if (node && isAstElement(node)) {
     node.content = [text]
-    updateAst()
+    updateNode(path, node)
   }
 }
 
@@ -17,6 +17,11 @@ export function updateAst() {
   let live = get(liveStore)
   live.pushEvent("update_page_ast", { id: info.id, ast })
 }
+export function updateNode(path, node) {
+  let live = get(liveStore)
+  let info: PageInfo = get(pageInfo)
+  live.pushEvent("update_page_node", { id: info.id, node_id: path, node: node })
+}
 
 export function deleteAstNode(astElementId: string) {
   let ast: AstNode[] = get(pageAst)

From 0baeb0656c010f272d38da1416c229fa4e5ee783 Mon Sep 17 00:00:00 2001
From: cibernox <265339+cibernox@users.noreply.github.com>
Date: Fri, 17 Jan 2025 20:37:42 +0000
Subject: [PATCH 07/10] auto format code

---
 assets/svelte/components/PageAstNode.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/svelte/components/PageAstNode.svelte b/assets/svelte/components/PageAstNode.svelte
index 4c02e762..6d3c493a 100644
--- a/assets/svelte/components/PageAstNode.svelte
+++ b/assets/svelte/components/PageAstNode.svelte
@@ -98,7 +98,7 @@
       let newText = tmpClone.textContent?.trim() || ""
       if (node.content[stringChildIndex] !== newText) {
         node.content[stringChildIndex] = newText
-        updateNode($selectedAstElementId, node);
+        updateNode($selectedAstElementId, node)
       }
     }
   }

From d260195838b6d623b0e3f3b299ff4d1ead51e94d Mon Sep 17 00:00:00 2001
From: Miguel Camba <miguel.camba@gmail.com>
Date: Fri, 17 Jan 2025 21:39:10 +0100
Subject: [PATCH 08/10] Fix node deletion

---
 assets/svelte/utils/ast-manipulation.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/assets/svelte/utils/ast-manipulation.ts b/assets/svelte/utils/ast-manipulation.ts
index 4aca4eb8..c4219bf1 100644
--- a/assets/svelte/utils/ast-manipulation.ts
+++ b/assets/svelte/utils/ast-manipulation.ts
@@ -17,6 +17,7 @@ export function updateAst() {
   let live = get(liveStore)
   live.pushEvent("update_page_ast", { id: info.id, ast })
 }
+
 export function updateNode(path, node) {
   let live = get(liveStore)
   let info: PageInfo = get(pageInfo)
@@ -28,10 +29,21 @@ export function deleteAstNode(astElementId: string) {
 
   let astElement = findAstElement(ast, astElementId)
   let parentId = getParentNodeId(astElementId)
-  let content = parentId && parentId !== "root" ? findAstElement(ast, parentId)?.content : ast
+  let content;
+  let parentNode;
+  if (parentId && parentId !== "root") {
+    parentNode = findAstElement(ast, parentId);
+    content = parentNode.content;
+  } else {
+    content = ast
+  }
   if (content) {
     let targetIndex = (content as unknown[]).indexOf(astElement)
-    content.splice(targetIndex, 1)
-    updateAst()
+    content.splice(targetIndex, 1);
+    if (parentNode) {
+      updateNode(parentId, parentNode)
+    } else {
+      updateAst()
+    }
   }
 }

From 9da9f01ecfece112e37a3a68ec431d915b78f4cf Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Fri, 17 Jan 2025 16:46:09 -0500
Subject: [PATCH 09/10] update_node on new pages

---
 lib/beacon/live_admin/live/page_editor_live/edit.ex |  1 -
 lib/beacon/live_admin/live/page_editor_live/new.ex  | 10 ++++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/lib/beacon/live_admin/live/page_editor_live/edit.ex b/lib/beacon/live_admin/live/page_editor_live/edit.ex
index 90fc99e5..4ec4e3be 100644
--- a/lib/beacon/live_admin/live/page_editor_live/edit.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/edit.ex
@@ -56,7 +56,6 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Edit do
   end
 
   def handle_event("update_page_node", %{"node_id" => path, "node" => node}, socket) do
-    # TODO: update the ast node
     send_update(Beacon.LiveAdmin.PageEditorLive.FormComponent,
       id: "page-editor-form",
       path: path,
diff --git a/lib/beacon/live_admin/live/page_editor_live/new.ex b/lib/beacon/live_admin/live/page_editor_live/new.ex
index 88274b28..3a5a27f8 100644
--- a/lib/beacon/live_admin/live/page_editor_live/new.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/new.ex
@@ -88,6 +88,16 @@ defmodule Beacon.LiveAdmin.PageEditorLive.New do
     {:noreply, socket}
   end
 
+  def handle_event("update_page_node", %{"node_id" => path, "node" => node}, socket) do
+    send_update(Beacon.LiveAdmin.PageEditorLive.FormComponent,
+      id: "page-editor-form",
+      path: path,
+      node: node
+    )
+
+    {:noreply, socket}
+  end
+
   def handle_event("select_element", %{"path" => path}, socket) do
     ElementSelection.select_element(path, socket)
   end

From 03fbe1bafe7f98a4a20d8cb839d0cf81def94c91 Mon Sep 17 00:00:00 2001
From: cibernox <265339+cibernox@users.noreply.github.com>
Date: Fri, 17 Jan 2025 22:02:39 +0000
Subject: [PATCH 10/10] auto format code

---
 assets/svelte/utils/ast-manipulation.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/svelte/utils/ast-manipulation.ts b/assets/svelte/utils/ast-manipulation.ts
index c4219bf1..6529f5c1 100644
--- a/assets/svelte/utils/ast-manipulation.ts
+++ b/assets/svelte/utils/ast-manipulation.ts
@@ -29,17 +29,17 @@ export function deleteAstNode(astElementId: string) {
 
   let astElement = findAstElement(ast, astElementId)
   let parentId = getParentNodeId(astElementId)
-  let content;
-  let parentNode;
+  let content
+  let parentNode
   if (parentId && parentId !== "root") {
-    parentNode = findAstElement(ast, parentId);
-    content = parentNode.content;
+    parentNode = findAstElement(ast, parentId)
+    content = parentNode.content
   } else {
     content = ast
   }
   if (content) {
     let targetIndex = (content as unknown[]).indexOf(astElement)
-    content.splice(targetIndex, 1);
+    content.splice(targetIndex, 1)
     if (parentNode) {
       updateNode(parentId, parentNode)
     } else {