alien-editor 0.1.0

package/dist/alien-editor.js

@@ -0,0 +1,2103 @@
+import { ref as k, defineComponent as A, openBlock as g, createElementBlock as b, withModifiers as m, normalizeClass as H, renderSlot as be, inject as E, computed as Q, unref as h, createElementVNode as o, withDirectives as _, vModelText as F, Fragment as N, renderList as V, toDisplayString as z, createCommentVNode as T, createVNode as S, withCtx as D, createTextVNode as re, createStaticVNode as Ie, onMounted as oe, watch as W, createBlock as U, resolveDynamicComponent as ce, nextTick as X, Teleport as me, onUnmounted as Ce, provide as Le } from "vue";
+function Se() {
+  const l = k([]), e = k("edit"), t = k(null), n = k(null);
+  return { blocks: l, mode: e, activeBlockId: t, savedRange: n };
+}
+const Ae = 100;
+function Te(l) {
+  const e = k([]), t = k([]);
+  function n() {
+    return {
+      blocks: JSON.parse(JSON.stringify(l.value)),
+      timestamp: Date.now()
+    };
+  }
+  function a() {
+    e.value.push(n()), e.value.length > Ae && e.value.shift(), t.value = [];
+  }
+  function p() {
+    e.value.length && (t.value.push(n()), l.value = e.value.pop().blocks);
+  }
+  function f() {
+    t.value.length && (e.value.push(n()), l.value = t.value.pop().blocks);
+  }
+  function v() {
+    return e.value.length > 0;
+  }
+  function d() {
+    return t.value.length > 0;
+  }
+  return { pushSnapshot: a, undo: p, redo: f, canUndo: v, canRedo: d };
+}
+function ye(l) {
+  function e() {
+    if (typeof window > "u") return;
+    const f = window.getSelection();
+    f && f.rangeCount > 0 && (l.value = f.getRangeAt(0).cloneRange());
+  }
+  function t() {
+    if (typeof window > "u" || !l.value) return;
+    const f = window.getSelection();
+    f && (f.removeAllRanges(), f.addRange(l.value));
+  }
+  function n() {
+    if (typeof window > "u") return null;
+    const f = window.getSelection();
+    return f && f.rangeCount > 0 ? f.getRangeAt(0) : null;
+  }
+  function a() {
+    if (typeof window > "u") return !0;
+    const f = window.getSelection();
+    return !f || f.isCollapsed;
+  }
+  function p() {
+    if (typeof window > "u") return null;
+    const f = window.getSelection();
+    return f && f.rangeCount > 0 ? f.toString() : null;
+  }
+  return { saveSelection: e, restoreSelection: t, getRange: n, isCollapsed: a, getSelectedText: p };
+}
+let Ee = 0;
+function De() {
+  return `ae-${Date.now()}-${++Ee}`;
+}
+function ie(l, e = {}) {
+  const t = De();
+  switch (l) {
+    case "paragraph":
+      return { id: t, type: "paragraph", html: "", align: "left", classes: [], ...e };
+    case "blockquote":
+      return { id: t, type: "blockquote", html: "", align: "left", classes: [], ...e };
+    case "heading":
+      return { id: t, type: "heading", level: 2, html: "", align: "left", classes: [], ...e };
+    case "ordered-list":
+      return { id: t, type: "ordered-list", items: [""], ...e };
+    case "unordered-list":
+      return { id: t, type: "unordered-list", items: [""], ...e };
+    case "image":
+      return { id: t, type: "image", src: "", alt: "", classes: [], ...e };
+    case "video":
+      return { id: t, type: "video", src: "", classes: [], ...e };
+    case "code":
+      return { id: t, type: "code", code: "", language: "plaintext", ...e };
+    case "divider":
+      return { id: t, type: "divider", classes: [], ...e };
+    case "button":
+      return { id: t, type: "button", label: "Button", href: "#", classes: ["inline-block", "px-4", "py-2", "bg-blue-600", "text-white", "rounded"], ...e };
+    case "module":
+      return { id: t, type: "module", html: "", ...e };
+    default:
+      return { id: t, type: "paragraph", html: "", align: "left", classes: [] };
+  }
+}
+function Ue(l, e) {
+  function t(v, d, r = {}) {
+    e();
+    const u = l.value.findIndex((c) => c.id === v), i = ie(d, r);
+    return l.value.splice(u + 1, 0, i), i.id;
+  }
+  function n(v, d, r = {}) {
+    e();
+    const u = ie(d, r);
+    return l.value.splice(v, 0, u), u.id;
+  }
+  function a(v) {
+    const d = l.value.findIndex((r) => r.id === v);
+    d !== -1 && (e(), l.value.splice(d, 1));
+  }
+  function p(v, d) {
+    const r = l.value.findIndex((c) => c.id === v), u = l.value.findIndex((c) => c.id === d);
+    if (r === -1 || u === -1 || r === u) return;
+    e();
+    const [i] = l.value.splice(r, 1);
+    l.value.splice(u, 0, i);
+  }
+  function f(v, d) {
+    const r = l.value.find((u) => u.id === v);
+    r && Object.assign(r, d);
+  }
+  return { addBlockAfter: t, addBlockAt: n, removeBlock: a, moveBlock: p, updateBlock: f, createDefaultBlock: ie };
+}
+function He(l, e) {
+  const t = k({ draggedId: null, overId: null });
+  function n(d, r) {
+    t.value.draggedId = d, r.dataTransfer && (r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", d));
+  }
+  function a(d, r) {
+    r.preventDefault(), r.dataTransfer && (r.dataTransfer.dropEffect = "move"), t.value.draggedId && t.value.draggedId !== d && (t.value.overId = d);
+  }
+  function p() {
+    t.value.overId = null;
+  }
+  function f(d) {
+    const { draggedId: r } = t.value;
+    r && r !== d && e(r, d), t.value = { draggedId: null, overId: null };
+  }
+  function v() {
+    t.value = { draggedId: null, overId: null };
+  }
+  return { dragState: t, onDragStart: n, onDragOver: a, onDragLeave: p, onDrop: f, onDragEnd: v };
+}
+function ue(l) {
+  return l === "left" ? "" : `text-${l}`;
+}
+function Z(l) {
+  const e = l.filter(Boolean);
+  return e.length ? ` class="${e.join(" ")}"` : "";
+}
+function ve(l) {
+  switch (l.type) {
+    case "paragraph": {
+      const e = l, t = [ue(e.align), ...e.classes].filter(Boolean);
+      return `<p${Z(t)}>${e.html || ""}</p>`;
+    }
+    case "blockquote": {
+      const e = l, t = ["border-l-4", "border-gray-300", "pl-4", "italic", ue(e.align), ...e.classes].filter(Boolean);
+      return `<blockquote${Z(t)}>${e.html || ""}</blockquote>`;
+    }
+    case "heading": {
+      const e = l, t = [ue(e.align), ...e.classes].filter(Boolean);
+      return `<h${e.level}${Z(t)}>${e.html || ""}</h${e.level}>`;
+    }
+    case "ordered-list":
+      return `<ol class="list-decimal list-inside">${l.items.map((n) => `<li>${n}</li>`).join("")}</ol>`;
+    case "unordered-list":
+      return `<ul class="list-disc list-inside">${l.items.map((n) => `<li>${n}</li>`).join("")}</ul>`;
+    case "image": {
+      const e = l, t = e.classes.filter(Boolean);
+      return e.src ? `<img src="${te(e.src)}" alt="${te(e.alt)}"${Z(t)} />` : "";
+    }
+    case "video": {
+      const e = l;
+      return e.src ? `<video src="${te(e.src)}" controls class="w-full"></video>` : "";
+    }
+    case "code": {
+      const e = l, t = e.code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      return `<pre class="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code class="language-${te(e.language)}">${t}</code></pre>`;
+    }
+    case "divider": {
+      const t = ["border-t", "border-gray-300", "my-4", ...l.classes].filter(Boolean);
+      return `<hr${Z(t)} />`;
+    }
+    case "button": {
+      const e = l, t = e.classes.filter(Boolean);
+      return `<a href="${te(e.href)}"${Z(t)}>${e.label || "Button"}</a>`;
+    }
+    case "module":
+      return l.html || "";
+    default:
+      return "";
+  }
+}
+function te(l) {
+  return l.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function Re() {
+  function l(e) {
+    return e.map((t) => ve(t)).filter(Boolean).join(`
+`);
+  }
+  return { serialize: l, serializeBlock: ve };
+}
+let je = 0;
+function R() {
+  return `ae-p-${Date.now()}-${++je}`;
+}
+function de(l) {
+  return l.classList.contains("text-center") ? "center" : l.classList.contains("text-right") ? "right" : l.classList.contains("text-justify") ? "justify" : "left";
+}
+function G(l, e = []) {
+  const t = ["text-left", "text-center", "text-right", "text-justify"];
+  return Array.from(l.classList).filter((n) => ![...t, ...e].includes(n));
+}
+function ze() {
+  function l(e) {
+    var f, v, d;
+    if (!e || !e.trim())
+      return [];
+    if (typeof window > "u" || typeof DOMParser > "u")
+      return [{ id: R(), type: "paragraph", html: e, align: "left", classes: [] }];
+    const n = new DOMParser().parseFromString(`<body>${e}</body>`, "text/html"), a = Array.from(n.body.childNodes), p = [];
+    for (const r of a) {
+      if (r.nodeType === Node.TEXT_NODE) {
+        const c = (f = r.textContent) == null ? void 0 : f.trim();
+        c && p.push({ id: R(), type: "paragraph", html: c, align: "left", classes: [] });
+        continue;
+      }
+      const u = r, i = (v = u.tagName) == null ? void 0 : v.toLowerCase();
+      switch (!0) {
+        case i === "p": {
+          p.push({
+            id: R(),
+            type: "paragraph",
+            html: u.innerHTML,
+            align: de(u),
+            classes: G(u)
+          });
+          break;
+        }
+        case /^h[1-6]$/.test(i): {
+          const c = parseInt(i[1]);
+          p.push({
+            id: R(),
+            type: "heading",
+            level: c,
+            html: u.innerHTML,
+            align: de(u),
+            classes: G(u)
+          });
+          break;
+        }
+        case i === "blockquote": {
+          p.push({
+            id: R(),
+            type: "blockquote",
+            html: u.innerHTML,
+            align: de(u),
+            classes: G(u, ["border-l-4", "border-gray-300", "pl-4", "italic"])
+          });
+          break;
+        }
+        case i === "ul": {
+          const c = Array.from(u.querySelectorAll(":scope > li")).map((x) => x.innerHTML);
+          p.push({
+            id: R(),
+            type: "unordered-list",
+            items: c.length ? c : [""]
+          });
+          break;
+        }
+        case i === "ol": {
+          const c = Array.from(u.querySelectorAll(":scope > li")).map((x) => x.innerHTML);
+          p.push({
+            id: R(),
+            type: "ordered-list",
+            items: c.length ? c : [""]
+          });
+          break;
+        }
+        case i === "img": {
+          p.push({
+            id: R(),
+            type: "image",
+            src: u.getAttribute("src") || "",
+            alt: u.getAttribute("alt") || "",
+            classes: G(u)
+          });
+          break;
+        }
+        case i === "video": {
+          p.push({
+            id: R(),
+            type: "video",
+            src: u.getAttribute("src") || "",
+            classes: G(u, ["w-full"])
+          });
+          break;
+        }
+        case i === "pre": {
+          const c = u.querySelector("code"), x = (c == null ? void 0 : c.className.replace("language-", "")) || "plaintext", $ = document.createElement("div");
+          $.innerHTML = (c == null ? void 0 : c.innerHTML) || "", p.push({
+            id: R(),
+            type: "code",
+            code: $.textContent || "",
+            language: x
+          });
+          break;
+        }
+        case i === "hr": {
+          p.push({
+            id: R(),
+            type: "divider",
+            classes: G(u, ["border-t", "border-gray-300", "my-4"])
+          });
+          break;
+        }
+        case (i === "a" && ((d = u.dataset) == null ? void 0 : d.alienBlock) === "button"): {
+          p.push({
+            id: R(),
+            type: "button",
+            label: u.textContent || "Button",
+            href: u.getAttribute("href") || "#",
+            classes: Array.from(u.classList)
+          });
+          break;
+        }
+        default:
+          p.push({
+            id: R(),
+            type: "module",
+            html: u.outerHTML
+          });
+      }
+    }
+    return p;
+  }
+  return { parse: l };
+}
+const J = {
+  bold: "font-bold",
+  italic: "italic",
+  underline: "underline",
+  strikethrough: "line-through",
+  fontSizes: {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl"
+  },
+  fontWeights: {
+    thin: "font-thin",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  },
+  headingDefaults: {
+    1: "text-5xl font-bold",
+    2: "text-4xl font-bold",
+    3: "text-3xl font-semibold",
+    4: "text-2xl font-semibold",
+    5: "text-xl font-medium",
+    6: "text-lg font-medium"
+  },
+  align: {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+    justify: "text-justify"
+  }
+};
+function pe(l) {
+  const { restoreSelection: e, getRange: t, isCollapsed: n } = ye(l);
+  function a(I) {
+    let w = I;
+    for (; w; ) {
+      if (w.contentEditable === "true") {
+        w.dispatchEvent(new Event("input", { bubbles: !0 }));
+        return;
+      }
+      w = w.parentNode;
+    }
+  }
+  function p(I) {
+    e();
+    const w = t();
+    if (!w || n()) return;
+    const L = w.extractContents(), C = document.createElement("span");
+    C.className = I, C.appendChild(L), w.insertNode(C);
+    const M = document.createRange();
+    M.selectNodeContents(C);
+    const s = window.getSelection();
+    return s == null || s.removeAllRanges(), s == null || s.addRange(M), a(C), C;
+  }
+  function f(I) {
+    e();
+    const w = t();
+    if (!w) return null;
+    let L = w.commonAncestorContainer.nodeType === Node.TEXT_NODE ? w.commonAncestorContainer.parentElement : w.commonAncestorContainer;
+    for (; L && L.contentEditable !== "true"; ) {
+      const C = L;
+      if (C.tagName === "SPAN" && C.classList.contains(I))
+        return C;
+      L = L.parentNode;
+    }
+    return null;
+  }
+  function v(I) {
+    const w = f(I);
+    if (w) {
+      const L = w.parentNode;
+      for (; w.firstChild; )
+        L.insertBefore(w.firstChild, w);
+      L.removeChild(w), L.normalize(), a(L);
+    } else
+      p(I);
+  }
+  function d() {
+    v(J.bold);
+  }
+  function r() {
+    v(J.italic);
+  }
+  function u() {
+    v(J.underline);
+  }
+  function i() {
+    v(J.strikethrough);
+  }
+  function c(I) {
+    f(`text-${I}`) || p(`text-${I}`);
+  }
+  function x(I) {
+    p(`font-${I}`);
+  }
+  function $(I) {
+    p(I);
+  }
+  function P(I, w) {
+    e();
+    const L = t();
+    if (!L) return;
+    const C = document.createElement("a");
+    C.href = I, C.className = "text-blue-600 underline hover:text-blue-800", C.target = "_blank", C.rel = "noopener noreferrer", n() || L.deleteContents(), C.textContent = w || I, L.insertNode(C);
+    const M = document.createRange();
+    M.setStartAfter(C), M.collapse(!0);
+    const s = window.getSelection();
+    s == null || s.removeAllRanges(), s == null || s.addRange(M), a(C);
+  }
+  function K(I) {
+    return f(I) !== null;
+  }
+  return {
+    wrapSelectionWithClass: p,
+    toggleClass: v,
+    applyBold: d,
+    applyItalic: r,
+    applyUnderline: u,
+    applyStrikethrough: i,
+    applyFontSize: c,
+    applyFontWeight: x,
+    applyColor: $,
+    insertLink: P,
+    isActive: K
+  };
+}
+const Ne = ["title", "disabled"], j = /* @__PURE__ */ A({
+  __name: "ToolbarButton",
+  props: {
+    title: {},
+    active: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["action"],
+  setup(l) {
+    return (e, t) => (g(), b("button", {
+      class: H(["ae-toolbar-btn inline-flex items-center justify-center w-8 h-8 rounded text-sm transition-colors", [
+        l.active ? "bg-gray-800 text-white" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
+        l.disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"
+      ]]),
+      title: l.title,
+      disabled: l.disabled,
+      onMousedown: t[0] || (t[0] = m((n) => e.$emit("action"), ["prevent"]))
+    }, [
+      be(e.$slots, "default")
+    ], 42, Ne));
+  }
+}), Ke = {
+  key: 0,
+  class: "ae-color-picker relative"
+}, Ve = { class: "p-2 border-b border-gray-100" }, qe = { class: "max-h-48 overflow-y-auto py-1" }, Oe = ["onMousedown"], _e = { class: "text-gray-700" }, Fe = { class: "text-gray-400 text-xs ml-auto" }, Pe = {
+  key: 0,
+  class: "px-3 py-2 text-sm text-gray-400 text-center"
+}, We = /* @__PURE__ */ A({
+  __name: "ColorPicker",
+  setup(l) {
+    const e = E("alienEditor"), t = pe(e.savedRange), n = k(!1), a = k(""), p = Q(
+      () => e.colors.filter(
+        (r) => r.title.toLowerCase().includes(a.value.toLowerCase()) || r.key.toLowerCase().includes(a.value.toLowerCase())
+      )
+    );
+    function f(r) {
+      t.applyColor(r.class), n.value = !1, a.value = "";
+    }
+    function v() {
+      n.value = !n.value, n.value && (a.value = "");
+    }
+    function d() {
+      n.value = !1;
+    }
+    return (r, u) => h(e).colors.length ? (g(), b("div", Ke, [
+      o("button", {
+        class: "ae-toolbar-btn inline-flex items-center gap-1 px-2 h-8 rounded text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors",
+        title: "Text color",
+        onMousedown: m(v, ["prevent"])
+      }, [...u[3] || (u[3] = [
+        o("span", { class: "text-xs font-medium" }, "A", -1),
+        o("span", { class: "text-gray-400" }, "▾", -1)
+      ])], 32),
+      n.value ? (g(), b("div", {
+        key: 0,
+        class: "ae-color-dropdown absolute top-full left-0 mt-1 w-52 bg-white border border-gray-200 rounded-lg shadow-lg z-50",
+        onMousedown: u[2] || (u[2] = m(() => {
+        }, ["stop"]))
+      }, [
+        o("div", Ve, [
+          _(o("input", {
+            "onUpdate:modelValue": u[0] || (u[0] = (i) => a.value = i),
+            type: "text",
+            placeholder: "Search colors...",
+            class: "w-full text-sm border border-gray-200 rounded px-2 py-1 outline-none focus:border-blue-400",
+            onMousedown: u[1] || (u[1] = m(() => {
+            }, ["stop"]))
+          }, null, 544), [
+            [F, a.value]
+          ])
+        ]),
+        o("ul", qe, [
+          (g(!0), b(N, null, V(p.value, (i) => (g(), b("li", {
+            key: i.key,
+            class: "flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-gray-50 text-sm",
+            onMousedown: m((c) => f(i), ["prevent"])
+          }, [
+            o("span", {
+              class: H(["font-bold text-base", i.class])
+            }, "A", 2),
+            o("span", _e, z(i.title), 1),
+            o("span", Fe, z(i.key), 1)
+          ], 40, Oe))), 128)),
+          p.value.length === 0 ? (g(), b("li", Pe, " No colors found ")) : T("", !0)
+        ])
+      ], 32)) : T("", !0),
+      n.value ? (g(), b("div", {
+        key: 1,
+        class: "fixed inset-0 z-40",
+        onMousedown: d
+      }, null, 32)) : T("", !0)
+    ])) : T("", !0);
+  }
+}), Je = {
+  key: 0,
+  class: "ae-module-dropdown relative"
+}, Xe = { class: "p-2 border-b border-gray-100" }, Ye = { class: "max-h-60 overflow-y-auto py-1" }, Ze = ["onMousedown"], Ge = { class: "w-8 h-8 rounded bg-gray-100 flex items-center justify-center text-gray-500 text-xs flex-shrink-0 mt-0.5" }, Qe = { class: "text-sm font-medium text-gray-800" }, et = { class: "text-xs text-gray-400" }, tt = {
+  key: 0,
+  class: "px-3 py-2 text-sm text-gray-400 text-center"
+}, ot = /* @__PURE__ */ A({
+  __name: "ModuleDropdown",
+  setup(l) {
+    const e = E("alienEditor"), t = k(!1), n = k(""), a = Q(
+      () => e.modules.filter(
+        (d) => d.title.toLowerCase().includes(n.value.toLowerCase()) || d.key.toLowerCase().includes(n.value.toLowerCase())
+      )
+    );
+    function p(d) {
+      var u;
+      const r = e.activeBlockId.value;
+      if (r)
+        e.addBlockAfter(r, "module", { html: d.module });
+      else {
+        const i = e.blocks.value, c = ((u = i[i.length - 1]) == null ? void 0 : u.id) ?? "";
+        c ? e.addBlockAfter(c, "module", { html: d.module }) : e.addBlockAt(0, "module", { html: d.module });
+      }
+      t.value = !1, n.value = "";
+    }
+    function f() {
+      t.value = !t.value, t.value && (n.value = "");
+    }
+    function v() {
+      t.value = !1;
+    }
+    return (d, r) => h(e).modules.length ? (g(), b("div", Je, [
+      o("button", {
+        class: "ae-toolbar-btn inline-flex items-center gap-1 px-2 h-8 rounded text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors",
+        title: "Insert module",
+        onMousedown: m(f, ["prevent"])
+      }, [...r[3] || (r[3] = [
+        o("span", { class: "text-xs font-medium" }, "{ }", -1),
+        o("span", { class: "text-gray-400" }, "▾", -1)
+      ])], 32),
+      t.value ? (g(), b("div", {
+        key: 0,
+        class: "ae-module-dropdown-panel absolute top-full left-0 mt-1 w-60 bg-white border border-gray-200 rounded-lg shadow-lg z-50",
+        onMousedown: r[2] || (r[2] = m(() => {
+        }, ["stop"]))
+      }, [
+        o("div", Xe, [
+          _(o("input", {
+            "onUpdate:modelValue": r[0] || (r[0] = (u) => n.value = u),
+            type: "text",
+            placeholder: "Search modules...",
+            class: "w-full text-sm border border-gray-200 rounded px-2 py-1 outline-none focus:border-blue-400",
+            onMousedown: r[1] || (r[1] = m(() => {
+            }, ["stop"]))
+          }, null, 544), [
+            [F, n.value]
+          ])
+        ]),
+        o("ul", Ye, [
+          (g(!0), b(N, null, V(a.value, (u) => (g(), b("li", {
+            key: u.key,
+            class: "flex items-start gap-2 px-3 py-2 cursor-pointer hover:bg-gray-50",
+            onMousedown: m((i) => p(u), ["prevent"])
+          }, [
+            o("div", Ge, z(u.key.slice(0, 2).toUpperCase()), 1),
+            o("div", null, [
+              o("p", Qe, z(u.title), 1),
+              o("p", et, z(u.key), 1)
+            ])
+          ], 40, Ze))), 128)),
+          a.value.length === 0 ? (g(), b("li", tt, " No modules found ")) : T("", !0)
+        ])
+      ], 32)) : T("", !0),
+      t.value ? (g(), b("div", {
+        key: 1,
+        class: "fixed inset-0 z-40",
+        onMousedown: v
+      }, null, 32)) : T("", !0)
+    ])) : T("", !0);
+  }
+}), nt = { class: "ae-mode-toggle flex rounded-md border border-gray-200 overflow-hidden" }, lt = ["title", "onMousedown"], rt = /* @__PURE__ */ A({
+  __name: "ModeToggle",
+  setup(l) {
+    const e = E("alienEditor"), t = [
+      { key: "edit", label: "Edit", title: "Edit mode" },
+      { key: "code", label: "Code", title: "View raw HTML" },
+      { key: "preview", label: "Preview", title: "Preview rendered output" }
+    ];
+    return (n, a) => (g(), b("div", nt, [
+      (g(), b(N, null, V(t, (p) => o("button", {
+        key: p.key,
+        class: H(["px-3 py-1 text-xs font-medium transition-colors", h(e).mode.value === p.key ? "bg-gray-800 text-white" : "text-gray-600 hover:bg-gray-100"]),
+        title: p.title,
+        onMousedown: m((f) => h(e).mode.value = p.key, ["prevent"])
+      }, z(p.label), 43, lt)), 64))
+    ]));
+  }
+}), st = { class: "relative" }, at = ["onMousedown"], it = { class: "relative" }, ut = ["onMousedown"], dt = { class: "relative" }, ct = ["onMousedown"], pt = { class: "relative" }, ft = ["onMousedown"], gt = { class: "ml-auto" }, vt = /* @__PURE__ */ A({
+  __name: "AlienToolbar",
+  setup(l) {
+    const e = E("alienEditor"), t = pe(e.savedRange), n = k(!1), a = [
+      { type: "paragraph", label: "Paragraph" },
+      { type: "heading", label: "Heading" },
+      { type: "unordered-list", label: "Bullet List" },
+      { type: "ordered-list", label: "Numbered List" },
+      { type: "blockquote", label: "Blockquote" },
+      { type: "code", label: "Code Block" },
+      { type: "image", label: "Image" },
+      { type: "video", label: "Video" },
+      { type: "button", label: "Button" },
+      { type: "divider", label: "Divider" }
+    ];
+    function p(M) {
+      var y;
+      const s = e.activeBlockId.value;
+      if (s)
+        e.addBlockAfter(s, M);
+      else {
+        const q = e.blocks.value, ne = (y = q[q.length - 1]) == null ? void 0 : y.id;
+        ne ? e.addBlockAfter(ne, M) : e.addBlockAt(0, M);
+      }
+      n.value = !1;
+    }
+    const f = k(!1), v = [1, 2, 3, 4, 5, 6];
+    function d(M) {
+      const s = e.activeBlockId.value;
+      if (!s) return;
+      const y = e.blocks.value.find((q) => q.id === s);
+      (y == null ? void 0 : y.type) === "heading" ? e.updateBlock(s, { level: M }) : (e.pushSnapshot(), e.updateBlock(s, { type: "heading", level: M, html: (y == null ? void 0 : y.html) ?? "" })), f.value = !1;
+    }
+    const r = k(!1), u = Object.entries(J.fontSizes), i = k(!1), c = Object.entries(J.fontWeights);
+    function x(M) {
+      const s = e.activeBlockId.value;
+      s && e.updateBlock(s, { align: M });
+    }
+    function $() {
+      e.saveSelection(), e.showLinkModal.value = !0;
+    }
+    function P() {
+      const M = e.activeBlockId.value;
+      M ? e.addBlockAfter(M, "image") : e.addBlockAt(e.blocks.value.length, "image");
+    }
+    function K() {
+      const M = e.activeBlockId.value;
+      M ? e.addBlockAfter(M, "divider") : e.addBlockAt(e.blocks.value.length, "divider");
+    }
+    const I = Q(() => e.activeBlockId.value ? e.blocks.value.find((M) => M.id === e.activeBlockId.value) ?? null : null), w = Q(() => {
+      var M;
+      return ((M = I.value) == null ? void 0 : M.align) ?? "left";
+    }), L = Q(() => e.mode.value === "edit");
+    function C() {
+      n.value = !1, f.value = !1, r.value = !1, i.value = !1;
+    }
+    return (M, s) => (g(), b("div", {
+      class: "ae-toolbar flex items-center gap-0.5 flex-wrap px-2 py-1.5 border-b border-gray-200 bg-white sticky top-0 z-20",
+      onMouseleave: C
+    }, [
+      L.value ? (g(), b(N, { key: 0 }, [
+        S(j, {
+          title: "Bold (Ctrl+B)",
+          onAction: s[0] || (s[0] = (y) => h(t).applyBold())
+        }, {
+          default: D(() => [...s[18] || (s[18] = [
+            o("strong", null, "B", -1)
+          ])]),
+          _: 1
+        }),
+        S(j, {
+          title: "Italic (Ctrl+I)",
+          onAction: s[1] || (s[1] = (y) => h(t).applyItalic())
+        }, {
+          default: D(() => [...s[19] || (s[19] = [
+            o("em", null, "I", -1)
+          ])]),
+          _: 1
+        }),
+        S(j, {
+          title: "Underline",
+          onAction: s[2] || (s[2] = (y) => h(t).applyUnderline())
+        }, {
+          default: D(() => [...s[20] || (s[20] = [
+            o("span", { class: "underline" }, "U", -1)
+          ])]),
+          _: 1
+        }),
+        S(j, {
+          title: "Strikethrough",
+          onAction: s[3] || (s[3] = (y) => h(t).applyStrikethrough())
+        }, {
+          default: D(() => [...s[21] || (s[21] = [
+            o("span", { class: "line-through" }, "S", -1)
+          ])]),
+          _: 1
+        }),
+        s[35] || (s[35] = o("div", { class: "ae-divider-v w-px h-5 bg-gray-200 mx-1" }, null, -1)),
+        o("div", st, [
+          o("button", {
+            class: "ae-toolbar-btn inline-flex items-center gap-1 px-2 h-8 rounded text-sm text-gray-600 hover:bg-gray-100 transition-colors",
+            title: "Heading level",
+            onMousedown: s[4] || (s[4] = m((y) => {
+              f.value = !f.value, r.value = !1, i.value = !1, n.value = !1;
+            }, ["prevent"]))
+          }, [...s[22] || (s[22] = [
+            re(" H ", -1),
+            o("span", { class: "text-gray-400 text-xs" }, "▾", -1)
+          ])], 32),
+          f.value ? (g(), b("div", {
+            key: 0,
+            class: "absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 py-1 min-w-[100px]",
+            onMousedown: s[5] || (s[5] = m(() => {
+            }, ["stop"]))
+          }, [
+            (g(), b(N, null, V(v, (y) => o("button", {
+              key: y,
+              class: "w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 flex items-center gap-2",
+              onMousedown: m((q) => d(y), ["prevent"])
+            }, [
+              o("span", {
+                class: H([h(J).headingDefaults[y], "leading-tight"])
+              }, "H" + z(y), 3)
+            ], 40, at)), 64))
+          ], 32)) : T("", !0)
+        ]),
+        o("div", it, [
+          o("button", {
+            class: "ae-toolbar-btn inline-flex items-center gap-1 px-2 h-8 rounded text-sm text-gray-600 hover:bg-gray-100 transition-colors",
+            title: "Font size",
+            onMousedown: s[6] || (s[6] = m((y) => {
+              r.value = !r.value, f.value = !1, i.value = !1, n.value = !1;
+            }, ["prevent"]))
+          }, [...s[23] || (s[23] = [
+            re(" Size ", -1),
+            o("span", { class: "text-gray-400 text-xs" }, "▾", -1)
+          ])], 32),
+          r.value ? (g(), b("div", {
+            key: 0,
+            class: "absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 py-1 min-w-[120px]",
+            onMousedown: s[7] || (s[7] = m(() => {
+            }, ["stop"]))
+          }, [
+            (g(!0), b(N, null, V(h(u), ([y]) => (g(), b("button", {
+              key: y,
+              class: H(["w-full text-left px-3 py-1 hover:bg-gray-50", `text-${y}`]),
+              onMousedown: m((q) => h(t).applyFontSize(y), ["prevent"])
+            }, z(y), 43, ut))), 128))
+          ], 32)) : T("", !0)
+        ]),
+        o("div", dt, [
+          o("button", {
+            class: "ae-toolbar-btn inline-flex items-center gap-1 px-2 h-8 rounded text-sm text-gray-600 hover:bg-gray-100 transition-colors",
+            title: "Font weight",
+            onMousedown: s[8] || (s[8] = m((y) => {
+              i.value = !i.value, f.value = !1, r.value = !1, n.value = !1;
+            }, ["prevent"]))
+          }, [...s[24] || (s[24] = [
+            re(" Weight ", -1),
+            o("span", { class: "text-gray-400 text-xs" }, "▾", -1)
+          ])], 32),
+          i.value ? (g(), b("div", {
+            key: 0,
+            class: "absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 py-1 min-w-[130px]",
+            onMousedown: s[9] || (s[9] = m(() => {
+            }, ["stop"]))
+          }, [
+            (g(!0), b(N, null, V(h(c), ([y]) => (g(), b("button", {
+              key: y,
+              class: H(["w-full text-left px-3 py-1 hover:bg-gray-50 text-sm", `font-${y}`]),
+              onMousedown: m((q) => h(t).applyFontWeight(y), ["prevent"])
+            }, z(y), 43, ct))), 128))
+          ], 32)) : T("", !0)
+        ]),
+        s[36] || (s[36] = o("div", { class: "ae-divider-v w-px h-5 bg-gray-200 mx-1" }, null, -1)),
+        S(j, {
+          title: "Align left",
+          active: w.value === "left",
+          onAction: s[10] || (s[10] = (y) => x("left"))
+        }, {
+          default: D(() => [...s[25] || (s[25] = [
+            o("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "currentColor"
+            }, [
+              o("rect", {
+                x: "0",
+                y: "1",
+                width: "14",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "0",
+                y: "5",
+                width: "10",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "0",
+                y: "9",
+                width: "14",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "0",
+                y: "13",
+                width: "8",
+                height: "2",
+                rx: "1"
+              })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["active"]),
+        S(j, {
+          title: "Align center",
+          active: w.value === "center",
+          onAction: s[11] || (s[11] = (y) => x("center"))
+        }, {
+          default: D(() => [...s[26] || (s[26] = [
+            o("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "currentColor"
+            }, [
+              o("rect", {
+                x: "0",
+                y: "1",
+                width: "14",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "2",
+                y: "5",
+                width: "10",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "0",
+                y: "9",
+                width: "14",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "3",
+                y: "13",
+                width: "8",
+                height: "2",
+                rx: "1"
+              })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["active"]),
+        S(j, {
+          title: "Align right",
+          active: w.value === "right",
+          onAction: s[12] || (s[12] = (y) => x("right"))
+        }, {
+          default: D(() => [...s[27] || (s[27] = [
+            o("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "currentColor"
+            }, [
+              o("rect", {
+                x: "0",
+                y: "1",
+                width: "14",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "4",
+                y: "5",
+                width: "10",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "0",
+                y: "9",
+                width: "14",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "6",
+                y: "13",
+                width: "8",
+                height: "2",
+                rx: "1"
+              })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["active"]),
+        S(j, {
+          title: "Justify",
+          active: w.value === "justify",
+          onAction: s[13] || (s[13] = (y) => x("justify"))
+        }, {
+          default: D(() => [...s[28] || (s[28] = [
+            o("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "currentColor"
+            }, [
+              o("rect", {
+                x: "0",
+                y: "1",
+                width: "14",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "0",
+                y: "5",
+                width: "14",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "0",
+                y: "9",
+                width: "14",
+                height: "2",
+                rx: "1"
+              }),
+              o("rect", {
+                x: "0",
+                y: "13",
+                width: "14",
+                height: "2",
+                rx: "1"
+              })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["active"]),
+        s[37] || (s[37] = o("div", { class: "ae-divider-v w-px h-5 bg-gray-200 mx-1" }, null, -1)),
+        S(j, {
+          title: "Insert link",
+          onAction: $
+        }, {
+          default: D(() => [...s[29] || (s[29] = [
+            o("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              o("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" }),
+              o("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" })
+            ], -1)
+          ])]),
+          _: 1
+        }),
+        S(j, {
+          title: "Insert image",
+          onAction: P
+        }, {
+          default: D(() => [...s[30] || (s[30] = [
+            o("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              o("rect", {
+                x: "3",
+                y: "3",
+                width: "18",
+                height: "18",
+                rx: "2",
+                ry: "2"
+              }),
+              o("circle", {
+                cx: "8.5",
+                cy: "8.5",
+                r: "1.5"
+              }),
+              o("polyline", { points: "21 15 16 10 5 21" })
+            ], -1)
+          ])]),
+          _: 1
+        }),
+        S(j, {
+          title: "Insert divider",
+          onAction: K
+        }, {
+          default: D(() => [...s[31] || (s[31] = [
+            o("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "currentColor"
+            }, [
+              o("rect", {
+                x: "0",
+                y: "6",
+                width: "14",
+                height: "2",
+                rx: "1"
+              })
+            ], -1)
+          ])]),
+          _: 1
+        }),
+        o("div", pt, [
+          o("button", {
+            class: "ae-toolbar-btn inline-flex items-center gap-1 px-2 h-8 rounded text-sm text-gray-600 hover:bg-gray-100 transition-colors",
+            title: "Insert block",
+            onMousedown: s[14] || (s[14] = m((y) => {
+              n.value = !n.value, f.value = !1, r.value = !1, i.value = !1;
+            }, ["prevent"]))
+          }, [...s[32] || (s[32] = [
+            re(" + Block ", -1),
+            o("span", { class: "text-gray-400 text-xs" }, "▾", -1)
+          ])], 32),
+          n.value ? (g(), b("div", {
+            key: 0,
+            class: "absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 py-1 min-w-[150px]",
+            onMousedown: s[15] || (s[15] = m(() => {
+            }, ["stop"]))
+          }, [
+            (g(), b(N, null, V(a, (y) => o("button", {
+              key: y.type,
+              class: "w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50",
+              onMousedown: m((q) => p(y.type), ["prevent"])
+            }, z(y.label), 41, ft)), 64))
+          ], 32)) : T("", !0)
+        ]),
+        s[38] || (s[38] = o("div", { class: "ae-divider-v w-px h-5 bg-gray-200 mx-1" }, null, -1)),
+        S(We),
+        S(ot),
+        s[39] || (s[39] = o("div", { class: "ae-divider-v w-px h-5 bg-gray-200 mx-1" }, null, -1)),
+        S(j, {
+          title: "Undo (Ctrl+Z)",
+          disabled: !h(e).canUndo(),
+          onAction: s[16] || (s[16] = (y) => h(e).undo())
+        }, {
+          default: D(() => [...s[33] || (s[33] = [
+            o("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              o("polyline", { points: "9 14 4 9 9 4" }),
+              o("path", { d: "M20 20v-7a4 4 0 00-4-4H4" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["disabled"]),
+        S(j, {
+          title: "Redo (Ctrl+Y)",
+          disabled: !h(e).canRedo(),
+          onAction: s[17] || (s[17] = (y) => h(e).redo())
+        }, {
+          default: D(() => [...s[34] || (s[34] = [
+            o("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              o("polyline", { points: "15 14 20 9 15 4" }),
+              o("path", { d: "M4 20v-7a4 4 0 014-4h12" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["disabled"]),
+        s[40] || (s[40] = o("div", { class: "ae-divider-v w-px h-5 bg-gray-200 mx-1" }, null, -1))
+      ], 64)) : T("", !0),
+      o("div", gt, [
+        S(rt)
+      ])
+    ], 32));
+  }
+}), bt = {
+  key: 0,
+  class: "ae-drop-indicator absolute top-0 left-0 right-0 h-0.5 bg-blue-500 z-10 pointer-events-none"
+}, mt = { class: "ae-block-controls absolute left-0 top-1/2 -translate-y-1/2 -translate-x-full pr-1 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col gap-0.5" }, yt = { class: "ae-block-content" }, xt = { class: "ae-block-actions absolute right-0 top-1/2 -translate-y-1/2 translate-x-full pl-1 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col gap-0.5" }, ht = /* @__PURE__ */ A({
+  __name: "BlockWrapper",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    const e = E("alienEditor");
+    return (t, n) => (g(), b("div", {
+      class: H(["ae-block-wrapper group relative", {
+        "ae-block--drag-over": h(e).dragState.value.overId === l.block.id,
+        "ae-block--dragging": h(e).dragState.value.draggedId === l.block.id
+      }]),
+      onDragover: n[5] || (n[5] = (a) => h(e).onDragOver(l.block.id, a)),
+      onDragleave: n[6] || (n[6] = (a) => h(e).onDragLeave()),
+      onDrop: n[7] || (n[7] = m((a) => h(e).onDrop(l.block.id), ["prevent"]))
+    }, [
+      h(e).dragState.value.overId === l.block.id ? (g(), b("div", bt)) : T("", !0),
+      o("div", mt, [
+        o("button", {
+          class: "ae-drag-handle cursor-grab active:cursor-grabbing w-5 h-6 flex items-center justify-center text-gray-400 hover:text-gray-600 rounded hover:bg-gray-100",
+          draggable: "true",
+          title: "Drag to reorder",
+          onMousedown: n[0] || (n[0] = m(() => {
+          }, ["stop"])),
+          onDragstart: n[1] || (n[1] = (a) => h(e).onDragStart(l.block.id, a)),
+          onDragend: n[2] || (n[2] = (a) => h(e).onDragEnd())
+        }, [...n[8] || (n[8] = [
+          Ie('<svg width="10" height="16" viewBox="0 0 10 16" fill="currentColor"><circle cx="3" cy="3" r="1.5"></circle><circle cx="7" cy="3" r="1.5"></circle><circle cx="3" cy="8" r="1.5"></circle><circle cx="7" cy="8" r="1.5"></circle><circle cx="3" cy="13" r="1.5"></circle><circle cx="7" cy="13" r="1.5"></circle></svg>', 1)
+        ])], 32)
+      ]),
+      o("div", yt, [
+        be(t.$slots, "default")
+      ]),
+      o("div", xt, [
+        o("button", {
+          class: "ae-btn-add w-6 h-6 flex items-center justify-center text-gray-400 hover:text-green-600 hover:bg-green-50 rounded text-lg leading-none",
+          title: "Add block below",
+          onMousedown: n[3] || (n[3] = m((a) => h(e).addBlockAfter(l.block.id, "paragraph"), ["prevent"]))
+        }, " + ", 32),
+        o("button", {
+          class: "ae-btn-delete w-6 h-6 flex items-center justify-center text-gray-400 hover:text-red-600 hover:bg-red-50 rounded text-sm leading-none",
+          title: "Delete block",
+          onMousedown: n[4] || (n[4] = m((a) => h(e).removeBlock(l.block.id), ["prevent"]))
+        }, " × ", 32)
+      ])
+    ], 34));
+  }
+}), kt = /* @__PURE__ */ A({
+  __name: "TextBlock",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    const e = l, t = E("alienEditor"), n = k(null);
+    let a = null, p = !1;
+    oe(() => {
+      n.value && n.value.innerHTML !== e.block.html && (n.value.innerHTML = e.block.html);
+    }), W(
+      () => e.block.html,
+      (r) => {
+        n.value && !p && n.value.innerHTML !== r && (n.value.innerHTML = r);
+      }
+    );
+    function f() {
+      n.value && (p = !0, t.updateBlock(e.block.id, { html: n.value.innerHTML }), p = !1, a && clearTimeout(a), a = setTimeout(() => {
+        t.pushSnapshot();
+      }, 500));
+    }
+    function v(r) {
+      var u;
+      if (r.key === "Enter" && !r.shiftKey) {
+        r.preventDefault();
+        const i = t.addBlockAfter(e.block.id, "paragraph");
+        X(() => {
+          const c = document.querySelector(`[data-block-id="${i}"]`);
+          c == null || c.focus();
+        });
+        return;
+      }
+      if (r.key === "Backspace" && ((u = n.value) == null ? void 0 : u.innerHTML) === "") {
+        r.preventDefault();
+        const i = t.blocks.value, c = i.findIndex(($) => $.id === e.block.id), x = c > 0 ? i[c - 1].id : null;
+        t.removeBlock(e.block.id), x && X(() => {
+          const $ = document.querySelector(`[data-block-id="${x}"]`);
+          $ == null || $.focus();
+        });
+      }
+    }
+    function d() {
+      t.activeBlockId.value = e.block.id;
+    }
+    return (r, u) => (g(), U(ce(l.block.type === "blockquote" ? "blockquote" : "p"), {
+      ref_key: "el",
+      ref: n,
+      "data-block-id": l.block.id,
+      "data-placeholder": h(t).placeholder || "Type something...",
+      contenteditable: "true",
+      spellcheck: "true",
+      class: H(["ae-text-block outline-none min-h-[1.5em] w-full", [
+        l.block.align !== "left" ? `text-${l.block.align}` : "",
+        ...l.block.classes,
+        l.block.type === "blockquote" ? "border-l-4 border-gray-300 pl-4 italic text-gray-600" : ""
+      ]]),
+      onInput: f,
+      onKeydown: v,
+      onFocus: d,
+      onMousedown: u[0] || (u[0] = (i) => h(t).saveSelection()),
+      onKeyup: u[1] || (u[1] = (i) => h(t).saveSelection())
+    }, null, 40, ["data-block-id", "data-placeholder", "class"]));
+  }
+}), wt = { class: "ae-heading-block" }, $t = { class: "ae-heading-level-selector flex gap-1 mb-1 opacity-0 focus-within:opacity-100 hover:opacity-100 transition-opacity" }, Mt = ["onMousedown"], Bt = /* @__PURE__ */ A({
+  __name: "HeadingBlock",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    const e = l, t = E("alienEditor"), n = k(null);
+    let a = null, p = !1;
+    const f = {
+      1: "text-5xl font-bold",
+      2: "text-4xl font-bold",
+      3: "text-3xl font-semibold",
+      4: "text-2xl font-semibold",
+      5: "text-xl font-medium",
+      6: "text-lg font-medium"
+    };
+    oe(() => {
+      n.value && n.value.innerHTML !== e.block.html && (n.value.innerHTML = e.block.html);
+    }), W(
+      () => e.block.html,
+      (i) => {
+        n.value && !p && n.value.innerHTML !== i && (n.value.innerHTML = i);
+      }
+    );
+    function v() {
+      n.value && (p = !0, t.updateBlock(e.block.id, { html: n.value.innerHTML }), p = !1, a && clearTimeout(a), a = setTimeout(() => t.pushSnapshot(), 500));
+    }
+    function d(i) {
+      var c;
+      if (i.key === "Enter" && !i.shiftKey) {
+        i.preventDefault();
+        const x = t.addBlockAfter(e.block.id, "paragraph");
+        X(() => {
+          const $ = document.querySelector(`[data-block-id="${x}"]`);
+          $ == null || $.focus();
+        });
+      }
+      if (i.key === "Backspace" && ((c = n.value) == null ? void 0 : c.innerHTML) === "") {
+        i.preventDefault();
+        const x = t.blocks.value, $ = x.findIndex((K) => K.id === e.block.id), P = $ > 0 ? x[$ - 1].id : null;
+        t.removeBlock(e.block.id), P && X(() => {
+          const K = document.querySelector(`[data-block-id="${P}"]`);
+          K == null || K.focus();
+        });
+      }
+    }
+    function r() {
+      t.activeBlockId.value = e.block.id;
+    }
+    function u(i) {
+      t.pushSnapshot(), t.updateBlock(e.block.id, { level: i });
+    }
+    return (i, c) => (g(), b("div", wt, [
+      o("div", $t, [
+        (g(), b(N, null, V([1, 2, 3, 4, 5, 6], (x) => o("button", {
+          key: x,
+          class: H(["text-xs px-1.5 py-0.5 rounded border transition-colors", l.block.level === x ? "bg-gray-800 text-white border-gray-800" : "border-gray-300 text-gray-500 hover:border-gray-500"]),
+          onMousedown: m(($) => u(x), ["prevent"])
+        }, " H" + z(x), 43, Mt)), 64))
+      ]),
+      (g(), U(ce(`h${l.block.level}`), {
+        ref_key: "el",
+        ref: n,
+        "data-block-id": l.block.id,
+        "data-placeholder": `Heading ${l.block.level}`,
+        contenteditable: "true",
+        spellcheck: "true",
+        class: H(["ae-heading-content outline-none min-h-[1.2em] w-full", [
+          f[l.block.level],
+          l.block.align !== "left" ? `text-${l.block.align}` : "",
+          ...l.block.classes
+        ]]),
+        onInput: v,
+        onKeydown: d,
+        onFocus: r,
+        onMousedown: c[0] || (c[0] = (x) => h(t).saveSelection()),
+        onKeyup: c[1] || (c[1] = (x) => h(t).saveSelection())
+      }, null, 40, ["data-block-id", "data-placeholder", "class"]))
+    ]));
+  }
+}), It = ["onInput", "onKeydown"], Ct = /* @__PURE__ */ A({
+  __name: "ListBlock",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    const e = l, t = E("alienEditor"), n = k([]);
+    function a(d, r) {
+      d && (n.value[r] = d);
+    }
+    function p(d, r) {
+      const u = r.target, i = [...e.block.items];
+      i[d] = u.innerHTML, t.updateBlock(e.block.id, { items: i });
+    }
+    function f(d, r) {
+      const u = e.block.items;
+      if (r.key === "Enter" && !r.shiftKey) {
+        r.preventDefault(), t.pushSnapshot();
+        const i = [...u];
+        i.splice(d + 1, 0, ""), t.updateBlock(e.block.id, { items: i }), X(() => {
+          var c;
+          (c = n.value[d + 1]) == null || c.focus();
+        });
+        return;
+      }
+      if (r.key === "Backspace") {
+        const i = r.target;
+        if (i.innerHTML === "" && u.length > 1) {
+          r.preventDefault(), t.pushSnapshot();
+          const c = [...u];
+          c.splice(d, 1), t.updateBlock(e.block.id, { items: c }), X(() => {
+            var $;
+            const x = Math.max(0, d - 1);
+            ($ = n.value[x]) == null || $.focus();
+          });
+        } else if (i.innerHTML === "" && u.length === 1) {
+          r.preventDefault(), t.pushSnapshot();
+          const c = t.addBlockAfter(e.block.id, "paragraph");
+          t.removeBlock(e.block.id), X(() => {
+            const x = document.querySelector(`[data-block-id="${c}"]`);
+            x == null || x.focus();
+          });
+        }
+      }
+    }
+    function v() {
+      t.activeBlockId.value = e.block.id;
+    }
+    return (d, r) => (g(), U(ce(l.block.type === "ordered-list" ? "ol" : "ul"), {
+      class: H(["ae-list-block pl-6", l.block.type === "ordered-list" ? "list-decimal" : "list-disc"])
+    }, {
+      default: D(() => [
+        (g(!0), b(N, null, V(l.block.items, (u, i) => (g(), b("li", {
+          key: i,
+          ref_for: !0,
+          ref: (c) => a(c, i),
+          contenteditable: "true",
+          spellcheck: "true",
+          class: "outline-none min-h-[1.5em]",
+          "data-placeholder": "List item",
+          onInput: (c) => p(i, c),
+          onKeydown: (c) => f(i, c),
+          onFocus: v,
+          onMousedown: r[0] || (r[0] = (c) => h(t).saveSelection()),
+          onKeyup: r[1] || (r[1] = (c) => h(t).saveSelection())
+        }, null, 40, It))), 128))
+      ]),
+      _: 1
+    }, 8, ["class"]));
+  }
+}), Lt = { class: "ae-image-block" }, St = {
+  key: 0,
+  class: "relative group/img"
+}, At = ["src", "alt"], Tt = { class: "absolute inset-0 bg-black/0 group-hover/img:bg-black/20 transition-colors rounded flex items-center justify-center gap-2 opacity-0 group-hover/img:opacity-100" }, Et = ["value"], Dt = {
+  key: 1,
+  class: "ae-image-empty border-2 border-dashed border-gray-300 rounded-lg p-8 flex flex-col items-center gap-3 bg-gray-50"
+}, Ut = { class: "flex gap-2" }, Ht = {
+  key: 0,
+  class: "w-full flex gap-2"
+}, Rt = /* @__PURE__ */ A({
+  __name: "ImageBlock",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    const e = l, t = E("alienEditor"), n = k(""), a = k(null), p = k(!1);
+    function f(i) {
+      var $;
+      const c = ($ = i.target.files) == null ? void 0 : $[0];
+      if (!c) return;
+      t.onUpload(c);
+      const x = URL.createObjectURL(c);
+      t.updateBlock(e.block.id, { src: x, alt: c.name }), t.pushSnapshot();
+    }
+    function v() {
+      const i = n.value.trim();
+      i && (t.pushSnapshot(), t.updateBlock(e.block.id, { src: i }), p.value = !1, n.value = "");
+    }
+    function d(i) {
+      i.key === "Enter" && v(), i.key === "Escape" && (p.value = !1, n.value = "");
+    }
+    function r(i) {
+      t.updateBlock(e.block.id, { alt: i.target.value });
+    }
+    function u() {
+      t.pushSnapshot(), t.updateBlock(e.block.id, { src: "" });
+    }
+    return (i, c) => (g(), b("div", Lt, [
+      l.block.src ? (g(), b("div", St, [
+        o("img", {
+          src: l.block.src,
+          alt: l.block.alt,
+          class: H(["max-w-full rounded", l.block.classes])
+        }, null, 10, At),
+        o("div", Tt, [
+          o("button", {
+            class: "bg-white text-gray-700 text-xs px-2 py-1 rounded shadow hover:bg-gray-100",
+            onMousedown: m(u, ["prevent"])
+          }, " Replace ", 32)
+        ]),
+        o("input", {
+          type: "text",
+          value: l.block.alt,
+          placeholder: "Alt text (optional)",
+          class: "mt-1 w-full text-sm text-gray-500 border-0 border-b border-gray-200 outline-none focus:border-gray-400 bg-transparent",
+          onChange: r,
+          onMousedown: c[0] || (c[0] = m(() => {
+          }, ["stop"]))
+        }, null, 40, Et)
+      ])) : (g(), b("div", Dt, [
+        c[5] || (c[5] = o("svg", {
+          class: "w-10 h-10 text-gray-400",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        }, [
+          o("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "1.5",
+            d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          })
+        ], -1)),
+        c[6] || (c[6] = o("p", { class: "text-sm text-gray-500" }, "Upload an image or paste a URL", -1)),
+        o("div", Ut, [
+          o("button", {
+            class: "text-sm px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+            onMousedown: c[1] || (c[1] = m((x) => {
+              var $;
+              return ($ = a.value) == null ? void 0 : $.click();
+            }, ["prevent"]))
+          }, " Upload file ", 32),
+          o("button", {
+            class: "text-sm px-3 py-1.5 border border-gray-300 rounded hover:bg-gray-100 transition-colors",
+            onMousedown: c[2] || (c[2] = m((x) => p.value = !p.value, ["prevent"]))
+          }, " Paste URL ", 32)
+        ]),
+        p.value ? (g(), b("div", Ht, [
+          _(o("input", {
+            "onUpdate:modelValue": c[3] || (c[3] = (x) => n.value = x),
+            type: "url",
+            placeholder: "https://example.com/image.jpg",
+            class: "flex-1 text-sm border border-gray-300 rounded px-3 py-1.5 outline-none focus:border-blue-500",
+            onKeydown: d,
+            onMousedown: c[4] || (c[4] = m(() => {
+            }, ["stop"]))
+          }, null, 544), [
+            [F, n.value]
+          ]),
+          o("button", {
+            class: "text-sm px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700",
+            onMousedown: m(v, ["prevent"])
+          }, " Insert ", 32)
+        ])) : T("", !0),
+        o("input", {
+          ref_key: "fileInput",
+          ref: a,
+          type: "file",
+          accept: "image/*",
+          class: "hidden",
+          onChange: f
+        }, null, 544)
+      ]))
+    ]));
+  }
+}), jt = { class: "ae-video-block" }, zt = {
+  key: 0,
+  class: "relative group/vid"
+}, Nt = ["src"], Kt = {
+  key: 1,
+  class: "ae-video-empty border-2 border-dashed border-gray-300 rounded-lg p-8 flex flex-col items-center gap-3 bg-gray-50"
+}, Vt = { class: "w-full flex gap-2" }, qt = /* @__PURE__ */ A({
+  __name: "VideoBlock",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    const e = l, t = E("alienEditor"), n = k("");
+    function a() {
+      const v = n.value.trim();
+      v && (t.pushSnapshot(), t.updateBlock(e.block.id, { src: v }), n.value = "");
+    }
+    function p(v) {
+      v.key === "Enter" && a();
+    }
+    function f() {
+      t.pushSnapshot(), t.updateBlock(e.block.id, { src: "" });
+    }
+    return (v, d) => (g(), b("div", jt, [
+      l.block.src ? (g(), b("div", zt, [
+        o("video", {
+          src: l.block.src,
+          controls: "",
+          class: H(["w-full rounded", l.block.classes])
+        }, null, 10, Nt),
+        o("button", {
+          class: "absolute top-2 right-2 bg-red-600 text-white text-xs px-2 py-1 rounded opacity-0 group-hover/vid:opacity-100 transition-opacity",
+          onMousedown: m(f, ["prevent"])
+        }, " Remove ", 32)
+      ])) : (g(), b("div", Kt, [
+        d[2] || (d[2] = o("svg", {
+          class: "w-10 h-10 text-gray-400",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        }, [
+          o("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "1.5",
+            d: "M15 10l4.553-2.069A1 1 0 0121 8.87v6.26a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+          })
+        ], -1)),
+        d[3] || (d[3] = o("p", { class: "text-sm text-gray-500" }, "Paste a video URL", -1)),
+        o("div", Vt, [
+          _(o("input", {
+            "onUpdate:modelValue": d[0] || (d[0] = (r) => n.value = r),
+            type: "url",
+            placeholder: "https://example.com/video.mp4",
+            class: "flex-1 text-sm border border-gray-300 rounded px-3 py-1.5 outline-none focus:border-blue-500",
+            onKeydown: p,
+            onMousedown: d[1] || (d[1] = m(() => {
+            }, ["stop"]))
+          }, null, 544), [
+            [F, n.value]
+          ]),
+          o("button", {
+            class: "text-sm px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700",
+            onMousedown: m(a, ["prevent"])
+          }, " Insert ", 32)
+        ])
+      ]))
+    ]));
+  }
+}), Ot = { class: "ae-code-block bg-gray-900 rounded-lg overflow-hidden" }, _t = { class: "flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700" }, Ft = ["value"], Pt = ["value"], Wt = ["value"], Jt = /* @__PURE__ */ A({
+  __name: "CodeBlock",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    const e = l, t = E("alienEditor"), n = [
+      "plaintext",
+      "javascript",
+      "typescript",
+      "html",
+      "css",
+      "scss",
+      "python",
+      "ruby",
+      "php",
+      "java",
+      "go",
+      "rust",
+      "c",
+      "cpp",
+      "json",
+      "yaml",
+      "markdown",
+      "bash",
+      "shell",
+      "sql"
+    ];
+    function a(v) {
+      t.updateBlock(e.block.id, { code: v.target.value });
+    }
+    function p(v) {
+      t.pushSnapshot(), t.updateBlock(e.block.id, { language: v.target.value });
+    }
+    function f() {
+      t.activeBlockId.value = e.block.id;
+    }
+    return (v, d) => (g(), b("div", Ot, [
+      o("div", _t, [
+        o("select", {
+          value: l.block.language,
+          class: "bg-transparent text-gray-300 text-xs outline-none cursor-pointer",
+          onChange: p,
+          onMousedown: d[0] || (d[0] = m(() => {
+          }, ["stop"]))
+        }, [
+          (g(), b(N, null, V(n, (r) => o("option", {
+            key: r,
+            value: r,
+            class: "bg-gray-800"
+          }, z(r), 9, Pt)), 64))
+        ], 40, Ft),
+        d[2] || (d[2] = o("div", { class: "flex gap-1.5" }, [
+          o("div", { class: "w-3 h-3 rounded-full bg-red-500 opacity-70" }),
+          o("div", { class: "w-3 h-3 rounded-full bg-yellow-500 opacity-70" }),
+          o("div", { class: "w-3 h-3 rounded-full bg-green-500 opacity-70" })
+        ], -1))
+      ]),
+      o("textarea", {
+        value: l.block.code,
+        class: "w-full bg-gray-900 text-gray-100 font-mono text-sm p-4 outline-none resize-none min-h-[120px] leading-relaxed",
+        placeholder: "// Enter your code here...",
+        spellcheck: "false",
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        onInput: a,
+        onFocus: f,
+        onMousedown: d[1] || (d[1] = m(() => {
+        }, ["stop"]))
+      }, null, 40, Wt)
+    ]));
+  }
+}), Xt = /* @__PURE__ */ A({
+  __name: "DividerBlock",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    return (e, t) => (g(), b("hr", {
+      class: H(["ae-divider border-t border-gray-300 my-2 w-full", l.block.classes])
+    }, null, 2));
+  }
+}), Yt = { class: "ae-button-block" }, Zt = {
+  key: 0,
+  class: "flex flex-col gap-2 p-3 border border-gray-200 rounded-lg bg-gray-50"
+}, Gt = { class: "flex gap-2" }, Qt = { class: "flex gap-2 justify-end" }, eo = {
+  key: 1,
+  class: "flex items-center gap-2"
+}, to = ["href"], oo = /* @__PURE__ */ A({
+  __name: "ButtonBlock",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    const e = l, t = E("alienEditor"), n = k(!1), a = k(e.block.label), p = k(e.block.href);
+    function f() {
+      a.value = e.block.label, p.value = e.block.href, n.value = !0;
+    }
+    function v() {
+      t.pushSnapshot(), t.updateBlock(e.block.id, {
+        label: a.value,
+        href: p.value
+      }), n.value = !1;
+    }
+    function d() {
+      n.value = !1;
+    }
+    function r(u) {
+      u.key === "Enter" && v(), u.key === "Escape" && d();
+    }
+    return (u, i) => (g(), b("div", Yt, [
+      n.value ? (g(), b("div", Zt, [
+        o("div", Gt, [
+          _(o("input", {
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => a.value = c),
+            type: "text",
+            placeholder: "Button label",
+            class: "flex-1 text-sm border border-gray-300 rounded px-3 py-1.5 outline-none focus:border-blue-500",
+            onKeydown: r,
+            onMousedown: i[1] || (i[1] = m(() => {
+            }, ["stop"]))
+          }, null, 544), [
+            [F, a.value]
+          ]),
+          _(o("input", {
+            "onUpdate:modelValue": i[2] || (i[2] = (c) => p.value = c),
+            type: "url",
+            placeholder: "https://...",
+            class: "flex-1 text-sm border border-gray-300 rounded px-3 py-1.5 outline-none focus:border-blue-500",
+            onKeydown: r,
+            onMousedown: i[3] || (i[3] = m(() => {
+            }, ["stop"]))
+          }, null, 544), [
+            [F, p.value]
+          ])
+        ]),
+        o("div", Qt, [
+          o("button", {
+            class: "text-sm px-3 py-1 border border-gray-300 rounded hover:bg-gray-100",
+            onMousedown: m(d, ["prevent"])
+          }, " Cancel ", 32),
+          o("button", {
+            class: "text-sm px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700",
+            onMousedown: m(v, ["prevent"])
+          }, " Save ", 32)
+        ])
+      ])) : (g(), b("div", eo, [
+        o("a", {
+          href: l.block.href,
+          class: H(["inline-block", l.block.classes.length ? l.block.classes : ["px-4", "py-2", "bg-blue-600", "text-white", "rounded", "hover:bg-blue-700", "transition-colors"]]),
+          onClick: i[4] || (i[4] = m(() => {
+          }, ["prevent"]))
+        }, z(l.block.label), 11, to),
+        o("button", {
+          class: "text-xs text-gray-400 hover:text-gray-600 underline",
+          onMousedown: m(f, ["prevent"])
+        }, " Edit ", 32)
+      ]))
+    ]));
+  }
+}), no = /* @__PURE__ */ A({
+  __name: "ModuleBlock",
+  props: {
+    block: {}
+  },
+  setup(l) {
+    const e = l, t = E("alienEditor"), n = k(null);
+    let a = null, p = !1;
+    oe(() => {
+      n.value && n.value.innerHTML !== e.block.html && (n.value.innerHTML = e.block.html);
+    }), W(
+      () => e.block.html,
+      (d) => {
+        n.value && !p && n.value.innerHTML !== d && (n.value.innerHTML = d);
+      }
+    );
+    function f() {
+      n.value && (p = !0, t.updateBlock(e.block.id, { html: n.value.innerHTML }), p = !1, a && clearTimeout(a), a = setTimeout(() => {
+        t.pushSnapshot();
+      }, 500));
+    }
+    function v() {
+      t.activeBlockId.value = e.block.id;
+    }
+    return (d, r) => (g(), b("div", {
+      ref_key: "el",
+      ref: n,
+      class: "ae-module-block outline-none",
+      contenteditable: "true",
+      spellcheck: "true",
+      onInput: f,
+      onFocus: v,
+      onMousedown: r[0] || (r[0] = (u) => h(t).saveSelection()),
+      onKeyup: r[1] || (r[1] = (u) => h(t).saveSelection())
+    }, null, 544));
+  }
+}), lo = { class: "ae-block-list" }, ro = /* @__PURE__ */ A({
+  __name: "BlockList",
+  setup(l) {
+    const e = E("alienEditor");
+    return (t, n) => (g(), b("div", lo, [
+      (g(!0), b(N, null, V(h(e).blocks.value, (a) => (g(), U(ht, {
+        key: a.id,
+        block: a
+      }, {
+        default: D(() => [
+          a.type === "paragraph" || a.type === "blockquote" ? (g(), U(kt, {
+            key: 0,
+            block: a
+          }, null, 8, ["block"])) : a.type === "heading" ? (g(), U(Bt, {
+            key: 1,
+            block: a
+          }, null, 8, ["block"])) : a.type === "ordered-list" || a.type === "unordered-list" ? (g(), U(Ct, {
+            key: 2,
+            block: a
+          }, null, 8, ["block"])) : a.type === "image" ? (g(), U(Rt, {
+            key: 3,
+            block: a
+          }, null, 8, ["block"])) : a.type === "video" ? (g(), U(qt, {
+            key: 4,
+            block: a
+          }, null, 8, ["block"])) : a.type === "code" ? (g(), U(Jt, {
+            key: 5,
+            block: a
+          }, null, 8, ["block"])) : a.type === "divider" ? (g(), U(Xt, {
+            key: 6,
+            block: a
+          }, null, 8, ["block"])) : a.type === "button" ? (g(), U(oo, {
+            key: 7,
+            block: a
+          }, null, 8, ["block"])) : a.type === "module" ? (g(), U(no, {
+            key: 8,
+            block: a
+          }, null, 8, ["block"])) : T("", !0)
+        ]),
+        _: 2
+      }, 1032, ["block"]))), 128))
+    ]));
+  }
+}), so = { class: "space-y-3" }, ao = { class: "flex gap-3 justify-end mt-6" }, io = ["disabled"], uo = /* @__PURE__ */ A({
+  __name: "LinkModal",
+  setup(l) {
+    const e = E("alienEditor"), t = pe(e.savedRange), n = k(""), a = k("");
+    W(e.showLinkModal, (d) => {
+      d && (n.value = "", a.value = "");
+    });
+    function p() {
+      n.value.trim() && (e.linkModalCallback.value ? e.linkModalCallback.value(n.value.trim(), a.value.trim()) : (e.pushSnapshot(), t.insertLink(n.value.trim(), a.value.trim())), f());
+    }
+    function f() {
+      e.showLinkModal.value = !1, n.value = "", a.value = "";
+    }
+    function v(d) {
+      d.key === "Enter" && p(), d.key === "Escape" && f();
+    }
+    return (d, r) => (g(), U(me, { to: "body" }, [
+      h(e).showLinkModal.value ? (g(), b("div", {
+        key: 0,
+        class: "ae-modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]",
+        onMousedown: m(f, ["self"])
+      }, [
+        o("div", {
+          class: "ae-modal bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4",
+          onMousedown: r[2] || (r[2] = m(() => {
+          }, ["stop"]))
+        }, [
+          r[5] || (r[5] = o("h3", { class: "text-lg font-semibold text-gray-900 mb-4" }, "Insert Link", -1)),
+          o("div", so, [
+            o("div", null, [
+              r[3] || (r[3] = o("label", { class: "block text-sm font-medium text-gray-700 mb-1" }, "URL", -1)),
+              _(o("input", {
+                "onUpdate:modelValue": r[0] || (r[0] = (u) => n.value = u),
+                type: "url",
+                placeholder: "https://example.com",
+                class: "w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500",
+                onKeydown: v
+              }, null, 544), [
+                [F, n.value]
+              ])
+            ]),
+            o("div", null, [
+              r[4] || (r[4] = o("label", { class: "block text-sm font-medium text-gray-700 mb-1" }, "Link text (optional)", -1)),
+              _(o("input", {
+                "onUpdate:modelValue": r[1] || (r[1] = (u) => a.value = u),
+                type: "text",
+                placeholder: "Leave empty to use URL as text",
+                class: "w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500",
+                onKeydown: v
+              }, null, 544), [
+                [F, a.value]
+              ])
+            ])
+          ]),
+          o("div", ao, [
+            o("button", {
+              class: "px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors",
+              onClick: f
+            }, " Cancel "),
+            o("button", {
+              class: "px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors",
+              disabled: !n.value.trim(),
+              onClick: p
+            }, " Insert Link ", 8, io)
+          ])
+        ], 32)
+      ], 32)) : T("", !0)
+    ]));
+  }
+}), co = { class: "flex gap-3 justify-end mt-6" }, po = ["disabled"], fo = /* @__PURE__ */ A({
+  __name: "ImageUrlModal",
+  setup(l) {
+    const e = E("alienEditor"), t = k("");
+    W(e.showImageUrlModal, (f) => {
+      f && (t.value = "");
+    });
+    function n() {
+      if (t.value.trim()) {
+        if (e.imageUrlCallback.value)
+          e.imageUrlCallback.value(t.value.trim());
+        else {
+          const f = e.activeBlockId.value;
+          f ? e.addBlockAfter(f, "image", { src: t.value.trim() }) : e.addBlockAt(e.blocks.value.length, "image", { src: t.value.trim() });
+        }
+        a();
+      }
+    }
+    function a() {
+      e.showImageUrlModal.value = !1, t.value = "";
+    }
+    function p(f) {
+      f.key === "Enter" && n(), f.key === "Escape" && a();
+    }
+    return (f, v) => (g(), U(me, { to: "body" }, [
+      h(e).showImageUrlModal.value ? (g(), b("div", {
+        key: 0,
+        class: "ae-modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]",
+        onMousedown: m(a, ["self"])
+      }, [
+        o("div", {
+          class: "ae-modal bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4",
+          onMousedown: v[1] || (v[1] = m(() => {
+          }, ["stop"]))
+        }, [
+          v[3] || (v[3] = o("h3", { class: "text-lg font-semibold text-gray-900 mb-4" }, "Insert Image URL", -1)),
+          o("div", null, [
+            v[2] || (v[2] = o("label", { class: "block text-sm font-medium text-gray-700 mb-1" }, "Image URL", -1)),
+            _(o("input", {
+              "onUpdate:modelValue": v[0] || (v[0] = (d) => t.value = d),
+              type: "url",
+              placeholder: "https://example.com/image.jpg",
+              class: "w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500",
+              onKeydown: p
+            }, null, 544), [
+              [F, t.value]
+            ])
+          ]),
+          o("div", co, [
+            o("button", {
+              class: "px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors",
+              onClick: a
+            }, " Cancel "),
+            o("button", {
+              class: "px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors",
+              disabled: !t.value.trim(),
+              onClick: n
+            }, " Insert Image ", 8, po)
+          ])
+        ], 32)
+      ], 32)) : T("", !0)
+    ]));
+  }
+}), go = { class: "alien-editor ae-root border border-gray-200 rounded-xl bg-white shadow-sm" }, vo = {
+  key: 0,
+  class: "ae-edit-area min-h-[300px] px-8 py-6"
+}, bo = {
+  key: 1,
+  class: "ae-code-mode bg-gray-950 min-h-[300px] p-6"
+}, mo = ["value"], yo = {
+  key: 2,
+  class: "ae-preview-mode min-h-[300px] px-8 py-6 prose prose-gray max-w-none"
+}, xo = ["innerHTML"], ho = {
+  key: 1,
+  class: "text-gray-400 italic"
+}, ko = /* @__PURE__ */ A({
+  __name: "AlienEditor",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "Start writing..." },
+    colors: { default: () => [] },
+    modules: { default: () => [] }
+  },
+  emits: ["update:modelValue", "upload"],
+  setup(l, { emit: e }) {
+    const t = l, n = e, { blocks: a, mode: p, activeBlockId: f, savedRange: v } = Se(), { pushSnapshot: d, undo: r, redo: u, canUndo: i, canRedo: c } = Te(a), { saveSelection: x, restoreSelection: $ } = ye(v), { addBlockAfter: P, addBlockAt: K, removeBlock: I, moveBlock: w, updateBlock: L } = Ue(a, d), { dragState: C, onDragStart: M, onDragOver: s, onDragLeave: y, onDrop: q, onDragEnd: ne } = He(a, w), { serialize: xe } = Re(), { parse: se } = ze(), he = k(!1), ke = k(!1), we = k(null), $e = k(null), ee = Q(() => xe(a.value)), le = k("");
+    let Y = null;
+    W(p, (B, O) => {
+      B === "code" ? le.value = ee.value : O === "code" && (Y && (clearTimeout(Y), Y = null), a.value = se(le.value));
+    });
+    function Me(B) {
+      const O = B.target.value;
+      le.value = O, Y && clearTimeout(Y), Y = setTimeout(() => {
+        d(), a.value = se(O);
+      }, 300);
+    }
+    let ae = !1;
+    function fe(B) {
+      const O = se(B);
+      a.value = O;
+    }
+    oe(() => {
+      fe(t.modelValue || ""), ae = !0;
+    }), W(
+      ee,
+      (B) => {
+        ae && n("update:modelValue", B);
+      }
+    ), W(
+      () => t.modelValue,
+      (B) => {
+        if (!ae) return;
+        const O = ee.value;
+        B !== O && fe(B || "");
+      }
+    );
+    function ge(B) {
+      (B.ctrlKey || B.metaKey) && B.key === "z" && !B.shiftKey && (B.preventDefault(), r()), (B.ctrlKey || B.metaKey) && (B.key === "y" || B.shiftKey && B.key === "z") && (B.preventDefault(), u());
+    }
+    oe(() => document.addEventListener("keydown", ge)), Ce(() => document.removeEventListener("keydown", ge));
+    const Be = {
+      blocks: a,
+      mode: p,
+      activeBlockId: f,
+      savedRange: v,
+      colors: t.colors,
+      modules: t.modules,
+      placeholder: t.placeholder,
+      pushSnapshot: d,
+      undo: r,
+      redo: u,
+      canUndo: i,
+      canRedo: c,
+      updateBlock: L,
+      addBlockAfter: P,
+      addBlockAt: K,
+      removeBlock: I,
+      moveBlock: w,
+      saveSelection: x,
+      restoreSelection: $,
+      onUpload: (B) => n("upload", B),
+      showLinkModal: he,
+      showImageUrlModal: ke,
+      linkModalCallback: we,
+      imageUrlCallback: $e,
+      dragState: C,
+      onDragStart: M,
+      onDragOver: s,
+      onDragLeave: y,
+      onDrop: q,
+      onDragEnd: ne
+    };
+    return Le("alienEditor", Be), (B, O) => (g(), b("div", go, [
+      S(vt),
+      h(p) === "edit" ? (g(), b("div", vo, [
+        S(ro)
+      ])) : h(p) === "code" ? (g(), b("div", bo, [
+        o("textarea", {
+          class: "w-full bg-transparent text-green-400 font-mono text-sm leading-relaxed resize-y outline-none min-h-[276px] whitespace-pre",
+          value: le.value,
+          onInput: Me,
+          spellcheck: "false",
+          autocomplete: "off",
+          autocorrect: "off",
+          autocapitalize: "off"
+        }, null, 40, mo)
+      ])) : (g(), b("div", yo, [
+        ee.value ? (g(), b("div", {
+          key: 0,
+          innerHTML: ee.value
+        }, null, 8, xo)) : (g(), b("p", ho, "Nothing to preview yet."))
+      ])),
+      S(uo),
+      S(fo)
+    ]));
+  }
+}), $o = {
+  install(l) {
+    l.component("AlienEditor", ko);
+  }
+};
+export {
+  ko as AlienEditor,
+  $o as default
+};