inkflow-editor 1.3.0

package/dist/inkflow-editor.mjs

@@ -0,0 +1,2010 @@
+import v from "dompurify";
+class E {
+  /**
+   * Returns the current selection object.
+   */
+  getSelection() {
+    return window.getSelection();
+  }
+  /**
+   * Returns the first range of the current selection.
+   */
+  getRange() {
+    const e = this.getSelection();
+    return !e || e.rangeCount === 0 ? null : e.getRangeAt(0);
+  }
+  /**
+   * Serializes the current selection into a path-based format relative to a root element.
+   * This allows restoring selection even if the DOM nodes are replaced but the structure is similar.
+   */
+  getSelectionPath(e) {
+    const t = this.getRange();
+    return !t || !e.contains(t.commonAncestorContainer) ? null : {
+      startPath: this.getNodePath(t.startContainer, e),
+      startOffset: t.startOffset,
+      endPath: this.getNodePath(t.endContainer, e),
+      endOffset: t.endOffset
+    };
+  }
+  /**
+   * Restores selection from a path-based serialization.
+   */
+  restoreSelectionPath(e, t) {
+    if (t)
+      try {
+        const n = this.getNodeByPath(t.startPath, e), i = this.getNodeByPath(t.endPath, e);
+        if (n && i) {
+          const o = document.createRange();
+          o.setStart(n, Math.min(t.startOffset, n.textContent?.length || 0)), o.setEnd(i, Math.min(t.endOffset, i.textContent?.length || 0)), this.restoreSelection(o);
+        }
+      } catch (n) {
+        console.warn("Failed to restore selection path:", n);
+      }
+  }
+  getNodePath(e, t) {
+    const n = [];
+    let i = e;
+    for (; i !== t && i.parentElement; ) {
+      const o = Array.from(i.parentElement.childNodes).indexOf(i);
+      n.unshift(o), i = i.parentElement;
+    }
+    return n;
+  }
+  getNodeByPath(e, t) {
+    let n = t;
+    for (const i of e)
+      if (n.childNodes[i])
+        n = n.childNodes[i];
+      else
+        return null;
+    return n;
+  }
+  /**
+   * Saves the current selection range.
+   */
+  saveSelection() {
+    const e = this.getRange();
+    return e ? e.cloneRange() : null;
+  }
+  /**
+   * Restores a previously saved range.
+   */
+  restoreSelection(e) {
+    if (!e) return;
+    const t = this.getSelection();
+    t && (t.removeAllRanges(), t.addRange(e));
+  }
+  /**
+   * Checks if the selection is within a specific element.
+   */
+  isSelectionInElement(e) {
+    const t = this.getRange();
+    return t ? e.contains(t.commonAncestorContainer) : !1;
+  }
+  /**
+   * Clears the current selection.
+   */
+  clearSelection() {
+    const e = this.getSelection();
+    e && e.removeAllRanges();
+  }
+}
+class x {
+  editor;
+  activeContainer = null;
+  isResizing = !1;
+  startX = 0;
+  startY = 0;
+  startWidth = 0;
+  startHeight = 0;
+  currentHandle = null;
+  aspectRatio = 1;
+  boundMouseDown;
+  boundMouseMove;
+  boundMouseUp;
+  boundKeyDown;
+  constructor(e) {
+    this.editor = e, this.boundMouseDown = this.handleMouseDown.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundMouseUp = this.handleMouseUp.bind(this), this.boundKeyDown = this.handleKeyDown.bind(this), this.setupListeners();
+  }
+  setupListeners() {
+    const e = this.editor.el;
+    e.addEventListener("mousedown", this.boundMouseDown), window.addEventListener("mousemove", this.boundMouseMove), window.addEventListener("mouseup", this.boundMouseUp), e.addEventListener("keydown", this.boundKeyDown), e.addEventListener("blur", this.deselectImage.bind(this));
+  }
+  handleMouseDown(e) {
+    const t = e.target;
+    if (t.classList.contains("te-image-resizer")) {
+      e.preventDefault(), e.stopPropagation();
+      const i = t.closest(".te-image-container");
+      i && (this.selectImage(i), this.startResize(e, t));
+      return;
+    }
+    const n = t.closest(".te-image-container");
+    n ? this.selectImage(n) : this.deselectImage();
+  }
+  handleMouseMove(e) {
+    this.isResizing && this.handleResize(e);
+  }
+  handleMouseUp() {
+    this.isResizing && this.stopResize();
+  }
+  handleKeyDown(e) {
+    if ((e.key === "Backspace" || e.key === "Delete") && this.activeContainer) {
+      const t = this.editor.selection.getRange();
+      if (t && this.activeContainer.contains(t.commonAncestorContainer)) {
+        e.preventDefault();
+        const n = this.activeContainer.querySelector("img"), i = n?.getAttribute("data-image-id"), o = n?.src, s = this.editor.getOptions();
+        s.onImageDelete && s.onImageDelete(i || void 0, o), i && s.imageEndpoints?.delete && fetch(s.imageEndpoints.delete, {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ id: i, url: o })
+        }).catch((a) => console.error("Failed to notify server of image deletion", a)), this.activeContainer.remove(), this.activeContainer = null, this.editor.el.dispatchEvent(new Event("input", { bubbles: !0 }));
+      }
+    }
+  }
+  destroy() {
+    const e = this.editor.el;
+    e && (e.removeEventListener("mousedown", this.boundMouseDown), e.removeEventListener("keydown", this.boundKeyDown), e.removeEventListener("blur", this.deselectImage.bind(this))), window.removeEventListener("mousemove", this.boundMouseMove), window.removeEventListener("mouseup", this.boundMouseUp);
+  }
+  selectImage(e) {
+    this.activeContainer && this.activeContainer.classList.remove("active"), this.activeContainer = e, this.activeContainer.classList.add("active");
+  }
+  deselectImage() {
+    this.activeContainer && (this.activeContainer.classList.remove("active"), this.activeContainer = null);
+  }
+  startResize(e, t) {
+    if (!this.activeContainer) return;
+    this.isResizing = !0, this.currentHandle = Array.from(t.classList).find((i) => i.startsWith("te-resizer-"))?.replace("te-resizer-", "") || null;
+    const n = this.activeContainer.querySelector("img");
+    this.startX = e.clientX, this.startY = e.clientY, this.startWidth = n.clientWidth, this.startHeight = n.clientHeight, this.aspectRatio = this.startWidth / this.startHeight, document.body.style.cursor = window.getComputedStyle(t).cursor;
+  }
+  handleResize(e) {
+    if (!this.activeContainer || !this.isResizing) return;
+    const t = this.activeContainer.querySelector("img"), n = e.clientX - this.startX, i = e.clientY - this.startY;
+    let o = this.startWidth, s = this.startHeight;
+    this.currentHandle?.includes("right") ? o = this.startWidth + n : this.currentHandle?.includes("left") ? o = this.startWidth - n : this.currentHandle?.includes("bottom") ? o = this.startWidth + i * this.aspectRatio : this.currentHandle?.includes("top") && (o = this.startWidth - i * this.aspectRatio), s = o / this.aspectRatio, o > 50 && o < this.editor.el.clientWidth && (t.style.width = `${o}px`, t.style.height = `${s}px`);
+  }
+  stopResize() {
+    this.isResizing = !1, this.currentHandle = null, document.body.style.cursor = "", this.editor.el.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+}
+class w {
+  stack = [];
+  index = -1;
+  maxDepth = 50;
+  constructor(e) {
+    e !== void 0 && this.record(e, null);
+  }
+  /**
+   * Records a new state in the history stack.
+   * Clears any "redo" states if we record a new action.
+   */
+  record(e, t) {
+    if (this.index >= 0 && this.stack[this.index].html === e) {
+      this.stack[this.index].selection = t;
+      return;
+    }
+    this.index < this.stack.length - 1 && (this.stack = this.stack.slice(0, this.index + 1)), this.stack.push({ html: e, selection: t }), this.index++, this.stack.length > this.maxDepth && (this.stack.shift(), this.index--);
+  }
+  /**
+   * Returns the previous state if available.
+   */
+  undo() {
+    return this.index > 0 ? (this.index--, this.stack[this.index]) : null;
+  }
+  /**
+   * Returns the next state if available.
+   */
+  redo() {
+    return this.index < this.stack.length - 1 ? (this.index++, this.stack[this.index]) : null;
+  }
+  /**
+   * Checks if undo is possible.
+   */
+  canUndo() {
+    return this.index > 0;
+  }
+  /**
+   * Checks if redo is possible.
+   */
+  canRedo() {
+    return this.index < this.stack.length - 1;
+  }
+}
+const C = {
+  type: "button",
+  title: "Undo",
+  command: "undo",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"></path><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path></svg>'
+}, L = {
+  type: "button",
+  title: "Redo",
+  command: "redo",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"></path><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"></path></svg>'
+}, k = {
+  type: "select",
+  title: "Heading",
+  command: "formatBlock",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h8"></path><path d="M4 18V6"></path><path d="M12 18V6"></path><path d="M17 12h3"></path><path d="M17 18V6"></path></svg>',
+  options: [
+    { label: "Paragraph", value: "P" },
+    { label: "Heading 1", value: "H1" },
+    { label: "Heading 2", value: "H2" },
+    { label: "Heading 3", value: "H3" },
+    { label: "Heading 4", value: "H4" },
+    { label: "Heading 5", value: "H5" },
+    { label: "Heading 6", value: "H6" }
+  ]
+}, S = {
+  type: "select",
+  title: "Font",
+  command: "fontFamily",
+  options: [
+    { label: "Inter", value: "'Inter', sans-serif" },
+    { label: "Arial", value: "Arial, sans-serif" },
+    { label: "Georgia", value: "Georgia, serif" },
+    { label: "Courier", value: "'Courier New', monospace" },
+    { label: "Times New Roman", value: "'Times New Roman', serif" },
+    { label: "Verdana", value: "Verdana, sans-serif" },
+    { label: "Tahoma", value: "Tahoma, sans-serif" },
+    { label: "Roboto", value: "'Roboto', sans-serif" },
+    { label: "Open Sans", value: "'Open Sans', sans-serif" },
+    { label: "Montserrat", value: "'Montserrat', sans-serif" },
+    { label: "Lato", value: "'Lato', sans-serif" },
+    { label: "Poppins", value: "'Poppins', sans-serif" },
+    { label: "Oswald", value: "'Oswald', sans-serif" },
+    { label: "Playfair Display", value: "'Playfair Display', serif" },
+    { label: "Merriweather", value: "'Merriweather', serif" }
+  ]
+}, M = {
+  type: "input",
+  title: "Size (px)",
+  command: "fontSize",
+  placeholder: "Size",
+  value: "16"
+}, T = {
+  type: "select",
+  title: "Line Height",
+  command: "lineHeight",
+  options: [
+    { label: "Normal", value: "normal" },
+    { label: "0.5", value: "0.5" },
+    { label: "1.0", value: "1.0" },
+    { label: "1.15", value: "1.15" },
+    { label: "1.5", value: "1.5" },
+    { label: "2.0", value: "2.0" },
+    { label: "2.5", value: "2.5" },
+    { label: "3.0", value: "3.0" },
+    { label: "3.5", value: "3.5" },
+    { label: "4.0", value: "4.0" },
+    { label: "4.5", value: "4.5" },
+    { label: "5.0", value: "5.0" },
+    { label: "5.5", value: "5.5" },
+    { label: "6.0", value: "6.0" },
+    { label: "6.5", value: "6.5" },
+    { label: "7.0", value: "7.0" },
+    { label: "7.5", value: "7.5" },
+    { label: "8.0", value: "8.0" },
+    { label: "8.5", value: "8.5" },
+    { label: "9.0", value: "9.0" },
+    { label: "9.5", value: "9.5" },
+    { label: "10.0", value: "10.0" }
+  ],
+  value: "normal"
+}, R = {
+  type: "button",
+  title: "Bold",
+  command: "bold",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>'
+}, H = {
+  type: "button",
+  title: "Italic",
+  command: "italic",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"></line><line x1="15" y1="4" x2="9" y2="20"></line></svg>'
+}, A = {
+  type: "button",
+  title: "Underline",
+  command: "underline",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path><line x1="4" y1="21" x2="20" y2="21"></line></svg>'
+}, I = {
+  type: "button",
+  title: "Strikethrough",
+  command: "strikeThrough",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"></path><path d="M14 12a4 4 0 0 1 0 8H6"></path><line x1="4" y1="12" x2="20" y2="12"></line></svg>'
+}, N = {
+  type: "color-picker",
+  title: "Text Color",
+  command: "foreColor",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16"/><path d="m6 16 6-12 6 12"/><path d="M8 12h8"/></svg>',
+  value: "#1e293b"
+}, P = {
+  type: "color-picker",
+  title: "Highlight Color",
+  command: "backColor",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>',
+  value: "#ffffff"
+}, j = {
+  type: "button",
+  title: "Align Left",
+  command: "justifyLeft",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="6" x2="3" y2="6"></line><line x1="15" y1="10" x2="3" y2="10"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="15" y1="18" x2="3" y2="18"></line></svg>'
+}, B = {
+  type: "button",
+  title: "Align Center",
+  command: "justifyCenter",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="6" x2="3" y2="6"></line><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>'
+}, O = {
+  type: "button",
+  title: "Align Right",
+  command: "justifyRight",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="10" x2="9" y2="10"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="9" y2="18"></line></svg>'
+}, D = {
+  type: "button",
+  title: "Justify",
+  command: "justifyFull",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>'
+}, z = {
+  type: "button",
+  title: "Bulleted List",
+  command: "insertUnorderedList",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>'
+}, U = {
+  type: "button",
+  title: "Numbered List",
+  command: "insertOrderedList",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" y1="6" x2="21" y2="6"></line><line x1="10" y1="12" x2="21" y2="12"></line><line x1="10" y1="18" x2="21" y2="18"></line><path d="M4 6h1v4"></path><path d="M4 10h2"></path><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"></path></svg>'
+}, F = {
+  type: "button",
+  title: "Outdent",
+  command: "outdent",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline><line x1="21" y1="12" x2="9" y2="12"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>'
+}, q = {
+  type: "button",
+  title: "Indent",
+  command: "indent",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline><line x1="3" y1="12" x2="15" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>'
+}, W = {
+  type: "button",
+  title: "Horizontal Rule",
+  command: "insertHorizontalRule",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>'
+}, $ = {
+  type: "button",
+  title: "Clear Formatting",
+  command: "removeFormat",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"></path><path d="M5 20h6"></path><path d="M13 4 8 20"></path><path d="m15 15 5 5"></path><path d="m20 15-5 5"></path></svg>'
+}, _ = {
+  type: "button",
+  title: "Insert Emoji",
+  command: "insertEmoji",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>'
+}, V = {
+  type: "button",
+  title: "Insert Link",
+  command: "createLink",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>'
+}, K = {
+  type: "button",
+  title: "Insert Image",
+  command: "insertImage",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>'
+}, G = {
+  type: "button",
+  command: "insertTable",
+  title: "Insert Table",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3zM21 9H3M21 15H3M12 3v18"/></svg>'
+}, X = {
+  type: "button",
+  id: "code-block",
+  title: "Code Block",
+  command: "formatBlock",
+  value: "PRE",
+  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>'
+}, p = { type: "divider", title: "" }, b = [
+  { ...C, id: "undo" },
+  { ...L, id: "redo" },
+  p,
+  { ...k, id: "heading" },
+  { ...S, id: "font-family" },
+  { ...M, id: "font-size" },
+  { ...T, id: "line-height" },
+  p,
+  { ...R, id: "bold" },
+  { ...H, id: "italic" },
+  { ...A, id: "underline" },
+  { ...I, id: "strikethrough" },
+  p,
+  { ...N, id: "text-color" },
+  { ...P, id: "highlight-color" },
+  p,
+  { ...j, id: "align-left" },
+  { ...B, id: "align-center" },
+  { ...O, id: "align-right" },
+  { ...D, id: "align-justify" },
+  p,
+  { ...z, id: "bullet-list" },
+  { ...U, id: "ordered-list" },
+  { ...F, id: "outdent" },
+  { ...q, id: "indent" },
+  p,
+  { ...W, id: "horizontal-rule" },
+  { ..._, id: "emoji" },
+  { ...V, id: "link" },
+  { ...K, id: "image" },
+  { ...G, id: "table" },
+  { ...X, id: "code-block" },
+  { ...$, id: "clear-formatting" }
+];
+class g {
+  container;
+  onConfirm;
+  onClose;
+  dark;
+  theme;
+  fields;
+  constructor(e, t, n, i, o, s) {
+    this.fields = t, this.onConfirm = n, this.onClose = i, this.theme = o, this.dark = s, this.container = this.createModalElement(e, t), this.setupEvents();
+  }
+  createModalElement(e, t) {
+    const n = document.createElement("div");
+    n.classList.add("te-modal"), this.theme && this.applyTheme(n, this.theme), this.dark && n.classList.add("te-dark");
+    const i = document.createElement("div");
+    i.classList.add("te-modal-header"), i.textContent = e, n.appendChild(i);
+    const o = document.createElement("div");
+    o.classList.add("te-modal-body"), t.forEach((r) => {
+      const d = document.createElement("div");
+      d.classList.add("te-modal-field");
+      const c = document.createElement("label");
+      c.setAttribute("for", r.id), c.textContent = r.label;
+      const h = document.createElement("input");
+      h.type = r.type, h.id = r.id, h.classList.add("te-modal-input"), r.placeholder && (h.placeholder = r.placeholder), r.defaultValue && (h.value = r.defaultValue), r.min && (h.min = r.min), r.max && (h.max = r.max), r.type === "file" && (h.accept = "image/*", h.classList.add("te-modal-file-input")), d.appendChild(c), d.appendChild(h), o.appendChild(d);
+    }), n.appendChild(o);
+    const s = document.createElement("div");
+    s.classList.add("te-modal-footer");
+    const a = document.createElement("button");
+    a.classList.add("te-modal-btn", "te-modal-btn-cancel"), a.textContent = "Cancel";
+    const l = document.createElement("button");
+    return l.classList.add("te-modal-btn", "te-modal-btn-confirm"), l.textContent = "Insert", s.appendChild(a), s.appendChild(l), n.appendChild(s), n;
+  }
+  setupEvents() {
+    const e = this.container.querySelector(".te-modal-btn-cancel"), t = this.container.querySelector(".te-modal-btn-confirm");
+    e.addEventListener("click", () => this.close()), t.addEventListener("click", () => {
+      const o = {};
+      this.fields.forEach((s) => {
+        const a = this.container.querySelector(`#${s.id}`);
+        s.type === "file" ? o[s.id] = a.files && a.files.length > 0 ? a.files[0] : null : o[s.id] = a.value;
+      }), this.onConfirm(o), this.close();
+    });
+    const n = (o) => {
+      o.key === "Escape" && this.close(), o.key === "Enter" && t.click();
+    };
+    this.container.addEventListener("keydown", n);
+    const i = (o) => {
+      this.container.contains(o.target) || (this.close(), document.removeEventListener("mousedown", i));
+    };
+    setTimeout(() => document.addEventListener("mousedown", i), 0);
+  }
+  show(e) {
+    document.body.appendChild(this.container);
+    const t = e.getBoundingClientRect(), n = 260;
+    let i = t.bottom + window.scrollY + 10, o = t.left + window.scrollX;
+    o + n > window.innerWidth && (o = window.innerWidth - n - 20), this.container.style.top = `${i}px`, this.container.style.left = `${o}px`;
+    const s = this.container.querySelector("input");
+    s && s.focus();
+  }
+  close() {
+    this.container.parentElement && (this.container.remove(), this.onClose());
+  }
+  applyTheme(e, t) {
+    const n = {
+      primaryColor: "--te-primary-color",
+      primaryHover: "--te-primary-hover",
+      bgApp: "--te-bg-app",
+      bgEditor: "--te-bg-editor",
+      toolbarBg: "--te-toolbar-bg",
+      borderColor: "--te-border-color",
+      borderFocus: "--te-border-focus",
+      textMain: "--te-text-main",
+      textMuted: "--te-text-muted",
+      placeholder: "--te-placeholder",
+      btnHover: "--te-btn-hover",
+      btnActive: "--te-btn-active",
+      radiusLg: "--te-radius-lg",
+      radiusMd: "--te-radius-md",
+      radiusSm: "--te-radius-sm",
+      shadowSm: "--te-shadow-sm",
+      shadowMd: "--te-shadow-md",
+      shadowLg: "--te-shadow-lg"
+    };
+    for (const [i, o] of Object.entries(n)) {
+      const s = t[i];
+      s && e.style.setProperty(o, s);
+    }
+  }
+}
+class Y {
+  container;
+  editor;
+  activeModal = null;
+  savedRange = null;
+  isVisible = !1;
+  constructor(e) {
+    this.editor = e, this.container = this.createContainer(), this.setupListeners(), document.body.appendChild(this.container);
+  }
+  createContainer() {
+    const e = document.createElement("div");
+    e.className = "te-floating-toolbar te-glass", e.style.display = "none", e.style.position = "absolute", e.style.zIndex = "2000";
+    const n = this.editor.getOptions().toolbarPosition === "floating", i = n ? ["bold", "italic", "underline", "strikethrough", "textColor", "highlight-color", "divider", "heading", "bullet-list", "ordered-list", "divider", "link", "image", "table", "code-block", "emoji", "clear-formatting"] : ["heading", "bold", "italic", "underline", "strikethrough", "highlight-color", "link", "clear-formatting"];
+    return (n ? b.filter((s) => s.id && (i.includes(s.id) || s.type === "divider")) : b.filter((s) => s.id && i.includes(s.id))).forEach((s) => {
+      if (s.type === "divider") {
+        const l = document.createElement("div");
+        l.className = "te-floating-divider", e.appendChild(l);
+        return;
+      }
+      const a = document.createElement("button");
+      a.className = "te-floating-btn", a.title = s.title, a.innerHTML = s.icon || s.title, a.onclick = (l) => {
+        l.preventDefault(), l.stopPropagation(), this.handleCommand(s);
+      }, e.appendChild(a);
+    }), e;
+  }
+  handleCommand(e) {
+    if (e.command === "createLink") {
+      const t = window.getSelection();
+      t && t.rangeCount > 0 && (this.savedRange = t.getRangeAt(0).cloneRange()), this.activeModal && this.activeModal.close(), this.activeModal = new g(
+        "Insert Link",
+        [{ id: "url", label: "URL", type: "text", placeholder: "https://example.com" }],
+        (n) => {
+          if (this.savedRange) {
+            const i = window.getSelection();
+            i && (i.removeAllRanges(), i.addRange(this.savedRange));
+          }
+          this.editor.execute("createLink", n.url), this.savedRange = null, this.hide();
+        },
+        () => {
+          this.activeModal = null, this.savedRange = null;
+        },
+        this.editor.getOptions().theme,
+        this.editor.getOptions().dark
+      ), this.activeModal.show(this.container);
+    } else e.id === "heading" ? this.editor.execute("formatBlock", "H2") : e.id === "highlight-color" ? this.editor.execute("backColor", "#fef08a") : this.editor.execute(e.command || "", e.value);
+  }
+  setupListeners() {
+    const e = () => {
+      setTimeout(() => this.updatePosition(), 50);
+    };
+    this.editor.el.addEventListener("mouseup", e), this.editor.el.addEventListener("keyup", e), this.editor.el.addEventListener("scroll", () => {
+      this.isVisible && !this.activeModal && this.hide();
+    }, !0), window.addEventListener("mousedown", (t) => {
+      !this.container.contains(t.target) && !this.editor.el.contains(t.target) && this.hide();
+    }), window.addEventListener("resize", () => {
+      this.isVisible && this.updatePosition();
+    });
+  }
+  updatePosition() {
+    const e = window.getSelection(), n = this.editor.getOptions().toolbarPosition === "floating";
+    if (!e || e.rangeCount === 0) {
+      this.activeModal || this.hide();
+      return;
+    }
+    if (e.isCollapsed && !n) {
+      this.activeModal || this.hide();
+      return;
+    }
+    const i = e.getRangeAt(0);
+    if (!this.editor.el.contains(i.commonAncestorContainer)) {
+      this.hide();
+      return;
+    }
+    const o = i.getBoundingClientRect(), a = (this.container.offsetParent || document.documentElement).getBoundingClientRect();
+    this.container.style.display = "flex", this.isVisible = !0;
+    const l = this.container.offsetWidth, r = this.container.offsetHeight;
+    let d = o.top - a.top - r - 10, c = o.left - a.left + o.width / 2 - l / 2;
+    o.top - r - 15 < 0 && (d = o.bottom - a.top + 10);
+    const h = 10 - a.left, m = window.innerWidth - 10 - a.left - l;
+    c < h && (c = h), c > m && (c = m), this.container.style.top = `${d}px`, this.container.style.left = `${c}px`, this.container.classList.add("te-floating-visible");
+  }
+  hide() {
+    this.container.style.display = "none", this.container.classList.remove("te-floating-visible"), this.isVisible = !1;
+  }
+  destroy() {
+    this.container.remove();
+  }
+  setDarkMode(e) {
+    e ? this.container.classList.add("te-dark") : this.container.classList.remove("te-dark");
+  }
+}
+class y {
+  /**
+   * Compresses an image file using HTML5 Canvas.
+   */
+  static async compressImage(e, t) {
+    return new Promise((n, i) => {
+      if (e.size <= t * 1024 * 1024 && e.type === "image/webp")
+        return n(e);
+      const o = new Image();
+      o.src = URL.createObjectURL(e), o.onload = () => {
+        const s = document.createElement("canvas");
+        let a = o.width, l = o.height;
+        const r = 2e3;
+        (a > r || l > r) && (a > l ? (l = Math.round(l * r / a), a = r) : (a = Math.round(a * r / l), l = r)), s.width = a, s.height = l;
+        const d = s.getContext("2d");
+        if (!d)
+          return i(new Error("Failed to get canvas context"));
+        d.drawImage(o, 0, 0, a, l), s.toBlob(
+          (c) => {
+            c ? n(c) : i(new Error("Canvas toBlob failed"));
+          },
+          "image/webp",
+          0.8
+          // 80% quality is professional standard
+        ), URL.revokeObjectURL(o.src);
+      }, o.onerror = () => {
+        URL.revokeObjectURL(o.src), i(new Error("Failed to load image for compression"));
+      };
+    });
+  }
+  /**
+   * Uploads a file based on editor configuration.
+   */
+  static async uploadFile(e, t) {
+    const n = e instanceof File ? e.name : "upload.webp";
+    if (t.imageEndpoints?.upload) {
+      const i = new FormData();
+      i.append("file", e, n);
+      try {
+        const o = await fetch(t.imageEndpoints.upload, {
+          method: "POST",
+          body: i
+        });
+        if (o.ok) {
+          const s = await o.json();
+          return {
+            imageUrl: s.imageUrl,
+            imageId: s.imageId
+          };
+        }
+        console.warn("Custom upload endpoint returned an error, falling back.");
+      } catch (o) {
+        console.error("Custom upload failed:", o);
+      }
+    }
+    if (t.cloudinaryFallback) {
+      const { cloudName: i, uploadPreset: o } = t.cloudinaryFallback, s = `https://api.cloudinary.com/v1_1/${i}/image/upload`, a = new FormData();
+      a.append("file", e, n), a.append("upload_preset", o);
+      try {
+        const l = await fetch(s, {
+          method: "POST",
+          body: a
+        });
+        if (l.ok)
+          return {
+            imageUrl: (await l.json()).secure_url
+          };
+        console.warn("Cloudinary upload failed, falling back.");
+      } catch (l) {
+        console.error("Cloudinary fallback failed:", l);
+      }
+    }
+    return null;
+  }
+}
+class J {
+  container;
+  editableElement;
+  selection;
+  imageManager;
+  history;
+  options;
+  saveTimeout = null;
+  historyTimeout = null;
+  pendingStyles = {};
+  observer = null;
+  floatingToolbar = null;
+  magicStateMap = /* @__PURE__ */ new Map();
+  eventListeners = [];
+  loaderElement = null;
+  isUndoingRedoing = !1;
+  constructor(e, t = {}) {
+    if (this.options = t, this.container = e, typeof document > "u" || !e) {
+      this.editableElement = {}, this.selection = {}, this.imageManager = {}, this.history = {};
+      return;
+    }
+    this.container.innerHTML = "", this.container.classList.add("te-container"), this.options.dark && this.container.classList.add("te-dark"), this.options.showLoader !== !1 && this.createLoader(), this.editableElement = this.createEditableElement(), this.selection = new E(), this.imageManager = new x(this), this.history = new w(this.editableElement.innerHTML), this.setupInputHandlers(), this.setupLimitEnforcement(), this.setupLinkClickHandlers(), this.setupImageObserver(), this.checkPlaceholder(), this.container.appendChild(this.editableElement), this.options.autofocus && this.focus(), this.options.theme && this.applyTheme(this.options.theme), this.options.maxImageSizeMB === void 0 && (this.options.maxImageSizeMB = 5), document.execCommand("defaultParagraphSeparator", !1, "p"), this.floatingToolbar = new Y(this), this.options.dark && this.floatingToolbar.setDarkMode(!0), this.options.showLoader !== !1 && setTimeout(() => this.hideLoader(), 300);
+  }
+  /**
+   * Applies custom theme variables to the editor container.
+   */
+  applyTheme(e) {
+    const t = this.container, n = {
+      primaryColor: "--te-primary-color",
+      primaryHover: "--te-primary-hover",
+      bgApp: "--te-bg-app",
+      bgEditor: "--te-bg-editor",
+      toolbarBg: "--te-toolbar-bg",
+      borderColor: "--te-border-color",
+      borderFocus: "--te-border-focus",
+      textMain: "--te-text-main",
+      textMuted: "--te-text-muted",
+      placeholder: "--te-placeholder",
+      btnHover: "--te-btn-hover",
+      btnActive: "--te-btn-active",
+      radiusLg: "--te-radius-lg",
+      radiusMd: "--te-radius-md",
+      radiusSm: "--te-radius-sm",
+      shadowSm: "--te-shadow-sm",
+      shadowMd: "--te-shadow-md",
+      shadowLg: "--te-shadow-lg"
+    };
+    for (const [i, o] of Object.entries(n)) {
+      const s = e[i];
+      s && t.style.setProperty(o, s);
+    }
+  }
+  /**
+   * Toggles dark mode on the editor.
+   */
+  setDarkMode(e) {
+    this.options.dark = e, e ? (this.container.classList.add("te-dark"), this.floatingToolbar?.setDarkMode(!0)) : (this.container.classList.remove("te-dark"), this.floatingToolbar?.setDarkMode(!1));
+  }
+  /**
+   * Destroys the editor instance and cleans up.
+   */
+  destroy() {
+    this.observer && (this.observer.disconnect(), this.observer = null), this.saveTimeout && clearTimeout(this.saveTimeout), this.historyTimeout && clearTimeout(this.historyTimeout), this.imageManager && typeof this.imageManager.destroy == "function" && this.imageManager.destroy(), this.eventListeners.forEach(({ target: e, type: t, handler: n }) => {
+      e.removeEventListener(t, n);
+    }), this.eventListeners = [], this.container.innerHTML = "", this.container.classList.remove("te-container", "te-dark", "te-toolbar-bottom", "te-toolbar-floating"), this.container.removeAttribute("style"), this.floatingToolbar && (this.floatingToolbar.destroy(), this.floatingToolbar = null);
+  }
+  checkPlaceholder() {
+    if (!this.editableElement) return;
+    if (this.editableElement.textContent?.trim() === "" && !this.editableElement.querySelector("img") && !this.editableElement.querySelector("table") && !this.editableElement.querySelector("ul") && !this.editableElement.querySelector("ol") && !this.editableElement.querySelector("hr") && !this.editableElement.querySelector("figure") && !this.editableElement.querySelector("blockquote") && !this.editableElement.querySelector("pre")) {
+      this.editableElement.classList.add("is-empty");
+      const t = this.editableElement.firstElementChild;
+      t && (this.editableElement.style.textAlign = t.style.textAlign);
+    } else
+      this.editableElement.classList.remove("is-empty"), this.editableElement.style.textAlign = "";
+  }
+  addEventListener(e, t, n, i) {
+    e.addEventListener(t, n, i), this.eventListeners.push({ target: e, type: t, handler: n });
+  }
+  setupImageObserver() {
+    this.observer = new MutationObserver((e) => {
+      e.forEach((t) => {
+        t.addedNodes.forEach((n) => {
+          if (n.nodeType === Node.ELEMENT_NODE) {
+            const i = n;
+            i.tagName === "IMG" && !i.closest(".te-image-container") ? this.wrapImage(i) : i.querySelectorAll("img:not(.te-image)").forEach((s) => {
+              s.closest(".te-image-container") || this.wrapImage(s);
+            });
+          }
+        });
+      });
+    }), this.observer.observe(this.editableElement, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  /**
+   * Wraps a raw <img> element in the interactive container
+   */
+  wrapImage(e) {
+    const t = e.parentElement;
+    if (!t) return;
+    const n = document.createElement("figure");
+    n.classList.add("te-image-container"), n.setAttribute("contenteditable", "false");
+    const i = document.createElement("img");
+    i.src = e.src, i.alt = e.alt || "", e.width && (i.style.width = `${e.width}px`), e.height && (i.style.height = `${e.height}px`), i.classList.add("te-image");
+    const o = document.createElement("figcaption");
+    if (o.classList.add("te-image-caption"), o.setAttribute("contenteditable", "true"), o.setAttribute("data-placeholder", "Type caption..."), ["top-left", "top-right", "bottom-left", "bottom-right"].forEach((a) => {
+      const l = document.createElement("div");
+      l.classList.add("te-image-resizer", `te-resizer-${a}`), n.appendChild(l);
+    }), n.appendChild(i), n.appendChild(o), t.replaceChild(n, e), !n.nextElementSibling) {
+      const a = document.createElement("p");
+      a.innerHTML = "<br>", n.after(a);
+    }
+  }
+  setupInputHandlers() {
+    this.addEventListener(this.editableElement, "beforeinput", (e) => {
+      if (e.inputType === "insertText" && Object.keys(this.pendingStyles).length > 0) {
+        const t = e.data;
+        if (!t) return;
+        e.preventDefault();
+        const n = document.createElement("span");
+        for (const [o, s] of Object.entries(this.pendingStyles))
+          n.style.setProperty(o, s);
+        n.textContent = t;
+        const i = this.selection.getRange();
+        if (i) {
+          i.deleteContents(), i.insertNode(n);
+          const o = document.createRange();
+          o.setStart(n.firstChild, t.length), o.setEnd(n.firstChild, t.length), this.selection.restoreSelection(o), this.pendingStyles = {}, this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+        }
+      }
+    }), this.addEventListener(this.editableElement, "input", () => {
+      this.checkPlaceholder();
+    }), this.addEventListener(document, "selectionchange", () => {
+      const e = window.getSelection();
+      e && e.rangeCount > 0 && (e.getRangeAt(0).collapsed || (this.pendingStyles = {}));
+    }), this.addEventListener(this.editableElement, "dragover", (e) => {
+      e.preventDefault(), e.dataTransfer.dropEffect = "copy", this.editableElement.classList.add("dragover");
+    }), this.addEventListener(this.editableElement, "dragleave", () => {
+      this.editableElement.classList.remove("dragover");
+    }), this.addEventListener(this.editableElement, "drop", (e) => {
+      e.preventDefault(), this.editableElement.classList.remove("dragover");
+      const t = e.dataTransfer?.files;
+      t && t.length > 0 && this.handleFiles(Array.from(t));
+    }), this.addEventListener(this.editableElement, "paste", this.handlePaste.bind(this)), this.addEventListener(this.editableElement, "input", () => {
+      this.handleInput();
+    }), this.addEventListener(this.editableElement, "keydown", (e) => {
+      if (e.key === "Enter") {
+        const t = window.getSelection();
+        if (t && t.rangeCount > 0) {
+          const n = t.getRangeAt(0);
+          (n.startContainer.nodeType === Node.ELEMENT_NODE ? n.startContainer : n.startContainer.parentElement)?.closest("li") && setTimeout(() => {
+            this.normalize(), this.triggerChange();
+          }, 0);
+        }
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        const t = this.selection.getRange();
+        if (t && t.collapsed) {
+          const n = t.startContainer, i = (n.nodeType === Node.ELEMENT_NODE ? n : n.parentElement)?.closest("pre");
+          if (i) {
+            const o = document.createRange();
+            o.setStart(i, 0), o.setEnd(t.startContainer, t.startOffset);
+            const s = o.toString(), a = document.createRange();
+            a.setStart(t.startContainer, t.startOffset), a.setEnd(i, i.childNodes.length);
+            const l = a.toString(), r = s === "" || s.endsWith(`
+`), d = l === "" || l.startsWith(`
+`);
+            if (r && d) {
+              e.preventDefault();
+              const c = i.textContent || "", h = s.length;
+              c.charAt(h) === `
+` ? i.textContent = c.slice(0, h) + c.slice(h + 1) : c.charAt(h - 1) === `
+` && (i.textContent = c.slice(0, h - 1) + c.slice(h));
+              const m = document.createElement("p");
+              m.innerHTML = "<br>", i.after(m);
+              const f = document.createRange();
+              f.setStart(m, 0), f.setEnd(m, 0), this.selection.restoreSelection(f), this.normalize(), this.triggerChange();
+              return;
+            }
+          }
+        }
+      }
+      (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z" ? (e.preventDefault(), e.shiftKey ? this.redo() : this.undo()) : (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "y" && (e.preventDefault(), this.redo());
+    });
+  }
+  /**
+   * Sets up strict character limit enforcement.
+   */
+  setupLimitEnforcement() {
+    this.editableElement.addEventListener("keydown", (e) => {
+      if (!this.options.maxCharCount || !this.options.strictCharLimit) return;
+      if (this.getCharCount() >= this.options.maxCharCount) {
+        const n = [
+          "Backspace",
+          "Delete",
+          "ArrowLeft",
+          "ArrowRight",
+          "ArrowUp",
+          "ArrowDown",
+          "Home",
+          "End",
+          "PageUp",
+          "PageDown",
+          "Control",
+          "Meta",
+          "Alt",
+          "Shift",
+          "a",
+          "c",
+          "v",
+          "x",
+          "z",
+          "y"
+          // Allow common shortcuts
+        ];
+        if ((e.ctrlKey || e.metaKey) && n.includes(e.key.toLowerCase()))
+          return;
+        n.includes(e.key) || (e.preventDefault(), e.stopPropagation());
+      }
+    });
+  }
+  /**
+   * Immediately records a history state if one is pending.
+   */
+  flushHistoryRecord() {
+    if (this.historyTimeout) {
+      clearTimeout(this.historyTimeout), this.historyTimeout = null;
+      const e = this.editableElement.innerHTML, t = this.selection.getSelectionPath(this.editableElement);
+      this.history.record(e, t);
+    }
+  }
+  handleInput() {
+    this.isUndoingRedoing || (this.scheduleHistoryRecord(), this.options.autoSave && (this.options.onSaving && this.options.onSaving(), this.scheduleAutoSave()), this.options.onChange && this.options.onChange(this.getHTML()));
+  }
+  scheduleHistoryRecord() {
+    this.historyTimeout && clearTimeout(this.historyTimeout), this.historyTimeout = setTimeout(() => {
+      const e = this.editableElement.innerHTML, t = this.selection.getSelectionPath(this.editableElement);
+      this.history.record(e, t);
+    }, 200);
+  }
+  scheduleAutoSave() {
+    this.saveTimeout && clearTimeout(this.saveTimeout);
+    const e = this.options.autoSaveInterval || 300;
+    this.saveTimeout = setTimeout(() => {
+      this.save();
+    }, e);
+  }
+  save() {
+    this.options.onSave && this.options.onSave(this.getHTML());
+  }
+  undo() {
+    this.flushHistoryRecord();
+    const e = this.history.undo();
+    e !== null && (this.isUndoingRedoing = !0, this.editableElement.innerHTML = e.html, e.selection && this.selection.restoreSelectionPath(this.editableElement, e.selection), this.triggerChange(), this.isUndoingRedoing = !1);
+  }
+  redo() {
+    this.flushHistoryRecord();
+    const e = this.history.redo();
+    e !== null && (this.isUndoingRedoing = !0, this.editableElement.innerHTML = e.html, e.selection && this.selection.restoreSelectionPath(this.editableElement, e.selection), this.triggerChange(), this.isUndoingRedoing = !1);
+  }
+  triggerChange() {
+    this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  createLoader() {
+    this.loaderElement = document.createElement("div"), this.loaderElement.className = "te-loader-overlay";
+    const e = document.createElement("div");
+    e.className = "te-loader-spinner";
+    const t = document.createElement("div");
+    t.className = "te-loader-shimmer";
+    const n = document.createElement("div");
+    n.className = "te-loader-text", n.textContent = "Initializing Editor...", this.loaderElement.appendChild(e), this.loaderElement.appendChild(t), this.loaderElement.appendChild(n), this.container.appendChild(this.loaderElement);
+  }
+  hideLoader() {
+    this.loaderElement && (this.loaderElement.classList.add("hidden"), setTimeout(() => {
+      this.loaderElement && this.loaderElement.parentNode && this.loaderElement.parentNode.removeChild(this.loaderElement), this.loaderElement = null;
+    }, 400));
+  }
+  createEditableElement() {
+    const e = document.createElement("div");
+    return e.setAttribute("contenteditable", "true"), e.setAttribute("role", "textbox"), e.setAttribute("spellcheck", "true"), e.classList.add("te-content"), this.options.placeholder && e.setAttribute("data-placeholder", this.options.placeholder), e.style.minHeight = "150px", e.style.outline = "none", e.style.padding = "1rem", e.innerHTML === "" && (e.innerHTML = "<p><br></p>"), e;
+  }
+  /**
+   * Focuses the editor.
+   */
+  focus() {
+    this.editableElement.focus();
+  }
+  /**
+   * Executes a command on the current selection.
+   */
+  execute(e, t = null) {
+    if (this.focus(), document.execCommand(e, !1, t ?? void 0), e === "removeFormat" && (document.execCommand("formatBlock", !1, "p"), this.pendingStyles = {}), e === "magicFormat") {
+      this.magicFormat();
+      return;
+    }
+    if (e === "resetMagicFormat") {
+      this.resetMagicFormat();
+      return;
+    }
+    this.normalize(), this.triggerChange();
+  }
+  /**
+   * Special handler for links to open them in a new tab when clicked.
+   */
+  setupLinkClickHandlers() {
+    this.addEventListener(this.editableElement, "click", (e) => {
+      const n = e.target.closest("a");
+      if (n && this.editableElement.contains(n)) {
+        e.preventDefault();
+        const i = n.getAttribute("href");
+        i && window.open(i, "_blank", "noopener,noreferrer");
+      }
+    });
+  }
+  /**
+   * Magic Format logic: Cycles through aesthetic presets for the entire document.
+   */
+  magicFormat() {
+    const t = ((this.magicStateMap.get(this.editableElement) || 0) + 1) % 3;
+    this.magicStateMap.set(this.editableElement, t);
+    const n = Array.from(this.editableElement.querySelectorAll("p, h1, h2, h3, h4, h5, h6, table, blockquote, figure, li"));
+    n.length !== 0 && (n.forEach((i) => {
+      this.enrichBlockWithEmojis(i), i.tagName === "TABLE" ? this.formatMagicTable(i, t) : i.tagName === "FIGURE" || i.querySelector("img") ? this.formatMagicImage(i, t) : i.tagName.startsWith("H") ? this.formatMagicHeading(i, t) : (i.tagName === "P" || i.tagName === "LI" || i.tagName === "BLOCKQUOTE") && this.formatMagicText(i, t);
+    }), this.normalize(), this.history.record(this.editableElement.innerHTML, this.selection.getSelectionPath(this.editableElement)), this.handleInput());
+  }
+  /**
+   * Resets all magic formatting (inline styles) from the document.
+   */
+  resetMagicFormat() {
+    Array.from(this.editableElement.querySelectorAll("p, h1, h2, h3, h4, h5, h6, table, blockquote, figure, li")).forEach((t) => {
+      t.removeAttribute("style"), t.querySelectorAll("*").forEach((n) => {
+        n.removeAttribute("style");
+      });
+    }), this.magicStateMap.clear(), this.normalize(), this.history.record(this.editableElement.innerHTML, this.selection.getSelectionPath(this.editableElement)), this.handleInput();
+  }
+  formatMagicTable(e, t) {
+    [
+      // State 0: Premium Zebra (Modern Rounded)
+      () => {
+        e.style.borderCollapse = "separate", e.style.borderRadius = "12px", e.style.overflow = "hidden", e.style.border = "1px solid var(--te-border-color)", e.style.boxShadow = "0 4px 6px -1px rgba(0,0,0,0.1)", e.querySelectorAll("td, th").forEach((i) => {
+          i.style.border = "1px solid var(--te-border-color)";
+        });
+      },
+      // State 1: Clean Minimal (No vertical borders, soft header)
+      () => {
+        e.style.borderCollapse = "collapse", e.style.borderRadius = "0", e.style.boxShadow = "none", e.style.border = "none", e.style.borderTop = "2px solid var(--te-primary-color)", e.style.borderBottom = "2px solid var(--te-primary-color)", e.querySelectorAll("td, th").forEach((i) => {
+          i.style.borderLeft = "none", i.style.borderRight = "none", i.style.borderBottom = "1px solid var(--te-border-color)";
+        });
+      },
+      // State 2: Ultra Minimal (No borders whatsoever)
+      () => {
+        e.style.border = "none", e.style.boxShadow = "none", e.style.background = "none", e.style.borderRadius = "0", e.querySelectorAll("td, th").forEach((i) => {
+          i.style.border = "none", i.style.padding = "12px 0";
+        });
+      }
+    ][t]();
+  }
+  formatMagicImage(e, t) {
+    const n = e.querySelector("img");
+    if (!n) return;
+    [
+      // State 0: Shadow & Rounded
+      () => {
+        n.style.borderRadius = "12px", n.style.boxShadow = "0 10px 15px -3px rgba(0,0,0,0.1)", n.style.border = "1px solid var(--te-border-color)";
+      },
+      // State 1: Thick Border Frame
+      () => {
+        n.style.borderRadius = "0", n.style.border = "8px solid white", n.style.boxShadow = "0 1px 3px rgba(0,0,0,0.2)";
+      },
+      // State 2: Soft Minimal
+      () => {
+        n.style.borderRadius = "8px", n.style.boxShadow = "none", n.style.border = "none";
+      }
+    ][t]();
+  }
+  formatMagicHeading(e, t) {
+    [
+      // State 0: Typography Focus (Modern Weight)
+      () => {
+        e.style.fontWeight = "800", e.style.color = "var(--te-primary-color)", e.style.letterSpacing = "-0.02em", e.style.border = "none", e.style.marginBottom = "1.5rem";
+      },
+      // State 1: Elegant Serif Look (Soft Color)
+      () => {
+        e.style.fontFamily = "serif", e.style.color = "#4338ca", e.style.fontStyle = "italic", e.style.border = "none", e.style.letterSpacing = "normal";
+      },
+      // State 2: All Caps & Spaced (Professional Accent)
+      () => {
+        e.style.textTransform = "uppercase", e.style.letterSpacing = "0.2em", e.style.color = "#1e1b4b", e.style.fontWeight = "900", e.style.border = "none";
+      }
+    ][t]();
+  }
+  formatMagicText(e, t) {
+    [
+      // State 0: Premium Reading Mode
+      () => {
+        e.style.lineHeight = "2", e.style.fontSize = "1.15rem", e.style.color = "#334155", e.style.fontWeight = "400", e.style.border = "none";
+      },
+      // State 1: Soft Highlight Look
+      () => {
+        e.style.background = "rgba(99, 102, 241, 0.05)", e.style.borderLeft = "4px solid #818cf8", e.style.padding = "1rem 1.5rem", e.style.borderRadius = "8px", e.style.color = "#1e293b";
+      },
+      // State 2: Modern Clean Minimal
+      () => {
+        e.style.fontWeight = "500", e.style.letterSpacing = "0.01em", e.style.color = "#0f172a", e.style.background = "none", e.style.border = "none", e.style.padding = "0.5rem 0";
+      }
+    ][t]();
+  }
+  /**
+   * Enriches text nodes within a block with emojis without breaking HTML structure.
+   */
+  enrichBlockWithEmojis(e) {
+    const t = {
+      success: "✅",
+      error: "❌",
+      warning: "⚠️",
+      info: "ℹ️",
+      magic: "✨",
+      done: "🎯",
+      plan: "📝",
+      link: "🔗",
+      image: "🖼️",
+      table: "📊",
+      celebrate: "🎉",
+      rocket: "🚀"
+    }, n = document.createTreeWalker(e, NodeFilter.SHOW_TEXT);
+    let i;
+    for (; i = n.nextNode(); ) {
+      let o = i.nodeValue || "", s = !1;
+      Object.entries(t).forEach(([a, l]) => {
+        const r = new RegExp(`\\b${a}\\b`, "gi");
+        r.test(o) && !o.includes(l) && (o = o.replace(r, `${l} ${a}`), s = !0);
+      }), s && (i.nodeValue = o);
+    }
+  }
+  /**
+   * Inserts a table at the current selection.
+   */
+  insertTable(e = 3, t = 3) {
+    this.focus();
+    const n = this.selection.getRange();
+    if (!n) return;
+    const i = document.createElement("table");
+    if (i.classList.add("te-table"), e > 0) {
+      const s = document.createElement("thead"), a = document.createElement("tr");
+      for (let l = 0; l < t; l++) {
+        const r = document.createElement("th");
+        r.innerHTML = "<br>", a.appendChild(r);
+      }
+      s.appendChild(a), i.appendChild(s);
+    }
+    if (e > 1) {
+      const s = document.createElement("tbody");
+      for (let a = 1; a < e; a++) {
+        const l = document.createElement("tr");
+        for (let r = 0; r < t; r++) {
+          const d = document.createElement("td");
+          d.innerHTML = "<br>", l.appendChild(d);
+        }
+        s.appendChild(l);
+      }
+      i.appendChild(s);
+    }
+    n.deleteContents(), n.insertNode(i);
+    const o = i.nextElementSibling;
+    if (!o || o.tagName !== "P") {
+      const s = document.createElement("p");
+      s.innerHTML = "<br>", i.after(s), o && o.tagName === "BR" && o.remove();
+    }
+    this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  /**
+   * Adds a row to the currently selected table.
+   */
+  addRow() {
+    const e = this.getSelectedTable();
+    if (!e) return;
+    const t = document.createElement("tr");
+    t.style.borderBottom = "1px solid var(--te-border-color)";
+    const n = e.rows[0].cells.length;
+    for (let o = 0; o < n; o++) {
+      const s = document.createElement("td");
+      s.innerHTML = "<br>", t.appendChild(s);
+    }
+    const i = this.getSelectedTd();
+    i ? i.parentElement?.after(t) : e.appendChild(t), this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  /**
+   * Deletes the currently selected row.
+   */
+  deleteRow() {
+    const e = this.getSelectedTd();
+    if (e && e.parentElement) {
+      const t = e.parentElement, n = t.parentElement;
+      if (n.rows.length > 1) {
+        const i = t.rowIndex, o = n.rows[i + 1] || n.rows[i - 1], s = e.cellIndex;
+        if (t.remove(), o && o.cells[s]) {
+          const a = document.createRange();
+          a.selectNodeContents(o.cells[s]), a.collapse(!0), this.selection.restoreSelection(a);
+        }
+        this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+      }
+    }
+  }
+  /**
+   * Adds a column to the currently selected table.
+   */
+  addColumn() {
+    const e = this.getSelectedTable();
+    if (!e) return;
+    const t = this.getSelectedTd(), n = t ? t.cellIndex : -1;
+    for (let i = 0; i < e.rows.length; i++) {
+      const o = e.rows[i], s = document.createElement("td");
+      s.innerHTML = "<br>", n !== -1 ? o.cells[n].after(s) : o.appendChild(s);
+    }
+    this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  /**
+   * Deletes the currently selected column.
+   */
+  deleteColumn() {
+    const e = this.getSelectedTd();
+    if (!e) return;
+    const t = this.getSelectedTable();
+    if (!t) return;
+    const n = e.cellIndex;
+    if (t.rows[0].cells.length > 1) {
+      const i = e.nextElementSibling || e.previousElementSibling;
+      for (let o = 0; o < t.rows.length; o++)
+        t.rows[o].cells[n].remove();
+      if (i) {
+        const o = document.createRange();
+        o.selectNodeContents(i), o.collapse(!0), this.selection.restoreSelection(o);
+      }
+      this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+    }
+  }
+  getSelectedTd() {
+    const e = window.getSelection();
+    if (!e || e.rangeCount === 0) return null;
+    let t = e.anchorNode;
+    for (; t && t !== this.editableElement; ) {
+      if (t.nodeName === "TD") return t;
+      t = t.parentNode;
+    }
+    return null;
+  }
+  getSelectedTable() {
+    const e = this.getSelectedTd();
+    return e ? e.closest("table") : null;
+  }
+  /**
+   * Recursively removes a style property from all elements in a fragment.
+   */
+  clearStyleRecursive(e, t) {
+    const n = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT);
+    let i = n.nextNode();
+    for (; i; )
+      i.style.getPropertyValue(t) && i.style.removeProperty(t), i = n.nextNode();
+  }
+  /**
+   * Applies an inline style to the selection.
+   * This is used for properties like font-size (px) and font-family
+   * where execCommand is outdated or limited.
+   */
+  /**
+   * Applies an inline style to the selection.
+   * This is used for properties like font-size (px) and font-family
+   * where execCommand is outdated or limited.
+   */
+  setStyle(e, t, n) {
+    if (!n) {
+      const a = window.getSelection();
+      if (!a || a.rangeCount === 0) return null;
+      n = a.getRangeAt(0);
+    }
+    if (n.collapsed)
+      return this.pendingStyles[e] = t, n;
+    if (["line-height"].includes(e))
+      return this.setBlockStyle(e, t, n);
+    let o = n.commonAncestorContainer;
+    o.nodeType === Node.TEXT_NODE && (o = o.parentElement);
+    let s = null;
+    if (o.tagName === "SPAN" && o.children.length === 0 && o.textContent === n.toString())
+      o.style.setProperty(e, t), s = n.cloneRange();
+    else {
+      const a = document.createElement("span");
+      a.style.setProperty(e, t);
+      try {
+        const l = o.tagName === "SPAN" ? o : null, r = n.extractContents();
+        this.clearStyleRecursive(r, e), a.appendChild(r), n.insertNode(a), l && l.innerHTML === "" && l.remove();
+        const d = document.createRange();
+        d.selectNodeContents(a), s = d;
+        const c = window.getSelection();
+        c && c.rangeCount > 0 && (c.removeAllRanges(), c.addRange(d));
+      } catch (l) {
+        console.warn("Failed to apply style:", l);
+      }
+    }
+    return this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 })), s;
+  }
+  /**
+   * Applies a style to the block-level containers within the range.
+   */
+  setBlockStyle(e, t, n) {
+    const i = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "LI", "TD", "TH", "DIV", "BLOCKQUOTE"], o = /* @__PURE__ */ new Set();
+    if (Array.from(this.editableElement.querySelectorAll(i.join(","))).forEach((a) => {
+      n.intersectsNode(a) && o.add(a);
+    }), o.size === 0) {
+      let a = n.commonAncestorContainer;
+      for (; a && a !== this.editableElement.parentElement; ) {
+        if (a.nodeType === Node.ELEMENT_NODE && i.includes(a.tagName)) {
+          o.add(a);
+          break;
+        }
+        a = a.parentNode;
+      }
+    }
+    return o.forEach((a) => {
+      a.style.setProperty(e, t);
+    }), this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 })), n;
+  }
+  /**
+   * Creates a link at the current selection.
+   * Ensures the link opens in a new tab with proper security attributes.
+   */
+  createLink(e) {
+    if (this.focus(), e = e.trim(), /^(javascript|vbscript|data|file):/i.test(e)) {
+      console.warn("Security Warning: Blocked malicious URI scheme.");
+      return;
+    }
+    const n = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(e);
+    !/^https?:\/\//i.test(e) && !/^mailto:/i.test(e) && !e.startsWith("#") && (n ? e = "mailto:" + e : e = "https://" + e);
+    const i = window.getSelection();
+    if (i && i.rangeCount > 0) {
+      const o = i.getRangeAt(0);
+      if (o.collapsed) {
+        const s = document.createTextNode(e);
+        o.insertNode(s);
+        const a = document.createRange();
+        a.selectNodeContents(s), i.removeAllRanges(), i.addRange(a);
+      }
+    }
+    if (document.execCommand("createLink", !1, e), i && i.rangeCount > 0) {
+      let s = i.getRangeAt(0).commonAncestorContainer;
+      s.nodeType === Node.TEXT_NODE && (s = s.parentElement);
+      let a = null;
+      s.tagName === "A" ? a = s : a = s.querySelector("a"), a && (a.setAttribute("target", "_blank"), a.setAttribute("rel", "noopener noreferrer"));
+    }
+    this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  /**
+   * Inserts an image at the current selection.
+   */
+  insertImage(e, t, n = !1) {
+    this.focus();
+    const i = this.selection.getRange();
+    if (!i) return null;
+    const o = document.createElement("figure");
+    o.classList.add("te-image-container"), o.setAttribute("contenteditable", "false"), n && o.classList.add("is-loading");
+    const s = document.createElement("img");
+    s.src = e, s.classList.add("te-image"), t && s.setAttribute("data-image-id", t);
+    const a = document.createElement("figcaption");
+    a.classList.add("te-image-caption"), a.setAttribute("contenteditable", "true"), a.setAttribute("data-placeholder", "Type caption..."), ["top-left", "top-right", "bottom-left", "bottom-right"].forEach((c) => {
+      const h = document.createElement("div");
+      h.classList.add("te-image-resizer", `te-resizer-${c}`), o.appendChild(h);
+    }), o.appendChild(s), o.appendChild(a), i.deleteContents(), i.insertNode(o);
+    const r = document.createElement("p");
+    r.innerHTML = "<br>", o.after(r);
+    const d = document.createRange();
+    return d.setStart(r, 0), d.setEnd(r, 0), this.selection.restoreSelection(d), this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 })), this.save(), o;
+  }
+  /**
+   * Returns the clean and optimized HTML content of the editor.
+   */
+  getHTML() {
+    return this.normalizeHTML(this.editableElement.innerHTML);
+  }
+  /**
+   * Returns the plain text content of the editor.
+   */
+  getText() {
+    return this.editableElement.innerText || this.editableElement.textContent || "";
+  }
+  /**
+   * Returns the current character count based on plain text.
+   */
+  getCharCount() {
+    return this.getText().replace(/\n$/, "").length;
+  }
+  /**
+   * Normalizes the editor's content in-place.
+   */
+  normalize() {
+    const e = this.editableElement.innerHTML, t = this.selection.getRange();
+    let n = null, i = null;
+    if (t && this.editableElement.contains(t.commonAncestorContainer)) {
+      n = document.createElement("span"), n.id = "te-selection-start", n.style.display = "none", i = document.createElement("span"), i.id = "te-selection-end", i.style.display = "none";
+      const s = t.cloneRange();
+      s.collapse(!0), s.insertNode(n);
+      const a = t.cloneRange();
+      a.collapse(!1), a.insertNode(i);
+    }
+    const o = this.normalizeHTML(this.editableElement.innerHTML);
+    if (o !== e || n) {
+      this.editableElement.innerHTML = o;
+      const s = this.editableElement.querySelector("#te-selection-start"), a = this.editableElement.querySelector("#te-selection-end");
+      if (s && a) {
+        const l = document.createRange();
+        l.setStartAfter(s), l.setEndBefore(a), this.selection.restoreSelection(l);
+      }
+      this.editableElement.querySelectorAll("#te-selection-start, #te-selection-end").forEach((l) => l.remove());
+    }
+    this.checkPlaceholder();
+  }
+  normalizationContainer = null;
+  /**
+   * Internal helper to strictly sanitize HTML strings.
+   */
+  sanitize(e) {
+    v.addHook("afterSanitizeAttributes", (n) => {
+      n.tagName === "A" && (n.setAttribute("target", "_blank"), n.setAttribute("rel", "noopener noreferrer"));
+    });
+    const t = v.sanitize(e, {
+      ALLOWED_TAGS: [
+        "b",
+        "i",
+        "u",
+        "s",
+        "span",
+        "div",
+        "p",
+        "br",
+        "a",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "ul",
+        "ol",
+        "li",
+        "blockquote",
+        "hr",
+        "pre",
+        "code",
+        "img",
+        "table",
+        "tbody",
+        "tr",
+        "td",
+        "th",
+        "thead",
+        "tfoot",
+        "figure",
+        "figcaption"
+      ],
+      ALLOWED_ATTR: [
+        "href",
+        "src",
+        "alt",
+        "style",
+        "color",
+        "background-color",
+        "class",
+        "id",
+        "target",
+        "rel",
+        "contenteditable",
+        "data-placeholder",
+        "data-image-id"
+      ],
+      ALLOW_DATA_ATTR: !0,
+      FORBID_TAGS: ["script", "style", "iframe", "object", "embed", "form", "textarea"],
+      FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover"]
+    });
+    return v.removeHook("afterSanitizeAttributes"), t;
+  }
+  /**
+   * Optimizes HTML by fixing invalid nesting and removing redundant tags.
+   */
+  normalizeHTML(e) {
+    this.normalizationContainer || (this.normalizationContainer = document.createElement("div"));
+    const t = this.normalizationContainer;
+    t.innerHTML = e;
+    const n = Array.from(t.childNodes);
+    let i = null;
+    n.forEach((r) => {
+      if (r.nodeType === Node.TEXT_NODE || r.nodeType === Node.ELEMENT_NODE && !["P", "DIV", "H1", "H2", "H3", "H4", "H5", "H6", "UL", "OL", "TABLE", "BLOCKQUOTE", "PRE", "HR", "FIGURE"].includes(r.tagName)) {
+        if (r.nodeType === Node.TEXT_NODE && (r.textContent || "").trim() === "" && !i)
+          return;
+        i || (i = document.createElement("p"), r.before(i)), i.appendChild(r);
+      } else
+        i = null;
+    }), t.querySelectorAll("p").forEach((r) => {
+      const d = r.querySelectorAll("ul, ol, table, h1, h2, h3, h4, h5, h6, pre, blockquote");
+      d.length > 0 && (d.forEach((c) => {
+        r.after(c);
+      }), (r.innerHTML.trim() === "" || r.innerHTML.trim() === "<br>") && r.remove());
+    }), t.querySelectorAll("span").forEach((r) => {
+      if (!r.id.startsWith("te-selection-"))
+        if (r.attributes.length === 0) {
+          const d = document.createTextNode(r.textContent || "");
+          r.replaceWith(d);
+        } else r.innerHTML.trim() === "" && r.remove();
+    });
+    const s = Array.from(t.querySelectorAll("p"));
+    s.forEach((r) => {
+      r.innerHTML.trim() === "" && t.childNodes.length > 1 && r !== t.lastElementChild && r.remove();
+    });
+    for (let r = s.length - 1; r >= 0; r--) {
+      const d = s[r], c = d.innerHTML.trim() === "" || d.innerHTML.trim() === "<br>", h = d === t.lastElementChild;
+      if (c && h && t.children.length > 1)
+        d.remove();
+      else
+        break;
+    }
+    const a = t.lastElementChild;
+    if (a && ["PRE", "TABLE", "FIGURE", "BLOCKQUOTE", "UL", "OL", "HR"].includes(a.tagName)) {
+      const r = document.createElement("p");
+      r.innerHTML = "<br>", t.appendChild(r);
+    }
+    return t.innerHTML.trim() === "<p><br></p>" || t.innerHTML.trim() === "<p></p>" ? "" : this.sanitize(t.innerHTML);
+  }
+  // Handle paste events to sanitize inherited malware and styles
+  handlePaste(e) {
+    e.preventDefault();
+    let t = (e.clipboardData || window.clipboardData).getData("text/plain"), n = (e.clipboardData || window.clipboardData).getData("text/html");
+    if (e.clipboardData && e.clipboardData.items) {
+      const o = [];
+      for (let s = 0; s < e.clipboardData.items.length; s++) {
+        const a = e.clipboardData.items[s];
+        if (a.type.startsWith("image/")) {
+          const l = a.getAsFile();
+          l && o.push(l);
+        }
+      }
+      if (o.length > 0) {
+        this.handleFiles(o);
+        return;
+      }
+    }
+    if (this.options.maxCharCount && this.options.strictCharLimit) {
+      const o = this.getCharCount(), s = window.getSelection();
+      let a = 0;
+      s && s.rangeCount > 0 && (a = s.toString().length);
+      const l = this.options.maxCharCount - (o - a);
+      if (l <= 0)
+        return;
+      t.length > l && (t = t.substring(0, l), n = "");
+    }
+    const i = /<([a-z1-6]+)\b[^>]*>[\s\S]*<\/\1>/i.test(t) || /^\s*<[a-z1-6]+\b[^>]*>/i.test(t);
+    if (!n && t && i && (n = t.replace(/(\r\n|\n|\r)/gm, " ").replace(/>\s+</g, "><").trim()), n) {
+      const o = this.sanitize(n);
+      this.execute("insertHTML", o);
+    } else t && this.execute("insertText", t);
+  }
+  /**
+   * Sets the HTML content of the editor.
+   */
+  setHTML(e) {
+    const t = this.sanitize(e);
+    this.editableElement.innerHTML = t;
+  }
+  /**
+   * Internal access to the editable element.
+   */
+  get el() {
+    return this.editableElement;
+  }
+  /**
+   * Returns the editor options.
+   */
+  getOptions() {
+    return this.options;
+  }
+  /**
+   * Internal helper to handle multiple files.
+   */
+  async handleFiles(e) {
+    const t = this.options.maxImageSizeMB || 5;
+    for (const n of e) {
+      if (!n.type.startsWith("image/")) continue;
+      let i = null;
+      try {
+        if (n.size > t * 1024 * 1024 * 3) {
+          console.warn(`File ${n.name} is too large to even attempt processing.`);
+          continue;
+        }
+        this.options.onSaving && this.options.onSaving();
+        const o = URL.createObjectURL(n);
+        i = this.insertImage(o, void 0, !0);
+        const s = await y.compressImage(n, t), a = URL.createObjectURL(s);
+        if (i) {
+          const r = i.querySelector("img");
+          r && (r.src = a);
+        }
+        if (s.size > t * 1024 * 1024) {
+          alert(`Image "${n.name}" exceeds the ${t}MB limit even after compression.`), i?.remove();
+          continue;
+        }
+        const l = await y.uploadFile(s, this.options);
+        if (l)
+          if (i) {
+            const r = i.querySelector("img");
+            r && (r.src = l.imageUrl, l.imageId && r.setAttribute("data-image-id", l.imageId)), i.classList.remove("is-loading");
+          } else
+            this.insertImage(l.imageUrl, l.imageId);
+        else {
+          const r = new FileReader();
+          r.onload = (d) => {
+            const c = d.target?.result;
+            if (i) {
+              const h = i.querySelector("img");
+              h && (h.src = c), i.classList.remove("is-loading");
+            } else
+              this.insertImage(c);
+          }, r.readAsDataURL(s);
+        }
+      } catch (o) {
+        console.error("Image handling failed", o), i?.remove();
+      } finally {
+        this.options.onSave && this.save();
+      }
+    }
+  }
+}
+class Q {
+  container;
+  searchInput;
+  emojiGrid;
+  onSelect;
+  onClose;
+  emojiList = [];
+  theme;
+  dark;
+  constructor(e, t, n, i) {
+    this.onSelect = e, this.onClose = t, this.theme = n, this.dark = i, this.container = this.createPickerElement(), this.searchInput = this.container.querySelector(".te-emoji-search"), this.emojiGrid = this.container.querySelector(".te-emoji-grid"), this.setupEvents(), this.loadEmojis();
+  }
+  async loadEmojis() {
+    this.emojiGrid.textContent = "Loading...";
+    try {
+      const { EMOJI_LIST: e } = await import("./EmojiList-B-C3-zN2.js");
+      this.emojiList = e, this.renderEmojis(this.emojiList);
+    } catch (e) {
+      console.error("Failed to load emojis:", e), this.emojiGrid.textContent = "Failed to load";
+    }
+  }
+  createPickerElement() {
+    const e = document.createElement("div");
+    return e.classList.add("te-emoji-picker"), this.theme && this.applyTheme(e, this.theme), this.dark && e.classList.add("te-dark"), e.innerHTML = `
+      <div class="te-emoji-header">
+        <input type="text" class="te-emoji-search" placeholder="Search emoji...">
+      </div>
+      <div class="te-emoji-body">
+        <div class="te-emoji-grid"></div>
+      </div>
+    `, e;
+  }
+  setupEvents() {
+    this.searchInput.addEventListener("mousedown", (t) => t.stopPropagation()), this.searchInput.addEventListener("click", (t) => t.stopPropagation()), this.searchInput.addEventListener("input", () => {
+      const t = this.searchInput.value.toLowerCase(), n = this.emojiList.filter(
+        (i) => i.name.toLowerCase().includes(t) || i.category.toLowerCase().includes(t)
+      );
+      this.renderEmojis(n);
+    });
+    const e = (t) => {
+      this.container.contains(t.target) || (this.close(), document.removeEventListener("mousedown", e));
+    };
+    setTimeout(() => document.addEventListener("mousedown", e), 0);
+  }
+  renderEmojis(e) {
+    if (this.emojiGrid.innerHTML = "", e.length === 0) {
+      this.emojiGrid.textContent = "No emoji found";
+      return;
+    }
+    this.searchInput.value.length > 0 ? this.renderGridItems(e) : ["Smileys", "Symbols", "Hands", "Animals", "Food", "Travel", "Objects", "Activities"].forEach((i) => {
+      const o = e.filter((s) => s.category === i);
+      if (o.length > 0) {
+        const s = document.createElement("div");
+        s.classList.add("te-emoji-category-title"), s.textContent = i, this.emojiGrid.appendChild(s), this.renderGridItems(o);
+      }
+    });
+  }
+  renderGridItems(e) {
+    e.forEach((t) => {
+      const n = document.createElement("button");
+      n.type = "button", n.classList.add("te-emoji-item"), n.textContent = t.emoji, n.title = t.name, n.addEventListener("click", () => {
+        this.onSelect(t.emoji), this.close();
+      }), this.emojiGrid.appendChild(n);
+    });
+  }
+  applyTheme(e, t) {
+    const n = {
+      primaryColor: "--te-primary-color",
+      primaryHover: "--te-primary-hover",
+      bgApp: "--te-bg-app",
+      bgEditor: "--te-bg-editor",
+      toolbarBg: "--te-toolbar-bg",
+      borderColor: "--te-border-color",
+      borderFocus: "--te-border-focus",
+      textMain: "--te-text-main",
+      textMuted: "--te-text-muted",
+      placeholder: "--te-placeholder",
+      btnHover: "--te-btn-hover",
+      btnActive: "--te-btn-active",
+      radiusLg: "--te-radius-lg",
+      radiusMd: "--te-radius-md",
+      radiusSm: "--te-radius-sm",
+      shadowSm: "--te-shadow-sm",
+      shadowMd: "--te-shadow-md",
+      shadowLg: "--te-shadow-lg"
+    };
+    for (const [i, o] of Object.entries(n)) {
+      const s = t[i];
+      s && e.style.setProperty(o, s);
+    }
+  }
+  show(e) {
+    document.body.appendChild(this.container);
+    const t = e.getBoundingClientRect(), n = 280;
+    let i = t.bottom + window.scrollY + 5, o = t.left + window.scrollX;
+    o + n > window.innerWidth && (o = window.innerWidth - n - 10), this.container.style.top = `${i}px`, this.container.style.left = `${o}px`, this.searchInput.focus();
+  }
+  close() {
+    this.container.parentElement && (this.container.remove(), this.onClose());
+  }
+  get el() {
+    return this.container;
+  }
+}
+class Z {
+  editor;
+  container;
+  savedRange = null;
+  items = b;
+  activePicker = null;
+  activeModal = null;
+  statusEl = null;
+  charCountEl = null;
+  saveStatusEl = null;
+  boundUpdateActiveStates;
+  itemElements = /* @__PURE__ */ new Map();
+  constructor(e) {
+    this.editor = e, this.container = this.createToolbarElement(), this.boundUpdateActiveStates = this.updateActiveStates.bind(this), this.render();
+  }
+  createToolbarElement() {
+    const e = document.createElement("div");
+    return e.classList.add("te-toolbar"), this.statusEl = document.createElement("div"), this.statusEl.classList.add("te-toolbar-status"), this.statusEl.style.marginLeft = "auto", this.statusEl.style.display = "flex", this.statusEl.style.alignItems = "center", this.statusEl.style.gap = "6px", this.statusEl.style.fontSize = "12px", this.statusEl.style.color = "var(--te-text-muted)", this.statusEl.style.paddingRight = "12px", this.saveStatusEl = document.createElement("span"), this.charCountEl = document.createElement("span"), this.charCountEl.style.fontWeight = "500", this.statusEl.appendChild(this.charCountEl), this.statusEl.appendChild(this.saveStatusEl), e;
+  }
+  render() {
+    const e = this.editor.getOptions().toolbarItems, t = [];
+    this.items.forEach((o) => {
+      (o.type === "divider" || o.id && (!e || e.includes(o.id))) && t.push(o);
+    });
+    const n = [];
+    t.forEach((o, s) => {
+      if (o.type === "divider") {
+        if (n.length === 0 || n[n.length - 1].type === "divider" || !t.slice(s + 1).some((l) => l.type !== "divider")) return;
+        n.push(o);
+      } else
+        n.push(o);
+    }), n.forEach((o) => {
+      if (o.type === "button")
+        this.renderButton(o);
+      else if (o.type === "select")
+        this.renderSelect(o);
+      else if (o.type === "input")
+        this.renderInput(o);
+      else if (o.type === "color-picker")
+        this.renderColorPicker(o);
+      else if (o.type === "divider") {
+        const s = document.createElement("div");
+        s.classList.add("te-divider"), this.container.appendChild(s);
+      }
+    }), this.editor.getOptions().showStatus !== !1 && this.container.appendChild(this.statusEl), this.editor.el.addEventListener("keyup", this.boundUpdateActiveStates), this.editor.el.addEventListener("mouseup", this.boundUpdateActiveStates);
+  }
+  renderButton(e) {
+    const t = document.createElement("button");
+    t.classList.add("te-button"), t.innerHTML = e.icon || "", t.title = e.title, this.itemElements.set(e, t), t.addEventListener("mousedown", (n) => {
+      if (n.preventDefault(), e.command === "createLink" || e.command === "insertTable" || e.command === "insertImage") {
+        const i = window.getSelection();
+        if (i && i.rangeCount > 0) {
+          const o = i.getRangeAt(0);
+          this.editor.el.contains(o.commonAncestorContainer) && (this.savedRange = o.cloneRange());
+        }
+      }
+      if (e.command === "insertEmoji") {
+        this.activePicker ? this.activePicker.close() : (this.activePicker = new Q(
+          (i) => {
+            this.editor.execute("insertText", i);
+          },
+          () => {
+            this.activePicker = null;
+          },
+          this.editor.getOptions().theme,
+          this.editor.getOptions().dark
+        ), this.activePicker.show(t));
+        return;
+      }
+      if (e.command === "insertImage") {
+        this.activeModal && this.activeModal.close(), this.activeModal = new g(
+          "Insert Image",
+          [
+            { id: "url", label: "Image URL", type: "text", placeholder: "https://example.com/image.jpg" },
+            { id: "file", label: "Or Upload File", type: "file" }
+          ],
+          (i) => {
+            if (this.savedRange) {
+              const o = window.getSelection();
+              o && (o.removeAllRanges(), o.addRange(this.savedRange));
+            }
+            i.file ? this.editor.handleFiles([i.file]) : i.url && i.url.trim() !== "" && this.editor.insertImage(i.url), this.savedRange = null;
+          },
+          () => {
+            this.activeModal = null, this.savedRange = null;
+          },
+          this.editor.getOptions().theme,
+          this.editor.getOptions().dark
+        ), this.activeModal.show(t);
+        return;
+      }
+      if (["addRow", "deleteRow", "addColumn", "deleteColumn"].includes(e.command || "")) {
+        const i = e.command;
+        this.editor[i]();
+        return;
+      }
+      if (e.command === "undo") {
+        this.editor.undo();
+        return;
+      }
+      if (e.command === "redo") {
+        this.editor.redo();
+        return;
+      }
+      if (e.command === "createLink") {
+        this.activeModal && this.activeModal.close(), this.activeModal = new g(
+          "Insert Link",
+          [{ id: "url", label: "URL", type: "text", placeholder: "https://example.com" }],
+          (i) => {
+            if (this.savedRange) {
+              const o = window.getSelection();
+              o && (o.removeAllRanges(), o.addRange(this.savedRange));
+            }
+            this.editor.createLink(i.url), this.savedRange = null;
+          },
+          () => {
+            this.activeModal = null, this.savedRange = null;
+          },
+          this.editor.getOptions().theme,
+          this.editor.getOptions().dark
+        ), this.activeModal.show(t);
+        return;
+      }
+      if (e.command === "insertTable") {
+        this.activeModal && this.activeModal.close(), this.activeModal = new g(
+          "Insert Table",
+          [
+            { id: "rows", label: "Rows", type: "number", defaultValue: "3", min: "1" },
+            { id: "cols", label: "Columns", type: "number", defaultValue: "3", min: "1" }
+          ],
+          (i) => {
+            if (this.savedRange) {
+              const a = window.getSelection();
+              a && (a.removeAllRanges(), a.addRange(this.savedRange));
+            }
+            let o = parseInt(i.rows, 10), s = parseInt(i.cols, 10);
+            (isNaN(o) || o < 1) && (o = 1), (isNaN(s) || s < 1) && (s = 1), this.editor.insertTable(o, s), this.savedRange = null;
+          },
+          () => {
+            this.activeModal = null, this.savedRange = null;
+          },
+          this.editor.getOptions().theme,
+          this.editor.getOptions().dark
+        ), this.activeModal.show(t);
+        return;
+      }
+      e.command && this.editor.execute(e.command, e.value || null), this.updateActiveStates();
+    }), this.container.appendChild(t);
+  }
+  renderInput(e) {
+    const t = document.createElement("input");
+    t.type = "number", t.classList.add("te-input"), t.title = e.title, t.value = e.value || "", t.min = "1", t.max = "100";
+    const n = () => {
+      const o = window.getSelection();
+      if (o && o.rangeCount > 0) {
+        const s = o.getRangeAt(0);
+        this.editor.el.contains(s.commonAncestorContainer) && (this.savedRange = s.cloneRange());
+      }
+    };
+    t.addEventListener("mousedown", n), t.addEventListener("focus", n);
+    const i = () => {
+      let o = parseInt(t.value, 10);
+      if (!isNaN(o) && (o = Math.max(1, Math.min(100, o)), t.value = o.toString(), e.command === "fontSize")) {
+        if (this.savedRange) {
+          const s = this.editor.setStyle("font-size", `${o}px`, this.savedRange);
+          s && (this.savedRange = s);
+        } else
+          this.editor.setStyle("font-size", `${o}px`);
+        t.focus();
+      }
+    };
+    t.addEventListener("input", i), t.addEventListener("keydown", (o) => {
+      o.key === "Enter" && (i(), this.editor.focus());
+    }), this.container.appendChild(t);
+  }
+  renderSelect(e) {
+    const t = document.createElement("select");
+    t.classList.add("te-select"), t.title = e.title, e.options && e.options.forEach((n) => {
+      const i = document.createElement("option");
+      i.value = n.value, i.textContent = n.label, t.appendChild(i);
+    }), t.addEventListener("change", () => {
+      const n = t.value;
+      this.savedRange && this.editor.selection.restoreSelection(this.savedRange), e.command === "formatBlock" ? this.editor.execute(e.command, n) : e.command === "fontFamily" ? this.editor.setStyle("font-family", n) : e.command === "lineHeight" && this.editor.setStyle("line-height", n), this.editor.focus();
+    }), t.addEventListener("mousedown", () => {
+      this.savedRange = this.editor.selection.saveSelection();
+    }), this.container.appendChild(t);
+  }
+  renderColorPicker(e) {
+    const t = document.createElement("div");
+    if (t.classList.add("te-color-picker-wrapper"), t.title = e.title, e.icon) {
+      const i = document.createElement("div");
+      i.classList.add("te-button", "te-color-icon"), i.innerHTML = e.icon;
+      const o = document.createElement("div");
+      o.classList.add("te-color-indicator"), o.style.backgroundColor = e.value || "#000000", i.appendChild(o), this.itemElements.set(e, i), t.appendChild(i);
+    }
+    const n = document.createElement("input");
+    n.type = "color", n.classList.add("te-color-picker-input"), e.icon || (n.classList.add("te-color-picker"), n.title = e.title), n.value = e.value || "#000000", n.addEventListener("mousedown", () => {
+      this.savedRange = this.editor.selection.saveSelection();
+    }), n.addEventListener("input", () => {
+      if (e.icon) {
+        const i = t.querySelector(".te-color-indicator");
+        i && (i.style.backgroundColor = n.value);
+      }
+    }), n.addEventListener("change", () => {
+      if (this.savedRange && this.editor.selection.restoreSelection(this.savedRange), e.command === "foreColor") {
+        const i = this.savedRange || void 0;
+        this.editor.setStyle("color", n.value, i);
+      } else if (e.command === "backColor") {
+        const i = this.savedRange || void 0;
+        this.editor.setStyle("background-color", n.value, i);
+      } else e.command && this.editor.execute(e.command, n.value);
+      this.editor.focus();
+    }), t.appendChild(n), this.container.appendChild(e.icon ? t : n);
+  }
+  get el() {
+    return this.container;
+  }
+  updateActiveStates() {
+    this.items.forEach((e) => {
+      const t = this.itemElements.get(e);
+      t && e.type === "button" && (e.command && document.queryCommandState(e.command) ? t.classList.add("active") : t.classList.remove("active"));
+    });
+  }
+  updateStatus(e, t = !1) {
+    if (!this.saveStatusEl || this.editor.getOptions().showStatus === !1) return;
+    if (this.saveStatusEl.textContent = "", t) {
+      const i = document.createElement("div");
+      i.classList.add("te-toolbar-loader"), this.saveStatusEl.appendChild(i);
+    }
+    const n = document.createElement("span");
+    n.textContent = e, this.saveStatusEl.appendChild(n);
+  }
+  updateMetrics() {
+    const e = this.editor.getOptions();
+    if (!this.charCountEl || e.showCharCount === !1) {
+      this.charCountEl && (this.charCountEl.textContent = "");
+      return;
+    }
+    const t = this.editor.getCharCount(), n = e.maxCharCount;
+    n ? (this.charCountEl.textContent = `Chars: ${t}/${n}`, t > n ? this.charCountEl.style.color = "#ef4444" : this.charCountEl.style.color = "inherit") : (this.charCountEl.textContent = `Chars: ${t}`, this.charCountEl.style.color = "inherit"), this.charCountEl.textContent && this.saveStatusEl?.textContent ? (this.charCountEl.style.marginRight = "8px", this.charCountEl.style.borderRight = "1px solid var(--te-border-color)", this.charCountEl.style.paddingRight = "8px") : (this.charCountEl.style.marginRight = "0", this.charCountEl.style.borderRight = "none", this.charCountEl.style.paddingRight = "0");
+  }
+  destroy() {
+    this.editor.el.removeEventListener("keyup", this.boundUpdateActiveStates), this.editor.el.removeEventListener("mouseup", this.boundUpdateActiveStates), this.activePicker && (this.activePicker.close(), this.activePicker = null), this.container.parentNode && this.container.parentNode.removeChild(this.container);
+  }
+}
+class te extends J {
+  toolbar;
+  constructor(e, t = {}) {
+    const n = {
+      ...t,
+      onSaving: () => {
+        this.toolbar?.updateStatus("Auto saving...", !0), t.onSaving && t.onSaving();
+      },
+      onSave: (o) => {
+        const s = (/* @__PURE__ */ new Date()).toLocaleString([], {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: !0
+        });
+        this.toolbar?.updateStatus(`Saved at ${s}`, !1), t.onSave && t.onSave(o);
+      }
+    };
+    if (super(e, n), typeof document > "u" || !e) {
+      this.toolbar = {};
+      return;
+    }
+    this.toolbar = new Z(this);
+    const i = n.toolbarPosition || "top";
+    i === "top" ? this.container.insertBefore(this.toolbar.el, this.editableElement) : i === "bottom" ? (this.container.appendChild(this.toolbar.el), this.container.classList.add("te-toolbar-bottom")) : i === "left" ? (this.container.insertBefore(this.toolbar.el, this.editableElement), this.container.classList.add("te-toolbar-left")) : i === "right" ? (this.container.appendChild(this.toolbar.el), this.container.classList.add("te-toolbar-right")) : i === "floating" && this.container.classList.add("te-toolbar-floating"), n.showStatus !== !1 && this.toolbar && i !== "floating" && this.toolbar.updateStatus("All changes saved", !1), n.showCharCount && this.toolbar.updateMetrics(), this.el.addEventListener("input", () => {
+      this.toolbar?.updateMetrics();
+    }), this.triggerChange();
+  }
+  getToolbar() {
+    return this.toolbar;
+  }
+  destroy() {
+    this.toolbar && this.toolbar.destroy(), super.destroy();
+  }
+}
+export {
+  J as CoreEditor,
+  w as HistoryManager,
+  te as InkflowEditor,
+  E as SelectionManager,
+  Z as Toolbar
+};