@mdaemon/html-editor 1.0.9 → 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

@@ -13,6 +13,25 @@
   position: relative;
   overflow: hidden;
 }
+.md-editor *,
+.md-editor *::before,
+.md-editor *::after {
+  box-sizing: border-box;
+}
+.md-editor button {
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+.md-editor input, .md-editor select, .md-editor textarea {
+  font: inherit;
+  color: inherit;
+}
 .md-editor.md-editor-fullscreen {
   position: fixed;
   top: 0;
@@ -161,9 +180,7 @@
 }
 
 .md-toolbar-dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
+  position: fixed;
   min-width: 150px;
   max-height: 300px;
   overflow-y: auto;
@@ -174,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;
@@ -185,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;
 }
@@ -226,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 {
@@ -306,16 +324,74 @@
   margin: 0 0 0.5em;
   font-weight: bold;
 }
+.md-editor-body h1 {
+  font-size: 2em;
+}
+.md-editor-body h2 {
+  font-size: 1.5em;
+}
+.md-editor-body h3 {
+  font-size: 1.17em;
+}
+.md-editor-body h4 {
+  font-size: 1em;
+}
+.md-editor-body h5 {
+  font-size: 0.83em;
+}
+.md-editor-body h6 {
+  font-size: 0.67em;
+}
 .md-editor-body ul, .md-editor-body ol {
   margin: 0 0 1em;
   padding-left: 2em;
 }
+.md-editor-body ul {
+  list-style-type: disc;
+}
+.md-editor-body ol {
+  list-style-type: decimal;
+}
+.md-editor-body ul ul {
+  list-style-type: circle;
+}
+.md-editor-body ul ul ul {
+  list-style-type: square;
+}
+.md-editor-body ol ol {
+  list-style-type: lower-alpha;
+}
+.md-editor-body ol ol ol {
+  list-style-type: lower-roman;
+}
 .md-editor-body blockquote {
   margin: 0 0 1em;
   padding-left: 1em;
   border-left: 3px solid #ccc;
   color: #666;
 }
+.md-editor-body hr {
+  border: none;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+}
+.md-editor-body b, .md-editor-body strong {
+  font-weight: bold;
+}
+.md-editor-body i, .md-editor-body em {
+  font-style: italic;
+}
+.md-editor-body small {
+  font-size: 80%;
+}
+.md-editor-body sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+.md-editor-body sup {
+  vertical-align: super;
+  font-size: smaller;
+}
 .md-editor-body pre {
   background: #f5f5f5;
   padding: 12px;
@@ -338,6 +414,7 @@
 .md-editor-body img {
   max-width: 100%;
   height: auto;
+  display: inline-block;
 }
 .md-editor-body table {
   border-collapse: collapse;

package/package.json

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