@meenainwal/rich-text-editor 1.1.0 → 1.2.0

package/dist/test-editor.mjs

@@ -1,1383 +0,0 @@
-class h {
-  /**
-   * 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);
-  }
-  /**
-   * 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;
-  constructor(e) {
-    this.editor = e, this.setupListeners();
-  }
-  setupListeners() {
-    const e = this.editor.el;
-    e.addEventListener("mousedown", (t) => {
-      const i = t.target;
-      if (i.classList.contains("te-image-resizer")) {
-        t.preventDefault(), t.stopPropagation();
-        const n = i.closest(".te-image-container");
-        n && (this.selectImage(n), this.startResize(t, i));
-        return;
-      }
-      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", () => {
-      this.isResizing && this.stopResize();
-    }), e.addEventListener("keydown", (t) => {
-      (t.key === "Backspace" || t.key === "Delete") && this.activeContainer && (t.preventDefault(), this.activeContainer.remove(), this.activeContainer = null, this.editor.el.dispatchEvent(new Event("input", { bubbles: !0 })));
-    });
-  }
-  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((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"), 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 = {}) {
-    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((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);
-            });
-          }
-        });
-      });
-    }).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 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}`), i.appendChild(r);
-    }), i.appendChild(o), i.appendChild(n), t.replaceChild(i, e), !i.nextElementSibling) {
-      const s = document.createElement("p");
-      s.innerHTML = "<br>", i.after(s);
-    }
-  }
-  setupInputHandlers() {
-    this.editableElement.addEventListener("beforeinput", (e) => {
-      if (e.inputType === "insertText" && Object.keys(this.pendingStyles).length > 0) {
-        const t = e.data;
-        if (!t) return;
-        e.preventDefault();
-        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", () => {
-      const e = window.getSelection();
-      e && e.rangeCount > 0 && (e.getRangeAt(0).collapsed || (this.pendingStyles = {}));
-    }), this.editableElement.addEventListener("dragover", (e) => {
-      e.preventDefault(), e.dataTransfer.dropEffect = "copy", this.editableElement.classList.add("dragover");
-    }), this.editableElement.addEventListener("dragleave", () => {
-      this.editableElement.classList.remove("dragover");
-    }), this.editableElement.addEventListener("drop", (e) => {
-      e.preventDefault(), this.editableElement.classList.remove("dragover");
-      const t = e.dataTransfer?.files;
-      if (t && t.length > 0)
-        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);
-            }, n.readAsDataURL(o);
-          }
-        }
-    }), this.editableElement.addEventListener("paste", (e) => {
-      const t = e.clipboardData;
-      if (!t) return;
-      if (t.items)
-        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();
-              r.onload = (l) => {
-                const c = l.target?.result;
-                this.insertImage(c);
-              }, r.readAsDataURL(s);
-              return;
-            }
-          }
-        }
-      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;
-  }
-  /**
-   * 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), 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 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, 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 (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 a = document.createElement("span");
-      a.style.setProperty(e, t);
-      try {
-        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(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 })), n;
-  }
-  /**
-   * Creates a link at the current selection.
-   * Ensures the link opens in a new tab with proper security attributes.
-   */
-  createLink(e) {
-    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 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 }));
-  }
-  /**
-   * Inserts an image at the current selection.
-   */
-  insertImage(e) {
-    this.focus();
-    const t = this.selection.getRange();
-    if (!t) return;
-    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}`), i.appendChild(c);
-    }), i.appendChild(o), i.appendChild(n), t.deleteContents(), t.insertNode(i);
-    const s = document.createElement("p");
-    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 }));
-  }
-  /**
-   * Returns the clean HTML content of the editor.
-   */
-  getHTML() {
-    return this.editableElement.innerHTML;
-  }
-  /**
-   * Sets the HTML content of the editor.
-   */
-  setHTML(e) {
-    this.editableElement.innerHTML = e;
-  }
-  /**
-   * Internal access to the editable element.
-   */
-  get el() {
-    return this.editableElement;
-  }
-  /**
-   * Returns the editor options.
-   */
-  getOptions() {
-    return this.options;
-  }
-}
-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>'
-}, 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>'
-}, j = {
-  type: "select",
-  title: "Heading",
-  command: "formatBlock",
-  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" }
-  ]
-}, f = {
-  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" }
-  ]
-}, w = {
-  type: "input",
-  title: "Size (px)",
-  command: "fontSize",
-  placeholder: "Size",
-  value: "16"
-}, E = {
-  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"
-}, S = {
-  type: "button",
-  title: "Bold",
-  command: "bold",
-  icon: '<svg viewBox="0 0 24 24"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>'
-}, x = {
-  type: "button",
-  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>'
-}, 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>'
-}, 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>'
-}, 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"
-}, 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"
-}, 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>'
-}, 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>'
-}, 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>'
-}, 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>'
-}, 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>'
-}, 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>'
-}, 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>'
-}, 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>'
-}, 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>'
-}, 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>'
-}, 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>'
-}, D = {
-  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>'
-}, W = {
-  type: "button",
-  title: "Insert Image",
-  command: "insertImage",
-  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>'
-}, G = {
-  type: "button",
-  command: "insertTable",
-  title: "Insert Table",
-  icon: '<svg viewBox="0 0 24 24" 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" },
-  { emoji: "😃", name: "smiley", category: "Smileys" },
-  { emoji: "😄", name: "smile", category: "Smileys" },
-  { emoji: "😁", name: "grin", category: "Smileys" },
-  { emoji: "😆", name: "laughing", category: "Smileys" },
-  { emoji: "😅", name: "sweat smile", category: "Smileys" },
-  { emoji: "🤣", name: "rofl", category: "Smileys" },
-  { emoji: "😂", name: "joy", category: "Smileys" },
-  { emoji: "🙂", name: "slight smile", category: "Smileys" },
-  { emoji: "🙃", name: "upside down", category: "Smileys" },
-  { emoji: "😉", name: "wink", category: "Smileys" },
-  { emoji: "😊", name: "blush", category: "Smileys" },
-  { emoji: "😇", name: "innocent", category: "Smileys" },
-  { emoji: "🥰", name: "smiling face with hearts", category: "Smileys" },
-  { emoji: "😍", name: "heart eyes", category: "Smileys" },
-  { emoji: "🤩", name: "star struck", category: "Smileys" },
-  { emoji: "😘", name: "kissing heart", category: "Smileys" },
-  { emoji: "😗", name: "kissing", category: "Smileys" },
-  { emoji: "😚", name: "kissing closed eyes", category: "Smileys" },
-  { emoji: "😋", name: "yum", category: "Smileys" },
-  { emoji: "😛", name: "stuck out tongue", category: "Smileys" },
-  { emoji: "😜", name: "stuck out tongue winking eye", category: "Smileys" },
-  { emoji: "🤪", name: "zany face", category: "Smileys" },
-  { emoji: "🤨", name: "raised eyebrow", category: "Smileys" },
-  { emoji: "🧐", name: "monocle", category: "Smileys" },
-  { emoji: "🤓", name: "nerd", category: "Smileys" },
-  { emoji: "😎", name: "sunglasses", category: "Smileys" },
-  { emoji: "🥳", name: "partying face", category: "Smileys" },
-  { emoji: "😏", name: "smirk", category: "Smileys" },
-  { emoji: "😒", name: "unamused", category: "Smileys" },
-  { emoji: "😞", name: "disappointed", category: "Smileys" },
-  { emoji: "😔", name: "pensive", category: "Smileys" },
-  { emoji: "😟", name: "worried", category: "Smileys" },
-  { emoji: "😕", name: "confused", category: "Smileys" },
-  { emoji: "😫", name: "tired", category: "Smileys" },
-  { emoji: "🥵", name: "hot face", category: "Smileys" },
-  { emoji: "🥶", name: "cold face", category: "Smileys" },
-  { emoji: "😳", name: "flushed", category: "Smileys" },
-  { emoji: "😱", name: "scream", category: "Smileys" },
-  { emoji: "🤢", name: "nauseated", category: "Smileys" },
-  { emoji: "🤮", name: "vomiting", category: "Smileys" },
-  { emoji: "🤬", name: "cursing", category: "Smileys" },
-  { emoji: "🤫", name: "shushing", category: "Smileys" },
-  { emoji: "🤔", name: "thinking", category: "Smileys" },
-  { emoji: "🤗", name: "hugs", category: "Smileys" },
-  { emoji: "🥱", name: "yawn", category: "Smileys" },
-  { emoji: "😴", name: "sleeping", category: "Smileys" },
-  { emoji: "🤤", name: "drooling", category: "Smileys" },
-  { emoji: "😵", name: "dizzy", category: "Smileys" },
-  { emoji: "🤐", name: "zipper mouth", category: "Smileys" },
-  { emoji: "🥴", name: "woozy", category: "Smileys" },
-  { emoji: "🤒", name: "fever", category: "Smileys" },
-  { emoji: "🤕", name: "bandage", category: "Smileys" },
-  { emoji: "🤡", name: "clown", category: "Smileys" },
-  { emoji: "👻", name: "ghost", category: "Smileys" },
-  { emoji: "👽", name: "alien", category: "Smileys" },
-  { emoji: "👾", name: "robot", category: "Smileys" },
-  { emoji: "💩", name: "poop", category: "Smileys" },
-  // Hearts & Symbols
-  { emoji: "❤️", name: "heart", category: "Symbols" },
-  { emoji: "🧡", name: "orange heart", category: "Symbols" },
-  { emoji: "💛", name: "yellow heart", category: "Symbols" },
-  { emoji: "💚", name: "green heart", category: "Symbols" },
-  { emoji: "💙", name: "blue heart", category: "Symbols" },
-  { emoji: "💜", name: "purple heart", category: "Symbols" },
-  { emoji: "🖤", name: "black heart", category: "Symbols" },
-  { emoji: "🤍", name: "white heart", category: "Symbols" },
-  { emoji: "🤎", name: "brown heart", category: "Symbols" },
-  { emoji: "💔", name: "broken heart", category: "Symbols" },
-  { emoji: "❣️", name: "heart exclamation", category: "Symbols" },
-  { emoji: "💕", name: "two hearts", category: "Symbols" },
-  { emoji: "💞", name: "revolving hearts", category: "Symbols" },
-  { emoji: "✨", name: "sparkles", category: "Symbols" },
-  { emoji: "🔥", name: "fire", category: "Symbols" },
-  { emoji: "⭐", name: "star", category: "Symbols" },
-  { emoji: "🌟", name: "glowing star", category: "Symbols" },
-  { emoji: "✅", name: "check", category: "Symbols" },
-  { emoji: "❌", name: "cross", category: "Symbols" },
-  { emoji: "💯", name: "hundred", category: "Symbols" },
-  { emoji: "💢", name: "anger", category: "Symbols" },
-  { emoji: "💥", name: "collision", category: "Symbols" },
-  { emoji: "💫", name: "dizzy symbol", category: "Symbols" },
-  { emoji: "💦", name: "sweat drops", category: "Symbols" },
-  { emoji: "💨", name: "dash", category: "Symbols" },
-  // Hand Gestures
-  { emoji: "👍", name: "thumbs up", category: "Hands" },
-  { emoji: "👎", name: "thumbs down", category: "Hands" },
-  { emoji: "👌", name: "ok", category: "Hands" },
-  { emoji: "✌️", name: "victory", category: "Hands" },
-  { emoji: "🤞", name: "fingers crossed", category: "Hands" },
-  { emoji: "🤟", name: "rock on", category: "Hands" },
-  { emoji: "🤘", name: "horns", category: "Hands" },
-  { emoji: "🤙", name: "call me", category: "Hands" },
-  { emoji: "👈", name: "point left", category: "Hands" },
-  { emoji: "👉", name: "point right", category: "Hands" },
-  { emoji: "👆", name: "point up", category: "Hands" },
-  { emoji: "👇", name: "point down", category: "Hands" },
-  { emoji: "🖐️", name: "hand splayed", category: "Hands" },
-  { emoji: "✋", name: "raised hand", category: "Hands" },
-  { emoji: "🖖", name: "vulcan salute", category: "Hands" },
-  { emoji: "👋", name: "wave", category: "Hands" },
-  { emoji: "👏", name: "clap", category: "Hands" },
-  { emoji: "🙌", name: "hands up", category: "Hands" },
-  { emoji: "👐", name: "open hands", category: "Hands" },
-  { emoji: "🤲", name: "palms up", category: "Hands" },
-  { emoji: "🤝", name: "handshake", category: "Hands" },
-  { emoji: "🙏", name: "pray", category: "Hands" },
-  { emoji: "💪", name: "flex", category: "Hands" },
-  { emoji: "✍️", name: "writing", category: "Hands" },
-  { emoji: "🤳", name: "selfie", category: "Hands" },
-  // Animals & Nature
-  { emoji: "🐶", name: "dog", category: "Animals" },
-  { emoji: "🐱", name: "cat", category: "Animals" },
-  { emoji: "🐭", name: "mouse", category: "Animals" },
-  { emoji: "🐹", name: "hamster", category: "Animals" },
-  { emoji: "🐰", name: "rabbit", category: "Animals" },
-  { emoji: "🦊", name: "fox", category: "Animals" },
-  { emoji: "🐻", name: "bear", category: "Animals" },
-  { emoji: "🐼", name: "panda", category: "Animals" },
-  { emoji: "🐨", name: "koala", category: "Animals" },
-  { emoji: "🐯", name: "tiger", category: "Animals" },
-  { emoji: "🦁", name: "lion", category: "Animals" },
-  { emoji: "🐮", name: "cow", category: "Animals" },
-  { emoji: "🐷", name: "pig", category: "Animals" },
-  { emoji: "🐸", name: "frog", category: "Animals" },
-  { emoji: "🐵", name: "monkey", category: "Animals" },
-  { emoji: "🐔", name: "chicken", category: "Animals" },
-  { emoji: "🐧", name: "penguin", category: "Animals" },
-  { emoji: "🐦", name: "bird", category: "Animals" },
-  { emoji: "🐤", name: "chick", category: "Animals" },
-  { emoji: "🦆", name: "duck", category: "Animals" },
-  { emoji: "🦅", name: "eagle", category: "Animals" },
-  { emoji: "🦉", name: "owl", category: "Animals" },
-  { emoji: "🦇", name: "bat", category: "Animals" },
-  { emoji: "🦄", name: "unicorn", category: "Animals" },
-  { emoji: "🐝", name: "bee", category: "Animals" },
-  { emoji: "🦋", name: "butterfly", category: "Animals" },
-  { emoji: "🐌", name: "snail", category: "Animals" },
-  { emoji: "🐞", name: "ladybeetle", category: "Animals" },
-  { emoji: "🐢", name: "turtle", category: "Animals" },
-  { emoji: "🐍", name: "snake", category: "Animals" },
-  { emoji: "🐙", name: "octopus", category: "Animals" },
-  { emoji: "🐬", name: "dolphin", category: "Animals" },
-  { emoji: "🐳", name: "whale", category: "Animals" },
-  { emoji: "🐟", name: "fish", category: "Animals" },
-  { emoji: "🦓", name: "zebra", category: "Animals" },
-  { emoji: "🦒", name: "giraffe", category: "Animals" },
-  { emoji: "🐘", name: "elephant", category: "Animals" },
-  { emoji: "🦏", name: "rhino", category: "Animals" },
-  { emoji: "🐪", name: "camel", category: "Animals" },
-  { emoji: "🐒", name: "monkey", category: "Animals" },
-  // Food & Drink
-  { emoji: "🍎", name: "apple", category: "Food" },
-  { emoji: "🍐", name: "pear", category: "Food" },
-  { emoji: "🍊", name: "tangerine", category: "Food" },
-  { emoji: "🍋", name: "lemon", category: "Food" },
-  { emoji: "🍌", name: "banana", category: "Food" },
-  { emoji: "🍉", name: "watermelon", category: "Food" },
-  { emoji: "🍇", name: "grapes", category: "Food" },
-  { emoji: "🍓", name: "strawberry", category: "Food" },
-  { emoji: "🍒", name: "cherries", category: "Food" },
-  { emoji: "🍑", name: "peach", category: "Food" },
-  { emoji: "🥭", name: "mango", category: "Food" },
-  { emoji: "🍍", name: "pineapple", category: "Food" },
-  { emoji: "🥥", name: "coconut", category: "Food" },
-  { emoji: "🥝", name: "kiwi", category: "Food" },
-  { emoji: "🍅", name: "tomato", category: "Food" },
-  { emoji: "🥑", name: "avocado", category: "Food" },
-  { emoji: "🍆", name: "eggplant", category: "Food" },
-  { emoji: "🥔", name: "potato", category: "Food" },
-  { emoji: "🥕", name: "carrot", category: "Food" },
-  { emoji: "🌽", name: "corn", category: "Food" },
-  { emoji: "🌶️", name: "hot pepper", category: "Food" },
-  { emoji: "🥦", name: "broccoli", category: "Food" },
-  { emoji: "🍄", name: "mushroom", category: "Food" },
-  { emoji: "🥜", name: "peanuts", category: "Food" },
-  { emoji: "🍞", name: "bread", category: "Food" },
-  { emoji: "🥐", name: "croissant", category: "Food" },
-  { emoji: "🥯", name: "bagel", category: "Food" },
-  { emoji: "🥞", name: "pancakes", category: "Food" },
-  { emoji: "🧀", name: "cheese", category: "Food" },
-  { emoji: "🍖", name: "meat", category: "Food" },
-  { emoji: "🍗", name: "poultry leg", category: "Food" },
-  { emoji: "🥓", name: "bacon", category: "Food" },
-  { emoji: "🍔", name: "hamburger", category: "Food" },
-  { emoji: "🍟", name: "fries", category: "Food" },
-  { emoji: "🍕", name: "pizza", category: "Food" },
-  { emoji: "🌭", name: "hot dog", category: "Food" },
-  { emoji: "🥪", name: "sandwich", category: "Food" },
-  { emoji: "🌮", name: "taco", category: "Food" },
-  { emoji: "🌯", name: "burrito", category: "Food" },
-  { emoji: "🍳", name: "egg", category: "Food" },
-  { emoji: "🍲", name: "stew", category: "Food" },
-  { emoji: "🥣", name: "bowl", category: "Food" },
-  { emoji: "🥗", name: "salad", category: "Food" },
-  { emoji: "🍿", name: "popcorn", category: "Food" },
-  { emoji: "🍱", name: "bento", category: "Food" },
-  { emoji: "🍣", name: "sushi", category: "Food" },
-  { emoji: "🍤", name: "shrimp", category: "Food" },
-  { emoji: "🍦", name: "ice cream", category: "Food" },
-  { emoji: "🍧", name: "shaved ice", category: "Food" },
-  { emoji: "🍨", name: "ice cream", category: "Food" },
-  { emoji: "🍩", name: "donut", category: "Food" },
-  { emoji: "🍪", name: "cookie", category: "Food" },
-  { emoji: "🎂", name: "cake", category: "Food" },
-  { emoji: "🍰", name: "shortcake", category: "Food" },
-  { emoji: "🧁", name: "cupcake", category: "Food" },
-  { emoji: "🥧", name: "pie", category: "Food" },
-  { emoji: "🍫", name: "chocolate", category: "Food" },
-  { emoji: "🍬", name: "candy", category: "Food" },
-  { emoji: "🍭", name: "lollipop", category: "Food" },
-  { emoji: "🍮", name: "custard", category: "Food" },
-  { emoji: "🍯", name: "honey", category: "Food" },
-  { emoji: "🍼", name: "baby bottle", category: "Food" },
-  { emoji: "🥛", name: "milk", category: "Food" },
-  { emoji: "☕", name: "coffee", category: "Food" },
-  { emoji: "🍵", name: "tea", category: "Food" },
-  { emoji: "🍶", name: "sake", category: "Food" },
-  { emoji: "🍾", name: "champagne", category: "Food" },
-  { emoji: "🍷", name: "wine", category: "Food" },
-  { emoji: "🍸", name: "cocktail", category: "Food" },
-  { emoji: "🍹", name: "tropical drink", category: "Food" },
-  { emoji: "🍺", name: "beer", category: "Food" },
-  { emoji: "🍻", name: "beers", category: "Food" },
-  { emoji: "🥃", name: "tumbler glass", category: "Food" },
-  { emoji: "🥤", name: "soda", category: "Food" },
-  // Travel & Places
-  { emoji: "🚗", name: "car", category: "Travel" },
-  { emoji: "🚕", name: "taxi", category: "Travel" },
-  { emoji: "🚙", name: "bus", category: "Travel" },
-  { emoji: "🚌", name: "trolleybus", category: "Travel" },
-  { emoji: "🏎️", name: "racing car", category: "Travel" },
-  { emoji: "🚓", name: "police car", category: "Travel" },
-  { emoji: "🚑", name: "ambulance", category: "Travel" },
-  { emoji: "🚒", name: "fire engine", category: "Travel" },
-  { emoji: "🚐", name: "minibus", category: "Travel" },
-  { emoji: "🚚", name: "truck", category: "Travel" },
-  { emoji: "🚛", name: "articulated lorry", category: "Travel" },
-  { emoji: "🚜", name: "tractor", category: "Travel" },
-  { emoji: "🚲", name: "bicycle", category: "Travel" },
-  { emoji: "🛵", name: "scooter", category: "Travel" },
-  { emoji: "🏍️", name: "motorcycle", category: "Travel" },
-  { emoji: "🚄", name: "bullet train", category: "Travel" },
-  { emoji: "🚆", name: "train", category: "Travel" },
-  { emoji: "✈️", name: "airplane", category: "Travel" },
-  { emoji: "🚀", name: "rocket", category: "Travel" },
-  { emoji: "🛸", name: "ufo", category: "Travel" },
-  { emoji: "🚁", name: "helicopter", category: "Travel" },
-  { emoji: "🚢", name: "ship", category: "Travel" },
-  { emoji: "⛵", name: "sailboat", category: "Travel" },
-  { emoji: "⚓", name: "anchor", category: "Travel" },
-  { emoji: "⛽", name: "fuel pump", category: "Travel" },
-  { emoji: "🚦", name: "traffic light", category: "Travel" },
-  // Objects & Tools
-  { emoji: "💻", name: "laptop", category: "Objects" },
-  { emoji: "📱", name: "mobile", category: "Objects" },
-  { emoji: "☎️", name: "telephone", category: "Objects" },
-  { emoji: "⌨️", name: "keyboard", category: "Objects" },
-  { emoji: "🖥️", name: "desktop", category: "Objects" },
-  { emoji: "🖨️", name: "printer", category: "Objects" },
-  { emoji: "📸", name: "camera", category: "Objects" },
-  { emoji: "🎥", name: "video camera", category: "Objects" },
-  { emoji: "📺", name: "tv", category: "Objects" },
-  { emoji: "📻", name: "radio", category: "Objects" },
-  { emoji: "⏰", name: "alarm clock", category: "Objects" },
-  { emoji: "💡", name: "light bulb", category: "Objects" },
-  { emoji: "🔦", name: "flashlight", category: "Objects" },
-  { emoji: "🕯️", name: "candle", category: "Objects" },
-  { emoji: "🔨", name: "hammer", category: "Objects" },
-  { emoji: "🔧", name: "wrench", category: "Objects" },
-  { emoji: "🔩", name: "nut and bolt", category: "Objects" },
-  { emoji: "🔫", name: "water pistol", category: "Objects" },
-  { emoji: "💸", name: "money", category: "Objects" },
-  { emoji: "💵", name: "dollar bill", category: "Objects" },
-  { emoji: "💳", name: "credit card", category: "Objects" },
-  { emoji: "💎", name: "gem", category: "Objects" },
-  { emoji: "⚖️", name: "balance scale", category: "Objects" },
-  { emoji: "🔗", name: "link", category: "Objects" },
-  { emoji: "⛓️", name: "chains", category: "Objects" },
-  { emoji: "💉", name: "syringe", category: "Objects" },
-  { emoji: "💊", name: "pill", category: "Objects" },
-  { emoji: "🚪", name: "door", category: "Objects" },
-  { emoji: "🛏️", name: "bed", category: "Objects" },
-  { emoji: "🛋️", name: "couch", category: "Objects" },
-  { emoji: "🚿", name: "shower", category: "Objects" },
-  { emoji: "🛁", name: "bathtub", category: "Objects" },
-  { emoji: "🔑", name: "key", category: "Objects" },
-  { emoji: "🧹", name: "broom", category: "Objects" },
-  // Activities & Hobbies
-  { emoji: "⚽", name: "soccer", category: "Activities" },
-  { emoji: "🏀", name: "basketball", category: "Activities" },
-  { emoji: "🏈", name: "football", category: "Activities" },
-  { emoji: "⚾", name: "baseball", category: "Activities" },
-  { emoji: "🎾", name: "tennis", category: "Activities" },
-  { emoji: "🏐", name: "volleyball", category: "Activities" },
-  { emoji: "🏉", name: "rugby", category: "Activities" },
-  { emoji: "🎱", name: "pool", category: "Activities" },
-  { emoji: "⛳", name: "golf", category: "Activities" },
-  { emoji: "🪁", name: "kite", category: "Activities" },
-  { emoji: "🏹", name: "bow and arrow", category: "Activities" },
-  { emoji: "🎣", name: "fishing", category: "Activities" },
-  { emoji: "🥊", name: "boxing", category: "Activities" },
-  { emoji: "🥋", name: "martial arts", category: "Activities" },
-  { emoji: "⛸️", name: "ice skate", category: "Activities" },
-  { emoji: "🎿", name: "ski", category: "Activities" },
-  { emoji: "🏂", name: "snowboard", category: "Activities" },
-  { emoji: "🏋️", name: "weightlifter", category: "Activities" },
-  { emoji: "🤺", name: "fencing", category: "Activities" },
-  { emoji: "🤼", name: "wrestling", category: "Activities" },
-  { emoji: "🤸", name: "cartwheel", category: "Activities" },
-  { emoji: "🏆", name: "trophy", category: "Activities" },
-  { emoji: "🏅", name: "medal", category: "Activities" },
-  { emoji: "🥇", name: "first place", category: "Activities" },
-  { emoji: "🎟️", name: "ticket", category: "Activities" },
-  { emoji: "🎮", name: "video game", category: "Activities" },
-  { emoji: "🎲", name: "die", category: "Activities" },
-  { emoji: "♟️", name: "chess", category: "Activities" },
-  { emoji: "🎹", name: "piano", category: "Activities" },
-  { emoji: "🎸", name: "guitar", category: "Activities" },
-  { emoji: "🎺", name: "trumpet", category: "Activities" },
-  { emoji: "🎻", name: "violin", category: "Activities" },
-  { emoji: "🥁", name: "drum", category: "Activities" },
-  { emoji: "🎭", name: "performing arts", category: "Activities" },
-  { emoji: "🎨", name: "artist palette", category: "Activities" },
-  { emoji: "🎬", name: "clapper board", category: "Activities" },
-  { emoji: "🎤", name: "microphone", category: "Activities" },
-  { emoji: "🎧", name: "headphone", category: "Activities" }
-];
-class q {
-  container;
-  searchInput;
-  emojiGrid;
-  onSelect;
-  onClose;
-  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"), 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(), i = g.filter(
-        (o) => o.name.toLowerCase().includes(t) || o.category.toLowerCase().includes(t)
-      );
-      this.renderEmojis(i);
-    });
-    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.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((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 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(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(), 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());
-  }
-  get el() {
-    return this.container;
-  }
-}
-class U {
-  editor;
-  container;
-  savedRange = null;
-  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"), 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((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.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", (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 o = window.prompt("Enter the URL");
-        o && this.editor.createLink(o);
-        return;
-      }
-      if (e.command === "insertImage") {
-        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) => {
-              const c = l.target?.result;
-              this.editor.insertImage(c);
-            }, r.readAsDataURL(s);
-          }
-          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();
-    }), 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 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", 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 a = this.editor.setStyle("font-size", `${n}px`, this.savedRange);
-          a && (this.savedRange = a);
-        } else
-          this.editor.setStyle("font-size", `${n}px`);
-        t.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((i) => {
-      const o = document.createElement("option");
-      o.value = i.value, o.textContent = i.label, t.appendChild(o);
-    }), t.addEventListener("change", () => {
-      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);
-  }
-  renderColorPicker(e) {
-    const t = document.createElement("div");
-    if (t.classList.add("te-color-picker-wrapper"), t.title = e.title, e.icon) {
-      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 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();
-    }), i.addEventListener("input", () => {
-      if (e.icon) {
-        const o = t.querySelector(".te-color-indicator");
-        o && (o.style.backgroundColor = i.value);
-      }
-    }), 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;
-  }
-  updateActiveStates() {
-    const e = this.container.querySelectorAll(".te-button");
-    let t = 0;
-    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 V extends p {
-  toolbar;
-  constructor(e, t = {}) {
-    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 {
-  p as CoreEditor,
-  u as HistoryManager,
-  h as SelectionManager,
-  V as TestEditor,
-  U as Toolbar
-};