@meenainwal/rich-text-editor 1.1.1 → 1.2.1

package/dist/inkflow-editor.mjs

@@ -0,0 +1,1725 @@
+import p from "dompurify";
+class b {
+  /**
+   * 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 s = document.createRange();
+          s.setStart(n, Math.min(t.startOffset, n.textContent?.length || 0)), s.setEnd(i, Math.min(t.endOffset, i.textContent?.length || 0)), this.restoreSelection(s);
+        }
+      } catch (n) {
+        console.warn("Failed to restore selection path:", n);
+      }
+  }
+  getNodePath(e, t) {
+    const n = [];
+    let i = e;
+    for (; i !== t && i.parentElement; ) {
+      const s = Array.from(i.parentElement.childNodes).indexOf(i);
+      n.unshift(s), 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 y {
+  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"), s = n?.src, o = this.editor.getOptions();
+        o.onImageDelete && o.onImageDelete(i || void 0, s), i && o.imageEndpoints?.delete && fetch(o.imageEndpoints.delete, {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ id: i, url: s })
+        }).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 s = this.startWidth, o = this.startHeight;
+    this.currentHandle?.includes("right") ? s = this.startWidth + n : this.currentHandle?.includes("left") ? s = this.startWidth - n : this.currentHandle?.includes("bottom") ? s = this.startWidth + i * this.aspectRatio : this.currentHandle?.includes("top") && (s = this.startWidth - i * this.aspectRatio), o = s / this.aspectRatio, s > 50 && s < this.editor.el.clientWidth && (t.style.width = `${s}px`, t.style.height = `${o}px`);
+  }
+  stopResize() {
+    this.isResizing = !1, this.currentHandle = null, document.body.style.cursor = "", this.editor.el.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+}
+class E {
+  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 w = {
+  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>'
+}, x = {
+  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>'
+}, L = {
+  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" }
+  ]
+}, k = {
+  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" }
+  ]
+}, C = {
+  type: "input",
+  title: "Size (px)",
+  command: "fontSize",
+  placeholder: "Size",
+  value: "16"
+}, S = {
+  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"
+}, M = {
+  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>'
+}, T = {
+  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>'
+}, R = {
+  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>'
+}, H = {
+  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>'
+}, A = {
+  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"
+}, I = {
+  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"
+}, N = {
+  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>'
+}, j = {
+  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>'
+}, P = {
+  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>'
+}, B = {
+  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>'
+}, O = {
+  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>'
+}, U = {
+  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>'
+}, F = {
+  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>'
+}, q = {
+  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>'
+}, W = {
+  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>'
+}, _ = {
+  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>'
+}, $ = {
+  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>'
+}, V = {
+  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>'
+}, m = { type: "divider", title: "" }, v = [
+  { ...w, id: "undo" },
+  { ...x, id: "redo" },
+  m,
+  { ...L, id: "heading" },
+  { ...k, id: "font-family" },
+  { ...C, id: "font-size" },
+  { ...S, id: "line-height" },
+  m,
+  { ...M, id: "bold" },
+  { ...T, id: "italic" },
+  { ...R, id: "underline" },
+  { ...H, id: "strikethrough" },
+  m,
+  { ...A, id: "text-color" },
+  { ...I, id: "highlight-color" },
+  m,
+  { ...N, id: "align-left" },
+  { ...j, id: "align-center" },
+  { ...P, id: "align-right" },
+  { ...D, id: "align-justify" },
+  m,
+  { ...z, id: "bullet-list" },
+  { ...B, id: "ordered-list" },
+  { ...O, id: "outdent" },
+  { ...U, id: "indent" },
+  m,
+  { ...F, id: "horizontal-rule" },
+  { ...W, id: "emoji" },
+  { ..._, id: "link" },
+  { ...$, id: "image" },
+  { ...V, id: "table" },
+  { ...q, id: "clear-formatting" }
+];
+class g {
+  container;
+  onConfirm;
+  onClose;
+  dark;
+  theme;
+  fields;
+  constructor(e, t, n, i, s, o) {
+    this.fields = t, this.onConfirm = n, this.onClose = i, this.theme = s, this.dark = o, 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 s = document.createElement("div");
+    s.classList.add("te-modal-body"), t.forEach((l) => {
+      const d = document.createElement("div");
+      d.classList.add("te-modal-field");
+      const c = document.createElement("label");
+      c.setAttribute("for", l.id), c.textContent = l.label;
+      const h = document.createElement("input");
+      h.type = l.type, h.id = l.id, h.classList.add("te-modal-input"), l.placeholder && (h.placeholder = l.placeholder), l.defaultValue && (h.value = l.defaultValue), l.min && (h.min = l.min), l.max && (h.max = l.max), d.appendChild(c), d.appendChild(h), s.appendChild(d);
+    }), n.appendChild(s);
+    const o = document.createElement("div");
+    o.classList.add("te-modal-footer");
+    const a = document.createElement("button");
+    a.classList.add("te-modal-btn", "te-modal-btn-cancel"), a.textContent = "Cancel";
+    const r = document.createElement("button");
+    return r.classList.add("te-modal-btn", "te-modal-btn-confirm"), r.textContent = "Insert", o.appendChild(a), o.appendChild(r), n.appendChild(o), 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 s = {};
+      this.fields.forEach((o) => {
+        const a = this.container.querySelector(`#${o.id}`);
+        s[o.id] = a.value;
+      }), this.onConfirm(s), this.close();
+    });
+    const n = (s) => {
+      s.key === "Escape" && this.close(), s.key === "Enter" && t.click();
+    };
+    this.container.addEventListener("keydown", n);
+    const i = (s) => {
+      this.container.contains(s.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, s = t.left + window.scrollX;
+    s + n > window.innerWidth && (s = window.innerWidth - n - 20), this.container.style.top = `${i}px`, this.container.style.left = `${s}px`;
+    const o = this.container.querySelector("input");
+    o && o.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, s] of Object.entries(n)) {
+      const o = t[i];
+      o && e.style.setProperty(s, o);
+    }
+  }
+}
+class G {
+  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 t = ["heading", "bold", "italic", "underline", "strikethrough", "highlight-color", "link", "clear-formatting"];
+    return v.filter((i) => i.id && t.includes(i.id)).forEach((i) => {
+      const s = document.createElement("button");
+      s.className = "te-floating-btn", s.title = i.title, s.innerHTML = i.icon || i.title, s.onclick = (o) => {
+        o.preventDefault(), o.stopPropagation(), this.handleCommand(i);
+      }, e.appendChild(s);
+    }), 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();
+    if (!e || e.rangeCount === 0 || e.isCollapsed) {
+      this.activeModal || this.hide();
+      return;
+    }
+    const t = e.getRangeAt(0);
+    if (!this.editor.el.contains(t.commonAncestorContainer)) {
+      this.hide();
+      return;
+    }
+    const n = t.getBoundingClientRect(), s = (this.container.offsetParent || document.documentElement).getBoundingClientRect();
+    this.container.style.display = "flex", this.isVisible = !0;
+    const o = this.container.offsetWidth, a = this.container.offsetHeight;
+    let r = n.top - s.top - a - 10, l = n.left - s.left + n.width / 2 - o / 2;
+    n.top - a - 15 < 0 && (r = n.bottom - s.top + 10);
+    const d = 10 - s.left, c = window.innerWidth - 10 - s.left - o;
+    l < d && (l = d), l > c && (l = c), this.container.style.top = `${r}px`, this.container.style.left = `${l}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 f {
+  /**
+   * 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 s = new Image();
+      s.src = URL.createObjectURL(e), s.onload = () => {
+        const o = document.createElement("canvas");
+        let a = s.width, r = s.height;
+        const l = 2e3;
+        (a > l || r > l) && (a > r ? (r = Math.round(r * l / a), a = l) : (a = Math.round(a * l / r), r = l)), o.width = a, o.height = r;
+        const d = o.getContext("2d");
+        if (!d)
+          return i(new Error("Failed to get canvas context"));
+        d.drawImage(s, 0, 0, a, r), o.toBlob(
+          (c) => {
+            c ? n(c) : i(new Error("Canvas toBlob failed"));
+          },
+          "image/webp",
+          0.8
+          // 80% quality is professional standard
+        ), URL.revokeObjectURL(s.src);
+      }, s.onerror = () => {
+        URL.revokeObjectURL(s.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 s = await fetch(t.imageEndpoints.upload, {
+          method: "POST",
+          body: i
+        });
+        if (s.ok) {
+          const o = await s.json();
+          return {
+            imageUrl: o.imageUrl,
+            imageId: o.imageId
+          };
+        }
+        console.warn("Custom upload endpoint returned an error, falling back.");
+      } catch (s) {
+        console.error("Custom upload failed:", s);
+      }
+    }
+    if (t.cloudinaryFallback) {
+      const { cloudName: i, uploadPreset: s } = t.cloudinaryFallback, o = `https://api.cloudinary.com/v1_1/${i}/image/upload`, a = new FormData();
+      a.append("file", e, n), a.append("upload_preset", s);
+      try {
+        const r = await fetch(o, {
+          method: "POST",
+          body: a
+        });
+        if (r.ok)
+          return {
+            imageUrl: (await r.json()).secure_url
+          };
+        console.warn("Cloudinary upload failed, falling back.");
+      } catch (r) {
+        console.error("Cloudinary fallback failed:", r);
+      }
+    }
+    return null;
+  }
+}
+class K {
+  container;
+  editableElement;
+  selection;
+  imageManager;
+  history;
+  options;
+  saveTimeout = null;
+  historyTimeout = null;
+  pendingStyles = {};
+  observer = null;
+  floatingToolbar = null;
+  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 b(), this.imageManager = new y(this), this.history = new E(this.editableElement.innerHTML), this.setupInputHandlers(), 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 G(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, s] of Object.entries(n)) {
+      const o = e[i];
+      o && t.style.setProperty(s, o);
+    }
+  }
+  /**
+   * 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"), 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((o) => {
+              o.closest(".te-image-container") || this.wrapImage(o);
+            });
+          }
+        });
+      });
+    }), 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 s = document.createElement("figcaption");
+    if (s.classList.add("te-image-caption"), s.setAttribute("contenteditable", "true"), s.setAttribute("data-placeholder", "Type caption..."), ["top-left", "top-right", "bottom-left", "bottom-right"].forEach((a) => {
+      const r = document.createElement("div");
+      r.classList.add("te-image-resizer", `te-resizer-${a}`), n.appendChild(r);
+    }), n.appendChild(i), n.appendChild(s), 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 [s, o] of Object.entries(this.pendingStyles))
+          n.style.setProperty(s, o);
+        n.textContent = t;
+        const i = this.selection.getRange();
+        if (i) {
+          i.deleteContents(), i.insertNode(n);
+          const s = document.createRange();
+          s.setStart(n.firstChild, t.length), s.setEnd(n.firstChild, t.length), this.selection.restoreSelection(s), 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) => {
+      (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());
+    });
+  }
+  /**
+   * 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) {
+    this.focus(), document.execCommand(e, !1, t ?? void 0), e === "removeFormat" && (document.execCommand("formatBlock", !1, "p"), this.pendingStyles = {}), 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");
+      }
+    });
+  }
+  /**
+   * 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");
+    i.classList.add("te-table");
+    for (let o = 0; o < e; o++) {
+      const a = document.createElement("tr");
+      for (let r = 0; r < t; r++) {
+        const l = document.createElement("td");
+        l.innerHTML = "<br>", a.appendChild(l);
+      }
+      i.appendChild(a);
+    }
+    n.deleteContents(), n.insertNode(i);
+    const s = i.nextElementSibling;
+    if (!s || s.tagName !== "P") {
+      const o = document.createElement("p");
+      o.innerHTML = "<br>", i.after(o), s && s.tagName === "BR" && s.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 s = 0; s < n; s++) {
+      const o = document.createElement("td");
+      o.innerHTML = "<br>", t.appendChild(o);
+    }
+    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, s = n.rows[i + 1] || n.rows[i - 1], o = e.cellIndex;
+        if (t.remove(), s && s.cells[o]) {
+          const a = document.createRange();
+          a.selectNodeContents(s.cells[o]), 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 s = e.rows[i], o = document.createElement("td");
+      o.innerHTML = "<br>", n !== -1 ? s.cells[n].after(o) : s.appendChild(o);
+    }
+    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 s = 0; s < t.rows.length; s++)
+        t.rows[s].cells[n].remove();
+      if (i) {
+        const s = document.createRange();
+        s.selectNodeContents(i), s.collapse(!0), this.selection.restoreSelection(s);
+      }
+      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 s = n.commonAncestorContainer;
+    s.nodeType === Node.TEXT_NODE && (s = s.parentElement);
+    let o = null;
+    if (s.tagName === "SPAN" && s.children.length === 0 && s.textContent === n.toString())
+      s.style.setProperty(e, t), o = n.cloneRange();
+    else {
+      const a = document.createElement("span");
+      a.style.setProperty(e, t);
+      try {
+        const r = s.tagName === "SPAN" ? s : null, l = n.extractContents();
+        this.clearStyleRecursive(l, e), a.appendChild(l), n.insertNode(a), r && r.innerHTML === "" && r.remove();
+        const d = document.createRange();
+        d.selectNodeContents(a), o = d;
+        const c = window.getSelection();
+        c && c.rangeCount > 0 && (c.removeAllRanges(), c.addRange(d));
+      } catch (r) {
+        console.warn("Failed to apply style:", r);
+      }
+    }
+    return this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 })), o;
+  }
+  /**
+   * 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"], s = /* @__PURE__ */ new Set();
+    if (Array.from(this.editableElement.querySelectorAll(i.join(","))).forEach((a) => {
+      n.intersectsNode(a) && s.add(a);
+    }), s.size === 0) {
+      let a = n.commonAncestorContainer;
+      for (; a && a !== this.editableElement.parentElement; ) {
+        if (a.nodeType === Node.ELEMENT_NODE && i.includes(a.tagName)) {
+          s.add(a);
+          break;
+        }
+        a = a.parentNode;
+      }
+    }
+    return s.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 s = i.getRangeAt(0);
+      if (s.collapsed) {
+        const o = document.createTextNode(e);
+        s.insertNode(o);
+        const a = document.createRange();
+        a.selectNodeContents(o), i.removeAllRanges(), i.addRange(a);
+      }
+    }
+    if (document.execCommand("createLink", !1, e), i && i.rangeCount > 0) {
+      let o = i.getRangeAt(0).commonAncestorContainer;
+      o.nodeType === Node.TEXT_NODE && (o = o.parentElement);
+      let a = null;
+      o.tagName === "A" ? a = o : a = o.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 s = document.createElement("figure");
+    s.classList.add("te-image-container"), s.setAttribute("contenteditable", "false"), n && s.classList.add("is-loading");
+    const o = document.createElement("img");
+    o.src = e, o.classList.add("te-image"), t && o.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}`), s.appendChild(h);
+    }), s.appendChild(o), s.appendChild(a), i.deleteContents(), i.insertNode(s);
+    const l = document.createElement("p");
+    l.innerHTML = "<br>", s.after(l);
+    const d = document.createRange();
+    return d.setStart(l, 0), d.setEnd(l, 0), this.selection.restoreSelection(d), this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 })), this.save(), s;
+  }
+  /**
+   * Returns the clean and optimized HTML content of the editor.
+   */
+  getHTML() {
+    return this.normalizeHTML(this.editableElement.innerHTML);
+  }
+  /**
+   * 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 o = t.cloneRange();
+      o.collapse(!0), o.insertNode(n);
+      const a = t.cloneRange();
+      a.collapse(!1), a.insertNode(i);
+    }
+    const s = this.normalizeHTML(this.editableElement.innerHTML);
+    if (s !== e || n) {
+      this.editableElement.innerHTML = s;
+      const o = this.editableElement.querySelector("#te-selection-start"), a = this.editableElement.querySelector("#te-selection-end");
+      if (o && a) {
+        const r = document.createRange();
+        r.setStartAfter(o), r.setEndBefore(a), this.selection.restoreSelection(r);
+      }
+      this.editableElement.querySelectorAll("#te-selection-start, #te-selection-end").forEach((r) => r.remove());
+    }
+    this.checkPlaceholder();
+  }
+  normalizationContainer = null;
+  /**
+   * Internal helper to strictly sanitize HTML strings.
+   */
+  sanitize(e) {
+    p.addHook("afterSanitizeAttributes", (n) => {
+      n.tagName === "A" && (n.setAttribute("target", "_blank"), n.setAttribute("rel", "noopener noreferrer"));
+    });
+    const t = p.sanitize(e, {
+      ALLOWED_TAGS: [
+        "b",
+        "i",
+        "u",
+        "s",
+        "span",
+        "div",
+        "p",
+        "br",
+        "a",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "ul",
+        "ol",
+        "li",
+        "blockquote",
+        "hr",
+        "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 p.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((a) => {
+      if (a.nodeType === Node.TEXT_NODE || a.nodeType === Node.ELEMENT_NODE && !["P", "DIV", "H1", "H2", "H3", "H4", "H5", "H6", "UL", "OL", "TABLE", "BLOCKQUOTE", "PRE", "HR", "FIGURE"].includes(a.tagName)) {
+        if (a.nodeType === Node.TEXT_NODE && (a.textContent || "").trim() === "" && !i)
+          return;
+        i || (i = document.createElement("p"), a.before(i)), i.appendChild(a);
+      } else
+        i = null;
+    }), t.querySelectorAll("p").forEach((a) => {
+      const r = a.querySelectorAll("ul, ol");
+      r.length > 0 && (r.forEach((l) => {
+        a.after(l);
+      }), (a.innerHTML.trim() === "" || a.innerHTML.trim() === "<br>") && a.remove());
+    }), t.querySelectorAll("span").forEach((a) => {
+      if (!a.id.startsWith("te-selection-"))
+        if (a.attributes.length === 0) {
+          const r = document.createTextNode(a.textContent || "");
+          a.replaceWith(r);
+        } else a.innerHTML.trim() === "" && a.remove();
+    });
+    const o = Array.from(t.querySelectorAll("p"));
+    o.forEach((a) => {
+      a.innerHTML.trim() === "" && t.childNodes.length > 1 && a !== t.lastElementChild && a.remove();
+    });
+    for (let a = o.length - 1; a >= 0; a--) {
+      const r = o[a], l = r.innerHTML.trim() === "" || r.innerHTML.trim() === "<br>", d = r === t.lastElementChild;
+      if (l && d && t.children.length > 1)
+        r.remove();
+      else
+        break;
+    }
+    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 s = [];
+      for (let o = 0; o < e.clipboardData.items.length; o++) {
+        const a = e.clipboardData.items[o];
+        if (a.type.startsWith("image/")) {
+          const r = a.getAsFile();
+          r && s.push(r);
+        }
+      }
+      if (s.length > 0) {
+        this.handleFiles(s);
+        return;
+      }
+    }
+    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 s = this.sanitize(n);
+      this.execute("insertHTML", s);
+    } else
+      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 s = URL.createObjectURL(n);
+        i = this.insertImage(s, void 0, !0);
+        const o = await f.compressImage(n, t), a = URL.createObjectURL(o);
+        if (i) {
+          const l = i.querySelector("img");
+          l && (l.src = a);
+        }
+        if (o.size > t * 1024 * 1024) {
+          alert(`Image "${n.name}" exceeds the ${t}MB limit even after compression.`), i?.remove();
+          continue;
+        }
+        const r = await f.uploadFile(o, this.options);
+        if (r)
+          if (i) {
+            const l = i.querySelector("img");
+            l && (l.src = r.imageUrl, r.imageId && l.setAttribute("data-image-id", r.imageId)), i.classList.remove("is-loading");
+          } else
+            this.insertImage(r.imageUrl, r.imageId);
+        else {
+          const l = new FileReader();
+          l.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);
+          }, l.readAsDataURL(o);
+        }
+      } catch (s) {
+        console.error("Image handling failed", s), i?.remove();
+      } finally {
+        this.options.onSave && this.save();
+      }
+    }
+  }
+}
+class X {
+  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 s = e.filter((o) => o.category === i);
+      if (s.length > 0) {
+        const o = document.createElement("div");
+        o.classList.add("te-emoji-category-title"), o.textContent = i, this.emojiGrid.appendChild(o), this.renderGridItems(s);
+      }
+    });
+  }
+  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, s] of Object.entries(n)) {
+      const o = t[i];
+      o && e.style.setProperty(s, o);
+    }
+  }
+  show(e) {
+    document.body.appendChild(this.container);
+    const t = e.getBoundingClientRect(), n = 280;
+    let i = t.bottom + window.scrollY + 5, s = t.left + window.scrollX;
+    s + n > window.innerWidth && (s = window.innerWidth - n - 10), this.container.style.top = `${i}px`, this.container.style.left = `${s}px`, this.searchInput.focus();
+  }
+  close() {
+    this.container.parentElement && (this.container.remove(), this.onClose());
+  }
+  get el() {
+    return this.container;
+  }
+}
+class Y {
+  editor;
+  container;
+  savedRange = null;
+  items = v;
+  activePicker = null;
+  activeModal = null;
+  statusEl = 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", e;
+  }
+  render() {
+    const e = this.editor.getOptions().toolbarItems, t = [];
+    this.items.forEach((s) => {
+      (s.type === "divider" || s.id && (!e || e.includes(s.id))) && t.push(s);
+    });
+    const n = [];
+    t.forEach((s, o) => {
+      if (s.type === "divider") {
+        if (n.length === 0 || n[n.length - 1].type === "divider" || !t.slice(o + 1).some((r) => r.type !== "divider")) return;
+        n.push(s);
+      } else
+        n.push(s);
+    }), n.forEach((s) => {
+      if (s.type === "button")
+        this.renderButton(s);
+      else if (s.type === "select")
+        this.renderSelect(s);
+      else if (s.type === "input")
+        this.renderInput(s);
+      else if (s.type === "color-picker")
+        this.renderColorPicker(s);
+      else if (s.type === "divider") {
+        const o = document.createElement("div");
+        o.classList.add("te-divider"), this.container.appendChild(o);
+      }
+    }), 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") {
+        const i = window.getSelection();
+        if (i && i.rangeCount > 0) {
+          const s = i.getRangeAt(0);
+          this.editor.el.contains(s.commonAncestorContainer) && (this.savedRange = s.cloneRange());
+        }
+      }
+      if (e.command === "insertEmoji") {
+        this.activePicker ? this.activePicker.close() : (this.activePicker = new X(
+          (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") {
+        const i = document.createElement("input");
+        i.type = "file", i.accept = "image/*", i.style.display = "none", i.addEventListener("change", (s) => {
+          const a = s.target.files;
+          a && a.length > 0 && this.editor.handleFiles(Array.from(a)), document.body.removeChild(i);
+        }), document.body.appendChild(i), i.click();
+        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 s = window.getSelection();
+              s && (s.removeAllRanges(), s.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 s = parseInt(i.rows, 10), o = parseInt(i.cols, 10);
+            (isNaN(s) || s < 1) && (s = 1), (isNaN(o) || o < 1) && (o = 1), this.editor.insertTable(s, o), 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 s = window.getSelection();
+      if (s && s.rangeCount > 0) {
+        const o = s.getRangeAt(0);
+        this.editor.el.contains(o.commonAncestorContainer) && (this.savedRange = o.cloneRange());
+      }
+    };
+    t.addEventListener("mousedown", n), t.addEventListener("focus", n);
+    const i = () => {
+      let s = parseInt(t.value, 10);
+      if (!isNaN(s) && (s = Math.max(1, Math.min(100, s)), t.value = s.toString(), e.command === "fontSize")) {
+        if (this.savedRange) {
+          const o = this.editor.setStyle("font-size", `${s}px`, this.savedRange);
+          o && (this.savedRange = o);
+        } else
+          this.editor.setStyle("font-size", `${s}px`);
+        t.focus();
+      }
+    };
+    t.addEventListener("input", i), t.addEventListener("keydown", (s) => {
+      s.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 s = document.createElement("div");
+      s.classList.add("te-color-indicator"), s.style.backgroundColor = e.value || "#000000", i.appendChild(s), 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.statusEl || this.editor.getOptions().showStatus === !1) return;
+    if (this.statusEl.textContent = "", t) {
+      const i = document.createElement("div");
+      i.classList.add("te-toolbar-loader"), this.statusEl.appendChild(i);
+    }
+    const n = document.createElement("span");
+    n.textContent = e, this.statusEl.appendChild(n);
+  }
+  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 Z extends K {
+  toolbar;
+  constructor(e, t = {}) {
+    const n = {
+      ...t,
+      onSaving: () => {
+        this.toolbar?.updateStatus("Auto saving...", !0), t.onSaving && t.onSaving();
+      },
+      onSave: (i) => {
+        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(i);
+      }
+    };
+    if (super(e, n), typeof document > "u" || !e) {
+      this.toolbar = {};
+      return;
+    }
+    this.toolbar = new Y(this), this.container.insertBefore(this.toolbar.el, this.editableElement), n.showStatus !== !1 && this.toolbar && this.toolbar.updateStatus("All changes saved", !1), this.triggerChange();
+  }
+  getToolbar() {
+    return this.toolbar;
+  }
+  destroy() {
+    this.toolbar && this.toolbar.destroy(), super.destroy();
+  }
+}
+export {
+  K as CoreEditor,
+  E as HistoryManager,
+  Z as InkFlowEditor,
+  b as SelectionManager,
+  Y as Toolbar
+};