@mdaemon/html-editor 1.0.11 → 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;
@@ -521,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;
@@ -43160,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";
@@ -43192,11 +43193,12 @@ 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);
@@ -43212,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;
   }
@@ -43227,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";
@@ -43278,6 +43281,14 @@ 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);
@@ -43286,7 +43297,8 @@ class Toolbar {
       }
     });
     wrapper.appendChild(button);
-    wrapper.appendChild(menu);
+    document.body.appendChild(menu);
+    this.bodyMenus.push(menu);
     this.dropdowns.set(name, wrapper);
     return wrapper;
   }
@@ -43294,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();
       }
     };
@@ -43338,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() {
@@ -43507,6 +43520,7 @@ class Toolbar {
     this.searchReplace = null;
     this.buttonElements.clear();
     this.dropdowns.clear();
+    this.removeBodyMenus();
     this.buttonsEl = null;
     this.toggleBtn = null;
     this.render();
@@ -43527,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;
@@ -43158,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";
@@ -43190,11 +43191,12 @@ 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);
@@ -43210,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;
   }
@@ -43225,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";
@@ -43276,6 +43279,14 @@ 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);
@@ -43284,7 +43295,8 @@ class Toolbar {
       }
     });
     wrapper.appendChild(button);
-    wrapper.appendChild(menu);
+    document.body.appendChild(menu);
+    this.bodyMenus.push(menu);
     this.dropdowns.set(name, wrapper);
     return wrapper;
   }
@@ -43292,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();
       }
     };
@@ -43336,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() {
@@ -43505,6 +43518,7 @@ class Toolbar {
     this.searchReplace = null;
     this.buttonElements.clear();
     this.dropdowns.clear();
+    this.removeBodyMenus();
     this.buttonsEl = null;
     this.toggleBtn = null;
     this.render();
@@ -43525,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,9 +175,39 @@
 }
 
 .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: fixed;
@@ -191,7 +221,7 @@
   z-index: 1000;
 }
 
-.md-editor .md-toolbar-dropdown-item {
+.md-toolbar-dropdown-item {
   display: block;
   margin-top: 2px;
   margin-bottom: 2px;
@@ -204,10 +234,10 @@
   font-size: 13px;
   color: #222;
 }
-.md-editor .md-toolbar-dropdown-item:hover {
+.md-toolbar-dropdown-item:hover {
   background: #f0f0f0;
 }
-.md-editor .md-toolbar-dropdown-item.md-toolbar-dropdown-item-selected {
+.md-toolbar-dropdown-item.md-toolbar-dropdown-item-selected {
   background: #2271b2;
   color: #fff;
 }

package/package.json

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