@powerduck/md-editor 0.8.1 → 0.8.2

package/dist/index.mjs

@@ -80,7 +80,14 @@ class Zt {
     }
   }
   show() {
-    this.trigger && (this.dropdown || (this.dropdown = document.createElement("div"), this.dropdown.className = "md-editor-mention-dropdown", this.dropdown.setAttribute("role", "listbox"), (this.view.dom.closest(".md-editor-root") ?? document.body).appendChild(this.dropdown)), this.renderDropdown(), this.positionDropdown());
+    if (this.trigger) {
+      if (!this.dropdown) {
+        this.dropdown = document.createElement("div"), this.dropdown.className = "md-editor-mention-dropdown", this.dropdown.setAttribute("role", "listbox");
+        const e = this.view.dom.closest(".md-editor-root"), t = (e == null ? void 0 : e.getAttribute("data-theme")) ?? "light";
+        this.dropdown.setAttribute("data-theme", t), document.body.appendChild(this.dropdown);
+      }
+      this.renderDropdown(), this.positionDropdown();
+    }
   }
   renderDropdown() {
     this.dropdown && (this.dropdown.innerHTML = "", this.items.forEach((e, t) => {
@@ -203,7 +210,14 @@ class Xt {
     }
   }
   show() {
-    this.trigger && (this.dropdown || (this.dropdown = document.createElement("div"), this.dropdown.className = "md-editor-doclink-dropdown", this.dropdown.setAttribute("role", "listbox"), (this.view.dom.closest(".md-editor-root") ?? document.body).appendChild(this.dropdown)), this.renderDropdown(), this.positionDropdown());
+    if (this.trigger) {
+      if (!this.dropdown) {
+        this.dropdown = document.createElement("div"), this.dropdown.className = "md-editor-doclink-dropdown", this.dropdown.setAttribute("role", "listbox");
+        const e = this.view.dom.closest(".md-editor-root"), t = (e == null ? void 0 : e.getAttribute("data-theme")) ?? "light";
+        this.dropdown.setAttribute("data-theme", t), document.body.appendChild(this.dropdown);
+      }
+      this.renderDropdown(), this.positionDropdown();
+    }
   }
   renderDropdown() {
     this.dropdown && (this.dropdown.innerHTML = "", this.items.forEach((e, t) => {
@@ -7923,7 +7937,7 @@ class Ui {
     for (const t of e) {
       const i = document.createElement("button");
       if (i.type = "button", i.className = "md-editor-toolbar-btn", t.toggle && i.classList.add("is-toggle"), t.active && i.classList.add("is-active"), i.title = t.title, i.setAttribute("aria-label", t.title), i.setAttribute("data-action", t.name), i.innerHTML = t.icon, i.addEventListener("mousedown", (r) => {
-        r.preventDefault(), t.handler(i);
+        r.preventDefault(), r.stopPropagation(), t.handler(i);
       }), this.buttons.set(t.name, i), this.el.appendChild(i), t.groupEnd) {
         const r = document.createElement("span");
         r.className = "md-editor-toolbar-sep", this.el.appendChild(r);
@@ -8137,7 +8151,8 @@ const L = (n) => `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xm
 class ie {
   constructor(e, t) {
     this.inputs = /* @__PURE__ */ new Map(), this.destroyed = !1, this.anchor = e, this.config = t, this.el = document.createElement("div"), this.el.className = "md-editor-popup", this.el.setAttribute("role", "dialog"), this.el.setAttribute("aria-label", t.title), t.theme && this.el.setAttribute("data-theme", t.theme), this.build(), this.onOutsideClick = (i) => {
-      !this.el.contains(i.target) && i.target !== this.anchor && this.hide();
+      const r = i.target;
+      !this.el.contains(r) && !this.anchor.contains(r) && this.hide();
     }, this.onKeyDown = (i) => {
       i.key === "Escape" && this.hide();
     };
@@ -8516,12 +8531,27 @@ ${r}
       onSubmit: () => {
       }
     }), i = t.el.querySelector(".md-editor-popup-body");
-    i && (i.innerHTML = '<div class="md-editor-help-list">' + this.shortcuts.map(
-      (s) => `<div class="md-editor-help-row">
-                <span class="md-editor-help-desc">${s.description}</span>
-                <span class="md-editor-help-keys">${Xi(s.key)}</span>
+    if (i) {
+      const s = [
+        { label: "Task list", hint: "- [ ] unchecked  /  - [x] checked" },
+        { label: "@mention", hint: "Type @ then pick a user from the dropdown" },
+        { label: "Document link", hint: "Type / then pick a document" },
+        { label: "Math formula", hint: "$E=mc^2$ inline  /  $$ block $$" },
+        { label: "Mindmap", hint: "```mindmap fenced block with # headings" },
+        { label: "Callout", hint: ":::warning Title ...content... :::" }
+      ];
+      i.innerHTML = '<div class="md-editor-help-list">' + this.shortcuts.map(
+        (o) => `<div class="md-editor-help-row">
+                <span class="md-editor-help-desc">${o.description}</span>
+                <span class="md-editor-help-keys">${Xi(o.key)}</span>
+              </div>`
+      ).join("") + '</div><div class="md-editor-help-section-title">Syntax</div><div class="md-editor-help-list">' + s.map(
+        (o) => `<div class="md-editor-help-row">
+                <span class="md-editor-help-desc">${o.label}</span>
+                <span class="md-editor-help-syntax">${o.hint}</span>
               </div>`
-    ).join("") + "</div>");
+      ).join("") + "</div>";
+    }
     const r = t.el.querySelector(".md-editor-popup-footer");
     r && r.remove(), this.activePopup = t, this.activePopup.show();
   }