From 0d5cb898d53e1cb2e169b1c0cfac8937664cba33 Mon Sep 17 00:00:00 2001
From: Alexander Don <alexdon20022@gmail.com>
Date: Sun, 15 Mar 2026 23:47:54 +0200
Subject: [PATCH] Integrate Leaf editor into PhoenixKit

Bundle leaf.js into phoenix_kit.js and register the Leaf hook globally.
Switch Posts editor from MarkdownEditor to Leaf with visual mode default.
Update media insertion JS and add Leaf message handlers in the edit LiveView.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 lib/modules/posts/web/edit.ex        |   20 +-
 lib/modules/posts/web/edit.html.heex |   27 +-
 mix.exs                              |    3 +
 mix.lock                             |    1 +
 priv/static/assets/phoenix_kit.js    | 2033 ++++++++++++++++++++++++++
 5 files changed, 2070 insertions(+), 14 deletions(-)

diff --git a/lib/modules/posts/web/edit.ex b/lib/modules/posts/web/edit.ex
index 21acdb1cb..ee68caa19 100644
--- a/lib/modules/posts/web/edit.ex
+++ b/lib/modules/posts/web/edit.ex
@@ -110,7 +110,7 @@ defmodule PhoenixKitWeb.Live.Modules.Posts.Edit do
   @impl true
   def handle_event("save", %{"post" => post_params}, socket) do
     # Merge content from assigns (stored separately from form)
-    content = socket.assigns.content
+    content = socket.assigns[:live_content] || socket.assigns.content
     post_params = Map.put(post_params, "content", content)
 
     # Parse tags from content if auto-tagging is enabled
@@ -215,14 +215,13 @@ defmodule PhoenixKitWeb.Live.Modules.Posts.Edit do
     end
   end
 
-  # Handle content changes from MarkdownEditor component
+  # Handle content changes from MarkdownEditor/Leaf component
   @impl true
   def handle_info(
-        {:editor_content_changed, %{content: content, editor_id: "post-content-editor"}},
+        {:editor_content_changed, %{content: content, editor_id: "post-content-editor" <> _}},
         socket
       ) do
-    # Store content as a separate assign (like Publishing editor does)
-    {:noreply, assign(socket, :content, content)}
+    {:noreply, assign(socket, :live_content, content)}
   end
 
   # Handle image/video insert from MarkdownEditor toolbar
@@ -324,6 +323,17 @@ defmodule PhoenixKitWeb.Live.Modules.Posts.Edit do
      |> assign(:selecting_featured_image, false)}
   end
 
+  # Handle Leaf editor messages
+  def handle_info({:leaf_changed, %{markdown: content}}, socket) do
+    {:noreply, assign(socket, :live_content, content)}
+  end
+
+  def handle_info({:leaf_insert_request, %{type: type}}, socket) do
+    handle_info({:editor_insert_component, %{type: type}}, socket)
+  end
+
+  def handle_info({:leaf_mode_changed, _}, socket), do: {:noreply, socket}
+
   # Catch-all for other editor events
   def handle_info({:editor_insert_component, _}, socket), do: {:noreply, socket}
   def handle_info({:editor_save_requested, _}, socket), do: {:noreply, socket}
diff --git a/lib/modules/posts/web/edit.html.heex b/lib/modules/posts/web/edit.html.heex
index 1c521e880..41eba85d9 100644
--- a/lib/modules/posts/web/edit.html.heex
+++ b/lib/modules/posts/web/edit.html.heex
@@ -143,15 +143,14 @@
                     </span>
                   </label>
                   <.live_component
-                    module={PhoenixKitWeb.Components.Core.MarkdownEditor}
+                    module={Leaf}
                     id="post-content-editor"
                     content={@content}
+                    mode={:visual}
                     placeholder="Write your post content here... Use #hashtags for auto-tagging"
                     height="400px"
                     debounce={400}
                     toolbar={[:image, :video]}
-                    protect_navigation={false}
-                    script_nonce={assigns[:csp_nonce] || ""}
                   />
                   <label class="label">
                     <span class="label-text-alt text-base-content/70">
@@ -471,12 +470,24 @@
   />
 
   <script>
-    // Function to insert standard markdown media syntax at cursor position
+    // Function to insert media into Leaf editor at cursor position
     window.postsEditorInsertMedia = function(fileUrl, mediaType) {
-      const textarea = document.getElementById('post-content-editor-textarea');
+      // Try visual mode first (contenteditable div)
+      const visualEl = document.getElementById('post-content-editor-visual');
+      if (visualEl) {
+        visualEl.focus();
+        const altText = mediaType === 'image' ? 'Image description' : 'Video';
+        const html = '<img src="' + fileUrl + '" alt="' + altText + '" />';
+        document.execCommand('insertHTML', false, html);
+        // Trigger input event so Leaf picks up the change
+        visualEl.dispatchEvent(new Event('input', { bubbles: true }));
+        return;
+      }
+
+      // Markdown mode fallback
+      const textarea = document.getElementById('post-content-editor-markdown-textarea');
       if (!textarea) return;
 
-      // Build standard markdown syntax: ![alt](url)
       const altText = mediaType === 'image' ? 'Image description' : 'Video';
       const template = '![' + altText + '](' + fileUrl + ')';
 
@@ -487,13 +498,11 @@
       const newValue = currentValue.substring(0, start) + template + currentValue.substring(end);
       textarea.value = newValue;
 
-      // Move cursor after inserted text
       const newPos = start + template.length;
       textarea.selectionStart = textarea.selectionEnd = newPos;
       textarea.focus();
 
-      // Trigger keyup event to update LiveView
-      textarea.dispatchEvent(new KeyboardEvent("keyup", { bubbles: true }));
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
     };
 
     // Handle exec-js event from server
diff --git a/mix.exs b/mix.exs
index 80cd0f7fe..4a62217cd 100644
--- a/mix.exs
+++ b/mix.exs
@@ -107,6 +107,9 @@ defmodule PhoenixKit.MixProject do
       {:floki, ">= 0.30.0", only: :test},
       {:hackney, "~> 1.9"},
 
+      # Content editor
+      {:leaf, "~> 0.1.0"},
+
       # Utilities
       {:jason, "~> 1.4"},
       {:earmark, "~> 1.4"},
