@editora/plugins 1.0.6 → 1.0.8

package/dist/emojis.esm.js

@@ -1,4 +1,4 @@
-const d = {
+const p = {
   all: {
     name: "All",
     emojis: [
@@ -540,7 +540,7 @@ const d = {
       "🇳🇿"
     ]
   }
-}, p = {
+}, x = {
   "💙": "blue heart",
   "💚": "green heart",
   "💛": "yellow heart",
@@ -688,8 +688,8 @@ const d = {
   "🧹": "broom",
   "🧸": "teddy bear"
 };
-let c = null, n = "all", l = "", s = null;
-const j = '[data-theme="dark"], .dark, .editora-theme-dark', k = () => ({
+let g = null, s = "all", u = "", n = null, l = null, d = null;
+const k = '[data-theme="dark"], .dark, .editora-theme-dark', A = () => ({
   name: "emojis",
   toolbar: [
     {
@@ -701,16 +701,16 @@ const j = '[data-theme="dark"], .dark, .editora-theme-dark', k = () => ({
     }
   ],
   commands: {
-    openEmojiDialog: (o, t) => {
-      const e = t?.contentElement || u();
-      return e ? (h(e), !0) : !1;
+    openEmojiDialog: (t, r) => {
+      const e = r?.contentElement || b();
+      return e ? (w(e), !0) : !1;
     },
-    insertEmoji: (o, t) => {
-      if (!o) return !1;
-      const e = t?.contentElement || u();
+    insertEmoji: (t, r) => {
+      if (!t) return !1;
+      const e = r?.contentElement || b();
       if (!e) return !1;
       try {
-        return f(o, e), !0;
+        return v(t, e), !0;
       } catch {
         return !1;
       }
@@ -720,16 +720,16 @@ const j = '[data-theme="dark"], .dark, .editora-theme-dark', k = () => ({
     "Mod-Shift-j": "openEmojiDialog"
   }
 });
-function h(o) {
-  n = "all", l = "";
-  const t = window.getSelection();
-  s = null, t && t.rangeCount > 0 && o.contains(t.anchorNode) && (s = t.getRangeAt(0).cloneRange());
+function w(t) {
+  m(), s = "all", u = "";
+  const r = window.getSelection();
+  l = null, r && r.rangeCount > 0 && t.contains(r.anchorNode) && (l = r.getRangeAt(0).cloneRange());
   const e = document.createElement("div");
-  e.className = "emojis-overlay", w(o) && e.classList.add("rte-ui-theme-dark"), e.onclick = g;
-  const r = document.createElement("div");
-  r.className = "emojis-dialog", r.setAttribute("role", "dialog"), r.setAttribute("aria-modal", "true"), r.onclick = (a) => a.stopPropagation();
-  const i = Object.keys(d);
-  r.innerHTML = `
+  e.className = "emojis-overlay", z(t) && e.classList.add("rte-ui-theme-dark"), e.onclick = m;
+  const o = document.createElement("div");
+  o.className = "emojis-dialog", o.setAttribute("role", "dialog"), o.setAttribute("aria-modal", "true"), o.onclick = (a) => a.stopPropagation();
+  const i = Object.keys(p);
+  o.innerHTML = `
     <div class="rte-dialog-header emojis-header">
       <h3>Insert Emojis</h3>
       <button class="rte-dialog-close emojis-close">×</button>
@@ -737,8 +737,8 @@ function h(o) {
     <div class="rte-dialog-body emojis-content">
       <div class="emojis-tabs">
         ${i.map((a) => `
-          <button class="emojis-tab ${a === n ? "active" : ""}" data-category="${a}">
-            ${d[a].name}
+          <button class="emojis-tab ${a === s ? "active" : ""}" data-category="${a}">
+            ${p[a].name}
           </button>
         `).join("")}
       </div>
@@ -756,80 +756,84 @@ function h(o) {
           />
         </div>
         <div class="emojis-grid" id="emojis-grid">
-          ${b(n, l)}
+          ${j(s, u)}
         </div>
       </div>
     </div>
-  `, e.appendChild(r), document.body.appendChild(e), c = e, x(r, o), y(), setTimeout(() => {
-    r.querySelector("#emoji-search-input")?.focus();
-  }, 100);
+  `, e.appendChild(o), document.body.appendChild(e), g = e, d = (a) => {
+    a.key === "Escape" && (a.preventDefault(), a.stopPropagation(), m());
+  }, document.addEventListener("keydown", d, !0), y(o, t), S(), requestAnimationFrame(() => {
+    o.querySelector("#emoji-search-input")?.focus();
+  });
 }
-function x(o, t) {
-  o.querySelector(".emojis-close")?.addEventListener("click", g), o.querySelectorAll(".emojis-tab").forEach((r) => {
-    r.addEventListener("click", (i) => {
-      const a = i.target.getAttribute("data-category");
-      a && v(o, a, t);
+function y(t, r) {
+  t.querySelector(".emojis-close")?.addEventListener("click", m), t.querySelectorAll(".emojis-tab").forEach((i) => {
+    i.addEventListener("click", (a) => {
+      const c = a.target.getAttribute("data-category");
+      c && E(t, c);
     });
-  }), o.querySelector("#emoji-search-input")?.addEventListener("input", (r) => {
-    l = r.target.value, m(o, t);
-  }), m(o, t);
+  }), t.querySelector("#emoji-search-input")?.addEventListener("input", (i) => {
+    u = i.target.value, n !== null && window.clearTimeout(n), n = window.setTimeout(() => {
+      n = null, h(t);
+    }, 90);
+  }), t.querySelector("#emojis-grid")?.addEventListener("click", (i) => {
+    const c = i.target.closest(".emojis-item");
+    if (!c) return;
+    const f = c.getAttribute("data-emoji") || c.textContent?.trim() || "";
+    f && (v(f, r), m());
+  });
 }
-function v(o, t, e) {
-  n = t, o.querySelectorAll(".emojis-tab").forEach((r) => {
-    r.classList.toggle("active", r.getAttribute("data-category") === t);
-  }), m(o, e);
+function E(t, r) {
+  s = r, t.querySelectorAll(".emojis-tab").forEach((e) => {
+    e.classList.toggle("active", e.getAttribute("data-category") === r);
+  }), h(t);
 }
-function m(o, t) {
-  const e = o.querySelector("#emojis-grid");
-  e && (e.innerHTML = b(n, l), e.querySelectorAll(".emojis-item").forEach((r) => {
-    r.addEventListener("click", () => {
-      const i = r.textContent?.trim() || "";
-      i && (f(i, t), g());
-    });
-  }));
+function h(t) {
+  const r = t.querySelector("#emojis-grid");
+  r && (r.innerHTML = j(s, u));
 }
-function b(o, t) {
-  let e = d[o].emojis;
-  return t.trim() && (e = e.filter((r) => r.toLowerCase().includes(t.toLowerCase()) ? !0 : (p[r] || "").toLowerCase().includes(t.toLowerCase()))), e.length === 0 && t.trim() ? `<div class="emojis-no-results">No emojis found for "${t}"</div>` : e.map((r, i) => `
+function j(t, r) {
+  let e = p[t].emojis;
+  return r.trim() && (e = e.filter((o) => o.toLowerCase().includes(r.toLowerCase()) ? !0 : (x[o] || "").toLowerCase().includes(r.toLowerCase()))), e.length === 0 && r.trim() ? `<div class="emojis-no-results">No emojis found for "${r}"</div>` : e.map((o, i) => `
     <button 
       class="emojis-item" 
-      title="Insert ${r}"
-      data-emoji="${r}"
+      title="Insert ${o}"
+      data-emoji="${o}"
     >
-      ${r}
+      ${o}
     </button>
   `).join("");
 }
-function g() {
-  c && (document.body.removeChild(c), c = null);
+function m() {
+  d && (document.removeEventListener("keydown", d, !0), d = null), n !== null && (window.clearTimeout(n), n = null), g && (g.remove(), g = null);
 }
-function f(o, t) {
-  t.focus();
+function v(t, r) {
+  r.focus();
   let e = window.getSelection();
-  if (s && (e?.removeAllRanges(), e?.addRange(s), s = null), e = window.getSelection(), e && e.rangeCount > 0) {
-    const r = e.getRangeAt(0);
-    r.deleteContents();
-    const i = document.createTextNode(o);
-    r.insertNode(i), r.setStartAfter(i), r.setEndAfter(i), e.removeAllRanges(), e.addRange(r);
+  if (l && (e?.removeAllRanges(), e?.addRange(l), l = null), e = window.getSelection(), e && e.rangeCount > 0) {
+    const o = e.getRangeAt(0);
+    o.deleteContents();
+    const i = document.createTextNode(t);
+    o.insertNode(i), o.setStartAfter(i), o.setEndAfter(i), e.removeAllRanges(), e.addRange(o);
   }
 }
-function u() {
-  const o = window.getSelection();
-  if (o && o.rangeCount > 0) {
-    const e = o.anchorNode, i = (e instanceof HTMLElement ? e : e?.parentElement)?.closest(".editora-content, .rte-content");
+function b() {
+  const t = window.getSelection();
+  if (t && t.rangeCount > 0) {
+    const e = t.anchorNode, i = (e instanceof HTMLElement ? e : e?.parentElement)?.closest(".editora-content, .rte-content");
     if (i) return i;
   }
-  const t = document.activeElement;
-  return t && (t.classList.contains("editora-content") || t.classList.contains("rte-content")) ? t : document.querySelector(".editora-content, .rte-content");
+  const r = document.activeElement;
+  return r && (r.classList.contains("editora-content") || r.classList.contains("rte-content")) ? r : document.querySelector(".editora-content, .rte-content");
 }
-function w(o) {
-  const t = o || u();
-  return t ? !!t.closest(j) : !1;
+function z(t) {
+  const r = t || b();
+  return r ? !!r.closest(k) : !1;
 }
-function y() {
+function S() {
   if (document.getElementById("emojis-dialog-styles")) return;
-  const o = document.createElement("style");
-  o.id = "emojis-dialog-styles", o.textContent = `
+  const t = document.createElement("style");
+  t.id = "emojis-dialog-styles", t.textContent = `
     .emojis-overlay {
       --rte-emoji-overlay-bg: rgba(15, 23, 36, 0.56);
       --rte-emoji-dialog-bg: #ffffff;
@@ -841,6 +845,26 @@ function y() {
       --rte-emoji-accent: #1f75fe;
       --rte-emoji-accent-strong: #165fd6;
       --rte-emoji-ring: rgba(31, 117, 254, 0.18);
+      --rte-picker-dialog-width: min(640px, 96vw);
+      --rte-picker-dialog-max-height: min(560px, 86vh);
+      --rte-picker-dialog-radius: 12px;
+      --rte-picker-search-wrap-padding: 12px;
+      --rte-picker-search-height: 38px;
+      --rte-picker-search-font-size: 13px;
+      --rte-picker-search-radius: 8px;
+      --rte-picker-tabs-width: 156px;
+      --rte-picker-tab-padding-y: 10px;
+      --rte-picker-tab-padding-x: 12px;
+      --rte-picker-tab-font-size: 13px;
+      --rte-picker-grid-padding: 12px;
+      --rte-picker-grid-gap: 6px;
+      --rte-picker-cell-size: 34px;
+      --rte-picker-cell-font-size: 17px;
+      --rte-picker-cell-radius: 7px;
+      --rte-picker-mobile-tab-min-width: 82px;
+      --rte-picker-mobile-cell-size: 32px;
+      --rte-picker-mobile-grid-gap: 5px;
+      --rte-picker-mobile-dialog-max-height: 88vh;
       position: fixed;
       top: 0;
       left: 0;
@@ -851,7 +875,7 @@ function y() {
       display: flex;
       align-items: center;
       justify-content: center;
-      z-index: 1000;
+      z-index: 10000;
       padding: 16px;
       box-sizing: border-box;
     }
@@ -873,11 +897,10 @@ function y() {
       background: var(--rte-emoji-dialog-bg);
       color: var(--rte-emoji-dialog-text);
       border: 1px solid var(--rte-emoji-border);
-      border-radius: 12px;
+      border-radius: var(--rte-picker-dialog-radius);
       box-shadow: 0 24px 48px rgba(10, 15, 24, 0.28);
-      max-width: 800px;
-      width: 90%;
-      max-height: 80vh;
+      width: var(--rte-picker-dialog-width);
+      max-height: var(--rte-picker-dialog-max-height);
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -915,31 +938,34 @@ function y() {
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      min-width: 0;
     }
 
     .emojis-search {
-      padding: 16px 16px 0 16px;
+      padding: var(--rte-picker-search-wrap-padding) var(--rte-picker-search-wrap-padding) 0 var(--rte-picker-search-wrap-padding);
       position: relative;
     }
 
     .emojis-search-icon {
       position: absolute;
-      left: 28px;
-      top: 27px;
+      left: 24px;
+      top: 22px;
       color: var(--rte-emoji-muted-text);
       pointer-events: none;
       z-index: 1;
     }
 
     .emojis-search-input {
-      width: calc(100% - 24px);
-      padding: 10px 12px 10px 40px;
+      width: 100%;
+      height: var(--rte-picker-search-height);
+      padding: 8px 12px 8px 36px;
       border: 1px solid var(--rte-emoji-border);
-      border-radius: 8px;
-      font-size: 14px;
+      border-radius: var(--rte-picker-search-radius);
+      font-size: var(--rte-picker-search-font-size);
       color: var(--rte-emoji-dialog-text);
       background-color: var(--rte-emoji-subtle-bg);
       transition: border-color 0.2s ease, box-shadow 0.2s ease;
+      box-sizing: border-box;
     }
 
     .emojis-search-input:focus {
@@ -959,21 +985,23 @@ function y() {
     .emojis-tabs {
       display: flex;
       flex-direction: column;
-      width: 180px;
+      width: var(--rte-picker-tabs-width);
       border-right: 1px solid var(--rte-emoji-border);
       background-color: var(--rte-emoji-subtle-bg);
+      overflow-y: auto;
     }
 
     .emojis-tab {
-      padding: 12px 16px;
+      padding: var(--rte-picker-tab-padding-y) var(--rte-picker-tab-padding-x);
       border: none;
       background: none;
       text-align: left;
       cursor: pointer;
-      font-size: 14px;
+      font-size: var(--rte-picker-tab-font-size);
       color: var(--rte-emoji-muted-text);
       border-bottom: 1px solid var(--rte-emoji-border);
       transition: all 0.2s ease;
+      line-height: 1.25;
     }
 
     .emojis-tab:hover {
@@ -992,24 +1020,25 @@ function y() {
     }
 
     .emojis-grid {
-      padding: 16px;
+      padding: var(--rte-picker-grid-padding);
       overflow-y: auto;
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
-      gap: 8px;
+      grid-template-columns: repeat(auto-fill, minmax(var(--rte-picker-cell-size), 1fr));
+      gap: var(--rte-picker-grid-gap);
+      contain: content;
     }
 
     .emojis-item {
-      width: 40px;
-      height: 40px;
+      width: var(--rte-picker-cell-size);
+      height: var(--rte-picker-cell-size);
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px solid var(--rte-emoji-border);
       background: var(--rte-emoji-subtle-bg);
-      border-radius: 8px;
+      border-radius: var(--rte-picker-cell-radius);
       cursor: pointer;
-      font-size: 18px;
+      font-size: var(--rte-picker-cell-font-size);
       transition: all 0.2s ease;
       color: var(--rte-emoji-dialog-text);
     }
@@ -1039,8 +1068,8 @@ function y() {
     /* Responsive design */
     @media (max-width: 768px) {
       .emojis-dialog {
-        width: 95%;
-        max-height: 90vh;
+        width: 96%;
+        max-height: var(--rte-picker-mobile-dialog-max-height);
       }
 
       .emojis-content {
@@ -1059,22 +1088,22 @@ function y() {
         border-bottom: none;
         border-right: 1px solid var(--rte-emoji-border);
         white-space: nowrap;
-        min-width: 80px;
+        min-width: var(--rte-picker-mobile-tab-min-width);
       }
 
       .emojis-grid {
-        grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
-        gap: 6px;
+        grid-template-columns: repeat(auto-fill, minmax(var(--rte-picker-mobile-cell-size), 1fr));
+        gap: var(--rte-picker-mobile-grid-gap);
       }
 
       .emojis-item {
-        width: 36px;
-        height: 36px;
+        width: var(--rte-picker-mobile-cell-size);
+        height: var(--rte-picker-mobile-cell-size);
         font-size: 16px;
       }
     }
-  `, document.head.appendChild(o);
+  `, document.head.appendChild(t);
 }
 export {
-  k as EmojisPlugin
+  A as EmojisPlugin
 };