@mdaemon/html-editor 1.0.11 → 1.0.13

package/dist/index.d.ts

@@ -369,6 +369,8 @@ export declare interface MDHTMLEditor {
     getTipTap(): Editor | null;
 }
 
+export declare const Mention: Node_2<any, any>;
+
 /**
  * Reset the global translation function to the default identity function.
  * This also clears the customized flag so that the next editor created
@@ -471,6 +473,7 @@ export declare class Toolbar {
     private state;
     private buttonElements;
     private dropdowns;
+    private bodyMenus;
     private charMap;
     private emojiPicker;
     private imageUpload;
@@ -521,6 +524,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>';
@@ -43753,6 +43774,54 @@ const SignatureBlock = Node3.create({
     return ["div", mergeAttributes(HTMLAttributes), 0];
   }
 });
+const Mention = Node3.create({
+  name: "mention",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      jid: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-jid"),
+        renderHTML: (attributes) => {
+          if (!attributes.jid) return {};
+          return { "data-jid": attributes.jid };
+        }
+      },
+      display: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-display"),
+        renderHTML: (attributes) => {
+          if (!attributes.display) return {};
+          return { "data-display": attributes.display };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span.composer-mention"
+      }
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(
+        {
+          class: "composer-mention",
+          contenteditable: "false"
+        },
+        HTMLAttributes
+      ),
+      `@${node.attrs.display}`
+    ];
+  }
+});
 const en = {
   "Bold": "Bold",
   "Italic": "Italic",
@@ -46283,6 +46352,7 @@ class HTMLEditor {
         // We use CodeBlockLowlight instead
       }),
       SignatureBlock,
+      Mention,
       Underline,
       TextStyle,
       FontFamily,
@@ -46544,6 +46614,7 @@ exports.FontSize = FontSize;
 exports.HTMLEditor = HTMLEditor;
 exports.LineHeight = LineHeight;
 exports.LinkEditor = LinkEditor;
+exports.Mention = Mention;
 exports.SearchReplace = SearchReplace;
 exports.SignatureBlock = SignatureBlock;
 exports.SourceEditor = SourceEditor;

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>';
@@ -43751,6 +43772,54 @@ const SignatureBlock = Node3.create({
     return ["div", mergeAttributes(HTMLAttributes), 0];
   }
 });
+const Mention = Node3.create({
+  name: "mention",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      jid: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-jid"),
+        renderHTML: (attributes) => {
+          if (!attributes.jid) return {};
+          return { "data-jid": attributes.jid };
+        }
+      },
+      display: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-display"),
+        renderHTML: (attributes) => {
+          if (!attributes.display) return {};
+          return { "data-display": attributes.display };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span.composer-mention"
+      }
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(
+        {
+          class: "composer-mention",
+          contenteditable: "false"
+        },
+        HTMLAttributes
+      ),
+      `@${node.attrs.display}`
+    ];
+  }
+});
 const en = {
   "Bold": "Bold",
   "Italic": "Italic",
@@ -46281,6 +46350,7 @@ class HTMLEditor {
         // We use CodeBlockLowlight instead
       }),
       SignatureBlock,
+      Mention,
       Underline,
       TextStyle,
       FontFamily,
@@ -46543,6 +46613,7 @@ export {
   HTMLEditor,
   LineHeight,
   LinkEditor,
+  Mention,
   SearchReplace,
   SignatureBlock,
   SourceEditor,

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;
 }
@@ -310,9 +340,12 @@
   min-height: 0;
   overflow: auto;
   background: #fff;
+  display: flex;
+  flex-direction: column;
 }
 
 .md-editor-body {
+  flex: 1;
   padding: 16px;
   min-height: 200px;
   outline: none;

package/package.json

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