@meenainwal/rich-text-editor 1.0.7 → 1.0.9

package/dist/test-editor.mjs

@@ -1,4 +1,4 @@
-class y {
+class h {
   /**
    * Returns the current selection object.
    */
@@ -42,7 +42,7 @@ class y {
     e && e.removeAllRanges();
   }
 }
-class h {
+class y {
   editor;
   activeContainer = null;
   isResizing = !1;
@@ -58,15 +58,15 @@ class h {
   setupListeners() {
     const e = this.editor.el;
     e.addEventListener("mousedown", (t) => {
-      const o = t.target;
-      if (o.classList.contains("te-image-resizer")) {
+      const i = t.target;
+      if (i.classList.contains("te-image-resizer")) {
         t.preventDefault(), t.stopPropagation();
-        const a = o.closest(".te-image-container");
-        a && (this.selectImage(a), this.startResize(t, o));
+        const n = i.closest(".te-image-container");
+        n && (this.selectImage(n), this.startResize(t, i));
         return;
       }
-      const i = o.closest(".te-image-container");
-      i ? this.selectImage(i) : this.deselectImage();
+      const o = i.closest(".te-image-container");
+      o ? this.selectImage(o) : this.deselectImage();
     }), window.addEventListener("mousemove", (t) => {
       this.isResizing && this.handleResize(t);
     }), window.addEventListener("mouseup", () => {
@@ -83,37 +83,118 @@ class h {
   }
   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 o = this.activeContainer.querySelector("img");
-    this.startX = e.clientX, this.startY = e.clientY, this.startWidth = o.clientWidth, this.startHeight = o.clientHeight, this.aspectRatio = this.startWidth / this.startHeight, document.body.style.cursor = window.getComputedStyle(t).cursor;
+    this.isResizing = !0, this.currentHandle = Array.from(t.classList).find((o) => o.startsWith("te-resizer-"))?.replace("te-resizer-", "") || null;
+    const i = this.activeContainer.querySelector("img");
+    this.startX = e.clientX, this.startY = e.clientY, this.startWidth = i.clientWidth, this.startHeight = i.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"), o = e.clientX - this.startX, i = e.clientY - this.startY;
-    let a = this.startWidth, n = this.startHeight;
-    this.currentHandle?.includes("right") ? a = this.startWidth + o : this.currentHandle?.includes("left") ? a = this.startWidth - o : this.currentHandle?.includes("bottom") ? a = this.startWidth + i * this.aspectRatio : this.currentHandle?.includes("top") && (a = this.startWidth - i * this.aspectRatio), n = a / this.aspectRatio, a > 50 && a < this.editor.el.clientWidth && (t.style.width = `${a}px`, t.style.height = `${n}px`);
+    const t = this.activeContainer.querySelector("img"), i = e.clientX - this.startX, o = e.clientY - this.startY;
+    let n = this.startWidth, a = this.startHeight;
+    this.currentHandle?.includes("right") ? n = this.startWidth + i : this.currentHandle?.includes("left") ? n = this.startWidth - i : this.currentHandle?.includes("bottom") ? n = this.startWidth + o * this.aspectRatio : this.currentHandle?.includes("top") && (n = this.startWidth - o * this.aspectRatio), a = n / this.aspectRatio, n > 50 && n < this.editor.el.clientWidth && (t.style.width = `${n}px`, t.style.height = `${a}px`);
   }
   stopResize() {
     this.isResizing = !1, this.currentHandle = null, document.body.style.cursor = "", this.editor.el.dispatchEvent(new Event("input", { bubbles: !0 }));
   }
 }
 class u {
+  stack = [];
+  index = -1;
+  maxDepth = 50;
+  constructor(e) {
+    e !== void 0 && this.record(e);
+  }
+  /**
+   * Records a new state in the history stack.
+   * Clears any "redo" states if we record a new action.
+   */
+  record(e) {
+    this.index >= 0 && this.stack[this.index].html === e || (this.index < this.stack.length - 1 && (this.stack = this.stack.slice(0, this.index + 1)), this.stack.push({ html: e }), 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].html) : null;
+  }
+  /**
+   * Returns the next state if available.
+   */
+  redo() {
+    return this.index < this.stack.length - 1 ? (this.index++, this.stack[this.index].html) : null;
+  }
+  /**
+   * Checks if undo is possible.
+   */
+  canUndo() {
+    return this.index > 0;
+  }
+  /**
+   * Checks if redo is possible.
+   */
+  canRedo() {
+    return this.index < this.stack.length - 1;
+  }
+}
+class p {
   container;
   editableElement;
   selection;
   imageManager;
+  history;
   options;
+  saveTimeout = null;
+  historyTimeout = null;
   pendingStyles = {};
   constructor(e, t = {}) {
-    this.container = e, this.container.classList.add("te-container"), this.options = t, this.editableElement = this.createEditableElement(), this.selection = new y(), this.imageManager = new h(this), this.setupInputHandlers(), this.setupImageObserver(), this.container.appendChild(this.editableElement), this.options.autofocus && this.focus(), document.execCommand("defaultParagraphSeparator", !1, "p");
+    if (this.options = t, this.container = e, typeof document > "u" || !e) {
+      this.editableElement = {}, this.selection = {}, this.imageManager = {}, this.history = {};
+      return;
+    }
+    this.container.classList.add("te-container"), this.options.dark && this.container.classList.add("te-dark"), this.editableElement = this.createEditableElement(), this.selection = new h(), this.imageManager = new y(this), this.history = new u(this.editableElement.innerHTML), this.setupInputHandlers(), this.setupImageObserver(), this.container.appendChild(this.editableElement), this.options.autofocus && this.focus(), this.options.theme && this.applyTheme(this.options.theme), document.execCommand("defaultParagraphSeparator", !1, "p");
+  }
+  /**
+   * Applies custom theme variables to the editor container.
+   */
+  applyTheme(e) {
+    const t = this.container, i = {
+      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 [o, n] of Object.entries(i)) {
+      const a = e[o];
+      a && t.style.setProperty(n, a);
+    }
+  }
+  /**
+   * Toggles dark mode on the editor.
+   */
+  setDarkMode(e) {
+    this.options.dark = e, e ? this.container.classList.add("te-dark") : this.container.classList.remove("te-dark");
   }
   setupImageObserver() {
     new MutationObserver((t) => {
-      t.forEach((o) => {
-        o.addedNodes.forEach((i) => {
-          if (i.nodeType === Node.ELEMENT_NODE) {
-            const a = i;
-            a.tagName === "IMG" && !a.closest(".te-image-container") ? this.wrapImage(a) : a.querySelectorAll("img:not(.te-image)").forEach((s) => {
+      t.forEach((i) => {
+        i.addedNodes.forEach((o) => {
+          if (o.nodeType === Node.ELEMENT_NODE) {
+            const n = o;
+            n.tagName === "IMG" && !n.closest(".te-image-container") ? this.wrapImage(n) : n.querySelectorAll("img:not(.te-image)").forEach((s) => {
               s.closest(".te-image-container") || this.wrapImage(s);
             });
           }
@@ -130,17 +211,17 @@ class u {
   wrapImage(e) {
     const t = e.parentElement;
     if (!t) return;
-    const o = document.createElement("figure");
-    o.classList.add("te-image-container"), o.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 a = document.createElement("figcaption");
-    if (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((s) => {
+    const i = document.createElement("figure");
+    i.classList.add("te-image-container"), i.setAttribute("contenteditable", "false");
+    const o = document.createElement("img");
+    o.src = e.src, o.alt = e.alt || "", e.width && (o.style.width = `${e.width}px`), e.height && (o.style.height = `${e.height}px`), o.classList.add("te-image");
+    const n = document.createElement("figcaption");
+    if (n.classList.add("te-image-caption"), n.setAttribute("contenteditable", "true"), n.setAttribute("data-placeholder", "Type caption..."), ["top-left", "top-right", "bottom-left", "bottom-right"].forEach((s) => {
       const r = document.createElement("div");
-      r.classList.add("te-image-resizer", `te-resizer-${s}`), o.appendChild(r);
-    }), o.appendChild(i), o.appendChild(a), t.replaceChild(o, e), !o.nextElementSibling) {
+      r.classList.add("te-image-resizer", `te-resizer-${s}`), i.appendChild(r);
+    }), i.appendChild(o), i.appendChild(n), t.replaceChild(i, e), !i.nextElementSibling) {
       const s = document.createElement("p");
-      s.innerHTML = "<br>", o.after(s);
+      s.innerHTML = "<br>", i.after(s);
     }
   }
   setupInputHandlers() {
@@ -149,15 +230,15 @@ class u {
         const t = e.data;
         if (!t) return;
         e.preventDefault();
-        const o = document.createElement("span");
-        for (const [a, n] of Object.entries(this.pendingStyles))
-          o.style.setProperty(a, n);
-        o.textContent = t;
-        const i = this.selection.getRange();
-        if (i) {
-          i.deleteContents(), i.insertNode(o);
-          const a = document.createRange();
-          a.setStart(o.firstChild, t.length), a.setEnd(o.firstChild, t.length), this.selection.restoreSelection(a), this.pendingStyles = {}, this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+        const i = document.createElement("span");
+        for (const [n, a] of Object.entries(this.pendingStyles))
+          i.style.setProperty(n, a);
+        i.textContent = t;
+        const o = this.selection.getRange();
+        if (o) {
+          o.deleteContents(), o.insertNode(i);
+          const n = document.createRange();
+          n.setStart(i.firstChild, t.length), n.setEnd(i.firstChild, t.length), this.selection.restoreSelection(n), this.pendingStyles = {}, this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
         }
       }
     }), document.addEventListener("selectionchange", () => {
@@ -171,24 +252,24 @@ class u {
       e.preventDefault(), this.editableElement.classList.remove("dragover");
       const t = e.dataTransfer?.files;
       if (t && t.length > 0)
-        for (let o = 0; o < t.length; o++) {
-          const i = t[o];
-          if (i.type.startsWith("image/")) {
-            const a = new FileReader();
-            a.onload = (n) => {
-              const s = n.target?.result;
+        for (let i = 0; i < t.length; i++) {
+          const o = t[i];
+          if (o.type.startsWith("image/")) {
+            const n = new FileReader();
+            n.onload = (a) => {
+              const s = a.target?.result;
               this.insertImage(s);
-            }, a.readAsDataURL(i);
+            }, n.readAsDataURL(o);
           }
         }
     }), this.editableElement.addEventListener("paste", (e) => {
       const t = e.clipboardData;
       if (!t) return;
       if (t.items)
-        for (let a = 0; a < t.items.length; a++) {
-          const n = t.items[a];
-          if (n.type.startsWith("image/")) {
-            const s = n.getAsFile();
+        for (let n = 0; n < t.items.length; n++) {
+          const a = t.items[n];
+          if (a.type.startsWith("image/")) {
+            const s = a.getAsFile();
             if (s) {
               e.preventDefault();
               const r = new FileReader();
@@ -200,14 +281,47 @@ class u {
             }
           }
         }
-      const o = t.getData("text/plain"), i = /<([a-z1-6]+)\b[^>]*>[\s\S]*<\/\1>/i.test(o) || /^\s*<[a-z1-6]+\b[^>]*>/i.test(o);
-      if (o && i) {
-        const a = o.replace(/(\r\n|\n|\r)/gm, " ").replace(/>\s+</g, "><").trim();
-        e.preventDefault(), this.execute("insertHTML", a);
+      const i = t.getData("text/plain"), o = /<([a-z1-6]+)\b[^>]*>[\s\S]*<\/\1>/i.test(i) || /^\s*<[a-z1-6]+\b[^>]*>/i.test(i);
+      if (i && o) {
+        const n = i.replace(/(\r\n|\n|\r)/gm, " ").replace(/>\s+</g, "><").trim();
+        e.preventDefault(), this.execute("insertHTML", n);
         return;
       }
+    }), this.editableElement.addEventListener("input", () => {
+      this.handleInput();
+    }), this.editableElement.addEventListener("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());
     });
   }
+  handleInput() {
+    this.options.onSaving && this.options.onSaving(), this.scheduleHistoryRecord(), this.scheduleAutoSave(), this.options.onChange && this.options.onChange(this.editableElement.innerHTML);
+  }
+  scheduleHistoryRecord() {
+    this.historyTimeout && clearTimeout(this.historyTimeout), this.historyTimeout = setTimeout(() => {
+      this.history.record(this.editableElement.innerHTML);
+    }, 500);
+  }
+  scheduleAutoSave() {
+    this.saveTimeout && clearTimeout(this.saveTimeout);
+    const e = this.options.autoSaveInterval || 1e3;
+    this.saveTimeout = setTimeout(() => {
+      this.save();
+    }, e);
+  }
+  save() {
+    this.options.onSave && this.options.onSave(this.editableElement.innerHTML);
+  }
+  undo() {
+    const e = this.history.undo();
+    e !== null && (this.editableElement.innerHTML = e, this.triggerChange());
+  }
+  redo() {
+    const e = this.history.redo();
+    e !== null && (this.editableElement.innerHTML = e, this.triggerChange());
+  }
+  triggerChange() {
+    this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
   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;
@@ -224,48 +338,141 @@ class u {
   execute(e, t = null) {
     this.focus(), document.execCommand(e, !1, t ?? void 0), this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
   }
+  /**
+   * Inserts a table at the current selection.
+   */
+  insertTable(e = 3, t = 3) {
+    this.focus();
+    const i = this.selection.getRange();
+    if (!i) return;
+    const o = document.createElement("table");
+    o.classList.add("te-table");
+    for (let a = 0; a < e; a++) {
+      const s = document.createElement("tr");
+      for (let r = 0; r < t; r++) {
+        const l = document.createElement("td");
+        l.innerHTML = "<br>", s.appendChild(l);
+      }
+      o.appendChild(s);
+    }
+    i.deleteContents(), i.insertNode(o);
+    const n = o.nextElementSibling;
+    if (!n || n.tagName !== "P") {
+      const a = document.createElement("p");
+      a.innerHTML = "<br>", o.after(a), n && n.tagName === "BR" && n.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 i = e.rows[0].cells.length;
+    for (let n = 0; n < i; n++) {
+      const a = document.createElement("td");
+      a.innerHTML = "<br>", t.appendChild(a);
+    }
+    const o = this.getSelectedTd();
+    o ? o.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;
+      t.parentElement.rows.length > 1 && (t.remove(), 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(), i = t ? t.cellIndex : -1;
+    for (let o = 0; o < e.rows.length; o++) {
+      const n = e.rows[o], a = document.createElement("td");
+      a.innerHTML = "<br>", i !== -1 ? n.cells[i].after(a) : n.appendChild(a);
+    }
+    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 i = e.cellIndex;
+    if (t.rows[0].cells.length > 1) {
+      for (let o = 0; o < t.rows.length; o++)
+        t.rows[o].cells[i].remove();
+      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 o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT);
-    let i = o.nextNode();
-    for (; i; )
-      i.style.getPropertyValue(t) && i.style.removeProperty(t), i = o.nextNode();
+    const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT);
+    let o = i.nextNode();
+    for (; o; )
+      o.style.getPropertyValue(t) && o.style.removeProperty(t), o = i.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.
    */
-  setStyle(e, t, o) {
-    if (e === "font-size" && t.endsWith("px"), !o) {
-      const n = window.getSelection();
-      if (!n || n.rangeCount === 0) return null;
-      o = n.getRangeAt(0);
+  setStyle(e, t, i) {
+    if (e === "font-size" && t.endsWith("px"), !i) {
+      const a = window.getSelection();
+      if (!a || a.rangeCount === 0) return null;
+      i = a.getRangeAt(0);
     }
-    if (o.collapsed)
-      return this.pendingStyles[e] = t, o;
-    let i = o.commonAncestorContainer;
-    i.nodeType === Node.TEXT_NODE && (i = i.parentElement);
-    let a = null;
-    if (i.tagName === "SPAN" && i.children.length === 0 && i.textContent === o.toString())
-      i.style.setProperty(e, t), a = o.cloneRange();
+    if (i.collapsed)
+      return this.pendingStyles[e] = t, i;
+    let o = i.commonAncestorContainer;
+    o.nodeType === Node.TEXT_NODE && (o = o.parentElement);
+    let n = null;
+    if (o.tagName === "SPAN" && o.children.length === 0 && o.textContent === i.toString())
+      o.style.setProperty(e, t), n = i.cloneRange();
     else {
-      const n = document.createElement("span");
-      n.style.setProperty(e, t);
+      const a = document.createElement("span");
+      a.style.setProperty(e, t);
       try {
-        const s = i.tagName === "SPAN" ? i : null, r = o.extractContents();
-        this.clearStyleRecursive(r, e), n.appendChild(r), o.insertNode(n), s && s.innerHTML === "" && s.remove();
+        const s = o.tagName === "SPAN" ? o : null, r = i.extractContents();
+        this.clearStyleRecursive(r, e), a.appendChild(r), i.insertNode(a), s && s.innerHTML === "" && s.remove();
         const l = document.createRange();
-        l.selectNodeContents(n), a = l;
+        l.selectNodeContents(a), n = l;
         const c = window.getSelection();
         c && c.rangeCount > 0 && (c.removeAllRanges(), c.addRange(l));
       } catch (s) {
         console.warn("Failed to apply style:", s);
       }
     }
-    return this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 })), a;
+    return this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 })), n;
   }
   /**
    * Creates a link at the current selection.
@@ -275,10 +482,10 @@ class u {
     this.focus(), !/^https?:\/\//i.test(e) && !/^mailto:/i.test(e) && !e.startsWith("#") && (e = "https://" + e), document.execCommand("createLink", !1, e);
     const t = window.getSelection();
     if (t && t.rangeCount > 0) {
-      let i = t.getRangeAt(0).commonAncestorContainer;
-      i.nodeType === Node.TEXT_NODE && (i = i.parentElement);
-      let a = null;
-      i.tagName === "A" ? a = i : a = i.querySelector("a"), a && (a.setAttribute("target", "_blank"), a.setAttribute("rel", "noopener noreferrer"));
+      let o = t.getRangeAt(0).commonAncestorContainer;
+      o.nodeType === Node.TEXT_NODE && (o = o.parentElement);
+      let n = null;
+      o.tagName === "A" ? n = o : n = o.querySelector("a"), n && (n.setAttribute("target", "_blank"), n.setAttribute("rel", "noopener noreferrer"));
     }
     this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
   }
@@ -289,17 +496,17 @@ class u {
     this.focus();
     const t = this.selection.getRange();
     if (!t) return;
-    const o = document.createElement("figure");
-    o.classList.add("te-image-container"), o.setAttribute("contenteditable", "false");
-    const i = document.createElement("img");
-    i.src = e, i.classList.add("te-image");
-    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((l) => {
+    const i = document.createElement("figure");
+    i.classList.add("te-image-container"), i.setAttribute("contenteditable", "false");
+    const o = document.createElement("img");
+    o.src = e, o.classList.add("te-image");
+    const n = document.createElement("figcaption");
+    n.classList.add("te-image-caption"), n.setAttribute("contenteditable", "true"), n.setAttribute("data-placeholder", "Type caption..."), ["top-left", "top-right", "bottom-left", "bottom-right"].forEach((l) => {
       const c = document.createElement("div");
-      c.classList.add("te-image-resizer", `te-resizer-${l}`), o.appendChild(c);
-    }), o.appendChild(i), o.appendChild(a), t.deleteContents(), t.insertNode(o);
+      c.classList.add("te-image-resizer", `te-resizer-${l}`), i.appendChild(c);
+    }), i.appendChild(o), i.appendChild(n), t.deleteContents(), t.insertNode(i);
     const s = document.createElement("p");
-    s.innerHTML = "<br>", o.after(s);
+    s.innerHTML = "<br>", i.after(s);
     const r = document.createRange();
     r.setStart(s, 0), r.setEnd(s, 0), this.selection.restoreSelection(r), this.editableElement.dispatchEvent(new Event("input", { bubbles: !0 }));
   }
@@ -321,18 +528,24 @@ class u {
   get el() {
     return this.editableElement;
   }
+  /**
+   * Returns the editor options.
+   */
+  getOptions() {
+    return this.options;
+  }
 }
-const p = {
+const v = {
   type: "button",
   title: "Undo",
   command: "undo",
   icon: '<svg viewBox="0 0 24 24"><path d="M9 14L4 9l5-5"></path><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>'
-}, j = {
+}, b = {
   type: "button",
   title: "Redo",
   command: "redo",
   icon: '<svg viewBox="0 0 24 24"><path d="M15 14l5-5-5-5"></path><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>'
-}, v = {
+}, j = {
   type: "select",
   title: "Heading",
   command: "formatBlock",
@@ -345,7 +558,7 @@ const p = {
     { label: "Heading 5", value: "H5" },
     { label: "Heading 6", value: "H6" }
   ]
-}, b = {
+}, f = {
   type: "select",
   title: "Font",
   command: "fontFamily",
@@ -366,13 +579,13 @@ const p = {
     { label: "Playfair Display", value: "'Playfair Display', serif" },
     { label: "Merriweather", value: "'Merriweather', serif" }
   ]
-}, f = {
+}, w = {
   type: "input",
   title: "Size (px)",
   command: "fontSize",
   placeholder: "Size",
   value: "16"
-}, w = {
+}, E = {
   type: "select",
   title: "Line Height",
   command: "lineHeight",
@@ -411,84 +624,84 @@ const p = {
   title: "Italic",
   command: "italic",
   icon: '<svg viewBox="0 0 24 24"><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>'
-}, E = {
+}, k = {
   type: "button",
   title: "Underline",
   command: "underline",
   icon: '<svg viewBox="0 0 24 24"><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>'
-}, A = {
+}, L = {
   type: "button",
   title: "Strikethrough",
   command: "strikeThrough",
   icon: '<svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line><path d="M16 4.9C15.1 4.3 13.9 4 12.6 4c-3.1 0-5.6 1.8-5.6 4s1.8 3.3 4.4 3.8"></path><path d="M7 19.1c.9.6 2.1.9 3.4.9 3.1 0 5.6-1.8 5.6-4s-1.8-3.3-4.4-3.8"></path></svg>'
-}, k = {
+}, A = {
   type: "color-picker",
   title: "Text Color",
   command: "foreColor",
   icon: '<svg xmlns="http://www.w3.org/2000/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"
-}, L = {
+}, C = {
   type: "color-picker",
   title: "Highlight Color",
   command: "backColor",
   icon: '<svg xmlns="http://www.w3.org/2000/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"
-}, C = {
+}, T = {
   type: "button",
   title: "Align Left",
   command: "justifyLeft",
   icon: '<svg viewBox="0 0 24 24"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>'
-}, F = {
+}, H = {
   type: "button",
   title: "Align Center",
   command: "justifyCenter",
   icon: '<svg viewBox="0 0 24 24"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>'
-}, H = {
+}, F = {
   type: "button",
   title: "Align Right",
   command: "justifyRight",
   icon: '<svg viewBox="0 0 24 24"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line></svg>'
-}, T = {
+}, R = {
   type: "button",
   title: "Justify",
   command: "justifyFull",
   icon: '<svg viewBox="0 0 24 24"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>'
-}, R = {
+}, M = {
   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><circle cx="3" cy="6" r="1" fill="currentColor"></circle><circle cx="3" cy="12" r="1" fill="currentColor"></circle><circle cx="3" cy="18" r="1" fill="currentColor"></circle></svg>'
-}, O = {
+}, I = {
   type: "button",
   title: "Numbered List",
   command: "insertOrderedList",
   icon: '<svg xmlns="http://www.w3.org/2000/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>'
-}, I = {
+}, O = {
   type: "button",
   title: "Outdent",
   command: "outdent",
   icon: '<svg viewBox="0 0 24 24"><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>'
-}, M = {
+}, z = {
   type: "button",
   title: "Indent",
   command: "indent",
   icon: '<svg viewBox="0 0 24 24"><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>'
-}, z = {
+}, B = {
   type: "button",
   title: "Horizontal Rule",
   command: "insertHorizontalRule",
   icon: '<svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line></svg>'
-}, B = {
+}, N = {
   type: "button",
   title: "Clear Formatting",
   command: "removeFormat",
   icon: '<svg viewBox="0 0 24 24"><path d="M17.41 15.41L12 10l-5.41 5.41L5.17 14l5.41-5.41L5.17 3.17 6.59 1.76 12 7.17l5.41-5.41 1.41 1.41-5.41 5.41 5.41 5.41-1.41 1.42z"></path></svg>'
-}, N = {
+}, P = {
   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>'
-}, P = {
+}, D = {
   type: "button",
   title: "Insert Link",
   command: "createLink",
@@ -498,38 +711,44 @@ const p = {
   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>'
-}, m = { type: "divider", title: "" }, D = [
-  p,
-  j,
-  m,
-  v,
-  b,
-  f,
-  w,
-  m,
-  S,
-  x,
-  E,
-  A,
-  m,
-  k,
-  L,
-  m,
-  C,
-  F,
-  H,
-  T,
-  m,
-  R,
-  O,
-  I,
-  M,
-  m,
-  z,
-  N,
-  P,
-  W,
-  B
+}, G = {
+  type: "button",
+  command: "insertTable",
+  title: "Insert Table",
+  icon: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M3 3h18v18H3V3m2 2v4h4V5H5m6 0v4h4V5h-4m6 0v4h2V5h-2M5 11v4h4v-4H5m6 0v4h4v-4h-4m6 0v4h2v-4h-2M5 17v2h4v-2H5m6 0v2h4v-2h-4m6 0v2h2v-2h-2Z"/></svg>'
+}, d = { type: "divider", title: "" }, $ = [
+  { ...v, id: "undo" },
+  { ...b, id: "redo" },
+  d,
+  { ...j, id: "heading" },
+  { ...f, id: "font-family" },
+  { ...w, id: "font-size" },
+  { ...E, id: "line-height" },
+  d,
+  { ...S, id: "bold" },
+  { ...x, id: "italic" },
+  { ...k, id: "underline" },
+  { ...L, id: "strikethrough" },
+  d,
+  { ...A, id: "text-color" },
+  { ...C, id: "highlight-color" },
+  d,
+  { ...T, id: "align-left" },
+  { ...H, id: "align-center" },
+  { ...F, id: "align-right" },
+  { ...R, id: "align-justify" },
+  d,
+  { ...M, id: "bullet-list" },
+  { ...I, id: "ordered-list" },
+  { ...O, id: "outdent" },
+  { ...z, id: "indent" },
+  d,
+  { ...B, id: "horizontal-rule" },
+  { ...P, id: "emoji" },
+  { ...D, id: "link" },
+  { ...W, id: "image" },
+  { ...G, id: "table" },
+  { ...N, id: "clear-formatting" }
 ], g = [
   // Smileys & Emotion
   { emoji: "😀", name: "grinning", category: "Smileys" },
@@ -860,18 +1079,20 @@ const p = {
   { emoji: "🎤", name: "microphone", category: "Activities" },
   { emoji: "🎧", name: "headphone", category: "Activities" }
 ];
-class G {
+class q {
   container;
   searchInput;
   emojiGrid;
   onSelect;
   onClose;
-  constructor(e, t) {
-    this.onSelect = e, this.onClose = t, this.container = this.createPickerElement(), this.searchInput = this.container.querySelector(".te-emoji-search"), this.emojiGrid = this.container.querySelector(".te-emoji-grid"), this.setupEvents(), this.renderEmojis(g);
+  theme;
+  dark;
+  constructor(e, t, i, o) {
+    this.onSelect = e, this.onClose = t, this.theme = i, this.dark = o, this.container = this.createPickerElement(), this.searchInput = this.container.querySelector(".te-emoji-search"), this.emojiGrid = this.container.querySelector(".te-emoji-grid"), this.setupEvents(), this.renderEmojis(g);
   }
   createPickerElement() {
     const e = document.createElement("div");
-    return e.classList.add("te-emoji-picker"), e.innerHTML = `
+    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>
@@ -882,10 +1103,10 @@ class G {
   }
   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(), o = g.filter(
-        (i) => i.name.toLowerCase().includes(t) || i.category.toLowerCase().includes(t)
+      const t = this.searchInput.value.toLowerCase(), i = g.filter(
+        (o) => o.name.toLowerCase().includes(t) || o.category.toLowerCase().includes(t)
       );
-      this.renderEmojis(o);
+      this.renderEmojis(i);
     });
     const e = (t) => {
       this.container.contains(t.target) || (this.close(), document.removeEventListener("mousedown", e));
@@ -897,27 +1118,53 @@ class G {
       this.emojiGrid.innerHTML = '<div class="te-emoji-empty">No emoji found</div>';
       return;
     }
-    this.searchInput.value.length > 0 ? this.renderGridItems(e) : ["Smileys", "Symbols", "Hands", "Animals", "Food", "Travel", "Objects", "Activities"].forEach((i) => {
-      const a = e.filter((n) => n.category === i);
-      if (a.length > 0) {
-        const n = document.createElement("div");
-        n.classList.add("te-emoji-category-title"), n.textContent = i, this.emojiGrid.appendChild(n), this.renderGridItems(a);
+    this.searchInput.value.length > 0 ? this.renderGridItems(e) : ["Smileys", "Symbols", "Hands", "Animals", "Food", "Travel", "Objects", "Activities"].forEach((o) => {
+      const n = e.filter((a) => a.category === o);
+      if (n.length > 0) {
+        const a = document.createElement("div");
+        a.classList.add("te-emoji-category-title"), a.textContent = o, this.emojiGrid.appendChild(a), this.renderGridItems(n);
       }
     });
   }
   renderGridItems(e) {
     e.forEach((t) => {
-      const o = document.createElement("button");
-      o.type = "button", o.classList.add("te-emoji-item"), o.textContent = t.emoji, o.title = t.name, o.addEventListener("click", () => {
+      const i = document.createElement("button");
+      i.type = "button", i.classList.add("te-emoji-item"), i.textContent = t.emoji, i.title = t.name, i.addEventListener("click", () => {
         this.onSelect(t.emoji), this.close();
-      }), this.emojiGrid.appendChild(o);
+      }), this.emojiGrid.appendChild(i);
     });
   }
+  applyTheme(e, t) {
+    const i = {
+      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 [o, n] of Object.entries(i)) {
+      const a = t[o];
+      a && e.style.setProperty(n, a);
+    }
+  }
   show(e) {
     document.body.appendChild(this.container);
-    const t = e.getBoundingClientRect(), o = 280;
-    let i = t.bottom + window.scrollY + 5, a = t.left + window.scrollX;
-    a + o > window.innerWidth && (a = window.innerWidth - o - 10), this.container.style.top = `${i}px`, this.container.style.left = `${a}px`, this.searchInput.focus();
+    const t = e.getBoundingClientRect(), i = 280;
+    let o = t.bottom + window.scrollY + 5, n = t.left + window.scrollX;
+    n + i > window.innerWidth && (n = window.innerWidth - i - 10), this.container.style.top = `${o}px`, this.container.style.left = `${n}px`, this.searchInput.focus();
   }
   close() {
     this.container.parentElement && (this.container.remove(), this.onClose());
@@ -926,58 +1173,72 @@ class G {
     return this.container;
   }
 }
-class q {
+class U {
   editor;
   container;
   savedRange = null;
-  items = D;
+  items = $;
   activePicker = null;
+  statusEl = null;
   constructor(e) {
     this.editor = e, this.container = this.createToolbarElement(), this.render();
   }
   createToolbarElement() {
     const e = document.createElement("div");
-    return e.classList.add("te-toolbar"), e;
+    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() {
-    this.items.forEach((e) => {
-      if (e.type === "button")
-        this.renderButton(e);
-      else if (e.type === "select")
-        this.renderSelect(e);
-      else if (e.type === "input")
-        this.renderInput(e);
-      else if (e.type === "color-picker")
-        this.renderColorPicker(e);
-      else if (e.type === "divider") {
-        const t = document.createElement("div");
-        t.classList.add("te-divider"), this.container.appendChild(t);
+    const e = this.editor.getOptions().toolbarItems, t = [];
+    this.items.forEach((n) => {
+      (n.type === "divider" || n.id && (!e || e.includes(n.id))) && t.push(n);
+    });
+    const i = [];
+    t.forEach((n, a) => {
+      if (n.type === "divider") {
+        if (i.length === 0 || i[i.length - 1].type === "divider" || !t.slice(a + 1).some((r) => r.type !== "divider")) return;
+        i.push(n);
+      } else
+        i.push(n);
+    }), i.forEach((n) => {
+      if (n.type === "button")
+        this.renderButton(n);
+      else if (n.type === "select")
+        this.renderSelect(n);
+      else if (n.type === "input")
+        this.renderInput(n);
+      else if (n.type === "color-picker")
+        this.renderColorPicker(n);
+      else if (n.type === "divider") {
+        const a = document.createElement("div");
+        a.classList.add("te-divider"), this.container.appendChild(a);
       }
-    }), this.editor.el.addEventListener("keyup", () => this.updateActiveStates()), this.editor.el.addEventListener("mouseup", () => this.updateActiveStates());
+    }), this.editor.getOptions().showStatus !== !1 && this.container.appendChild(this.statusEl), this.editor.el.addEventListener("keyup", () => this.updateActiveStates()), this.editor.el.addEventListener("mouseup", () => this.updateActiveStates());
   }
   renderButton(e) {
     const t = document.createElement("button");
-    t.classList.add("te-button"), t.innerHTML = e.icon || "", t.title = e.title, t.addEventListener("mousedown", (o) => {
-      if (o.preventDefault(), e.command === "insertEmoji") {
-        this.activePicker ? this.activePicker.close() : (this.activePicker = new G(
-          (i) => {
-            this.editor.execute("insertText", i);
+    t.classList.add("te-button"), t.innerHTML = e.icon || "", t.title = e.title, t.addEventListener("mousedown", (i) => {
+      if (i.preventDefault(), e.command === "insertEmoji") {
+        this.activePicker ? this.activePicker.close() : (this.activePicker = new q(
+          (o) => {
+            this.editor.execute("insertText", o);
           },
           () => {
             this.activePicker = null;
-          }
+          },
+          this.editor.getOptions().theme,
+          this.editor.getOptions().dark
         ), this.activePicker.show(t));
         return;
       }
       if (e.command === "createLink") {
-        const i = window.prompt("Enter the URL");
-        i && this.editor.createLink(i);
+        const o = window.prompt("Enter the URL");
+        o && this.editor.createLink(o);
         return;
       }
       if (e.command === "insertImage") {
-        const i = document.createElement("input");
-        i.type = "file", i.accept = "image/*", i.style.display = "none", i.addEventListener("change", (a) => {
-          const s = a.target.files?.[0];
+        const o = document.createElement("input");
+        o.type = "file", o.accept = "image/*", o.style.display = "none", o.addEventListener("change", (n) => {
+          const s = n.target.files?.[0];
           if (s) {
             const r = new FileReader();
             r.onload = (l) => {
@@ -985,8 +1246,18 @@ class q {
               this.editor.insertImage(c);
             }, r.readAsDataURL(s);
           }
-          document.body.removeChild(i);
-        }), document.body.appendChild(i), i.click();
+          document.body.removeChild(o);
+        }), document.body.appendChild(o), o.click();
+        return;
+      }
+      if (e.command === "insertTable") {
+        const o = window.prompt("Enter number of rows", "3"), n = window.prompt("Enter number of columns", "3");
+        o && n && this.editor.insertTable(parseInt(o, 10), parseInt(n, 10));
+        return;
+      }
+      if (["addRow", "deleteRow", "addColumn", "deleteColumn"].includes(e.command || "")) {
+        const o = e.command;
+        this.editor[o]();
         return;
       }
       e.command && this.editor.execute(e.command, e.value || null), this.updateActiveStates();
@@ -995,37 +1266,37 @@ class q {
   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 o = () => {
-      const a = window.getSelection();
-      if (a && a.rangeCount > 0) {
-        const n = a.getRangeAt(0);
-        this.editor.el.contains(n.commonAncestorContainer) && (this.savedRange = n.cloneRange());
+    const i = () => {
+      const n = window.getSelection();
+      if (n && n.rangeCount > 0) {
+        const a = n.getRangeAt(0);
+        this.editor.el.contains(a.commonAncestorContainer) && (this.savedRange = a.cloneRange());
       }
     };
-    t.addEventListener("mousedown", o), t.addEventListener("focus", o);
-    const i = () => {
-      let a = parseInt(t.value, 10);
-      if (!isNaN(a) && (a = Math.max(1, Math.min(100, a)), t.value = a.toString(), e.command === "fontSize")) {
+    t.addEventListener("mousedown", i), t.addEventListener("focus", i);
+    const o = () => {
+      let n = parseInt(t.value, 10);
+      if (!isNaN(n) && (n = Math.max(1, Math.min(100, n)), t.value = n.toString(), e.command === "fontSize")) {
         if (this.savedRange) {
-          const n = this.editor.setStyle("font-size", `${a}px`, this.savedRange);
-          n && (this.savedRange = n);
+          const a = this.editor.setStyle("font-size", `${n}px`, this.savedRange);
+          a && (this.savedRange = a);
         } else
-          this.editor.setStyle("font-size", `${a}px`);
+          this.editor.setStyle("font-size", `${n}px`);
         t.focus();
       }
     };
-    t.addEventListener("input", i), t.addEventListener("keydown", (a) => {
-      a.key === "Enter" && (i(), this.editor.focus());
+    t.addEventListener("input", o), t.addEventListener("keydown", (n) => {
+      n.key === "Enter" && (o(), 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((o) => {
-      const i = document.createElement("option");
-      i.value = o.value, i.textContent = o.label, t.appendChild(i);
+    t.classList.add("te-select"), t.title = e.title, e.options && e.options.forEach((i) => {
+      const o = document.createElement("option");
+      o.value = i.value, o.textContent = i.label, t.appendChild(o);
     }), t.addEventListener("change", () => {
-      const o = t.value;
-      this.savedRange && this.editor.selection.restoreSelection(this.savedRange), e.command === "formatBlock" ? this.editor.execute(e.command, o) : e.command === "fontFamily" ? this.editor.setStyle("font-family", o) : e.command === "lineHeight" && this.editor.setStyle("line-height", o), this.editor.focus();
+      const i = t.value;
+      this.savedRange && this.editor.selection.restoreSelection(this.savedRange), e.command === "formatBlock" ? this.editor.execute(e.command, i) : e.command === "fontFamily" ? this.editor.setStyle("font-family", i) : e.command === "lineHeight" && this.editor.setStyle("line-height", i), this.editor.focus();
     }), t.addEventListener("mousedown", () => {
       this.savedRange = this.editor.selection.saveSelection();
     }), this.container.appendChild(t);
@@ -1033,22 +1304,22 @@ class q {
   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 a = document.createElement("div");
-      a.classList.add("te-color-indicator"), a.style.backgroundColor = e.value || "#000000", i.appendChild(a), t.appendChild(i);
+      const o = document.createElement("div");
+      o.classList.add("te-button", "te-color-icon"), o.innerHTML = e.icon;
+      const n = document.createElement("div");
+      n.classList.add("te-color-indicator"), n.style.backgroundColor = e.value || "#000000", o.appendChild(n), t.appendChild(o);
     }
-    const o = document.createElement("input");
-    o.type = "color", o.classList.add("te-color-picker-input"), e.icon || (o.classList.add("te-color-picker"), o.title = e.title), o.value = e.value || "#000000", o.addEventListener("mousedown", () => {
+    const i = document.createElement("input");
+    i.type = "color", i.classList.add("te-color-picker-input"), e.icon || (i.classList.add("te-color-picker"), i.title = e.title), i.value = e.value || "#000000", i.addEventListener("mousedown", () => {
       this.savedRange = this.editor.selection.saveSelection();
-    }), o.addEventListener("input", () => {
+    }), i.addEventListener("input", () => {
       if (e.icon) {
-        const i = t.querySelector(".te-color-indicator");
-        i && (i.style.backgroundColor = o.value);
+        const o = t.querySelector(".te-color-indicator");
+        o && (o.style.backgroundColor = i.value);
       }
-    }), o.addEventListener("change", () => {
-      this.savedRange && this.editor.selection.restoreSelection(this.savedRange), e.command && this.editor.execute(e.command, o.value), this.editor.focus();
-    }), t.appendChild(o), this.container.appendChild(e.icon ? t : o);
+    }), i.addEventListener("change", () => {
+      this.savedRange && this.editor.selection.restoreSelection(this.savedRange), e.command && this.editor.execute(e.command, i.value), this.editor.focus();
+    }), t.appendChild(i), this.container.appendChild(e.icon ? t : i);
   }
   get el() {
     return this.container;
@@ -1056,25 +1327,57 @@ class q {
   updateActiveStates() {
     const e = this.container.querySelectorAll(".te-button");
     let t = 0;
-    this.items.forEach((o) => {
-      if (o.type === "button") {
-        const i = e[t++];
-        o.command && document.queryCommandState(o.command) ? i.classList.add("active") : i.classList.remove("active");
+    this.items.forEach((i) => {
+      if (i.type === "button") {
+        const o = e[t++];
+        i.command && document.queryCommandState(i.command) ? o.classList.add("active") : o.classList.remove("active");
       }
     });
   }
+  updateStatus(e, t = !1) {
+    if (!this.statusEl || this.editor.getOptions().showStatus === !1) return;
+    if (this.statusEl.innerHTML = "", t) {
+      const o = document.createElement("div");
+      o.classList.add("te-toolbar-loader"), this.statusEl.appendChild(o);
+    }
+    const i = document.createElement("span");
+    i.textContent = e, this.statusEl.appendChild(i);
+  }
 }
-class $ extends u {
+class V extends p {
   toolbar;
   constructor(e, t = {}) {
-    super(e, t), this.toolbar = new q(this), this.container.insertBefore(this.toolbar.el, this.editableElement), setTimeout(() => {
-      console.log("TOOLBAR HTML:", this.toolbar.el.outerHTML), console.log("CONTAINER HTML:", this.container.outerHTML);
-    }, 1e3);
+    const i = {
+      ...t,
+      onSaving: () => {
+        this.toolbar?.updateStatus("Auto saving...", !0), t.onSaving && t.onSaving();
+      },
+      onSave: (o) => {
+        const n = (/* @__PURE__ */ new Date()).toLocaleString([], {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: !0
+        });
+        this.toolbar?.updateStatus(`Saved at ${n}`, !1), t.onSave && t.onSave(o);
+      }
+    };
+    if (super(e, i), typeof document > "u" || !e) {
+      this.toolbar = {};
+      return;
+    }
+    this.toolbar = new U(this), this.container.insertBefore(this.toolbar.el, this.editableElement), i.showStatus !== !1 && this.toolbar.updateStatus("All changes saved", !1);
+  }
+  getToolbar() {
+    return this.toolbar;
   }
 }
 export {
-  u as CoreEditor,
-  y as SelectionManager,
-  $ as TestEditor,
-  q as Toolbar
+  p as CoreEditor,
+  u as HistoryManager,
+  h as SelectionManager,
+  V as TestEditor,
+  U as Toolbar
 };