@mdaemon/html-editor 1.0.10 → 1.0.11

package/dist/index.d.ts

@@ -499,6 +499,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;

package/dist/index.js

@@ -43141,6 +43141,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";
@@ -43191,6 +43200,9 @@ class Toolbar {
       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) => {
@@ -43269,6 +43281,9 @@ class Toolbar {
       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);

package/dist/index.mjs

@@ -43139,6 +43139,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";
@@ -43189,6 +43198,9 @@ class Toolbar {
       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) => {
@@ -43267,6 +43279,9 @@ class Toolbar {
       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);

package/dist/styles.css

@@ -180,9 +180,7 @@
 }
 
 .md-toolbar-dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
+  position: fixed;
   min-width: 150px;
   max-height: 300px;
   overflow-y: auto;
@@ -193,8 +191,10 @@
   z-index: 1000;
 }
 
-.md-toolbar-dropdown-item {
+.md-editor .md-toolbar-dropdown-item {
   display: block;
+  margin-top: 2px;
+  margin-bottom: 2px;
   width: 100%;
   padding: 8px 12px;
   border: none;
@@ -204,10 +204,10 @@
   font-size: 13px;
   color: #222;
 }
-.md-toolbar-dropdown-item:hover {
+.md-editor .md-toolbar-dropdown-item:hover {
   background: #f0f0f0;
 }
-.md-toolbar-dropdown-item.md-toolbar-dropdown-item-selected {
+.md-editor .md-toolbar-dropdown-item.md-toolbar-dropdown-item-selected {
   background: #2271b2;
   color: #fff;
 }
@@ -245,15 +245,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.11",
   "description": "A TinyMCE-compatible HTML editor built on TipTap",
   "homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
   "repository": {