@mdaemon/html-editor 1.0.10 → 1.0.12

package/dist/index.d.ts

@@ -471,6 +471,7 @@ export declare class Toolbar {
     private state;
     private buttonElements;
     private dropdowns;
+    private bodyMenus;
     private charMap;
     private emojiPicker;
     private imageUpload;
@@ -499,6 +500,11 @@ export declare class Toolbar {
     private createFontSizeDropdown;
     private createLineHeightDropdown;
     private createTemplateDropdown;
+    /**
+     * Position a fixed-position menu below its trigger button.
+     * Uses getBoundingClientRect so the menu escapes any overflow:hidden ancestor.
+     */
+    private positionMenu;
     private createDropdown;
     private createColorPicker;
     private bindEvents;
@@ -516,6 +522,7 @@ export declare class Toolbar {
     private toggleFullscreen;
     rebuild(): void;
     destroy(): void;
+    private removeBodyMenus;
 }
 
 export declare interface ToolbarButtonAPI {

package/dist/index.js

@@ -42788,6 +42788,7 @@ class Toolbar {
   state;
   buttonElements = /* @__PURE__ */ new Map();
   dropdowns = /* @__PURE__ */ new Map();
+  bodyMenus = [];
   charMap = null;
   emojiPicker = null;
   imageUpload = null;
@@ -43141,6 +43142,15 @@ class Toolbar {
       }
     });
   }
+  /**
+   * Position a fixed-position menu below its trigger button.
+   * Uses getBoundingClientRect so the menu escapes any overflow:hidden ancestor.
+   */
+  positionMenu(button, menu) {
+    const rect = button.getBoundingClientRect();
+    menu.style.top = `${rect.bottom}px`;
+    menu.style.left = `${rect.left}px`;
+  }
   createDropdown(name, label, options, onSelect, getCurrentValue) {
     const wrapper = document.createElement("div");
     wrapper.className = "md-toolbar-dropdown";
@@ -43151,7 +43161,7 @@ class Toolbar {
     button.title = label;
     button.innerHTML = `
       <span class="md-toolbar-dropdown-label">${label}</span>
-      <span class="md-toolbar-dropdown-arrow">▼</span>
+      <span class="md-toolbar-dropdown-arrow"><svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M0 2l4 4 4-4z"/></svg></span>
     `;
     const menu = document.createElement("div");
     menu.className = "md-toolbar-dropdown-menu";
@@ -43183,14 +43193,18 @@ class Toolbar {
       e.stopPropagation();
       this.dropdowns.forEach((dropdown, key) => {
         if (key !== name) {
-          dropdown.classList.remove("md-toolbar-dropdown-open");
-          const m = dropdown.querySelector(".md-toolbar-dropdown-menu");
-          if (m) m.style.display = "none";
+          dropdown.classList.remove("md-toolbar-dropdown-open", "md-toolbar-colorpicker-open");
         }
       });
+      this.bodyMenus.forEach((m) => {
+        if (m !== menu) m.style.display = "none";
+      });
       const isOpen = menu.style.display !== "none";
       menu.style.display = isOpen ? "none" : "block";
       wrapper.classList.toggle("md-toolbar-dropdown-open", !isOpen);
+      if (!isOpen) {
+        this.positionMenu(button, menu);
+      }
       if (!isOpen && getCurrentValue) {
         const currentVal = getCurrentValue();
         menu.querySelectorAll(".md-toolbar-dropdown-item").forEach((item) => {
@@ -43200,7 +43214,8 @@ class Toolbar {
       }
     });
     wrapper.appendChild(button);
-    wrapper.appendChild(menu);
+    document.body.appendChild(menu);
+    this.bodyMenus.push(menu);
     this.dropdowns.set(name, wrapper);
     return wrapper;
   }
@@ -43215,7 +43230,7 @@ class Toolbar {
     button.innerHTML = `
       <span class="md-toolbar-colorpicker-icon md-icon-${name}">A</span>
       <span class="md-toolbar-colorpicker-preview" style="background-color: ${name === "forecolor" ? "#000" : "#ff0"}"></span>
-      <span class="md-toolbar-dropdown-arrow">▼</span>
+      <span class="md-toolbar-dropdown-arrow"><svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M0 2l4 4 4-4z"/></svg></span>
     `;
     const menu = document.createElement("div");
     menu.className = "md-toolbar-colorpicker-menu";
@@ -43266,12 +43281,24 @@ class Toolbar {
     button.addEventListener("click", (e) => {
       e.preventDefault();
       e.stopPropagation();
+      this.dropdowns.forEach((dropdown, key) => {
+        if (key !== name) {
+          dropdown.classList.remove("md-toolbar-dropdown-open", "md-toolbar-colorpicker-open");
+        }
+      });
+      this.bodyMenus.forEach((m) => {
+        if (m !== menu) m.style.display = "none";
+      });
       const isOpen = menu.style.display !== "none";
       menu.style.display = isOpen ? "none" : "block";
       wrapper.classList.toggle("md-toolbar-colorpicker-open", !isOpen);
+      if (!isOpen) {
+        this.positionMenu(button, menu);
+      }
     });
     wrapper.appendChild(button);
-    wrapper.appendChild(menu);
+    document.body.appendChild(menu);
+    this.bodyMenus.push(menu);
     this.dropdowns.set(name, wrapper);
     return wrapper;
   }
@@ -43279,7 +43306,9 @@ class Toolbar {
     this.unbindEvents();
     this.boundClickHandler = (e) => {
       const target = e.target;
-      if (!target.closest(".md-toolbar-dropdown, .md-toolbar-colorpicker")) {
+      const inDropdown = target.closest(".md-toolbar-dropdown, .md-toolbar-colorpicker");
+      const inBodyMenu = this.bodyMenus.some((m) => m.contains(target));
+      if (!inDropdown && !inBodyMenu) {
         this.closeAllDropdowns();
       }
     };
@@ -43323,10 +43352,9 @@ class Toolbar {
   closeAllDropdowns() {
     this.dropdowns.forEach((dropdown) => {
       dropdown.classList.remove("md-toolbar-dropdown-open", "md-toolbar-colorpicker-open");
-      const menu = dropdown.querySelector(".md-toolbar-dropdown-menu, .md-toolbar-colorpicker-menu");
-      if (menu) {
-        menu.style.display = "none";
-      }
+    });
+    this.bodyMenus.forEach((menu) => {
+      menu.style.display = "none";
     });
   }
   startStateUpdates() {
@@ -43492,6 +43520,7 @@ class Toolbar {
     this.searchReplace = null;
     this.buttonElements.clear();
     this.dropdowns.clear();
+    this.removeBodyMenus();
     this.buttonsEl = null;
     this.toggleBtn = null;
     this.render();
@@ -43512,8 +43541,15 @@ class Toolbar {
     this.searchReplace?.destroy();
     this.buttonElements.clear();
     this.dropdowns.clear();
+    this.removeBodyMenus();
     this.container.innerHTML = "";
   }
+  removeBodyMenus() {
+    this.bodyMenus.forEach((menu) => {
+      menu.remove();
+    });
+    this.bodyMenus = [];
+  }
 }
 const SVG_ALIGN_LEFT = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>';
 const SVG_ALIGN_CENTER = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>';

package/dist/index.mjs

@@ -42786,6 +42786,7 @@ class Toolbar {
   state;
   buttonElements = /* @__PURE__ */ new Map();
   dropdowns = /* @__PURE__ */ new Map();
+  bodyMenus = [];
   charMap = null;
   emojiPicker = null;
   imageUpload = null;
@@ -43139,6 +43140,15 @@ class Toolbar {
       }
     });
   }
+  /**
+   * Position a fixed-position menu below its trigger button.
+   * Uses getBoundingClientRect so the menu escapes any overflow:hidden ancestor.
+   */
+  positionMenu(button, menu) {
+    const rect = button.getBoundingClientRect();
+    menu.style.top = `${rect.bottom}px`;
+    menu.style.left = `${rect.left}px`;
+  }
   createDropdown(name, label, options, onSelect, getCurrentValue) {
     const wrapper = document.createElement("div");
     wrapper.className = "md-toolbar-dropdown";
@@ -43149,7 +43159,7 @@ class Toolbar {
     button.title = label;
     button.innerHTML = `
       <span class="md-toolbar-dropdown-label">${label}</span>
-      <span class="md-toolbar-dropdown-arrow">▼</span>
+      <span class="md-toolbar-dropdown-arrow"><svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M0 2l4 4 4-4z"/></svg></span>
     `;
     const menu = document.createElement("div");
     menu.className = "md-toolbar-dropdown-menu";
@@ -43181,14 +43191,18 @@ class Toolbar {
       e.stopPropagation();
       this.dropdowns.forEach((dropdown, key) => {
         if (key !== name) {
-          dropdown.classList.remove("md-toolbar-dropdown-open");
-          const m = dropdown.querySelector(".md-toolbar-dropdown-menu");
-          if (m) m.style.display = "none";
+          dropdown.classList.remove("md-toolbar-dropdown-open", "md-toolbar-colorpicker-open");
         }
       });
+      this.bodyMenus.forEach((m) => {
+        if (m !== menu) m.style.display = "none";
+      });
       const isOpen = menu.style.display !== "none";
       menu.style.display = isOpen ? "none" : "block";
       wrapper.classList.toggle("md-toolbar-dropdown-open", !isOpen);
+      if (!isOpen) {
+        this.positionMenu(button, menu);
+      }
       if (!isOpen && getCurrentValue) {
         const currentVal = getCurrentValue();
         menu.querySelectorAll(".md-toolbar-dropdown-item").forEach((item) => {
@@ -43198,7 +43212,8 @@ class Toolbar {
       }
     });
     wrapper.appendChild(button);
-    wrapper.appendChild(menu);
+    document.body.appendChild(menu);
+    this.bodyMenus.push(menu);
     this.dropdowns.set(name, wrapper);
     return wrapper;
   }
@@ -43213,7 +43228,7 @@ class Toolbar {
     button.innerHTML = `
       <span class="md-toolbar-colorpicker-icon md-icon-${name}">A</span>
       <span class="md-toolbar-colorpicker-preview" style="background-color: ${name === "forecolor" ? "#000" : "#ff0"}"></span>
-      <span class="md-toolbar-dropdown-arrow">▼</span>
+      <span class="md-toolbar-dropdown-arrow"><svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M0 2l4 4 4-4z"/></svg></span>
     `;
     const menu = document.createElement("div");
     menu.className = "md-toolbar-colorpicker-menu";
@@ -43264,12 +43279,24 @@ class Toolbar {
     button.addEventListener("click", (e) => {
       e.preventDefault();
       e.stopPropagation();
+      this.dropdowns.forEach((dropdown, key) => {
+        if (key !== name) {
+          dropdown.classList.remove("md-toolbar-dropdown-open", "md-toolbar-colorpicker-open");
+        }
+      });
+      this.bodyMenus.forEach((m) => {
+        if (m !== menu) m.style.display = "none";
+      });
       const isOpen = menu.style.display !== "none";
       menu.style.display = isOpen ? "none" : "block";
       wrapper.classList.toggle("md-toolbar-colorpicker-open", !isOpen);
+      if (!isOpen) {
+        this.positionMenu(button, menu);
+      }
     });
     wrapper.appendChild(button);
-    wrapper.appendChild(menu);
+    document.body.appendChild(menu);
+    this.bodyMenus.push(menu);
     this.dropdowns.set(name, wrapper);
     return wrapper;
   }
@@ -43277,7 +43304,9 @@ class Toolbar {
     this.unbindEvents();
     this.boundClickHandler = (e) => {
       const target = e.target;
-      if (!target.closest(".md-toolbar-dropdown, .md-toolbar-colorpicker")) {
+      const inDropdown = target.closest(".md-toolbar-dropdown, .md-toolbar-colorpicker");
+      const inBodyMenu = this.bodyMenus.some((m) => m.contains(target));
+      if (!inDropdown && !inBodyMenu) {
         this.closeAllDropdowns();
       }
     };
@@ -43321,10 +43350,9 @@ class Toolbar {
   closeAllDropdowns() {
     this.dropdowns.forEach((dropdown) => {
       dropdown.classList.remove("md-toolbar-dropdown-open", "md-toolbar-colorpicker-open");
-      const menu = dropdown.querySelector(".md-toolbar-dropdown-menu, .md-toolbar-colorpicker-menu");
-      if (menu) {
-        menu.style.display = "none";
-      }
+    });
+    this.bodyMenus.forEach((menu) => {
+      menu.style.display = "none";
     });
   }
   startStateUpdates() {
@@ -43490,6 +43518,7 @@ class Toolbar {
     this.searchReplace = null;
     this.buttonElements.clear();
     this.dropdowns.clear();
+    this.removeBodyMenus();
     this.buttonsEl = null;
     this.toggleBtn = null;
     this.render();
@@ -43510,8 +43539,15 @@ class Toolbar {
     this.searchReplace?.destroy();
     this.buttonElements.clear();
     this.dropdowns.clear();
+    this.removeBodyMenus();
     this.container.innerHTML = "";
   }
+  removeBodyMenus() {
+    this.bodyMenus.forEach((menu) => {
+      menu.remove();
+    });
+    this.bodyMenus = [];
+  }
 }
 const SVG_ALIGN_LEFT = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>';
 const SVG_ALIGN_CENTER = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>';

package/dist/styles.css

@@ -175,14 +175,42 @@
 }
 
 .md-toolbar-dropdown-arrow {
-  font-size: 8px;
+  display: inline-flex;
+  align-items: center;
   opacity: 0.6;
 }
+.md-toolbar-dropdown-arrow svg {
+  display: block;
+  width: 8px;
+  height: 8px;
+}
+
+.md-toolbar-dropdown-menu,
+.md-toolbar-colorpicker-menu {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+.md-toolbar-dropdown-menu *, .md-toolbar-dropdown-menu *::before, .md-toolbar-dropdown-menu *::after,
+.md-toolbar-colorpicker-menu *,
+.md-toolbar-colorpicker-menu *::before,
+.md-toolbar-colorpicker-menu *::after {
+  box-sizing: border-box;
+}
+.md-toolbar-dropdown-menu button:not([class]),
+.md-toolbar-colorpicker-menu button:not([class]) {
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
 
 .md-toolbar-dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
+  position: fixed;
   min-width: 150px;
   max-height: 300px;
   overflow-y: auto;
@@ -195,6 +223,8 @@
 
 .md-toolbar-dropdown-item {
   display: block;
+  margin-top: 2px;
+  margin-bottom: 2px;
   width: 100%;
   padding: 8px 12px;
   border: none;
@@ -245,15 +275,14 @@
 }
 
 .md-toolbar-colorpicker-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
+  position: fixed;
   padding: 8px;
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 3px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  z-index: 100;
+  z-index: 1000;
+  padding: 6px;
 }
 
 .md-toolbar-colorpicker-grid {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdaemon/html-editor",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "A TinyMCE-compatible HTML editor built on TipTap",
   "homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
   "repository": {