@mpdev_ab/document-creator 0.1.0

package/dist/document-creator.js

@@ -0,0 +1,1906 @@
+import { defineComponent as C, ref as y, computed as H, openBlock as g, createBlock as V, unref as L, normalizeClass as w, withCtx as x, createElementVNode as l, normalizeStyle as D, createElementBlock as p, Fragment as A, renderList as E, toDisplayString as z, withDirectives as F, withKeys as P, vModelText as I, createCommentVNode as B, inject as _, renderSlot as X, onMounted as U, onBeforeUnmount as N, createVNode as h, nextTick as ee, createTextVNode as j, Teleport as Y, withModifiers as K, vModelRadio as J, provide as te, watch as q } from "vue";
+import { nodeViewProps as le, NodeViewWrapper as ne, VueNodeViewRenderer as oe, useEditor as ie, EditorContent as re } from "@tiptap/vue-3";
+import se from "@tiptap/starter-kit";
+import { TextStyle as ae } from "@tiptap/extension-text-style";
+import ue from "@tiptap/extension-font-family";
+import de from "@tiptap/extension-underline";
+import ce from "@tiptap/extension-subscript";
+import me from "@tiptap/extension-superscript";
+import fe from "@tiptap/extension-color";
+import ve from "@tiptap/extension-text-align";
+import ge from "@tiptap/extension-link";
+import he from "@tiptap/extension-placeholder";
+import { Table as pe } from "@tiptap/extension-table";
+import be from "@tiptap/extension-table-row";
+import xe from "@tiptap/extension-table-cell";
+import ye from "@tiptap/extension-table-header";
+import { Extension as Z, Node as ke, mergeAttributes as we } from "@tiptap/core";
+import Ce from "@tiptap/extension-image";
+const $e = Z.create({
+  name: "fontSize",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (e) => {
+              var n;
+              return ((n = e.style.fontSize) == null ? void 0 : n.replace(/['"]+/g, "")) || null;
+            },
+            renderHTML: (e) => e.fontSize ? { style: `font-size: ${e.fontSize}` } : {}
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (e) => ({ chain: n }) => n().setMark("textStyle", { fontSize: e }).run(),
+      unsetFontSize: () => ({ chain: e }) => e().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run()
+    };
+  }
+}), Te = Z.create({
+  name: "lineHeight",
+  addOptions() {
+    return {
+      types: ["heading", "paragraph"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (e) => e.style.lineHeight || null,
+            renderHTML: (e) => e.lineHeight ? { style: `line-height: ${e.lineHeight}` } : {}
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setLineHeight: (e) => ({ commands: n }) => this.options.types.every(
+        (t) => n.updateAttributes(t, { lineHeight: e })
+      ),
+      unsetLineHeight: () => ({ commands: e }) => this.options.types.every(
+        (n) => e.resetAttributes(n, "lineHeight")
+      )
+    };
+  }
+}), Me = ["src", "alt"], Ae = {
+  key: 0,
+  class: "absolute -top-10 left-0 flex items-center gap-1 bg-white border border-gray-200 rounded shadow-md p-1 z-10"
+}, Se = ["onClick"], Le = /* @__PURE__ */ C({
+  __name: "ImageResizePopover",
+  props: le,
+  setup(e) {
+    const n = e, t = y(n.node.attrs.width || ""), c = y(n.node.attrs.alt || ""), o = H(() => {
+      const d = {};
+      return n.node.attrs.width && (d.width = n.node.attrs.width), n.node.attrs.height && (d.height = n.node.attrs.height), d;
+    }), a = H(() => {
+      const d = n.node.attrs.align;
+      return d === "center" ? "mx-auto block" : d === "right" ? "ml-auto block" : "block";
+    });
+    function m() {
+      const d = n.getPos();
+      d != null && n.editor.commands.setNodeSelection(d);
+    }
+    function i(d) {
+      n.updateAttributes({ width: d }), t.value = d;
+    }
+    function s(d) {
+      n.updateAttributes({ align: d });
+    }
+    function r() {
+      n.updateAttributes({ alt: c.value });
+    }
+    return (d, u) => (g(), V(L(ne), {
+      class: w(["relative inline-block", a.value])
+    }, {
+      default: x(() => [
+        l("img", {
+          src: d.node.attrs.src,
+          alt: d.node.attrs.alt || "",
+          style: D(o.value),
+          class: w(["cursor-pointer max-w-full", d.selected ? "ring-2 ring-blue-400" : ""]),
+          onClick: m
+        }, null, 14, Me),
+        d.selected ? (g(), p("div", Ae, [
+          (g(), p(A, null, E(["25%", "50%", "75%", "100%"], (b) => l("button", {
+            key: b,
+            class: "px-2 py-0.5 text-xs rounded hover:bg-gray-100",
+            onClick: (S) => i(b)
+          }, z(b), 9, Se)), 64)),
+          F(l("input", {
+            "onUpdate:modelValue": u[0] || (u[0] = (b) => t.value = b),
+            class: "w-16 border border-gray-300 rounded px-1 py-0.5 text-xs",
+            placeholder: "e.g. 100%",
+            onKeydown: u[1] || (u[1] = P((b) => i(t.value), ["enter"]))
+          }, null, 544), [
+            [I, t.value]
+          ]),
+          u[9] || (u[9] = l("span", { class: "w-px h-4 bg-gray-300 mx-1" }, null, -1)),
+          l("button", {
+            class: "px-1 py-0.5 text-xs rounded hover:bg-gray-100",
+            title: "Align left",
+            onClick: u[2] || (u[2] = (b) => s("left"))
+          }, [...u[6] || (u[6] = [
+            l("svg", {
+              class: "w-3 h-3",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M3 6h18M3 12h10M3 18h14" })
+            ], -1)
+          ])]),
+          l("button", {
+            class: "px-1 py-0.5 text-xs rounded hover:bg-gray-100",
+            title: "Align center",
+            onClick: u[3] || (u[3] = (b) => s("center"))
+          }, [...u[7] || (u[7] = [
+            l("svg", {
+              class: "w-3 h-3",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M3 6h18M7 12h10M5 18h14" })
+            ], -1)
+          ])]),
+          l("button", {
+            class: "px-1 py-0.5 text-xs rounded hover:bg-gray-100",
+            title: "Align right",
+            onClick: u[4] || (u[4] = (b) => s("right"))
+          }, [...u[8] || (u[8] = [
+            l("svg", {
+              class: "w-3 h-3",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M3 6h18M11 12h10M7 18h14" })
+            ], -1)
+          ])]),
+          u[10] || (u[10] = l("span", { class: "w-px h-4 bg-gray-300 mx-1" }, null, -1)),
+          F(l("input", {
+            "onUpdate:modelValue": u[5] || (u[5] = (b) => c.value = b),
+            class: "w-20 border border-gray-300 rounded px-1 py-0.5 text-xs",
+            placeholder: "Alt text",
+            onBlur: r,
+            onKeydown: P(r, ["enter"])
+          }, null, 544), [
+            [I, c.value]
+          ])
+        ])) : B("", !0)
+      ]),
+      _: 1
+    }, 8, ["class"]));
+  }
+}), Be = Ce.extend({
+  name: "image",
+  addAttributes() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      width: {
+        default: null,
+        parseHTML: (n) => n.getAttribute("width") || n.style.width || null,
+        renderHTML: (n) => n.width ? { style: `width: ${n.width}` } : {}
+      },
+      height: {
+        default: null,
+        parseHTML: (n) => n.getAttribute("height") || n.style.height || null,
+        renderHTML: (n) => n.height ? { style: `height: ${n.height}` } : {}
+      },
+      align: {
+        default: null,
+        parseHTML: (n) => n.getAttribute("data-align") || null,
+        renderHTML: (n) => {
+          if (!n.align) return {};
+          const t = {
+            left: "margin-right: auto",
+            center: "margin-left: auto; margin-right: auto",
+            right: "margin-left: auto"
+          };
+          return {
+            "data-align": n.align,
+            style: `display: block; ${t[n.align] || ""}`
+          };
+        }
+      }
+    };
+  },
+  addNodeView() {
+    return oe(Le);
+  }
+}).configure({
+  allowBase64: !0,
+  inline: !1
+}), He = ke.create({
+  name: "video",
+  group: "block",
+  atom: !0,
+  addAttributes() {
+    return {
+      src: { default: null },
+      width: { default: "100%" },
+      height: { default: "315" },
+      frameborder: { default: "0" },
+      allowfullscreen: { default: !0 }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "iframe[src]" }];
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    return ["div", { class: "video-wrapper" }, ["iframe", we(e)]];
+  },
+  addCommands() {
+    return {
+      setVideo: (e) => ({ commands: n }) => n.insertContent({
+        type: this.name,
+        attrs: e
+      })
+    };
+  }
+}), Ee = {
+  toolbar: "bg-white border-b border-gray-200 p-2 flex flex-wrap items-center gap-1",
+  toolbarButton: "hover:bg-gray-100 rounded p-1.5 text-gray-600 cursor-pointer",
+  toolbarButtonActive: "bg-blue-100 text-blue-600",
+  editor: "bg-white min-h-[400px] p-4 prose max-w-none focus:outline-none",
+  dropdown: "bg-white border border-gray-200 rounded shadow-lg py-1 z-50",
+  modal: "bg-white rounded-lg shadow-xl p-6",
+  saveButton: "bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700"
+}, ze = {
+  maxSize: 5 * 1024 * 1024,
+  allowedTypes: ["image/jpeg", "image/png", "image/gif"]
+}, Re = [
+  "Arial",
+  "Times New Roman",
+  "Courier New",
+  "Georgia",
+  "Verdana",
+  "Trebuchet MS",
+  "Comic Sans MS",
+  "Impact"
+], Fe = ["8", "10", "12", "14", "16", "18", "20", "24", "28", "32", "36", "48", "72"], Ve = ["1", "1.15", "1.5", "2", "2.5", "3"];
+function Oe(e) {
+  const n = y([]), t = y(!1), c = y(null), o = {
+    "Content-Type": "application/json",
+    ...e.headers
+  };
+  async function a() {
+    t.value = !0, c.value = null;
+    try {
+      const s = await fetch(e.loadTemplates, { headers: o });
+      if (!s.ok) throw new Error(`Failed to load templates: ${s.statusText}`);
+      n.value = await s.json();
+    } catch (s) {
+      const r = s instanceof Error ? s.message : "Unknown error";
+      throw c.value = r, s;
+    } finally {
+      t.value = !1;
+    }
+  }
+  async function m(s) {
+    const r = await fetch(e.saveTemplate, {
+      method: "POST",
+      headers: o,
+      body: JSON.stringify(s)
+    });
+    if (!r.ok) throw new Error(`Failed to save template: ${r.statusText}`);
+    return r.json();
+  }
+  async function i(s) {
+    const r = await fetch(`${e.deleteTemplate}/${s}`, {
+      method: "DELETE",
+      headers: o
+    });
+    if (!r.ok) throw new Error(`Failed to delete template: ${r.statusText}`);
+  }
+  return { templates: n, loading: t, error: c, loadTemplates: a, saveTemplate: m, deleteTemplate: i };
+}
+const Q = Symbol("document-editor");
+function tl() {
+  const e = _(Q);
+  if (!e)
+    throw new Error("useDocumentEditor must be used within a DocumentEditor component");
+  return {
+    editor: e,
+    getHTML: () => {
+      var n;
+      return ((n = e.value) == null ? void 0 : n.getHTML()) ?? "";
+    },
+    getText: () => {
+      var n;
+      return ((n = e.value) == null ? void 0 : n.getText()) ?? "";
+    },
+    setContent: (n) => {
+      var t;
+      return (t = e.value) == null ? void 0 : t.commands.setContent(n);
+    },
+    focus: () => {
+      var n;
+      return (n = e.value) == null ? void 0 : n.commands.focus();
+    },
+    isEmpty: () => {
+      var n;
+      return ((n = e.value) == null ? void 0 : n.isEmpty) ?? !0;
+    }
+  };
+}
+const De = ["title", "disabled"], k = /* @__PURE__ */ C({
+  __name: "ToolbarButton",
+  props: {
+    theme: {},
+    title: {},
+    isActive: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(e) {
+    return (n, t) => (g(), p("button", {
+      type: "button",
+      class: w([e.theme.toolbarButton, e.isActive && e.theme.toolbarButtonActive]),
+      title: e.title,
+      disabled: e.disabled,
+      onClick: t[0] || (t[0] = (c) => n.$emit("click"))
+    }, [
+      X(n.$slots, "default")
+    ], 10, De));
+  }
+}), Ie = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [c, o] of n)
+    t[c] = o;
+  return t;
+}, Ue = {}, Ne = { class: "w-px h-6 bg-gray-300 mx-1" };
+function Pe(e, n) {
+  return g(), p("div", Ne);
+}
+const R = /* @__PURE__ */ Ie(Ue, [["render", Pe]]), je = ["title"], G = /* @__PURE__ */ C({
+  __name: "ToolbarDropdown",
+  props: {
+    theme: {},
+    label: {},
+    title: {}
+  },
+  setup(e) {
+    const n = y(!1), t = y(null);
+    function c() {
+      n.value = !1;
+    }
+    function o(a) {
+      t.value && !t.value.contains(a.target) && (n.value = !1);
+    }
+    return U(() => document.addEventListener("click", o)), N(() => document.removeEventListener("click", o)), (a, m) => (g(), p("div", {
+      class: "relative",
+      ref_key: "dropdownRef",
+      ref: t
+    }, [
+      l("button", {
+        type: "button",
+        class: w([e.theme.toolbarButton, "flex items-center gap-1 px-2 text-sm"]),
+        title: e.title,
+        onClick: m[0] || (m[0] = (i) => n.value = !n.value)
+      }, [
+        l("span", null, z(e.label), 1),
+        m[1] || (m[1] = l("svg", {
+          class: "w-3 h-3",
+          viewBox: "0 0 12 12",
+          fill: "currentColor"
+        }, [
+          l("path", {
+            d: "M2 4l4 4 4-4",
+            stroke: "currentColor",
+            "stroke-width": "1.5",
+            fill: "none"
+          })
+        ], -1))
+      ], 10, je),
+      n.value ? (g(), p("div", {
+        key: 0,
+        class: w([e.theme.dropdown, "absolute top-full left-0 mt-1 min-w-[150px] max-h-60 overflow-y-auto"])
+      }, [
+        X(a.$slots, "default", { close: c })
+      ], 2)) : B("", !0)
+    ], 512));
+  }
+}), Ge = ["onClick"], Ke = /* @__PURE__ */ C({
+  __name: "HeadingPicker",
+  props: {
+    editor: {},
+    theme: {}
+  },
+  setup(e) {
+    const n = e, t = [
+      { label: "Paragraph", value: "paragraph", class: "text-sm" },
+      { label: "Heading 1", value: 1, class: "text-2xl font-bold" },
+      { label: "Heading 2", value: 2, class: "text-xl font-bold" },
+      { label: "Heading 3", value: 3, class: "text-lg font-bold" },
+      { label: "Heading 4", value: 4, class: "text-base font-semibold" },
+      { label: "Heading 5", value: 5, class: "text-sm font-semibold" },
+      { label: "Heading 6", value: 6, class: "text-xs font-semibold" }
+    ];
+    function c(m) {
+      var i, s;
+      return m.value === "paragraph" ? (i = n.editor) == null ? void 0 : i.isActive("paragraph") : (s = n.editor) == null ? void 0 : s.isActive("heading", { level: m.value });
+    }
+    const o = H(() => {
+      const m = t.find((i) => c(i));
+      return (m == null ? void 0 : m.label) ?? "Paragraph";
+    });
+    function a(m) {
+      var i, s;
+      m.value === "paragraph" ? (i = n.editor) == null || i.chain().focus().setParagraph().run() : (s = n.editor) == null || s.chain().focus().toggleHeading({ level: m.value }).run();
+    }
+    return (m, i) => (g(), V(G, {
+      theme: e.theme,
+      label: o.value,
+      title: "Block type"
+    }, {
+      default: x(({ close: s }) => [
+        (g(), p(A, null, E(t, (r) => l("button", {
+          key: r.value,
+          class: w([
+            "block w-full text-left px-3 py-1.5 hover:bg-gray-100",
+            r.class,
+            c(r) ? "bg-gray-50 font-semibold" : ""
+          ]),
+          onClick: (d) => {
+            a(r), s();
+          }
+        }, z(r.label), 11, Ge)), 64))
+      ]),
+      _: 1
+    }, 8, ["theme", "label"]));
+  }
+}), Je = ["onClick"], qe = /* @__PURE__ */ C({
+  __name: "FontFamilyPicker",
+  props: {
+    editor: {},
+    theme: {}
+  },
+  setup(e) {
+    const n = e, t = Re, c = H(() => {
+      var o;
+      for (const a of t)
+        if ((o = n.editor) != null && o.isActive("textStyle", { fontFamily: a })) return a;
+      return "Font";
+    });
+    return (o, a) => (g(), V(G, {
+      theme: e.theme,
+      label: c.value,
+      title: "Font family"
+    }, {
+      default: x(({ close: m }) => [
+        (g(!0), p(A, null, E(L(t), (i) => (g(), p("button", {
+          key: i,
+          style: D({ fontFamily: i }),
+          class: w([
+            "block w-full text-left px-3 py-1.5 hover:bg-gray-100 text-sm",
+            c.value === i ? "bg-gray-50 font-semibold" : ""
+          ]),
+          onClick: (s) => {
+            var r;
+            (r = e.editor) == null || r.chain().focus().setFontFamily(i).run(), m();
+          }
+        }, z(i), 15, Je))), 128))
+      ]),
+      _: 1
+    }, 8, ["theme", "label"]));
+  }
+}), We = ["onClick"], Xe = /* @__PURE__ */ C({
+  __name: "FontSizePicker",
+  props: {
+    editor: {},
+    theme: {}
+  },
+  setup(e) {
+    const n = e, t = Fe, c = H(() => {
+      var o;
+      for (const a of t)
+        if ((o = n.editor) != null && o.isActive("textStyle", { fontSize: a + "px" })) return a;
+      return "";
+    });
+    return (o, a) => (g(), V(G, {
+      theme: e.theme,
+      label: c.value || "Size",
+      title: "Font size"
+    }, {
+      default: x(({ close: m }) => [
+        (g(!0), p(A, null, E(L(t), (i) => (g(), p("button", {
+          key: i,
+          class: w([
+            "block w-full text-left px-3 py-1.5 hover:bg-gray-100 text-sm",
+            c.value === i ? "bg-gray-50 font-semibold" : ""
+          ]),
+          onClick: (s) => {
+            var r;
+            (r = e.editor) == null || r.chain().focus().setFontSize(i + "px").run(), m();
+          }
+        }, z(i), 11, We))), 128))
+      ]),
+      _: 1
+    }, 8, ["theme", "label"]));
+  }
+}), Ye = { class: "grid grid-cols-8 gap-1 mb-2" }, Ze = ["title", "onClick"], Qe = { class: "flex items-center gap-2 pt-2 border-t border-gray-100" }, _e = ["value"], et = /* @__PURE__ */ C({
+  __name: "ColorPicker",
+  props: {
+    editor: {},
+    theme: {}
+  },
+  setup(e) {
+    const n = e, t = y(!1), c = y(null), o = [
+      "#000000",
+      "#434343",
+      "#666666",
+      "#999999",
+      "#b7b7b7",
+      "#cccccc",
+      "#d9d9d9",
+      "#ffffff",
+      "#980000",
+      "#ff0000",
+      "#ff9900",
+      "#ffff00",
+      "#00ff00",
+      "#00ffff",
+      "#4a86e8",
+      "#0000ff",
+      "#9900ff",
+      "#ff00ff",
+      "#e6b8af",
+      "#f4cccc",
+      "#fce5cd",
+      "#fff2cc",
+      "#d9ead3",
+      "#d0e0e3",
+      "#c9daf8",
+      "#cfe2f3",
+      "#d9d2e9",
+      "#ead1dc",
+      "#dd7e6b",
+      "#ea9999",
+      "#f9cb9c",
+      "#ffe599",
+      "#b6d7a8",
+      "#a2c4c9",
+      "#a4c2f4",
+      "#9fc5e8",
+      "#b4a7d6",
+      "#d5a6bd"
+    ], a = H(() => {
+      var s;
+      return ((s = n.editor) == null ? void 0 : s.getAttributes("textStyle").color) || "#000000";
+    });
+    function m(s) {
+      var r;
+      (r = n.editor) == null || r.chain().focus().setColor(s).run(), t.value = !1;
+    }
+    function i(s) {
+      c.value && !c.value.contains(s.target) && (t.value = !1);
+    }
+    return U(() => document.addEventListener("click", i)), N(() => document.removeEventListener("click", i)), (s, r) => (g(), p("div", {
+      class: "relative",
+      ref_key: "pickerRef",
+      ref: c
+    }, [
+      l("button", {
+        type: "button",
+        class: w([e.theme.toolbarButton, "flex items-center gap-1 px-2"]),
+        title: "Font color",
+        onClick: r[0] || (r[0] = (d) => t.value = !t.value)
+      }, [
+        r[2] || (r[2] = l("span", null, "A", -1)),
+        l("div", {
+          class: "w-4 h-1 rounded",
+          style: D({ backgroundColor: a.value })
+        }, null, 4)
+      ], 2),
+      t.value ? (g(), p("div", {
+        key: 0,
+        class: w([e.theme.dropdown, "absolute top-full left-0 mt-1 p-2 w-48"])
+      }, [
+        l("div", Ye, [
+          (g(), p(A, null, E(o, (d) => l("button", {
+            key: d,
+            class: "w-5 h-5 rounded border border-gray-200 cursor-pointer hover:scale-110 transition-transform",
+            style: D({ backgroundColor: d }),
+            title: d,
+            onClick: (u) => m(d)
+          }, null, 12, Ze)), 64))
+        ]),
+        l("div", Qe, [
+          r[3] || (r[3] = l("label", { class: "text-xs text-gray-500" }, "Custom:", -1)),
+          l("input", {
+            type: "color",
+            value: a.value,
+            class: "w-6 h-6 cursor-pointer",
+            onInput: r[1] || (r[1] = (d) => m(d.target.value))
+          }, null, 40, _e)
+        ])
+      ], 2)) : B("", !0)
+    ], 512));
+  }
+}), tt = /* @__PURE__ */ C({
+  __name: "AlignmentButtons",
+  props: {
+    editor: {},
+    theme: {}
+  },
+  setup(e) {
+    return (n, t) => {
+      var c, o, a, m;
+      return g(), p(A, null, [
+        h(k, {
+          theme: e.theme,
+          title: "Align left",
+          "is-active": (c = e.editor) == null ? void 0 : c.isActive({ textAlign: "left" }),
+          onClick: t[0] || (t[0] = (i) => {
+            var s;
+            return (s = e.editor) == null ? void 0 : s.chain().focus().setTextAlign("left").run();
+          })
+        }, {
+          default: x(() => [...t[4] || (t[4] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M3 6h18M3 12h10M3 18h14" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Align center",
+          "is-active": (o = e.editor) == null ? void 0 : o.isActive({ textAlign: "center" }),
+          onClick: t[1] || (t[1] = (i) => {
+            var s;
+            return (s = e.editor) == null ? void 0 : s.chain().focus().setTextAlign("center").run();
+          })
+        }, {
+          default: x(() => [...t[5] || (t[5] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M3 6h18M7 12h10M5 18h14" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Align right",
+          "is-active": (a = e.editor) == null ? void 0 : a.isActive({ textAlign: "right" }),
+          onClick: t[2] || (t[2] = (i) => {
+            var s;
+            return (s = e.editor) == null ? void 0 : s.chain().focus().setTextAlign("right").run();
+          })
+        }, {
+          default: x(() => [...t[6] || (t[6] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M3 6h18M11 12h10M7 18h14" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Justify",
+          "is-active": (m = e.editor) == null ? void 0 : m.isActive({ textAlign: "justify" }),
+          onClick: t[3] || (t[3] = (i) => {
+            var s;
+            return (s = e.editor) == null ? void 0 : s.chain().focus().setTextAlign("justify").run();
+          })
+        }, {
+          default: x(() => [...t[7] || (t[7] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M3 6h18M3 12h18M3 18h18" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"])
+      ], 64);
+    };
+  }
+}), lt = ["onClick"], nt = /* @__PURE__ */ C({
+  __name: "LineHeightPicker",
+  props: {
+    editor: {},
+    theme: {}
+  },
+  setup(e) {
+    const n = e, t = Ve, c = H(() => {
+      var o, a;
+      return ((o = n.editor) == null ? void 0 : o.getAttributes("paragraph").lineHeight) || ((a = n.editor) == null ? void 0 : a.getAttributes("heading").lineHeight) || "";
+    });
+    return (o, a) => (g(), V(G, {
+      theme: e.theme,
+      label: c.value || "Height",
+      title: "Line height"
+    }, {
+      default: x(({ close: m }) => [
+        (g(!0), p(A, null, E(L(t), (i) => (g(), p("button", {
+          key: i,
+          class: w([
+            "block w-full text-left px-3 py-1.5 hover:bg-gray-100 text-sm",
+            c.value === i ? "bg-gray-50 font-semibold" : ""
+          ]),
+          onClick: (s) => {
+            var r;
+            (r = e.editor) == null || r.chain().focus().setLineHeight(i).run(), m();
+          }
+        }, z(i), 11, lt))), 128))
+      ]),
+      _: 1
+    }, 8, ["theme", "label"]));
+  }
+}), ot = { class: "flex gap-2" }, it = /* @__PURE__ */ C({
+  __name: "LinkButton",
+  props: {
+    editor: {},
+    theme: {}
+  },
+  setup(e) {
+    const n = e, t = y(!1), c = y(""), o = y(null), a = y(null);
+    function m() {
+      var d;
+      c.value = ((d = n.editor) == null ? void 0 : d.getAttributes("link").href) || "", t.value = !t.value, t.value && ee(() => {
+        var u;
+        return (u = a.value) == null ? void 0 : u.focus();
+      });
+    }
+    function i() {
+      var d;
+      c.value && ((d = n.editor) == null || d.chain().focus().extendMarkRange("link").setLink({ href: c.value }).run()), t.value = !1;
+    }
+    function s() {
+      var d;
+      (d = n.editor) == null || d.chain().focus().unsetLink().run(), t.value = !1;
+    }
+    function r(d) {
+      o.value && !o.value.contains(d.target) && (t.value = !1);
+    }
+    return U(() => document.addEventListener("click", r)), N(() => document.removeEventListener("click", r)), (d, u) => {
+      var b, S;
+      return g(), p("div", {
+        class: "relative",
+        ref_key: "linkRef",
+        ref: o
+      }, [
+        h(k, {
+          theme: e.theme,
+          title: "Link",
+          "is-active": (b = e.editor) == null ? void 0 : b.isActive("link"),
+          onClick: m
+        }, {
+          default: x(() => [...u[2] || (u[2] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+              l("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        t.value ? (g(), p("div", {
+          key: 0,
+          class: w([e.theme.dropdown, "absolute top-full left-0 mt-1 p-3 w-72"])
+        }, [
+          u[3] || (u[3] = l("label", { class: "block text-xs text-gray-500 mb-1" }, "URL", -1)),
+          F(l("input", {
+            ref_key: "urlInput",
+            ref: a,
+            "onUpdate:modelValue": u[0] || (u[0] = (v) => c.value = v),
+            type: "url",
+            placeholder: "https://example.com",
+            class: "w-full border border-gray-300 rounded px-2 py-1 text-sm mb-2",
+            onKeydown: P(i, ["enter"])
+          }, null, 544), [
+            [I, c.value]
+          ]),
+          l("div", ot, [
+            l("button", {
+              class: "px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700",
+              onClick: i
+            }, " Apply "),
+            (S = e.editor) != null && S.isActive("link") ? (g(), p("button", {
+              key: 0,
+              class: "px-3 py-1 text-sm bg-red-100 text-red-600 rounded hover:bg-red-200",
+              onClick: s
+            }, " Remove ")) : B("", !0),
+            l("button", {
+              class: "px-3 py-1 text-sm text-gray-500 hover:text-gray-700",
+              onClick: u[1] || (u[1] = (v) => t.value = !1)
+            }, " Cancel ")
+          ])
+        ], 2)) : B("", !0)
+      ], 512);
+    };
+  }
+}), rt = ["accept"], st = /* @__PURE__ */ C({
+  __name: "ImageUploadButton",
+  props: {
+    editor: {},
+    theme: {},
+    imageConfig: {}
+  },
+  emits: ["error"],
+  setup(e, { emit: n }) {
+    const t = e, c = n, o = y(null), a = H(() => ({
+      ...ze,
+      ...t.imageConfig
+    })), m = H(() => a.value.allowedTypes.join(","));
+    function i() {
+      var r;
+      (r = o.value) == null || r.click();
+    }
+    function s(r) {
+      var S;
+      const d = r.target, u = (S = d.files) == null ? void 0 : S[0];
+      if (!u) return;
+      if (!a.value.allowedTypes.includes(u.type)) {
+        c("error", { message: `File type ${u.type} is not allowed`, detail: { allowedTypes: a.value.allowedTypes } }), d.value = "";
+        return;
+      }
+      if (u.size > a.value.maxSize) {
+        const v = (a.value.maxSize / 1048576).toFixed(1);
+        c("error", { message: `File size exceeds ${v}MB limit`, detail: { maxSize: a.value.maxSize, fileSize: u.size } }), d.value = "";
+        return;
+      }
+      const b = new FileReader();
+      b.onload = () => {
+        var f;
+        const v = b.result;
+        (f = t.editor) == null || f.chain().focus().setImage({ src: v }).run();
+      }, b.readAsDataURL(u), d.value = "";
+    }
+    return (r, d) => (g(), p(A, null, [
+      h(k, {
+        theme: e.theme,
+        title: "Insert image",
+        onClick: i
+      }, {
+        default: x(() => [...d[0] || (d[0] = [
+          l("svg", {
+            class: "w-4 h-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2"
+          }, [
+            l("rect", {
+              x: "3",
+              y: "3",
+              width: "18",
+              height: "18",
+              rx: "2"
+            }),
+            l("circle", {
+              cx: "8.5",
+              cy: "8.5",
+              r: "1.5"
+            }),
+            l("path", { d: "M21 15l-5-5L5 21" })
+          ], -1)
+        ])]),
+        _: 1
+      }, 8, ["theme"]),
+      l("input", {
+        ref_key: "fileInput",
+        ref: o,
+        type: "file",
+        accept: m.value,
+        class: "hidden",
+        onChange: s
+      }, null, 40, rt)
+    ], 64));
+  }
+}), at = { class: "mb-1 text-xs text-gray-500 text-center" }, ut = ["onMouseenter"], dt = 8, W = 10, ct = /* @__PURE__ */ C({
+  __name: "TableGridPicker",
+  props: {
+    editor: {},
+    theme: {}
+  },
+  setup(e) {
+    const n = e, t = y(!1), c = y(0), o = y(0), a = y(null);
+    function m(s, r) {
+      var d;
+      (d = n.editor) == null || d.chain().focus().insertTable({ rows: s, cols: r, withHeaderRow: !0 }).run(), t.value = !1, c.value = 0, o.value = 0;
+    }
+    function i(s) {
+      a.value && !a.value.contains(s.target) && (t.value = !1);
+    }
+    return U(() => document.addEventListener("click", i)), N(() => document.removeEventListener("click", i)), (s, r) => (g(), p("div", {
+      class: "relative",
+      ref_key: "pickerRef",
+      ref: a
+    }, [
+      h(k, {
+        theme: e.theme,
+        title: "Insert table",
+        onClick: r[0] || (r[0] = (d) => t.value = !t.value)
+      }, {
+        default: x(() => [...r[2] || (r[2] = [
+          l("svg", {
+            class: "w-4 h-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2"
+          }, [
+            l("rect", {
+              x: "3",
+              y: "3",
+              width: "18",
+              height: "18",
+              rx: "1"
+            }),
+            l("path", { d: "M3 9h18M3 15h18M9 3v18M15 3v18" })
+          ], -1)
+        ])]),
+        _: 1
+      }, 8, ["theme"]),
+      t.value ? (g(), p("div", {
+        key: 0,
+        class: w([e.theme.dropdown, "absolute top-full left-0 mt-1 p-2"])
+      }, [
+        l("div", at, z(o.value > 0 ? `${o.value} × ${c.value}` : "Select size"), 1),
+        l("div", {
+          class: "grid gap-0.5",
+          style: D({ gridTemplateColumns: `repeat(${W}, 1fr)` })
+        }, [
+          (g(), p(A, null, E(dt, (d) => (g(), p(A, {
+            key: "row-" + d
+          }, [
+            (g(), p(A, null, E(W, (u) => l("div", {
+              key: "cell-" + d + "-" + u,
+              class: w(["w-5 h-5 border cursor-pointer", d <= c.value && u <= o.value ? "bg-blue-200 border-blue-300" : "bg-white border-gray-300"]),
+              onMouseenter: (b) => {
+                c.value = d, o.value = u;
+              },
+              onClick: r[1] || (r[1] = (b) => m(c.value, o.value))
+            }, null, 42, ut)), 64))
+          ], 64))), 64))
+        ], 4)
+      ], 2)) : B("", !0)
+    ], 512));
+  }
+}), mt = { class: "flex gap-2" }, ft = /* @__PURE__ */ C({
+  __name: "VideoEmbedButton",
+  props: {
+    editor: {},
+    theme: {}
+  },
+  setup(e) {
+    const n = e, t = y(!1), c = y(""), o = y(null);
+    function a(s) {
+      const r = s.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+      if (r) return `https://www.youtube.com/embed/${r[1]}`;
+      const d = s.match(/vimeo\.com\/(\d+)/);
+      return d ? `https://player.vimeo.com/video/${d[1]}` : s;
+    }
+    function m() {
+      var s;
+      if (c.value) {
+        const r = a(c.value);
+        (s = n.editor) == null || s.chain().focus().setVideo({ src: r }).run();
+      }
+      t.value = !1, c.value = "";
+    }
+    function i(s) {
+      o.value && !o.value.contains(s.target) && (t.value = !1);
+    }
+    return U(() => document.addEventListener("click", i)), N(() => document.removeEventListener("click", i)), (s, r) => (g(), p("div", {
+      class: "relative",
+      ref_key: "videoRef",
+      ref: o
+    }, [
+      h(k, {
+        theme: e.theme,
+        title: "Embed video",
+        onClick: r[0] || (r[0] = (d) => t.value = !t.value)
+      }, {
+        default: x(() => [...r[3] || (r[3] = [
+          l("svg", {
+            class: "w-4 h-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2"
+          }, [
+            l("polygon", { points: "5,3 19,12 5,21" })
+          ], -1)
+        ])]),
+        _: 1
+      }, 8, ["theme"]),
+      t.value ? (g(), p("div", {
+        key: 0,
+        class: w([e.theme.dropdown, "absolute top-full left-0 mt-1 p-3 w-80"])
+      }, [
+        r[4] || (r[4] = l("label", { class: "block text-xs text-gray-500 mb-1" }, "Video URL (YouTube, Vimeo)", -1)),
+        F(l("input", {
+          "onUpdate:modelValue": r[1] || (r[1] = (d) => c.value = d),
+          type: "url",
+          placeholder: "https://www.youtube.com/watch?v=...",
+          class: "w-full border border-gray-300 rounded px-2 py-1 text-sm mb-2",
+          onKeydown: P(m, ["enter"])
+        }, null, 544), [
+          [I, c.value]
+        ]),
+        l("div", mt, [
+          l("button", {
+            class: "px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700",
+            onClick: m
+          }, " Embed "),
+          l("button", {
+            class: "px-3 py-1 text-sm text-gray-500 hover:text-gray-700",
+            onClick: r[2] || (r[2] = (d) => t.value = !1)
+          }, " Cancel ")
+        ])
+      ], 2)) : B("", !0)
+    ], 512));
+  }
+}), vt = /* @__PURE__ */ C({
+  __name: "EditorToolbar",
+  props: {
+    editor: {},
+    theme: {},
+    imageConfig: {}
+  },
+  emits: ["saveTemplate", "loadTemplate", "save", "error"],
+  setup(e) {
+    return (n, t) => {
+      var c, o, a, m, i, s, r, d, u, b, S;
+      return g(), p("div", {
+        class: w(e.theme.toolbar)
+      }, [
+        h(k, {
+          theme: e.theme,
+          title: "Undo",
+          onClick: t[0] || (t[0] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().undo().run();
+          }),
+          disabled: !((c = e.editor) != null && c.can().undo())
+        }, {
+          default: x(() => [...t[16] || (t[16] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M3 10h10a5 5 0 0 1 0 10H9" }),
+              l("path", { d: "M3 10l4-4M3 10l4 4" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "disabled"]),
+        h(k, {
+          theme: e.theme,
+          title: "Redo",
+          onClick: t[1] || (t[1] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().redo().run();
+          }),
+          disabled: !((o = e.editor) != null && o.can().redo())
+        }, {
+          default: x(() => [...t[17] || (t[17] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M21 10H11a5 5 0 0 0 0 10h4" }),
+              l("path", { d: "M21 10l-4-4M21 10l-4 4" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "disabled"]),
+        h(R),
+        h(Ke, {
+          editor: e.editor,
+          theme: e.theme
+        }, null, 8, ["editor", "theme"]),
+        h(R),
+        h(qe, {
+          editor: e.editor,
+          theme: e.theme
+        }, null, 8, ["editor", "theme"]),
+        h(Xe, {
+          editor: e.editor,
+          theme: e.theme
+        }, null, 8, ["editor", "theme"]),
+        h(R),
+        h(k, {
+          theme: e.theme,
+          title: "Bold",
+          "is-active": (a = e.editor) == null ? void 0 : a.isActive("bold"),
+          onClick: t[2] || (t[2] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().toggleBold().run();
+          })
+        }, {
+          default: x(() => [...t[18] || (t[18] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M6 4h8a4 4 0 0 1 0 8H6V4zm0 8h9a4.5 4.5 0 0 1 0 9H6v-9z" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Italic",
+          "is-active": (m = e.editor) == null ? void 0 : m.isActive("italic"),
+          onClick: t[3] || (t[3] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().toggleItalic().run();
+          })
+        }, {
+          default: x(() => [...t[19] || (t[19] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M10 4h4M14 4l-4 16M6 20h4" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Underline",
+          "is-active": (i = e.editor) == null ? void 0 : i.isActive("underline"),
+          onClick: t[4] || (t[4] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().toggleUnderline().run();
+          })
+        }, {
+          default: x(() => [...t[20] || (t[20] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M6 4v6a6 6 0 0 0 12 0V4M4 20h16" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Strikethrough",
+          "is-active": (s = e.editor) == null ? void 0 : s.isActive("strike"),
+          onClick: t[5] || (t[5] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().toggleStrike().run();
+          })
+        }, {
+          default: x(() => [...t[21] || (t[21] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M4 12h16M7 5c0 0 1-1 5-1s5 2 5 4-2 3-5 3M7 19c0 0 1 1 5 1s5-2 5-4" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Subscript",
+          "is-active": (r = e.editor) == null ? void 0 : r.isActive("subscript"),
+          onClick: t[6] || (t[6] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().toggleSubscript().run();
+          })
+        }, {
+          default: x(() => [...t[22] || (t[22] = [
+            l("span", { class: "text-xs font-semibold" }, [
+              j("X"),
+              l("sub", null, "2")
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Superscript",
+          "is-active": (d = e.editor) == null ? void 0 : d.isActive("superscript"),
+          onClick: t[7] || (t[7] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().toggleSuperscript().run();
+          })
+        }, {
+          default: x(() => [...t[23] || (t[23] = [
+            l("span", { class: "text-xs font-semibold" }, [
+              j("X"),
+              l("sup", null, "2")
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(et, {
+          editor: e.editor,
+          theme: e.theme
+        }, null, 8, ["editor", "theme"]),
+        h(R),
+        h(tt, {
+          editor: e.editor,
+          theme: e.theme
+        }, null, 8, ["editor", "theme"]),
+        h(nt, {
+          editor: e.editor,
+          theme: e.theme
+        }, null, 8, ["editor", "theme"]),
+        h(R),
+        h(k, {
+          theme: e.theme,
+          title: "Bullet list",
+          "is-active": (u = e.editor) == null ? void 0 : u.isActive("bulletList"),
+          onClick: t[8] || (t[8] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().toggleBulletList().run();
+          })
+        }, {
+          default: x(() => [...t[24] || (t[24] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("circle", {
+                cx: "4",
+                cy: "6",
+                r: "1.5",
+                fill: "currentColor"
+              }),
+              l("path", { d: "M9 6h12" }),
+              l("circle", {
+                cx: "4",
+                cy: "12",
+                r: "1.5",
+                fill: "currentColor"
+              }),
+              l("path", { d: "M9 12h12" }),
+              l("circle", {
+                cx: "4",
+                cy: "18",
+                r: "1.5",
+                fill: "currentColor"
+              }),
+              l("path", { d: "M9 18h12" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Numbered list",
+          "is-active": (b = e.editor) == null ? void 0 : b.isActive("orderedList"),
+          onClick: t[9] || (t[9] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().toggleOrderedList().run();
+          })
+        }, {
+          default: x(() => [...t[25] || (t[25] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("text", {
+                x: "2",
+                y: "8",
+                "font-size": "7",
+                fill: "currentColor",
+                stroke: "none"
+              }, "1"),
+              l("path", { d: "M9 6h12" }),
+              l("text", {
+                x: "2",
+                y: "14",
+                "font-size": "7",
+                fill: "currentColor",
+                stroke: "none"
+              }, "2"),
+              l("path", { d: "M9 12h12" }),
+              l("text", {
+                x: "2",
+                y: "20",
+                "font-size": "7",
+                fill: "currentColor",
+                stroke: "none"
+              }, "3"),
+              l("path", { d: "M9 18h12" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Blockquote",
+          "is-active": (S = e.editor) == null ? void 0 : S.isActive("blockquote"),
+          onClick: t[10] || (t[10] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().toggleBlockquote().run();
+          })
+        }, {
+          default: x(() => [...t[26] || (t[26] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "currentColor"
+            }, [
+              l("path", {
+                d: "M3 3h8v8H3zM13 3h8v8h-8zM5 11l-2 6h4l2-6zM15 11l-2 6h4l2-6z",
+                opacity: "0.6"
+              })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme", "is-active"]),
+        h(k, {
+          theme: e.theme,
+          title: "Horizontal rule",
+          onClick: t[11] || (t[11] = (v) => {
+            var f;
+            return (f = e.editor) == null ? void 0 : f.chain().focus().setHorizontalRule().run();
+          })
+        }, {
+          default: x(() => [...t[27] || (t[27] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M3 12h18" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme"]),
+        h(R),
+        h(it, {
+          editor: e.editor,
+          theme: e.theme
+        }, null, 8, ["editor", "theme"]),
+        h(st, {
+          editor: e.editor,
+          theme: e.theme,
+          "image-config": e.imageConfig,
+          onError: t[12] || (t[12] = (v) => n.$emit("error", v))
+        }, null, 8, ["editor", "theme", "image-config"]),
+        h(ct, {
+          editor: e.editor,
+          theme: e.theme
+        }, null, 8, ["editor", "theme"]),
+        h(ft, {
+          editor: e.editor,
+          theme: e.theme
+        }, null, 8, ["editor", "theme"]),
+        h(R),
+        h(k, {
+          theme: e.theme,
+          title: "Save as template",
+          onClick: t[13] || (t[13] = (v) => n.$emit("saveTemplate"))
+        }, {
+          default: x(() => [...t[28] || (t[28] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+              l("polyline", { points: "17,21 17,13 7,13 7,21" }),
+              l("polyline", { points: "7,3 7,8 15,8" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme"]),
+        h(k, {
+          theme: e.theme,
+          title: "Load template",
+          onClick: t[14] || (t[14] = (v) => n.$emit("loadTemplate"))
+        }, {
+          default: x(() => [...t[29] || (t[29] = [
+            l("svg", {
+              class: "w-4 h-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              l("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["theme"]),
+        h(R),
+        l("button", {
+          class: w(e.theme.saveButton),
+          onClick: t[15] || (t[15] = (v) => n.$emit("save"))
+        }, " Save ", 2)
+      ], 2);
+    };
+  }
+}), gt = {
+  key: 0,
+  class: "bg-white border border-gray-200 rounded-lg shadow-lg p-2 flex flex-wrap gap-1 mb-1"
+}, ht = { class: "flex gap-1" }, pt = { class: "flex gap-1" }, bt = { class: "flex gap-1" }, xt = { class: "flex gap-1 items-center" }, yt = /* @__PURE__ */ C({
+  __name: "TablePopoverMenu",
+  props: {
+    editor: {}
+  },
+  setup(e) {
+    const n = e;
+    function t(c) {
+      var o;
+      (o = n.editor) == null || o.chain().focus().setCellAttribute("backgroundColor", c).run();
+    }
+    return (c, o) => {
+      var a;
+      return (a = e.editor) != null && a.isActive("table") ? (g(), p("div", gt, [
+        l("div", ht, [
+          l("button", {
+            class: "px-2 py-1 text-xs rounded hover:bg-gray-100",
+            onClick: o[0] || (o[0] = (m) => {
+              var i;
+              return (i = e.editor) == null ? void 0 : i.chain().focus().addRowBefore().run();
+            })
+          }, " + Row Above "),
+          l("button", {
+            class: "px-2 py-1 text-xs rounded hover:bg-gray-100",
+            onClick: o[1] || (o[1] = (m) => {
+              var i;
+              return (i = e.editor) == null ? void 0 : i.chain().focus().addRowAfter().run();
+            })
+          }, " + Row Below "),
+          l("button", {
+            class: "px-2 py-1 text-xs rounded hover:bg-red-50 text-red-600",
+            onClick: o[2] || (o[2] = (m) => {
+              var i;
+              return (i = e.editor) == null ? void 0 : i.chain().focus().deleteRow().run();
+            })
+          }, " Delete Row ")
+        ]),
+        o[12] || (o[12] = l("span", { class: "w-px h-6 bg-gray-300" }, null, -1)),
+        l("div", pt, [
+          l("button", {
+            class: "px-2 py-1 text-xs rounded hover:bg-gray-100",
+            onClick: o[3] || (o[3] = (m) => {
+              var i;
+              return (i = e.editor) == null ? void 0 : i.chain().focus().addColumnBefore().run();
+            })
+          }, " + Col Left "),
+          l("button", {
+            class: "px-2 py-1 text-xs rounded hover:bg-gray-100",
+            onClick: o[4] || (o[4] = (m) => {
+              var i;
+              return (i = e.editor) == null ? void 0 : i.chain().focus().addColumnAfter().run();
+            })
+          }, " + Col Right "),
+          l("button", {
+            class: "px-2 py-1 text-xs rounded hover:bg-red-50 text-red-600",
+            onClick: o[5] || (o[5] = (m) => {
+              var i;
+              return (i = e.editor) == null ? void 0 : i.chain().focus().deleteColumn().run();
+            })
+          }, " Delete Col ")
+        ]),
+        o[13] || (o[13] = l("span", { class: "w-px h-6 bg-gray-300" }, null, -1)),
+        l("div", bt, [
+          l("button", {
+            class: "px-2 py-1 text-xs rounded hover:bg-gray-100",
+            onClick: o[6] || (o[6] = (m) => {
+              var i;
+              return (i = e.editor) == null ? void 0 : i.chain().focus().mergeCells().run();
+            })
+          }, " Merge "),
+          l("button", {
+            class: "px-2 py-1 text-xs rounded hover:bg-gray-100",
+            onClick: o[7] || (o[7] = (m) => {
+              var i;
+              return (i = e.editor) == null ? void 0 : i.chain().focus().splitCell().run();
+            })
+          }, " Split ")
+        ]),
+        o[14] || (o[14] = l("span", { class: "w-px h-6 bg-gray-300" }, null, -1)),
+        l("button", {
+          class: "px-2 py-1 text-xs rounded hover:bg-gray-100",
+          onClick: o[8] || (o[8] = (m) => {
+            var i;
+            return (i = e.editor) == null ? void 0 : i.chain().focus().toggleHeaderRow().run();
+          })
+        }, " Toggle Header "),
+        l("button", {
+          class: "px-2 py-1 text-xs rounded hover:bg-red-50 text-red-600",
+          onClick: o[9] || (o[9] = (m) => {
+            var i;
+            return (i = e.editor) == null ? void 0 : i.chain().focus().deleteTable().run();
+          })
+        }, " Delete Table "),
+        o[15] || (o[15] = l("span", { class: "w-px h-6 bg-gray-300" }, null, -1)),
+        l("div", xt, [
+          o[11] || (o[11] = l("label", { class: "text-xs text-gray-500" }, "Cell BG:", -1)),
+          l("input", {
+            type: "color",
+            class: "w-5 h-5 cursor-pointer",
+            onInput: o[10] || (o[10] = (m) => t(m.target.value))
+          }, null, 32)
+        ])
+      ])) : B("", !0);
+    };
+  }
+}), kt = { class: "mb-3" }, wt = { class: "mb-4" }, Ct = { class: "flex gap-4" }, $t = { class: "flex items-center gap-2 text-sm" }, Tt = { class: "flex items-center gap-2 text-sm" }, Mt = { class: "flex justify-end gap-2" }, At = ["disabled"], St = /* @__PURE__ */ C({
+  __name: "SaveTemplateModal",
+  props: {
+    theme: {}
+  },
+  emits: ["save"],
+  setup(e, { expose: n, emit: t }) {
+    const c = t, o = y(!1), a = y(""), m = y("document");
+    function i() {
+      a.value = "", m.value = "document", o.value = !0;
+    }
+    function s() {
+      o.value = !1;
+    }
+    function r() {
+      c("save", { name: a.value.trim(), type: m.value }), s();
+    }
+    return n({ open: i, close: s }), (d, u) => (g(), V(Y, { to: "body" }, [
+      o.value ? (g(), p("div", {
+        key: 0,
+        class: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
+        onClick: K(s, ["self"])
+      }, [
+        l("div", {
+          class: w([e.theme.modal, "w-96"])
+        }, [
+          u[7] || (u[7] = l("h2", { class: "text-lg font-semibold mb-4" }, "Save as Template", -1)),
+          l("div", kt, [
+            u[3] || (u[3] = l("label", { class: "block text-sm font-medium text-gray-700 mb-1" }, "Template Name", -1)),
+            F(l("input", {
+              "onUpdate:modelValue": u[0] || (u[0] = (b) => a.value = b),
+              type: "text",
+              class: "w-full border border-gray-300 rounded px-3 py-2 text-sm",
+              placeholder: "My Template"
+            }, null, 512), [
+              [I, a.value]
+            ])
+          ]),
+          l("div", wt, [
+            u[6] || (u[6] = l("label", { class: "block text-sm font-medium text-gray-700 mb-1" }, "Type", -1)),
+            l("div", Ct, [
+              l("label", $t, [
+                F(l("input", {
+                  "onUpdate:modelValue": u[1] || (u[1] = (b) => m.value = b),
+                  type: "radio",
+                  value: "document"
+                }, null, 512), [
+                  [J, m.value]
+                ]),
+                u[4] || (u[4] = j(" Full Document ", -1))
+              ]),
+              l("label", Tt, [
+                F(l("input", {
+                  "onUpdate:modelValue": u[2] || (u[2] = (b) => m.value = b),
+                  type: "radio",
+                  value: "snippet"
+                }, null, 512), [
+                  [J, m.value]
+                ]),
+                u[5] || (u[5] = j(" Snippet ", -1))
+              ])
+            ])
+          ]),
+          l("div", Mt, [
+            l("button", {
+              class: "px-4 py-2 text-sm text-gray-600 hover:text-gray-800",
+              onClick: s
+            }, "Cancel"),
+            l("button", {
+              class: w(e.theme.saveButton),
+              disabled: !a.value.trim(),
+              onClick: r
+            }, "Save", 10, At)
+          ])
+        ], 2)
+      ])) : B("", !0)
+    ]));
+  }
+}), Lt = {
+  key: 0,
+  class: "text-center py-8 text-gray-500"
+}, Bt = {
+  key: 1,
+  class: "text-center py-8 text-gray-500"
+}, Ht = {
+  key: 2,
+  class: "overflow-y-auto flex-1 -mx-6 px-6"
+}, Et = ["onClick"], zt = { class: "font-medium text-sm" }, Rt = ["onClick"], Ft = /* @__PURE__ */ C({
+  __name: "LoadTemplateModal",
+  props: {
+    theme: {},
+    templates: {},
+    loading: { type: Boolean }
+  },
+  emits: ["select", "delete", "load"],
+  setup(e, { expose: n, emit: t }) {
+    const c = t, o = y(!1);
+    function a() {
+      o.value = !0, c("load");
+    }
+    function m() {
+      o.value = !1;
+    }
+    function i(r) {
+      c("select", r), m();
+    }
+    function s(r) {
+      confirm(`Delete template "${r.name}"?`) && c("delete", r);
+    }
+    return n({ open: a, close: m }), (r, d) => (g(), V(Y, { to: "body" }, [
+      o.value ? (g(), p("div", {
+        key: 0,
+        class: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
+        onClick: K(m, ["self"])
+      }, [
+        l("div", {
+          class: w([e.theme.modal, "w-[500px] max-h-[80vh] flex flex-col"])
+        }, [
+          d[0] || (d[0] = l("h2", { class: "text-lg font-semibold mb-4" }, "Load Template", -1)),
+          e.loading ? (g(), p("div", Lt, "Loading templates...")) : e.templates.length === 0 ? (g(), p("div", Bt, "No templates found")) : (g(), p("div", Ht, [
+            (g(!0), p(A, null, E(e.templates, (u) => (g(), p("div", {
+              key: u.id,
+              class: "flex items-center justify-between p-3 border border-gray-200 rounded mb-2 hover:bg-gray-50 cursor-pointer group",
+              onClick: (b) => i(u)
+            }, [
+              l("div", null, [
+                l("div", zt, z(u.name), 1),
+                l("span", {
+                  class: w(["inline-block text-xs px-2 py-0.5 rounded mt-1", u.type === "document" ? "bg-blue-100 text-blue-700" : "bg-green-100 text-green-700"])
+                }, z(u.type === "document" ? "Document" : "Snippet"), 3)
+              ]),
+              l("button", {
+                class: "text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 text-sm px-2",
+                onClick: K((b) => s(u), ["stop"])
+              }, " Delete ", 8, Rt)
+            ], 8, Et))), 128))
+          ])),
+          l("div", { class: "flex justify-end pt-4" }, [
+            l("button", {
+              class: "px-4 py-2 text-sm text-gray-600 hover:text-gray-800",
+              onClick: m
+            }, "Cancel")
+          ])
+        ], 2)
+      ])) : B("", !0)
+    ]));
+  }
+}), Vt = { class: "border border-gray-200 rounded-lg overflow-hidden" }, ll = /* @__PURE__ */ C({
+  __name: "DocumentEditor",
+  props: {
+    modelValue: {},
+    mode: { default: "document" },
+    templateMeta: {},
+    api: {},
+    image: {},
+    theme: {},
+    placeholder: { default: "" },
+    readonly: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "save", "error"],
+  setup(e, { emit: n }) {
+    const t = e, c = n, o = H(() => ({
+      ...Ee,
+      ...t.theme
+    })), a = ie({
+      content: t.modelValue,
+      editable: !t.readonly,
+      extensions: [
+        se,
+        ae,
+        ue,
+        $e,
+        de,
+        ce,
+        me,
+        fe.configure({ types: ["textStyle"] }),
+        ve.configure({ types: ["heading", "paragraph"] }),
+        Te,
+        ge.configure({
+          openOnClick: !1,
+          HTMLAttributes: {
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }
+        }),
+        Be,
+        pe.configure({ resizable: !0 }),
+        be,
+        xe,
+        ye,
+        He,
+        he.configure({
+          placeholder: t.placeholder || "Start typing..."
+        })
+      ],
+      onUpdate: () => {
+        var v;
+        c("update:modelValue", ((v = a.value) == null ? void 0 : v.getHTML()) ?? "");
+      }
+    });
+    te(Q, a), q(() => t.modelValue, (v) => {
+      var f, $;
+      ((f = a.value) == null ? void 0 : f.getHTML()) !== v && (($ = a.value) == null || $.commands.setContent(v, { emitUpdate: !1 }));
+    }), q(() => t.readonly, (v) => {
+      var f;
+      (f = a.value) == null || f.setEditable(!v);
+    });
+    function m(v) {
+      c("error", v);
+    }
+    const i = Oe(t.api), s = y(null), r = y(null);
+    async function d(v) {
+      var f, $, T;
+      try {
+        const M = ((f = a.value) == null ? void 0 : f.getHTML()) ?? "", O = v.type === "snippet" && (($ = a.value) != null && $.state.selection.content()) && ((T = a.value) == null ? void 0 : T.state.selection.content().content.textBetween(0, a.value.state.selection.content().content.size)) || M;
+        await i.saveTemplate({ name: v.name, type: v.type, content: O });
+      } catch (M) {
+        const O = M instanceof Error ? M.message : "Unknown error";
+        c("error", { message: O, detail: M });
+      }
+    }
+    function u(v) {
+      var f, $, T, M;
+      if (v.type === "document") {
+        if (((f = a.value) == null ? void 0 : f.getHTML()) !== "<p></p>" && (($ = a.value) == null ? void 0 : $.getHTML()) !== "" && !confirm("Replace current content with this template?")) return;
+        (T = a.value) == null || T.commands.setContent(v.content);
+      } else
+        (M = a.value) == null || M.commands.insertContent(v.content);
+    }
+    async function b(v) {
+      try {
+        await i.deleteTemplate(v.id), await i.loadTemplates();
+      } catch (f) {
+        const $ = f instanceof Error ? f.message : "Unknown error";
+        c("error", { message: $, detail: f });
+      }
+    }
+    async function S() {
+      var v;
+      try {
+        const f = ((v = a.value) == null ? void 0 : v.getHTML()) ?? "", $ = t.mode === "template" ? t.api.saveTemplate : t.api.saveDocument, T = t.mode === "template" ? { ...t.templateMeta, content: f } : { content: f }, M = await fetch($, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...t.api.headers
+          },
+          body: JSON.stringify(T)
+        });
+        if (!M.ok) throw new Error(`Save failed: ${M.statusText}`);
+        const O = await M.json();
+        c("save", O);
+      } catch (f) {
+        const $ = f instanceof Error ? f.message : "Unknown error";
+        c("error", { message: $, detail: f });
+      }
+    }
+    return (v, f) => (g(), p("div", Vt, [
+      t.readonly ? B("", !0) : (g(), p(A, { key: 0 }, [
+        h(vt, {
+          editor: L(a),
+          theme: o.value,
+          "image-config": t.image,
+          onSaveTemplate: f[0] || (f[0] = ($) => {
+            var T;
+            return (T = s.value) == null ? void 0 : T.open();
+          }),
+          onLoadTemplate: f[1] || (f[1] = ($) => {
+            var T;
+            return (T = r.value) == null ? void 0 : T.open();
+          }),
+          onSave: S,
+          onError: m
+        }, null, 8, ["editor", "theme", "image-config"]),
+        h(yt, { editor: L(a) }, null, 8, ["editor"])
+      ], 64)),
+      h(L(re), {
+        editor: L(a),
+        class: w(o.value.editor)
+      }, null, 8, ["editor", "class"]),
+      h(St, {
+        ref_key: "saveTemplateModal",
+        ref: s,
+        theme: o.value,
+        onSave: d
+      }, null, 8, ["theme"]),
+      h(Ft, {
+        ref_key: "loadTemplateModal",
+        ref: r,
+        theme: o.value,
+        templates: L(i).templates.value,
+        loading: L(i).loading.value,
+        onLoad: f[2] || (f[2] = ($) => L(i).loadTemplates()),
+        onSelect: u,
+        onDelete: b
+      }, null, 8, ["theme", "templates", "loading"])
+    ]));
+  }
+});
+export {
+  ze as DEFAULT_IMAGE_CONFIG,
+  Ee as DEFAULT_THEME,
+  ll as DocumentEditor,
+  Fe as FONT_SIZES,
+  Ve as LINE_HEIGHTS,
+  Re as WEB_SAFE_FONTS,
+  tl as useDocumentEditor
+};