diff --git a/mix.lock b/mix.lock
index 10ad78f4c..b45fcc5bb 100644
--- a/mix.lock
+++ b/mix.lock
@@ -39,6 +39,7 @@
   "igniter": {:hex, :igniter, "0.7.1", "ac006dc954de0760e5d284a465f7e68a919190232b61dd1616df0e1c8d8e3a0f", [:mix], [{:glob_ex, "~> 0.1.7", [hex: :glob_ex, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:owl, "~> 0.11", [hex: :owl, repo: "hexpm", optional: false]}, {:phx_new, "~> 1.7", [hex: :phx_new, repo: "hexpm", optional: true]}, {:req, "~> 0.5", [hex: :req, repo: "hexpm", optional: false]}, {:rewrite, ">= 1.1.1 and < 2.0.0-0", [hex: :rewrite, repo: "hexpm", optional: false]}, {:sourceror, "~> 1.4", [hex: :sourceror, repo: "hexpm", optional: false]}, {:spitfire, ">= 0.1.3 and < 1.0.0-0", [hex: :spitfire, repo: "hexpm", optional: false]}], "hexpm", "c3100063d73bc3015c6dbc029c115f4d382e3332e77035cc9f708a9731ce7ea4"},
   "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
   "jose": {:hex, :jose, "1.11.12", "06e62b467b61d3726cbc19e9b5489f7549c37993de846dfb3ee8259f9ed208b3", [:mix, :rebar3], [], "hexpm", "31e92b653e9210b696765cdd885437457de1add2a9011d92f8cf63e4641bab7b"},
+  "leaf": {:hex, :leaf, "0.1.0", "36bd03f658ec9b53b41d9858211ce3126e282b6d1c3f43fecaed998f26b2af4e", [:mix], [{:earmark, "~> 1.4", [hex: :earmark, repo: "hexpm", optional: false]}, {:gettext, "~> 0.26 or ~> 1.0", [hex: :gettext, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "2d1782852deb20432773e53d24ebd905476d2a1f9f1981609fed648799d07498"},
   "makeup": {:hex, :makeup, "1.2.1", "e90ac1c65589ef354378def3ba19d401e739ee7ee06fb47f94c687016e3713d1", [:mix], [{:nimble_parsec, "~> 1.4", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "d36484867b0bae0fea568d10131197a4c2e47056a6fbe84922bf6ba71c8d17ce"},
   "makeup_elixir": {:hex, :makeup_elixir, "1.0.1", "e928a4f984e795e41e3abd27bfc09f51db16ab8ba1aebdba2b3a575437efafc2", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "7284900d412a3e5cfd97fdaed4f5ed389b8f2b4cb49efc0eb3bd10e2febf9507"},
   "makeup_erlang": {:hex, :makeup_erlang, "1.0.3", "4252d5d4098da7415c390e847c814bad3764c94a814a0b4245176215615e1035", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "953297c02582a33411ac6208f2c6e55f0e870df7f80da724ed613f10e6706afd"},
diff --git a/priv/static/assets/phoenix_kit.js b/priv/static/assets/phoenix_kit.js
index 2630daa8a..9a3a20b8b 100644
--- a/priv/static/assets/phoenix_kit.js
+++ b/priv/static/assets/phoenix_kit.js
@@ -1646,6 +1646,2039 @@ if (typeof window.Chart === "undefined") {
   };
 
 
+  // ============================================================================
+  // LEAF EDITOR
+  // ============================================================================
+
+/**
+ * Leaf — Dual Mode Content Editor (Visual + Markdown)
+ *
+ * Standalone vanilla JS. No build step, no npm dependencies.
+ * Visual mode uses contenteditable + execCommand.
+ * Markdown mode uses a plain textarea with toolbar support.
+ * Content syncs between modes via server-side conversion (Earmark) and
+ * client-side HTML→Markdown conversion.
+ *
+ * SETUP: Add the hook to your app.js:
+ *
+ *   import "../../../deps/leaf/priv/static/assets/leaf.js"
+ *
+ *   let Hooks = {
+ *     Leaf: window.LeafHooks.Leaf,
+ *     // ... your other hooks
+ *   }
+ */
+(function () {
+  "use strict";
+
+  if (window.LeafEditorLoaded) return;
+  window.LeafEditorLoaded = true;
+
+  window.LeafHooks = window.LeafHooks || {};
+
+  // =========================================================================
+  // Inject CSS styles for the visual editor
+  // =========================================================================
+
+  var EDITOR_CSS = [
+    // Placeholder
+    ".content-editor-visual:empty::before {",
+    "  content: attr(data-placeholder);",
+    "  color: color-mix(in oklab, var(--color-base-content, #1f2937) 35%, transparent);",
+    "  pointer-events: none;",
+    "  position: absolute;",
+    "}",
+    ".content-editor-visual { position: relative; -webkit-user-select: text; user-select: text; }",
+
+    // Typography
+    ".content-editor-visual h1 { font-size: 2em; font-weight: 700; margin: 0.67em 0; line-height: 1.2; }",
+    ".content-editor-visual h2 { font-size: 1.5em; font-weight: 600; margin: 0.6em 0; line-height: 1.3; }",
+    ".content-editor-visual h3 { font-size: 1.25em; font-weight: 600; margin: 0.5em 0; line-height: 1.4; }",
+    ".content-editor-visual h4 { font-size: 1.1em; font-weight: 600; margin: 0.4em 0; line-height: 1.4; }",
+    ".content-editor-visual p { margin: 0.5em 0; }",
+    ".content-editor-visual p:first-child, .content-editor-visual h1:first-child,",
+    "  .content-editor-visual h2:first-child, .content-editor-visual h3:first-child { margin-top: 0; }",
+
+    // Inline
+    ".content-editor-visual strong, .content-editor-visual b { font-weight: 700; }",
+    ".content-editor-visual em, .content-editor-visual i { font-style: italic; }",
+    ".content-editor-visual s, .content-editor-visual del, .content-editor-visual strike { text-decoration: line-through; }",
+    ".content-editor-visual u { text-decoration: underline; }",
+    ".content-editor-visual code {",
+    "  background: var(--color-base-200, #e5e7eb); border-radius: 0.25rem;",
+    "  padding: 0.1em 0.35em; font-family: monospace; font-size: 0.9em;",
+    "}",
+
+    // Code blocks
+    ".content-editor-visual pre {",
+    "  background: var(--color-base-200, #e5e7eb); border-radius: 0.5rem;",
+    "  padding: 0.75rem 1rem; margin: 0.75em 0; overflow-x: auto;",
+    "  font-family: monospace; font-size: 0.875rem; line-height: 1.6;",
+    "}",
+    ".content-editor-visual pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }",
+
+    // Blockquote
+    ".content-editor-visual blockquote {",
+    "  border-left: 3px solid color-mix(in oklab, var(--color-base-content, #1f2937) 25%, transparent);",
+    "  padding-left: 1rem; margin: 0.75em 0;",
+    "  color: color-mix(in oklab, var(--color-base-content, #1f2937) 70%, transparent);",
+    "}",
+
+    // Lists
+    ".content-editor-visual ul { list-style-type: disc; padding-left: 1.5rem; margin: 0.5em 0; }",
+    ".content-editor-visual ol { list-style-type: decimal; padding-left: 1.5rem; margin: 0.5em 0; }",
+    ".content-editor-visual li { margin: 0.2em 0; }",
+    ".content-editor-visual li > p { margin: 0; }",
+
+    // Links
+    ".content-editor-visual a { color: var(--color-primary, #3b82f6); text-decoration: underline; cursor: text; }",
+    ".content-editor-visual a:hover { opacity: 0.8; }",
+
+    // Images
+    ".content-editor-visual img {",
+    "  max-width: 100%; height: auto; border-radius: 0.5rem; margin: 0.75em 0;",
+    "  cursor: pointer;",
+    "}",
+    ".content-editor-visual img.leaf-img-selected {",
+    "  outline: 2px solid var(--color-primary, #3b82f6);",
+    "  outline-offset: 2px;",
+    "}",
+
+    // Image resize handles
+    ".leaf-resize-handle {",
+    "  position: absolute; width: 10px; height: 10px;",
+    "  background: var(--color-base-100, #fff);",
+    "  border: 2px solid var(--color-primary, #3b82f6);",
+    "  border-radius: 2px; z-index: 51;",
+    "}",
+    ".leaf-resize-handle--nw { cursor: nw-resize; }",
+    ".leaf-resize-handle--ne { cursor: ne-resize; }",
+    ".leaf-resize-handle--sw { cursor: sw-resize; }",
+    ".leaf-resize-handle--se { cursor: se-resize; }",
+
+    // Drag-and-drop indicator
+    ".leaf-drop-indicator {",
+    "  position: absolute; left: 0; right: 0; height: 3px;",
+    "  background: var(--color-primary, #3b82f6);",
+    "  border-radius: 2px; pointer-events: none; z-index: 50;",
+    "  transition: top 0.05s ease-out;",
+    "}",
+    ".leaf-dragging {",
+    "  opacity: 0.35 !important;",
+    "  outline: 2px dashed var(--color-primary, #3b82f6) !important;",
+    "  outline-offset: 2px;",
+    "}",
+
+    // Block drag handle
+    ".leaf-drag-handle {",
+    "  position: absolute; z-index: 52;",
+    "  display: flex; align-items: center; justify-content: center;",
+    "  width: 28px; height: 28px;",
+    "  cursor: grab; border-radius: 6px;",
+    "  color: color-mix(in oklab, var(--color-base-content, #1f2937) 30%, transparent);",
+    "  background: transparent;",
+    "  transition: color 0.1s, background 0.1s;",
+    "  user-select: none; -webkit-user-select: none;",
+    "}",
+    ".leaf-drag-handle:hover {",
+    "  color: color-mix(in oklab, var(--color-base-content, #1f2937) 60%, transparent);",
+    "  background: color-mix(in oklab, var(--color-base-content, #1f2937) 8%, transparent);",
+    "}",
+    ".leaf-drag-handle:active { cursor: grabbing; }",
+    ".leaf-drag-handle svg { width: 18px; height: 18px; pointer-events: none; }",
+
+    // Horizontal rule
+    ".content-editor-visual hr {",
+    "  border: none;",
+    "  border-top: 1px solid color-mix(in oklab, var(--color-base-content, #1f2937) 15%, transparent);",
+    "  margin: 1.5em 0;",
+    "}",
+
+    // Selection
+    ".content-editor-visual ::selection { background-color: Highlight !important; color: HighlightText !important; }",
+    ".content-editor-visual *::selection { background-color: Highlight !important; color: HighlightText !important; }",
+
+    // Link popover — floating island
+    ".leaf-link-popover {",
+    "  position: absolute; z-index: 50;",
+    "  display: flex; align-items: center; gap: 0.5rem;",
+    "  background: var(--color-base-200, #e5e7eb); color: var(--color-base-content, #1f2937);",
+    "  border: 1px solid var(--color-base-300, #d1d5db);",
+    "  border-radius: 9999px; padding: 0.4rem 0.5rem 0.4rem 0.75rem;",
+    "  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);",
+    "  font-size: 0.8125rem; line-height: 1;",
+    "  animation: leaf-popover-in 0.15s ease-out;",
+    "  white-space: nowrap;",
+    "}",
+    "@keyframes leaf-popover-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }",
+    ".leaf-link-popover a {",
+    "  color: var(--color-primary, #3b82f6); text-decoration: none; max-width: 220px;",
+    "  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;",
+    "}",
+    ".leaf-link-popover a:hover { text-decoration: underline; }",
+    ".leaf-link-popover .leaf-popover-actions {",
+    "  display: flex; align-items: center; gap: 0.125rem;",
+    "  background: color-mix(in oklab, var(--color-base-content, #1f2937) 8%, transparent);",
+    "  border-radius: 9999px; padding: 0.125rem;",
+    "}",
+    ".leaf-link-popover button {",
+    "  background: none; border: none; cursor: pointer; padding: 0.3rem;",
+    "  border-radius: 9999px; color: color-mix(in oklab, var(--color-base-content, #1f2937) 50%, transparent);",
+    "  display: flex; align-items: center;",
+    "  transition: background 0.1s, color 0.1s;",
+    "}",
+    ".leaf-link-popover button:hover {",
+    "  background: color-mix(in oklab, var(--color-base-content, #1f2937) 12%, transparent);",
+    "  color: var(--color-base-content, #1f2937);",
+    "}",
+    ".leaf-link-popover .leaf-popover-divider {",
+    "  width: 1px; height: 0.875rem;",
+    "  background: color-mix(in oklab, var(--color-base-content, #1f2937) 15%, transparent);",
+    "}",
+  ].join("\n");
+
+  function injectStyles() {
+    if (document.getElementById("leaf-content-editor-css")) return;
+    var style = document.createElement("style");
+    style.id = "leaf-content-editor-css";
+    style.textContent = EDITOR_CSS;
+    document.head.appendChild(style);
+  }
+
+  // =========================================================================
+  // HTML → Markdown converter (pure DOM walking)
+  // =========================================================================
+
+  function htmlToMarkdown(html) {
+    var container = document.createElement("div");
+    container.innerHTML = html;
+    return nodeToMarkdown(container).trim();
+  }
+
+  function nodeToMarkdown(node) {
+    var result = "";
+    for (var i = 0; i < node.childNodes.length; i++) {
+      result += convertNode(node.childNodes[i]);
+    }
+    return result;
+  }
+
+  function convertNode(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.textContent;
+    }
+
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return "";
+    }
+
+    var tag = node.tagName.toLowerCase();
+    var inner = nodeToMarkdown(node);
+
+    switch (tag) {
+      case "h1":
+        return "\n# " + inner.trim() + "\n\n";
+      case "h2":
+        return "\n## " + inner.trim() + "\n\n";
+      case "h3":
+        return "\n### " + inner.trim() + "\n\n";
+      case "h4":
+        return "\n#### " + inner.trim() + "\n\n";
+      case "h5":
+        return "\n##### " + inner.trim() + "\n\n";
+      case "h6":
+        return "\n###### " + inner.trim() + "\n\n";
+
+      case "p":
+        return inner.trim() + "\n\n";
+
+      case "br":
+        return "\n";
+
+      case "strong":
+      case "b":
+        return "**" + inner + "**";
+
+      case "em":
+      case "i":
+        return "*" + inner + "*";
+
+      case "s":
+      case "del":
+      case "strike":
+        return "~~" + inner + "~~";
+
+      case "code":
+        if (
+          node.parentElement &&
+          node.parentElement.tagName.toLowerCase() === "pre"
+        ) {
+          return inner;
+        }
+        return "`" + inner + "`";
+
+      case "pre":
+        return "\n```\n" + inner.trim() + "\n```\n\n";
+
+      case "a":
+        var href = node.getAttribute("href") || "";
+        return "[" + inner + "](" + href + ")";
+
+      case "img":
+        var src = node.getAttribute("src") || "";
+        var alt = node.getAttribute("alt") || "";
+        var w = node.getAttribute("width");
+        var h = node.getAttribute("height");
+        if (w || h) {
+          var tag = '<img src="' + src + '" alt="' + alt + '"';
+          if (w) tag += ' width="' + w + '"';
+          if (h) tag += ' height="' + h + '"';
+          tag += ' />';
+          return tag;
+        }
+        return "![" + alt + "](" + src + ")";
+
+      case "blockquote":
+        return (
+          "\n" +
+          inner
+            .trim()
+            .split("\n")
+            .map(function (line) {
+              return "> " + line;
+            })
+            .join("\n") +
+          "\n\n"
+        );
+
+      case "ul":
+        return "\n" + convertList(node, "ul") + "\n";
+
+      case "ol":
+        return "\n" + convertList(node, "ol") + "\n";
+
+      case "li":
+        return inner;
+
+      case "hr":
+        return "\n---\n\n";
+
+      case "div":
+        return inner + "\n";
+
+      default:
+        return inner;
+    }
+  }
+
+  function convertList(listNode, type) {
+    var items = [];
+    var index = 1;
+    for (var i = 0; i < listNode.children.length; i++) {
+      var child = listNode.children[i];
+      if (child.tagName.toLowerCase() === "li") {
+        var prefix = type === "ol" ? index + ". " : "- ";
+        var content = nodeToMarkdown(child).trim();
+        items.push(prefix + content);
+        index++;
+      }
+    }
+    return items.join("\n");
+  }
+
+  // =========================================================================
+  // Clean paste — strips Word/Google Docs junk, keeps structure
+  // =========================================================================
+
+  function cleanPastedHtml(html) {
+    var container = document.createElement("div");
+    container.innerHTML = html;
+
+    container.querySelectorAll("[style]").forEach(function (el) {
+      el.removeAttribute("style");
+    });
+
+    container.querySelectorAll("[class]").forEach(function (el) {
+      el.removeAttribute("class");
+    });
+
+    container.querySelectorAll("span").forEach(function (span) {
+      var parent = span.parentNode;
+      while (span.firstChild) {
+        parent.insertBefore(span.firstChild, span);
+      }
+      parent.removeChild(span);
+    });
+
+    container
+      .querySelectorAll("meta, style, link, script, title, xml")
+      .forEach(function (el) {
+        el.remove();
+      });
+
+    container.querySelectorAll("[id]").forEach(function (el) {
+      el.removeAttribute("id");
+    });
+
+    return container.innerHTML;
+  }
+
+  // =========================================================================
+  // Markdown textarea helpers
+  // =========================================================================
+
+  function markdownFormat(textarea, before, after, pushFn) {
+    var start = textarea.selectionStart;
+    var end = textarea.selectionEnd;
+    var text = textarea.value;
+    var selected = text.substring(start, end);
+
+    textarea.value =
+      text.substring(0, start) + before + selected + after + text.substring(end);
+    textarea.selectionStart = start + before.length;
+    textarea.selectionEnd = end + before.length;
+    textarea.focus();
+    if (pushFn) pushFn(textarea.value);
+  }
+
+  function markdownLinePrefix(textarea, prefix, pushFn) {
+    var start = textarea.selectionStart;
+    var text = textarea.value;
+
+    // Find start of current line
+    var lineStart = text.lastIndexOf("\n", start - 1) + 1;
+    var lineEnd = text.indexOf("\n", start);
+    if (lineEnd === -1) lineEnd = text.length;
+
+    var line = text.substring(lineStart, lineEnd);
+
+    // Toggle: if line already starts with prefix, remove it
+    if (line.startsWith(prefix)) {
+      textarea.value =
+        text.substring(0, lineStart) +
+        line.substring(prefix.length) +
+        text.substring(lineEnd);
+      textarea.selectionStart = start - prefix.length;
+      textarea.selectionEnd = start - prefix.length;
+    } else {
+      // Remove existing heading prefixes before adding new one
+      var cleaned = line.replace(/^#{1,6}\s|^[-*+]\s|^\d+\.\s|^>\s/, "");
+      textarea.value =
+        text.substring(0, lineStart) + prefix + cleaned + text.substring(lineEnd);
+      var offset = prefix.length + cleaned.length - line.length;
+      textarea.selectionStart = start + offset;
+      textarea.selectionEnd = start + offset;
+    }
+
+    textarea.focus();
+    if (pushFn) pushFn(textarea.value);
+  }
+
+  function markdownLink(textarea, pushFn) {
+    var start = textarea.selectionStart;
+    var end = textarea.selectionEnd;
+    var text = textarea.value;
+    var selected = text.substring(start, end);
+
+    var url = prompt("Enter URL:", "https://");
+    if (url === null) return;
+
+    var linkText = selected || "link text";
+    var md = "[" + linkText + "](" + url + ")";
+
+    textarea.value = text.substring(0, start) + md + text.substring(end);
+    textarea.selectionStart = start + 1;
+    textarea.selectionEnd = start + 1 + linkText.length;
+    textarea.focus();
+    if (pushFn) pushFn(textarea.value);
+  }
+
+  function markdownInsert(textarea, snippet, pushFn) {
+    var start = textarea.selectionStart;
+    var text = textarea.value;
+
+    textarea.value = text.substring(0, start) + snippet + text.substring(start);
+    textarea.selectionStart = start + snippet.length;
+    textarea.selectionEnd = start + snippet.length;
+    textarea.focus();
+    if (pushFn) pushFn(textarea.value);
+  }
+
+  // =========================================================================
+  // LiveView Hook
+  // =========================================================================
+
+  window.LeafHooks.Leaf = {
+    mounted() {
+      injectStyles();
+
+      this._editorId = this.el.dataset.editorId;
+      this._mode = this.el.dataset.mode || "visual";
+      this._debounceMs = parseInt(this.el.dataset.debounce || "400", 10);
+      this._readonly = this.el.dataset.readonly === "true";
+      this._debounceTimer = null;
+      this._markdownDebounceTimer = null;
+      this._htmlDebounceTimer = null;
+
+      this._visualEl = this.el.querySelector("[data-editor-visual]");
+      this._visualWrapper = this.el.querySelector("[data-visual-wrapper]");
+      this._markdownWrapper = this.el.querySelector(
+        "[data-markdown-wrapper]"
+      );
+      this._htmlWrapper = this.el.querySelector("[data-html-wrapper]");
+
+      if (this._visualEl) {
+        document.execCommand("defaultParagraphSeparator", false, "p");
+
+        this._visualEl.addEventListener(
+          "input",
+          this._onVisualInput.bind(this)
+        );
+
+        this._visualEl.addEventListener(
+          "keydown",
+          this._onVisualKeydown.bind(this)
+        );
+
+        this._visualEl.addEventListener("paste", this._onPaste.bind(this));
+
+        if (
+          this._visualEl.innerHTML.trim() === "" ||
+          this._visualEl.innerHTML === "<br>"
+        ) {
+          this._visualEl.innerHTML = "<p><br></p>";
+        }
+      }
+
+      this._setupToolbar();
+      this._setupModeSwitcher();
+      this._setupLinkPopover();
+      this._setupImageDragAndDrop();
+      this._registerMarkdownHelpers();
+      this._setupMarkdownTextarea();
+      this._setupHtmlTextarea();
+
+      // Handle commands from LiveView
+      this.handleEvent(
+        "leaf-command:" + this._editorId,
+        this._handleCommand.bind(this)
+      );
+
+      // Handle HTML content pushed from server (markdown→visual sync)
+      this.handleEvent(
+        "leaf-set-html:" + this._editorId,
+        function (payload) {
+          if (this._visualEl && payload.html !== undefined) {
+            this._visualEl.innerHTML = payload.html || "<p><br></p>";
+            // DOM was replaced — old block references are stale
+            this._dragHandleBlock = null;
+          }
+        }.bind(this)
+      );
+
+      // Handle HTML pushed to the HTML textarea (markdown→html conversion)
+      this.handleEvent(
+        "leaf-set-html-textarea:" + this._editorId,
+        function (payload) {
+          var ta = this._getHtmlTextarea();
+          if (ta && payload.html !== undefined) {
+            ta.value = payload.html;
+          }
+        }.bind(this)
+      );
+    },
+
+    updated() {
+      if (!this._visualEl) return;
+      var newReadonly = this.el.dataset.readonly === "true";
+      if (newReadonly !== this._readonly) {
+        this._readonly = newReadonly;
+        this._visualEl.contentEditable = !newReadonly;
+      }
+
+      // Re-find drag handle after morphdom patch (element may have been replaced)
+      if (this._visualWrapper) {
+        var newHandle = this._visualWrapper.querySelector("[data-drag-handle]");
+        if (newHandle && newHandle !== this._dragHandle) {
+          this._dragHandle = newHandle;
+          this._dragHandleBlock = null;
+        }
+      }
+    },
+
+    destroyed() {
+      if (this._debounceTimer) {
+        clearTimeout(this._debounceTimer);
+      }
+      if (this._markdownDebounceTimer) {
+        clearTimeout(this._markdownDebounceTimer);
+      }
+      if (this._htmlDebounceTimer) {
+        clearTimeout(this._htmlDebounceTimer);
+      }
+
+      this._cleanupDrag();
+      if (this._imgObserver) {
+        this._imgObserver.disconnect();
+        this._imgObserver = null;
+      }
+
+      this._dismissLinkPopover();
+      if (this._onDocClickForPopover) {
+        document.removeEventListener("mousedown", this._onDocClickForPopover);
+      }
+
+      // Clean up global markdown helper functions
+      var gid = this._editorId.replace(/-/g, "_") + "_markdown";
+      delete window["markdownFormat_" + gid];
+      delete window["markdownLinePrefix_" + gid];
+      delete window["markdownLink_" + gid];
+      delete window["markdownEditorInsert_" + gid];
+    },
+
+    // -- Markdown textarea setup --
+
+    _registerMarkdownHelpers: function () {
+      var self = this;
+      var gid = this._editorId.replace(/-/g, "_") + "_markdown";
+
+      var pushFn = function (value) {
+        self._debouncedPushMarkdownChange(value);
+      };
+
+      window["markdownFormat_" + gid] = function (before, after) {
+        var ta = self._getMarkdownTextarea();
+        if (ta) markdownFormat(ta, before, after, pushFn);
+      };
+
+      window["markdownLinePrefix_" + gid] = function (prefix) {
+        var ta = self._getMarkdownTextarea();
+        if (ta) markdownLinePrefix(ta, prefix, pushFn);
+      };
+
+      window["markdownLink_" + gid] = function () {
+        var ta = self._getMarkdownTextarea();
+        if (ta) markdownLink(ta, pushFn);
+      };
+
+      window["markdownEditorInsert_" + gid] = function (snippet) {
+        var ta = self._getMarkdownTextarea();
+        if (ta) markdownInsert(ta, snippet, pushFn);
+      };
+    },
+
+    _setupMarkdownTextarea: function () {
+      var self = this;
+      var textarea = this._getMarkdownTextarea();
+      if (!textarea) return;
+
+      this._markdownInputHandler = function () {
+        self._debouncedPushMarkdownChange(textarea.value);
+      };
+
+      textarea.addEventListener("input", this._markdownInputHandler);
+    },
+
+    _debouncedPushMarkdownChange: function (content) {
+      if (this._markdownDebounceTimer)
+        clearTimeout(this._markdownDebounceTimer);
+      var self = this;
+      this._markdownDebounceTimer = setTimeout(function () {
+        self.pushEventTo(self.el, "markdown_content_changed", {
+          editor_id: self._editorId,
+          content: content,
+        });
+      }, this._debounceMs);
+    },
+
+    // -- HTML textarea setup --
+
+    _setupHtmlTextarea: function () {
+      var self = this;
+      var textarea = this._getHtmlTextarea();
+      if (!textarea) return;
+
+      textarea.addEventListener("input", function () {
+        self._debouncedPushHtmlChange(textarea.value);
+      });
+    },
+
+    _getHtmlTextarea: function () {
+      return document.getElementById(
+        this._editorId + "-html-textarea"
+      );
+    },
+
+    _debouncedPushHtmlChange: function (content) {
+      if (this._htmlDebounceTimer)
+        clearTimeout(this._htmlDebounceTimer);
+      var self = this;
+      this._htmlDebounceTimer = setTimeout(function () {
+        self.pushEventTo(self.el, "html_content_changed", {
+          editor_id: self._editorId,
+          content: content,
+        });
+      }, this._debounceMs);
+    },
+
+    // -- Event handlers --
+
+    _onVisualInput: function () {
+      if (this._mode !== "visual") return;
+      this._dismissLinkPopover();
+      this._debouncedPushVisualChange();
+    },
+
+    _onVisualKeydown: function (e) {
+      if (this._readonly) return;
+
+      var mod = e.ctrlKey || e.metaKey;
+
+      if (mod && e.key === "b") {
+        e.preventDefault();
+        document.execCommand("bold", false, null);
+        this._updateToolbarState();
+        return;
+      }
+      if (mod && e.key === "i") {
+        e.preventDefault();
+        document.execCommand("italic", false, null);
+        this._updateToolbarState();
+        return;
+      }
+      if (mod && e.key === "u") {
+        e.preventDefault();
+        document.execCommand("underline", false, null);
+        return;
+      }
+      if (mod && e.key === "k") {
+        e.preventDefault();
+        this._insertLink();
+        return;
+      }
+      if (mod && e.shiftKey && e.key === "x") {
+        e.preventDefault();
+        document.execCommand("strikeThrough", false, null);
+        this._updateToolbarState();
+        return;
+      }
+
+      if (e.key === "Tab" && !mod) {
+        if (
+          document.queryCommandState("insertUnorderedList") ||
+          document.queryCommandState("insertOrderedList")
+        ) {
+          e.preventDefault();
+          if (e.shiftKey) {
+            document.execCommand("outdent", false, null);
+          } else {
+            document.execCommand("indent", false, null);
+          }
+          return;
+        }
+      }
+
+      if (e.key === "Enter" && !e.shiftKey) {
+        var block = this._getCurrentBlock();
+        if (
+          block &&
+          block.tagName &&
+          block.tagName.toLowerCase() === "blockquote"
+        ) {
+          var text = block.textContent.trim();
+          if (text === "") {
+            e.preventDefault();
+            document.execCommand("formatBlock", false, "p");
+            return;
+          }
+        }
+      }
+    },
+
+    _onPaste: function (e) {
+      var clipboardData = e.clipboardData || window.clipboardData;
+      if (!clipboardData) return;
+
+      var html = clipboardData.getData("text/html");
+      if (html) {
+        e.preventDefault();
+        var cleaned = cleanPastedHtml(html);
+        document.execCommand("insertHTML", false, cleaned);
+        return;
+      }
+    },
+
+    // -- Push content to LiveView --
+
+    _debouncedPushVisualChange: function () {
+      if (this._debounceTimer) clearTimeout(this._debounceTimer);
+      this._debounceTimer = setTimeout(
+        function () {
+          if (!this._visualEl) return;
+          var html = this._visualEl.innerHTML;
+          var markdown = htmlToMarkdown(html);
+          this.pushEventTo(this.el, "content_changed", {
+            editor_id: this._editorId,
+            html: html,
+            markdown: markdown,
+          });
+        }.bind(this),
+        this._debounceMs
+      );
+    },
+
+    // -- Mode switching --
+
+    _setupModeSwitcher: function () {
+      var self = this;
+      var tabs = this.el.querySelectorAll("[data-mode-tab]");
+
+      tabs.forEach(function (tab) {
+        tab.addEventListener("click", function (e) {
+          e.preventDefault();
+          var newMode = tab.dataset.modeTab;
+          if (newMode === self._mode) return;
+
+          self._dismissLinkPopover();
+
+          var oldMode = self._mode;
+          self._syncModes(oldMode, newMode);
+
+          self._mode = newMode;
+          self._applyModeVisibility(newMode);
+
+          tabs.forEach(function (t) {
+            if (t.dataset.modeTab === newMode) {
+              t.classList.add("btn-active");
+              t.classList.remove("btn-ghost");
+            } else {
+              t.classList.remove("btn-active");
+              t.classList.add("btn-ghost");
+            }
+          });
+
+          var currentMarkdown = "";
+          var ta = self._getMarkdownTextarea();
+          if (ta) currentMarkdown = ta.value;
+          self.pushEventTo(self.el, "mode_changed", {
+            editor_id: self._editorId,
+            mode: newMode,
+            content: currentMarkdown,
+          });
+        });
+      });
+    },
+
+    _applyModeVisibility: function (mode) {
+      var wrappers = [
+        { el: this._visualWrapper, mode: "visual" },
+        { el: this._markdownWrapper, mode: "markdown" },
+        { el: this._htmlWrapper, mode: "html" },
+      ];
+      wrappers.forEach(function (w) {
+        if (!w.el) return;
+        if (w.mode === mode) {
+          w.el.classList.remove("hidden");
+        } else {
+          w.el.classList.add("hidden");
+        }
+      });
+
+      // Hide formatting toolbar in html mode (raw editing)
+      var toolbarButtons = this.el.querySelector("[data-visual-toolbar-buttons]");
+      if (toolbarButtons) {
+        if (mode === "html") {
+          toolbarButtons.classList.add("hidden");
+          toolbarButtons.classList.remove("contents");
+        } else {
+          toolbarButtons.classList.remove("hidden");
+          toolbarButtons.classList.add("contents");
+        }
+      }
+    },
+
+    _syncModes: function (from, to) {
+      var self = this;
+
+      if (from === "visual") {
+        // Visual → get innerHTML
+        var visualHtml = this._visualEl ? this._visualEl.innerHTML : "";
+
+        if (to === "markdown") {
+          var mdTa = this._getMarkdownTextarea();
+          if (mdTa) mdTa.value = htmlToMarkdown(visualHtml);
+        } else if (to === "html") {
+          var htmlTa = this._getHtmlTextarea();
+          if (htmlTa) htmlTa.value = visualHtml;
+        }
+
+      } else if (from === "markdown") {
+        var mdTa = this._getMarkdownTextarea();
+        var markdown = mdTa ? mdTa.value : "";
+
+        if (to === "visual") {
+          // Server converts markdown→html, pushes back via leaf-set-html event
+          this.pushEventTo(this.el, "sync_markdown_to_visual", {
+            editor_id: this._editorId,
+            markdown: markdown,
+          });
+        } else if (to === "html") {
+          // Server converts markdown→html, pushes to html textarea
+          this.pushEventTo(this.el, "convert_markdown_to_html", {
+            editor_id: this._editorId,
+            markdown: markdown,
+          });
+        }
+
+      } else if (from === "html") {
+        var htmlTa = this._getHtmlTextarea();
+        var rawHtml = htmlTa ? htmlTa.value : "";
+
+        if (to === "visual") {
+          // Set innerHTML directly
+          if (this._visualEl) {
+            this._visualEl.innerHTML = rawHtml || "<p><br></p>";
+          }
+        } else if (to === "markdown") {
+          // Client-side HTML→markdown conversion
+          var mdTa = this._getMarkdownTextarea();
+          if (mdTa) mdTa.value = htmlToMarkdown(rawHtml);
+        }
+      }
+    },
+
+    _getMarkdownTextarea: function () {
+      return document.getElementById(
+        this._editorId + "-markdown-textarea"
+      );
+    },
+
+    // -- Toolbar --
+
+    _setupToolbar: function () {
+      var self = this;
+      var buttons = this.el.querySelectorAll("[data-toolbar-action]");
+
+      buttons.forEach(function (btn) {
+        btn.addEventListener("mousedown", function (e) {
+          e.preventDefault();
+        });
+
+        btn.addEventListener("click", function (e) {
+          e.preventDefault();
+          var action = btn.dataset.toolbarAction;
+          self._execToolbarAction(action);
+        });
+      });
+
+      document.addEventListener("selectionchange", function () {
+        if (self._mode === "visual" && self._visualEl) {
+          var sel = window.getSelection();
+          if (
+            sel.rangeCount > 0 &&
+            self._visualEl.contains(sel.anchorNode)
+          ) {
+            self._updateToolbarState();
+          }
+        }
+      });
+    },
+
+    _execToolbarAction: function (action) {
+      if (this._readonly) return;
+
+      if (this._mode === "markdown") {
+        this._execMarkdownToolbarAction(action);
+        return;
+      }
+
+      if (!this._visualEl) return;
+      this._visualEl.focus();
+
+      switch (action) {
+        case "bold":
+          document.execCommand("bold", false, null);
+          break;
+        case "italic":
+          document.execCommand("italic", false, null);
+          break;
+        case "strike":
+          document.execCommand("strikeThrough", false, null);
+          break;
+        case "code":
+          this._wrapSelectionWith("code");
+          break;
+        case "heading1":
+          this._toggleHeading("h1");
+          break;
+        case "heading2":
+          this._toggleHeading("h2");
+          break;
+        case "heading3":
+          this._toggleHeading("h3");
+          break;
+        case "heading4":
+          this._toggleHeading("h4");
+          break;
+        case "bulletList":
+          document.execCommand("insertUnorderedList", false, null);
+          break;
+        case "orderedList":
+          document.execCommand("insertOrderedList", false, null);
+          break;
+        case "blockquote":
+          this._toggleBlockquote();
+          break;
+        case "codeBlock":
+          document.execCommand("formatBlock", false, "pre");
+          break;
+        case "horizontalRule":
+          document.execCommand("insertHorizontalRule", false, null);
+          break;
+        case "link":
+          this._insertLink();
+          break;
+        case "insert-image":
+          this.pushEventTo(this.el, "insert_request", {
+            editor_id: this._editorId,
+            type: "image",
+          });
+          break;
+        case "insert-video":
+          this.pushEventTo(this.el, "insert_request", {
+            editor_id: this._editorId,
+            type: "video",
+          });
+          break;
+        case "undo":
+          document.execCommand("undo", false, null);
+          break;
+        case "redo":
+          document.execCommand("redo", false, null);
+          break;
+        case "removeFormat":
+          document.execCommand("removeFormat", false, null);
+          document.execCommand("formatBlock", false, "p");
+          break;
+      }
+
+      this._updateToolbarState();
+      this._debouncedPushVisualChange();
+    },
+
+    _execMarkdownToolbarAction: function (action) {
+      var gid = this._editorId.replace(/-/g, "_") + "_markdown";
+      var fmt = window["markdownFormat_" + gid];
+      var pfx = window["markdownLinePrefix_" + gid];
+      var lnk = window["markdownLink_" + gid];
+      var ins = window["markdownEditorInsert_" + gid];
+
+      switch (action) {
+        case "bold": if (fmt) fmt("**", "**"); break;
+        case "italic": if (fmt) fmt("*", "*"); break;
+        case "strike": if (fmt) fmt("~~", "~~"); break;
+        case "code": if (fmt) fmt("`", "`"); break;
+        case "heading1": if (pfx) pfx("# "); break;
+        case "heading2": if (pfx) pfx("## "); break;
+        case "heading3": if (pfx) pfx("### "); break;
+        case "heading4": if (pfx) pfx("#### "); break;
+        case "bulletList": if (pfx) pfx("- "); break;
+        case "orderedList": if (pfx) pfx("1. "); break;
+        case "blockquote": if (pfx) pfx("> "); break;
+        case "codeBlock": if (fmt) fmt("```\n", "\n```"); break;
+        case "horizontalRule": if (ins) ins("\n---\n"); break;
+        case "link": if (lnk) lnk(); break;
+        case "insert-image": this.pushEventTo(this.el, "insert_request", { editor_id: this._editorId, type: "image" }); break;
+        case "insert-video": this.pushEventTo(this.el, "insert_request", { editor_id: this._editorId, type: "video" }); break;
+        case "removeFormat": break;
+        case "undo": break;
+        case "redo": break;
+      }
+    },
+
+    _toggleHeading: function (tag) {
+      var block = this._getCurrentBlock();
+      if (block && block.tagName && block.tagName.toLowerCase() === tag) {
+        document.execCommand("formatBlock", false, "p");
+      } else {
+        document.execCommand("formatBlock", false, tag);
+      }
+    },
+
+    _toggleBlockquote: function () {
+      var block = this._getCurrentBlock();
+      if (
+        block &&
+        block.tagName &&
+        block.tagName.toLowerCase() === "blockquote"
+      ) {
+        document.execCommand("formatBlock", false, "p");
+      } else {
+        document.execCommand("formatBlock", false, "blockquote");
+      }
+    },
+
+    _getCurrentBlock: function () {
+      var sel = window.getSelection();
+      if (!sel.rangeCount) return null;
+      var node = sel.anchorNode;
+      while (node && node !== this._visualEl) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          var display = window.getComputedStyle(node).display;
+          if (display === "block" || display === "list-item") {
+            return node;
+          }
+        }
+        node = node.parentNode;
+      }
+      return null;
+    },
+
+    _insertLink: function () {
+      var selection = window.getSelection();
+      var currentHref = "";
+
+      if (selection.rangeCount > 0) {
+        var node = selection.anchorNode;
+        while (node && node !== this._visualEl) {
+          if (node.tagName && node.tagName.toLowerCase() === "a") {
+            currentHref = node.getAttribute("href") || "";
+            break;
+          }
+          node = node.parentNode;
+        }
+      }
+
+      var url = prompt("Enter URL:", currentHref || "https://");
+      if (url === null) return;
+
+      if (url === "") {
+        document.execCommand("unlink", false, null);
+      } else {
+        document.execCommand("createLink", false, url);
+      }
+    },
+
+    _wrapSelectionWith: function (tagName) {
+      var selection = window.getSelection();
+      if (!selection.rangeCount) return;
+
+      var range = selection.getRangeAt(0);
+      var selectedText = range.toString();
+
+      if (selectedText.length === 0) return;
+
+      var parent = range.commonAncestorContainer;
+      if (parent.nodeType === Node.TEXT_NODE) parent = parent.parentElement;
+      if (
+        parent &&
+        parent.tagName &&
+        parent.tagName.toLowerCase() === tagName
+      ) {
+        var text = document.createTextNode(parent.textContent);
+        parent.parentNode.replaceChild(text, parent);
+        return;
+      }
+
+      try {
+        var el = document.createElement(tagName);
+        range.surroundContents(el);
+      } catch (_e) {
+        var escaped = selectedText
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;");
+        document.execCommand(
+          "insertHTML",
+          false,
+          "<" + tagName + ">" + escaped + "</" + tagName + ">"
+        );
+      }
+    },
+
+    _updateToolbarState: function () {
+      var self = this;
+      var block = this._getCurrentBlock();
+      var blockTag =
+        block && block.tagName ? block.tagName.toLowerCase() : "";
+
+      var buttons = this.el.querySelectorAll("[data-toolbar-action]");
+      buttons.forEach(function (btn) {
+        var action = btn.dataset.toolbarAction;
+        var active = false;
+
+        switch (action) {
+          case "bold":
+            active = document.queryCommandState("bold");
+            break;
+          case "italic":
+            active = document.queryCommandState("italic");
+            break;
+          case "strike":
+            active = document.queryCommandState("strikeThrough");
+            break;
+          case "orderedList":
+            active = document.queryCommandState("insertOrderedList");
+            break;
+          case "bulletList":
+            active = document.queryCommandState("insertUnorderedList");
+            break;
+          case "heading1":
+            active = blockTag === "h1";
+            break;
+          case "heading2":
+            active = blockTag === "h2";
+            break;
+          case "heading3":
+            active = blockTag === "h3";
+            break;
+          case "heading4":
+            active = blockTag === "h4";
+            break;
+          case "blockquote":
+            active = blockTag === "blockquote";
+            break;
+          case "codeBlock":
+            active = blockTag === "pre";
+            break;
+          case "link":
+            active = self._isInsideTag("a");
+            break;
+          case "code":
+            active = self._isInsideTag("code");
+            break;
+        }
+
+        if (active) {
+          btn.classList.add("btn-active");
+        } else {
+          btn.classList.remove("btn-active");
+        }
+      });
+    },
+
+    _isInsideTag: function (tagName) {
+      var sel = window.getSelection();
+      if (!sel.rangeCount) return false;
+      var node = sel.anchorNode;
+      while (node && node !== this._visualEl) {
+        if (
+          node.tagName &&
+          node.tagName.toLowerCase() === tagName
+        ) {
+          return true;
+        }
+        node = node.parentNode;
+      }
+      return false;
+    },
+
+    // -- Link popover --
+
+    _setupLinkPopover: function () {
+      if (!this._visualEl) return;
+      var self = this;
+
+      this._linkPopoverEl = null;
+      this._linkPopoverAnchor = null;
+      this._imagePopoverEl = null;
+      this._imagePopoverTarget = null;
+
+      this._visualEl.addEventListener("click", function (e) {
+        if (self._readonly) return;
+
+        var target = e.target;
+
+        // Check if clicked on an <img>
+        if (target.tagName && target.tagName.toLowerCase() === "img") {
+          e.preventDefault();
+          self._dismissLinkPopover();
+          self._showImagePopover(target);
+          return;
+        }
+
+        // Walk up from click target to find an <a> inside the editor
+        var node = target;
+        var anchor = null;
+        while (node && node !== self._visualEl) {
+          if (node.tagName && node.tagName.toLowerCase() === "a") {
+            anchor = node;
+            break;
+          }
+          node = node.parentNode;
+        }
+
+        if (anchor) {
+          e.preventDefault();
+          self._dismissImagePopover();
+          self._showLinkPopover(anchor);
+        } else {
+          self._dismissLinkPopover();
+          self._dismissImagePopover();
+        }
+      });
+
+      // Dismiss when clicking outside the editor + popovers
+      this._onDocClickForPopover = function (e) {
+        if (self._linkPopoverEl && !self._linkPopoverEl.contains(e.target) &&
+            !self._visualEl.contains(e.target)) {
+          self._dismissLinkPopover();
+        }
+        if (self._imagePopoverEl && !self._imagePopoverEl.contains(e.target) &&
+            !self._visualEl.contains(e.target)) {
+          self._dismissImagePopover();
+        }
+      };
+      document.addEventListener("mousedown", this._onDocClickForPopover);
+    },
+
+    _showLinkPopover: function (anchorEl) {
+      this._dismissLinkPopover();
+      this._linkPopoverAnchor = anchorEl;
+
+      var href = anchorEl.getAttribute("href") || "";
+      var self = this;
+
+      // Build popover
+      var pop = document.createElement("div");
+      pop.className = "leaf-link-popover";
+
+      // Link icon
+      var linkIcon = document.createElement("span");
+      linkIcon.style.cssText = "display:flex;align-items:center;opacity:0.5;flex-shrink:0;";
+      linkIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path fill-rule="evenodd" d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z" clip-rule="evenodd"/></svg>';
+      pop.appendChild(linkIcon);
+
+      // URL display/link
+      var urlLink = document.createElement("a");
+      urlLink.href = href;
+      urlLink.target = "_blank";
+      urlLink.rel = "noopener";
+      urlLink.textContent = href || "(no url)";
+      urlLink.title = href;
+      pop.appendChild(urlLink);
+
+      // Actions group (pill within pill)
+      var actions = document.createElement("span");
+      actions.className = "leaf-popover-actions";
+
+      // Edit button
+      var editBtn = document.createElement("button");
+      editBtn.type = "button";
+      editBtn.title = "Edit link";
+      editBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L3.05 10.476a.75.75 0 0 0-.188.335l-.95 3.507a.75.75 0 0 0 .92.92l3.507-.95a.75.75 0 0 0 .335-.188l7.963-7.963a1.75 1.75 0 0 0 0-2.475l-.149-.149ZM11.72 3.22a.25.25 0 0 1 .354 0l.149.149a.25.25 0 0 1 0 .354L5.106 10.84l-1.575.427.427-1.575 7.11-7.11.652-.362Z"/></svg>';
+      editBtn.addEventListener("mousedown", function (e) { e.preventDefault(); });
+      editBtn.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var newUrl = prompt("Edit URL:", href);
+        if (newUrl === null) return;
+        if (newUrl === "") {
+          self._unwrapLink(anchorEl);
+          self._dismissLinkPopover();
+        } else {
+          anchorEl.setAttribute("href", newUrl);
+          urlLink.href = newUrl;
+          urlLink.textContent = newUrl;
+          urlLink.title = newUrl;
+          href = newUrl;
+        }
+        self._debouncedPushVisualChange();
+      });
+      actions.appendChild(editBtn);
+
+      // Divider inside actions
+      var d1 = document.createElement("span");
+      d1.className = "leaf-popover-divider";
+      actions.appendChild(d1);
+
+      // Remove button
+      var removeBtn = document.createElement("button");
+      removeBtn.type = "button";
+      removeBtn.title = "Remove link";
+      removeBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L6.94 8l-1.72 1.72a.75.75 0 1 0 1.06 1.06L8 9.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L9.06 8l1.72-1.72a.75.75 0 0 0-1.06-1.06L8 6.94 6.28 5.22Z"/></svg>';
+      removeBtn.addEventListener("mousedown", function (e) { e.preventDefault(); });
+      removeBtn.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        self._unwrapLink(anchorEl);
+        self._dismissLinkPopover();
+        self._debouncedPushVisualChange();
+      });
+      actions.appendChild(removeBtn);
+
+      pop.appendChild(actions);
+
+      // Position below the anchor element
+      this.el.style.position = "relative";
+      var editorRect = this.el.getBoundingClientRect();
+      var anchorRect = anchorEl.getBoundingClientRect();
+
+      pop.style.left = (anchorRect.left - editorRect.left) + "px";
+      pop.style.top = (anchorRect.bottom - editorRect.top + 8) + "px";
+
+      this.el.appendChild(pop);
+      this._linkPopoverEl = pop;
+    },
+
+    _dismissLinkPopover: function () {
+      if (this._linkPopoverEl) {
+        this._linkPopoverEl.remove();
+        this._linkPopoverEl = null;
+        this._linkPopoverAnchor = null;
+      }
+    },
+
+    _unwrapLink: function (anchorEl) {
+      // Replace the <a> with its text content
+      var parent = anchorEl.parentNode;
+      while (anchorEl.firstChild) {
+        parent.insertBefore(anchorEl.firstChild, anchorEl);
+      }
+      parent.removeChild(anchorEl);
+    },
+
+    // -- Image selection + resize + popover --
+
+    _showImagePopover: function (imgEl) {
+      this._dismissImagePopover();
+      this._imagePopoverTarget = imgEl;
+
+      var src = imgEl.getAttribute("src") || "";
+      var alt = imgEl.getAttribute("alt") || "";
+      var self = this;
+
+      // Mark image as selected (outline via CSS)
+      imgEl.classList.add("leaf-img-selected");
+
+      // Create resize handles
+      this._resizeHandles = [];
+      var corners = ["nw", "ne", "sw", "se"];
+      corners.forEach(function (corner) {
+        var handle = document.createElement("div");
+        handle.className = "leaf-resize-handle leaf-resize-handle--" + corner;
+        handle.setAttribute("data-corner", corner);
+        handle.addEventListener("mousedown", function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          self._startResize(e, imgEl, corner);
+        });
+        self.el.appendChild(handle);
+        self._resizeHandles.push(handle);
+      });
+
+      this._positionResizeHandles(imgEl);
+
+      // Build popover
+      var pop = document.createElement("div");
+      pop.className = "leaf-link-popover";
+
+      // Image icon
+      var imgIcon = document.createElement("span");
+      imgIcon.style.cssText = "display:flex;align-items:center;opacity:0.5;flex-shrink:0;";
+      imgIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path fill-rule="evenodd" d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707L10.354 7.56a.5.5 0 0 0-.708 0L6.5 10.707 5.354 9.56a.5.5 0 0 0-.708 0L3.5 10.707V4a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v5.707ZM11 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd"/></svg>';
+      pop.appendChild(imgIcon);
+
+      // Alt text input
+      var altInput = document.createElement("input");
+      altInput.type = "text";
+      altInput.value = alt;
+      altInput.placeholder = "Alt text...";
+      altInput.title = "Image alt text";
+      altInput.style.cssText = [
+        "background: color-mix(in oklab, var(--color-base-content, #1f2937) 8%, transparent);",
+        "border: none; border-radius: 0.25rem; padding: 0.2rem 0.4rem;",
+        "font-size: 0.8125rem; color: inherit; outline: none; width: 160px;",
+      ].join("");
+      altInput.addEventListener("mousedown", function (e) { e.stopPropagation(); });
+      altInput.addEventListener("input", function () {
+        imgEl.setAttribute("alt", altInput.value);
+      });
+      altInput.addEventListener("keydown", function (e) {
+        if (e.key === "Escape") {
+          self._dismissImagePopover();
+        }
+      });
+      pop.appendChild(altInput);
+
+      // Actions group
+      var actions = document.createElement("span");
+      actions.className = "leaf-popover-actions";
+
+      // Open in new tab button
+      var openBtn = document.createElement("button");
+      openBtn.type = "button";
+      openBtn.title = "Open image";
+      openBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M8.22 2.97a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06l2.97-2.97H3.75a.75.75 0 0 1 0-1.5h7.44L8.22 4.03a.75.75 0 0 1 0-1.06Z"/></svg>';
+      openBtn.addEventListener("mousedown", function (e) { e.preventDefault(); });
+      openBtn.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (src) window.open(src, "_blank");
+      });
+      actions.appendChild(openBtn);
+
+      // Divider
+      var d1 = document.createElement("span");
+      d1.className = "leaf-popover-divider";
+      actions.appendChild(d1);
+
+      // Remove button
+      var removeBtn = document.createElement("button");
+      removeBtn.type = "button";
+      removeBtn.title = "Remove image";
+      removeBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L6.94 8l-1.72 1.72a.75.75 0 1 0 1.06 1.06L8 9.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L9.06 8l1.72-1.72a.75.75 0 0 0-1.06-1.06L8 6.94 6.28 5.22Z"/></svg>';
+      removeBtn.addEventListener("mousedown", function (e) { e.preventDefault(); });
+      removeBtn.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        imgEl.remove();
+        self._dismissImagePopover();
+        self._debouncedPushVisualChange();
+      });
+      actions.appendChild(removeBtn);
+
+      pop.appendChild(actions);
+
+      // Position below the image
+      this.el.style.position = "relative";
+      var editorRect = this.el.getBoundingClientRect();
+      var imgRect = imgEl.getBoundingClientRect();
+
+      pop.style.left = (imgRect.left - editorRect.left) + "px";
+      pop.style.top = (imgRect.bottom - editorRect.top + 8) + "px";
+
+      this.el.appendChild(pop);
+      this._imagePopoverEl = pop;
+
+      // Focus the alt input
+      setTimeout(function () { altInput.focus(); altInput.select(); }, 50);
+    },
+
+    _positionResizeHandles: function (imgEl) {
+      if (!this._resizeHandles || !imgEl) return;
+      var editorRect = this.el.getBoundingClientRect();
+      var imgRect = imgEl.getBoundingClientRect();
+      var ox = imgRect.left - editorRect.left;
+      var oy = imgRect.top - editorRect.top;
+      var w = imgRect.width;
+      var h = imgRect.height;
+      var hs = 5; // half handle size
+
+      var positions = {
+        nw: { left: ox - hs, top: oy - hs },
+        ne: { left: ox + w - hs, top: oy - hs },
+        sw: { left: ox - hs, top: oy + h - hs },
+        se: { left: ox + w - hs, top: oy + h - hs },
+      };
+
+      this._resizeHandles.forEach(function (handle) {
+        var corner = handle.getAttribute("data-corner");
+        var pos = positions[corner];
+        handle.style.left = pos.left + "px";
+        handle.style.top = pos.top + "px";
+      });
+    },
+
+    _startResize: function (e, imgEl, corner) {
+      var self = this;
+      var startX = e.clientX;
+      var startY = e.clientY;
+      var startW = imgEl.offsetWidth;
+      var startH = imgEl.offsetHeight;
+      var aspect = startW / startH;
+
+      function onMove(ev) {
+        ev.preventDefault();
+        var dx = ev.clientX - startX;
+        var dy = ev.clientY - startY;
+        var newW;
+
+        // Use the axis with more movement, maintain aspect ratio
+        if (corner === "se") {
+          newW = Math.max(50, startW + dx);
+        } else if (corner === "sw") {
+          newW = Math.max(50, startW - dx);
+        } else if (corner === "ne") {
+          newW = Math.max(50, startW + dx);
+        } else { // nw
+          newW = Math.max(50, startW - dx);
+        }
+
+        var newH = newW / aspect;
+        imgEl.style.width = newW + "px";
+        imgEl.style.height = newH + "px";
+        imgEl.setAttribute("width", Math.round(newW));
+        imgEl.setAttribute("height", Math.round(newH));
+
+        self._positionResizeHandles(imgEl);
+
+        // Reposition popover below the image
+        if (self._imagePopoverEl) {
+          var editorRect = self.el.getBoundingClientRect();
+          var imgRect = imgEl.getBoundingClientRect();
+          self._imagePopoverEl.style.left = (imgRect.left - editorRect.left) + "px";
+          self._imagePopoverEl.style.top = (imgRect.bottom - editorRect.top + 8) + "px";
+        }
+      }
+
+      function onUp() {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      }
+
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    },
+
+    // -- Block & image drag-and-drop reordering --
+
+    _setupImageDragAndDrop: function () {
+      if (!this._visualEl) return;
+      var self = this;
+
+      this._dragIndicator = null;
+      this._dragSourceBlock = null;
+      this._dragDropTarget = null;
+      this._dragHandle = null;
+      this._dragHandleBlock = null;
+
+      // Ensure existing images are draggable
+      var imgs = this._visualEl.querySelectorAll("img");
+      for (var i = 0; i < imgs.length; i++) {
+        imgs[i].setAttribute("draggable", "true");
+      }
+
+      // Watch for new images and mark them draggable
+      this._imgObserver = new MutationObserver(function (mutations) {
+        mutations.forEach(function (m) {
+          m.addedNodes.forEach(function (node) {
+            if (node.nodeType !== Node.ELEMENT_NODE) return;
+            if (node.tagName && node.tagName.toLowerCase() === "img") {
+              node.setAttribute("draggable", "true");
+            }
+            var childImgs = node.querySelectorAll && node.querySelectorAll("img");
+            if (childImgs) {
+              for (var j = 0; j < childImgs.length; j++) {
+                childImgs[j].setAttribute("draggable", "true");
+              }
+            }
+          });
+        });
+      });
+      this._imgObserver.observe(this._visualEl, { childList: true, subtree: true });
+
+      // -- Drag handle (grip icon) for block elements --
+
+      var handle = this._visualWrapper.querySelector("[data-drag-handle]");
+      this._dragHandle = handle;
+
+      // Show handle on mousemove over blocks
+      this._visualEl.addEventListener("mousemove", function (e) {
+        if (self._readonly || self._dragSourceBlock) return;
+        var block = self._getHoveredBlock(e.target);
+        if (!block) return;
+        // Always update if stale (e.g. after innerHTML replacement) or different block
+        if (block !== self._dragHandleBlock || !self._dragHandleBlock.parentNode) {
+          self._dragHandleBlock = block;
+          self._positionDragHandle(block);
+        }
+      });
+
+      // Hide handle when mouse leaves the wrapper, unless a block is selected
+      this._visualWrapper.addEventListener("mouseleave", function () {
+        if (!self._dragSourceBlock && !self._imagePopoverTarget) {
+          self._dragHandleBlock = null;
+          self._dragHandle.style.display = "none";
+        }
+      });
+
+      // -- Handle mousedown (block drag via mouse, delegated so it survives morphdom) --
+      this._visualWrapper.addEventListener("mousedown", function (e) {
+        if (!e.target.closest("[data-drag-handle]")) return;
+        var block = self._dragHandleBlock;
+        if (!block || self._readonly) return;
+        e.preventDefault();
+        e.stopPropagation();
+
+        self._dismissImagePopover();
+        self._dismissLinkPopover();
+
+        self._dragSourceBlock = block;
+        block.classList.add("leaf-dragging");
+        self._dragHandle.style.cursor = "grabbing";
+
+        self._createDropIndicator();
+
+        function onMouseMove(ev) {
+          ev.preventDefault();
+          var target = self._findDropTarget(ev.clientY);
+          if (target) {
+            self._dragDropTarget = target;
+            self._positionDropIndicator(target);
+          }
+        }
+
+        function onMouseUp(ev) {
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+          self._dragHandle.style.cursor = "";
+
+          if (self._dragSourceBlock && self._dragDropTarget) {
+            var sourceEl = self._dragSourceBlock;
+            var targetEl = self._dragDropTarget.element;
+            var position = self._dragDropTarget.position;
+
+            var refNext = targetEl.nextSibling;
+            var refParent = targetEl.parentNode;
+            var targetIsSource = (sourceEl === targetEl);
+
+            sourceEl.remove();
+
+            if (targetIsSource) {
+              if (refNext && refNext.parentNode) {
+                refParent.insertBefore(sourceEl, refNext);
+              } else if (refParent) {
+                refParent.appendChild(sourceEl);
+              }
+            } else if (!targetEl.parentNode) {
+              if (refNext && refNext.parentNode) {
+                refParent.insertBefore(sourceEl, refNext);
+              } else if (refParent) {
+                refParent.appendChild(sourceEl);
+              }
+            } else if (position === "before") {
+              targetEl.parentNode.insertBefore(sourceEl, targetEl);
+            } else {
+              if (targetEl.nextSibling) {
+                targetEl.parentNode.insertBefore(sourceEl, targetEl.nextSibling);
+              } else {
+                targetEl.parentNode.appendChild(sourceEl);
+              }
+            }
+
+            self._debouncedPushVisualChange();
+          }
+
+          self._cleanupDrag();
+        }
+
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      });
+
+      // -- Image native dragstart --
+      this._visualEl.addEventListener("dragstart", function (e) {
+        var img = e.target;
+        if (!img || img.tagName.toLowerCase() !== "img") return;
+        if (self._readonly) { e.preventDefault(); return; }
+
+        // Don't drag if popover is open (resize handles active)
+        if (self._imagePopoverTarget === img) {
+          e.preventDefault();
+          return;
+        }
+
+        self._dismissImagePopover();
+        self._dismissLinkPopover();
+
+        // For images, the drag source is the image itself (or its parent block)
+        var block = self._getContainingBlock(img);
+        self._dragSourceBlock = block || img;
+        (block || img).classList.add("leaf-dragging");
+
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", "leaf-image-drag");
+
+        self._createDropIndicator();
+      });
+
+      // -- Image native drag: dragover/drop/dragleave/dragend --
+      this._visualEl.addEventListener("dragover", function (e) {
+        if (!self._dragSourceBlock) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+
+        var target = self._findDropTarget(e.clientY);
+        if (target) {
+          self._dragDropTarget = target;
+          self._positionDropIndicator(target);
+        }
+      });
+
+      this._visualEl.addEventListener("dragleave", function (e) {
+        if (!self._visualEl.contains(e.relatedTarget)) {
+          if (self._dragIndicator) self._dragIndicator.style.display = "none";
+          self._dragDropTarget = null;
+        }
+      });
+
+      this._visualEl.addEventListener("drop", function (e) {
+        e.preventDefault();
+        if (!self._dragSourceBlock || !self._dragDropTarget) {
+          self._cleanupDrag();
+          return;
+        }
+
+        var sourceEl = self._dragSourceBlock;
+        var targetEl = self._dragDropTarget.element;
+        var position = self._dragDropTarget.position;
+
+        var refNext = targetEl.nextSibling;
+        var refParent = targetEl.parentNode;
+        var targetIsSource = (sourceEl === targetEl);
+
+        sourceEl.remove();
+
+        if (targetIsSource) {
+          if (refNext && refNext.parentNode) {
+            refParent.insertBefore(sourceEl, refNext);
+          } else if (refParent) {
+            refParent.appendChild(sourceEl);
+          }
+        } else if (!targetEl.parentNode) {
+          if (refNext && refNext.parentNode) {
+            refParent.insertBefore(sourceEl, refNext);
+          } else if (refParent) {
+            refParent.appendChild(sourceEl);
+          }
+        } else if (position === "before") {
+          targetEl.parentNode.insertBefore(sourceEl, targetEl);
+        } else {
+          if (targetEl.nextSibling) {
+            targetEl.parentNode.insertBefore(sourceEl, targetEl.nextSibling);
+          } else {
+            targetEl.parentNode.appendChild(sourceEl);
+          }
+        }
+
+        self._cleanupDrag();
+        self._debouncedPushVisualChange();
+      });
+
+      this._visualEl.addEventListener("dragend", function () {
+        self._cleanupDrag();
+      });
+    },
+
+    _getHoveredBlock: function (target) {
+      // Walk up from target to find the direct child of _visualEl
+      var node = target;
+      while (node && node.parentNode !== this._visualEl) {
+        node = node.parentNode;
+      }
+      if (!node || node.nodeType !== Node.ELEMENT_NODE) return null;
+      if (!this._isBlockTag(node)) return null;
+      return node;
+    },
+
+    _getContainingBlock: function (node) {
+      // Walk up from node to find the direct child of _visualEl
+      var current = node;
+      while (current && current.parentNode !== this._visualEl) {
+        current = current.parentNode;
+      }
+      return current;
+    },
+
+    _isBlockTag: function (el) {
+      var BLOCK_TAGS = {
+        p: true, h1: true, h2: true, h3: true, h4: true, h5: true, h6: true,
+        blockquote: true, pre: true, ul: true, ol: true, hr: true, img: true,
+        div: true, figure: true, table: true
+      };
+      return el && el.tagName && BLOCK_TAGS[el.tagName.toLowerCase()];
+    },
+
+    _positionDragHandle: function (block) {
+      if (!this._dragHandle) return;
+      var wrapperRect = this._visualWrapper.getBoundingClientRect();
+      var blockRect = block.getBoundingClientRect();
+
+      var top = blockRect.top - wrapperRect.top;
+      var left = blockRect.left - wrapperRect.left - 30;
+
+      this._dragHandle.style.top = top + "px";
+      this._dragHandle.style.left = Math.max(0, left) + "px";
+      this._dragHandle.style.display = "flex";
+    },
+
+    _createDropIndicator: function () {
+      if (this._dragIndicator) this._dragIndicator.remove();
+      var indicator = document.createElement("div");
+      indicator.className = "leaf-drop-indicator";
+      indicator.style.display = "none";
+      this._visualWrapper.appendChild(indicator);
+      this._dragIndicator = indicator;
+    },
+
+    _findDropTarget: function (clientY) {
+      var children = this._visualEl.childNodes;
+      var blocks = [];
+
+      for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        if (child.nodeType !== Node.ELEMENT_NODE) continue;
+        if (this._isBlockTag(child)) {
+          blocks.push(child);
+        }
+      }
+
+      if (blocks.length === 0) return null;
+
+      var best = null;
+      var bestDist = Infinity;
+
+      for (var j = 0; j < blocks.length; j++) {
+        var block = blocks[j];
+        // Skip the block being dragged
+        if (block === this._dragSourceBlock) continue;
+
+        var rect = block.getBoundingClientRect();
+
+        var distTop = Math.abs(clientY - rect.top);
+        if (distTop < bestDist) {
+          bestDist = distTop;
+          best = { element: block, position: "before" };
+        }
+
+        var distBottom = Math.abs(clientY - rect.bottom);
+        if (distBottom < bestDist) {
+          bestDist = distBottom;
+          best = { element: block, position: "after" };
+        }
+      }
+
+      // Edge: above first non-source block
+      for (var k = 0; k < blocks.length; k++) {
+        if (blocks[k] !== this._dragSourceBlock) {
+          var firstRect = blocks[k].getBoundingClientRect();
+          if (clientY < firstRect.top) {
+            return { element: blocks[k], position: "before" };
+          }
+          break;
+        }
+      }
+
+      // Edge: below last non-source block
+      for (var l = blocks.length - 1; l >= 0; l--) {
+        if (blocks[l] !== this._dragSourceBlock) {
+          var lastRect = blocks[l].getBoundingClientRect();
+          if (clientY > lastRect.bottom) {
+            return { element: blocks[l], position: "after" };
+          }
+          break;
+        }
+      }
+
+      return best;
+    },
+
+    _positionDropIndicator: function (target) {
+      if (!this._dragIndicator || !target) return;
+
+      var wrapperRect = this._visualWrapper.getBoundingClientRect();
+      var blockRect = target.element.getBoundingClientRect();
+      var y;
+
+      if (target.position === "before") {
+        y = blockRect.top - wrapperRect.top - 2;
+      } else {
+        y = blockRect.bottom - wrapperRect.top + 1;
+      }
+
+      y = Math.max(0, Math.min(y, this._visualWrapper.offsetHeight));
+
+      this._dragIndicator.style.top = y + "px";
+      this._dragIndicator.style.display = "block";
+    },
+
+    _cleanupDrag: function () {
+      var movedBlock = this._dragSourceBlock;
+      if (movedBlock) {
+        movedBlock.classList.remove("leaf-dragging");
+        this._dragSourceBlock = null;
+      }
+      if (this._dragIndicator) {
+        this._dragIndicator.remove();
+        this._dragIndicator = null;
+      }
+      this._dragDropTarget = null;
+
+      // Re-show handle on the block that was just moved
+      if (movedBlock && movedBlock.parentNode === this._visualEl) {
+        this._dragHandleBlock = movedBlock;
+        this._positionDragHandle(movedBlock);
+      } else {
+        this._dragHandleBlock = null;
+        if (this._dragHandle) {
+          this._dragHandle.style.display = "none";
+        }
+      }
+    },
+
+    _dismissImagePopover: function () {
+      // Remove selection class
+      if (this._imagePopoverTarget) {
+        this._imagePopoverTarget.classList.remove("leaf-img-selected");
+      }
+      // Remove resize handles
+      if (this._resizeHandles) {
+        this._resizeHandles.forEach(function (h) { h.remove(); });
+        this._resizeHandles = null;
+      }
+      // Remove popover
+      if (this._imagePopoverEl) {
+        this._imagePopoverEl.remove();
+        this._imagePopoverEl = null;
+      }
+      if (this._imagePopoverTarget) {
+        this._imagePopoverTarget = null;
+        this._debouncedPushVisualChange();
+      }
+    },
+
+    // -- Commands from parent --
+
+    _handleCommand: function (payload) {
+      switch (payload.action) {
+        case "insert_image":
+          if (this._visualEl && payload.url) {
+            this._visualEl.focus();
+            var imgHtml =
+              '<img src="' +
+              payload.url +
+              '" alt="' +
+              (payload.alt || "").replace(/"/g, "&quot;") +
+              '" draggable="true" />';
+            document.execCommand("insertHTML", false, imgHtml);
+            this._debouncedPushVisualChange();
+          }
+          break;
+
+        case "set_content":
+          break;
+
+        case "set_mode":
+          if (payload.mode && payload.mode !== this._mode) {
+            var tab = this.el.querySelector(
+              '[data-mode-tab="' + payload.mode + '"]'
+            );
+            if (tab) tab.click();
+          }
+          break;
+      }
+    },
+  };
+})();
+
+
+  // Register Leaf hook
+  if (window.LeafHooks && window.LeafHooks.Leaf) {
+    window.PhoenixKitHooks.Leaf = window.LeafHooks.Leaf;
+  }
+
+
   // ============================================================================
   // INITIALIZATION COMPLETE
   // ============================================================================