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
   // ============================================================================